/**
 * Bihon Bulls - Main Stylesheet
 * Mobile-First Design
 */

/* ========== CSS Variables ========== */
:root {
    --primary-color: #087eaa;
    --primary-dark: #075f82;
    --text-dark: #333333;
    --text-light: #666666;
    --bg-light: #F5F5F5;
    --bg-tint: #eaf4f9;
    --white: #FFFFFF;
    --border-color: #E0E0E0;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);
    --transition: all 0.3s ease;
    --border-radius: 8px;
    --max-width: 1200px;
}

/* ========== System Font Stack (Lokale Fonts) ========== */
@font-face {
    font-family: 'System';
    font-style: normal;
    font-weight: 400;
    src: local(''),
         local('-apple-system'),
         local('BlinkMacSystemFont'),
         local('Segoe UI'),
         local('Roboto'),
         local('Oxygen'),
         local('Ubuntu'),
         local('Cantarell'),
         local('Helvetica Neue');
}

/* ========== Reset & Base ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* ========== Scroll Animations ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-on-scroll {
    opacity: 0;
}

.animate-on-scroll.animated {
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

.fade-in-up {
    animation-name: fadeInUp;
}

.fade-in {
    animation-name: fadeIn;
}

.slide-in-left {
    animation-name: slideInLeft;
}

.slide-in-right {
    animation-name: slideInRight;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-dark);
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    padding: 10px 14px;
    color: var(--white);
    background: var(--primary-dark);
    border-radius: 4px;
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 3px solid #ffbf47;
    outline-offset: 3px;
}

p {
    margin-bottom: 20px;
}

ul,
ol {
    margin-bottom: 25px;
    margin-left: 20px;
    line-height: 1.8;
}

/* ========== Accessibility ========== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========== Container ========== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ========== Header ========== */
.site-header {
    background-color: rgba(10, 61, 98, 0.97);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
}

.logo img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
}

.logo h1,
.logo .logo-text {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--white);
}

/* ========== Navigation - Mobile First ========== */
.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background-color: var(--white);
    transition: var(--transition);
    border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.nav-menu {
    /* A globális ul-szabály margóját nullázni kell. Enélkül a 25px alsó margó
       beleszámít a flex-igazításba, és a menüsor a logóhoz képest feljebb csúszik. */
    margin: 0;
    position: fixed;
    top: 95px;
    right: -100%;
    width: 280px;
    height: calc(100vh - 95px);
    height: calc(100dvh - 95px);
    background-color: rgba(51, 51, 51, 0.98);
    list-style: none;
    padding: 30px 20px;
    transition: right 0.3s ease;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
}

.nav-menu.active {
    right: 0;
}

.nav-menu li {
    margin-bottom: 20px;
}

.nav-menu a {
    display: block;
    color: var(--white);
    font-size: 1.1rem;
    padding: 12px 15px;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.nav-menu a:hover,
.nav-menu a.active {
    background-color: var(--primary-color);
    color: var(--white);
}

/* ========== Hero Section ========== */
.hero {
    position: relative;
    min-height: 650px;
    background: linear-gradient(135deg, #0a3d62 0%, #1a6fa8 40%, #2fc1ff 100%);
    display: flex;
    align-items: center;
    color: var(--white);
    padding: 80px 0;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.hero-content {
    max-width: 600px;
}

.hero-image {
    max-width: 500px;
    width: 100%;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-hover);
}

.hero h1,
.hero h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--white);
    text-align: left;
}

.hero-content,
.hero-actions {
    text-align: left;
}

.hero-image img.is-mirrored {
    transform: scaleX(-1);
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.hero-contact {
    margin: 25px 0;
}

.hero-contact p {
    font-size: 1.4rem;
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-contact a {
    color: var(--white);
    font-weight: 600;
}

/* ========== Buttons ========== */
.btn {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:hover {
    background-color: var(--primary-dark);
    color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(184, 149, 106, 0.4);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* ========== Sections ========== */
section {
    padding: 60px 0;
}

/* Seitentitel und Abschnittsüberschrift dürfen nicht gleich groß sein:
   h1 führt, h2 ordnet sich unter. */
section h1,
section h2 {
    margin-bottom: 30px;
    color: var(--text-dark);
    text-align: center;
    line-height: 1.25;
}

section h1 { font-size: 2.25rem; }
section h2 { font-size: 1.8rem; }

section h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--text-dark);
}

/* ========== Welpen Grid ========== */
.welpen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 40px 0;
}

.welpen-card {
    background-color: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.welpen-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-8px) scale(1.02);
}

.welpen-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.welpen-card-content {
    padding: 20px;
    text-align: center;
}

.welpen-card h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-align: center;
}

.welpen-card .price {
    font-size: 1.3rem;
    color: var(--primary-color);
    font-weight: 700;
    margin: 10px 0;
}

.welpen-card .delivery-note {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-top: 10px;
}

.welpen-card .delivery-note a {
    color: var(--primary-color);
    font-weight: 600;
}

/* ========== Testimonials ========== */
/* Hebt den Kundenstimmen-Block farblich vom übrigen Grau ab. */
.testimonials {
    background-color: var(--bg-tint);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
}

.testimonial-item {
    background-color: var(--white);
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.testimonial-item p {
    font-style: italic;
    margin-bottom: 15px;
    color: var(--text-dark);
    line-height: 1.7;
}

.testimonial-item .author {
    font-weight: 600;
    color: var(--primary-color);
    font-style: normal;
}

/* ========== About Section ========== */
.about {
    padding: 60px 0;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

@media (min-width: 768px) {
    .about-with-image .about-content {
        max-width: 500px;
    }
}

.about-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.about-content h2,
.content-article h2 {
    margin-top: 32px;
    margin-bottom: 16px;
    font-size: 1.55rem;
    text-align: left;
}

.about-content h2:first-child,
.content-article h2:first-child {
    margin-top: 0;
}

.about-with-image {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.about-image {
    max-width: 450px;
    width: 100%;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

/* ========== Gallery ========== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin: 40px 0;
}

.gallery-item {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    cursor: pointer;
    aspect-ratio: 1 / 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-hover);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    transition: var(--transition);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* ========== Contact Form ========== */
.contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 40px auto 0;
    max-width: 1000px;
}

.contact-info-box {
    text-align: left;
    min-width: 0;
    width: 100%;
}

.contact-info-box h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.contact-info-box p {
    font-size: 1.1rem;
    margin: 15px 0;
}

.contact-info-box a {
    color: var(--primary-color);
    font-weight: 600;
}

.contact-form {
    background-color: var(--bg-light);
    padding: 30px;
    border-radius: var(--border-radius);
    flex: 1;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-dark);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
    opacity: 1;
}

.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    opacity: 0;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(184, 149, 106, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-top: 5px;
}

.checkbox-group label {
    margin: 0;
    font-weight: 400;
    font-size: 0.9rem;
}

/* ========== Profile Page ========== */
.welpen-profile {
    max-width: 900px;
    margin: 60px auto;
}

.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.profile-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.profile-main-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.profile-main-link {
    display: block;
    border-radius: var(--border-radius);
}

.profile-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
}

.profile-thumbnail {
    appearance: none;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
}

.profile-thumbnail img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.profile-thumbnail:hover,
.profile-thumbnail.active {
    border-color: var(--primary-color);
}

.lightbox-dialog {
    width: min(94vw, 1200px);
    max-width: none;
    height: min(92vh, 900px);
    max-height: none;
    padding: 48px 18px 18px;
    border: 0;
    border-radius: 12px;
    background: #111;
    color: #fff;
    overflow: hidden;
}

.lightbox-dialog::backdrop {
    background: rgba(0, 0, 0, 0.88);
}

.lightbox-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #333;
    font: 700 1.8rem/1 sans-serif;
    cursor: pointer;
}

.profile-info h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--text-dark);
}

.profile-info .price {
    font-size: 2rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 20px;
}

.profile-details {
    background-color: var(--bg-light);
    padding: 25px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.profile-details p {
    font-size: 1.1rem;
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-details strong {
    min-width: 120px;
    color: var(--text-dark);
}

/* ========== Footer ========== */
.site-footer {
    background-color: #0a3d62;
    color: var(--white);
    padding: 40px 0 20px;
}

/* Copyright und Rechtslinks in einer Zeile; auf schmalen Displays umbrechend. */
.footer-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    text-align: center;
}

.footer-content p {
    margin: 0;
}

.footer-content a {
    color: var(--white);
}

.footer-content a:hover {
    color: var(--primary-color);
}

.footer-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* ========== Admin Styles ========== */
.admin-login {
    max-width: 400px;
    margin: 100px auto;
    padding: 40px;
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
}

.admin-panel {
    padding: 40px 0;
}

.admin-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.data-table {
    width: 100%;
    background-color: var(--white);
    border-radius: var(--border-radius);
    overflow-x: auto;
    box-shadow: var(--shadow);
}

.data-table table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.data-table th {
    background-color: var(--bg-light);
    font-weight: 600;
}

.data-table img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn-danger {
    background-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
}

/* ========== SVG Design Elements ========== */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 10px 0 30px;
    opacity: 0.18;
}

.section-divider svg {
    width: 28px;
    height: 28px;
    fill: var(--primary-color);
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: var(--primary-color);
}

.footer-bulldog {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    opacity: 0.15;
}

.footer-bulldog svg {
    width: 90px;
    height: auto;
    fill: #ffffff;
}

/* ========== FAQ Section ========== */
.faq-schema {
    max-width: 900px;
    margin: 0 auto;
}

.faq-schema h2 {
    margin-bottom: 30px;
}

/* Früher wurde hier [itemprop="mainEntity"] angesprochen — dieses Attribut
   steht gar nicht im Markup, deshalb blieben die FAQ unformatiert. */
.faq-item {
    padding: 22px 0;
    border-bottom: 1px solid var(--border-color);
}

.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; }

.faq-item h3 {
    font-size: 1.15rem;
    color: var(--text-dark);
    margin-bottom: 10px;
    text-align: left;
}

.faq-item p {
    color: var(--text-light);
    line-height: 1.75;
    margin-bottom: 0;
}

/* ==================================================
   Layout-Bausteine
   Ersetzen die früheren style="..."-Attribute im Markup.
   ================================================== */

/* Abschnitte */
.section-lg { padding: 80px 0; }
.section-muted { background-color: var(--bg-light); }

.section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
}

.section-actions {
    text-align: center;
    margin-top: 30px;
}

.section-actions--lg { margin-top: 50px; }
.section-actions .btn + .btn { margin-left: 10px; }

/* Platzhalter, wenn keine Inhalte vorhanden sind */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    font-size: 1.15rem;
    color: var(--text-light);
}

.empty-state--compact {
    padding: 40px 0;
    font-size: 1rem;
    color: inherit;
}

/* Hervorgehobener Handlungsaufruf am Seitenende */
.cta-box {
    text-align: center;
    margin-top: 50px;
    padding: 30px;
    background-color: var(--bg-light);
    border-radius: var(--border-radius);
}

/* nur der Button-Absatz, damit der Textabsatz seinen Standardabstand behält */
.cta-box p + p { margin: 20px 0; }

.text-center { text-align: center; }

/* Eigener Baustein statt .about-content: dort erzwingt .about-content h2
   linksbündige Überschriften, wodurch der Titel gegenüber dem Text verrutschte. */
.cta-panel {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.cta-panel h2 { text-align: center; }

/* p.cta-lead statt .cta-lead: muss .about-content p (gleiche Spezifität) schlagen */
p.cta-lead {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* Text- und Bildblöcke */
.content-wide {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

/* Einspaltige Fortsetzung unter einem Bild-Text-Block:
   volle Breite des Containers, gleiche linke Kante wie darüber. */
.about-content.content-flow {
    max-width: none;
    margin: 40px 0 0;
}

.block-spaced { margin: 40px 0; }
.block-spaced--tight { margin: 30px 0; }
/* .about-with-image--reverse siehe Media Query ab 768px:
   auf dem Handy bleibt der Block einspaltig gestapelt. */

.about-image--fixed {
    flex: 0 0 400px;
    max-width: 400px;
}

.spaced-list {
    line-height: 2;
    margin-top: 15px;
    padding-left: 20px;
}

.spaced-list--flush { margin-top: 0; }

/* Welpen-Karten und Profil */
.welpen-card-content .btn { margin-top: 15px; }
.profile-info .delivery-note { margin-bottom: 25px; }
.profile-actions { margin-top: 30px; }
.profile-actions .btn { margin-right: 20px; }
.profile-actions .btn:last-child { margin-right: 0; }

/* Der frühere Inline-Style schlug auch .btn-secondary:hover — dieses Verhalten
   bleibt erhalten, damit das Refactoring die Darstellung nicht verändert. */
.btn-ghost,
.btn-ghost:hover {
    border: none;
    background-color: transparent;
    color: var(--primary-color);
}

/* Kontaktseite */
.contact-lead {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
    line-height: 1.6;
}

.contact-info-box h2 {
    font-size: 2rem;
    margin-bottom: 25px;
}

.contact-line {
    font-size: 1.3rem;
    margin: 20px 0;
}

.contact-legal {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-light);
}

.contact-legal p + p { margin-top: 10px; }

.contact-legal a {
    color: var(--text-light);
    text-decoration: underline;
}

/* Formular-Rückmeldungen und Felder */
.form-alert {
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    text-align: center;
}

.form-alert--success {
    background-color: #d4edda;
    color: #155724;
}

.form-alert--error {
    background-color: #f8d7da;
    color: #721c24;
}

.btn-block { width: 100%; }

.field-hint {
    display: block;
    margin-top: 5px;
    color: var(--text-light);
}

/* Vor dem Klick auf den Captcha-Gate-Button ausgeblendet;
   main.js setzt danach display per Inline-Style. */
.h-captcha {
    display: none;
    margin-top: 15px;
}

/* ========== Portal (Admin-Oberfläche) ========== */
.portal-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.portal-topbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-inline { display: inline; }

.portal-alert {
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.portal-alert--success {
    background-color: #d4edda;
    color: #155724;
}

.portal-alert--error {
    background-color: #f8d7da;
    color: #721c24;
}

.data-table h2 {
    padding: 20px;
    margin: 0;
}

.portal-empty {
    padding: 40px;
    text-align: center;
    color: var(--text-light);
}

.portal-empty--wide { padding: 40px 20px; }

.portal-login-title {
    text-align: center;
    margin-bottom: 30px;
}

.portal-login-note {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
}

.portal-form { max-width: 800px; }

.portal-select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
}

.portal-thumb {
    max-width: 200px;
    border-radius: var(--border-radius);
}

.portal-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.portal-gallery-grid--lg {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 0;
}

.portal-gallery-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.portal-gallery-item { position: relative; }

.portal-gallery-delete {
    position: absolute;
    top: 5px;
    right: 5px;
}

.btn-delete {
    background: #dc3545;
    color: var(--white);
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

/* ========== Cookie-Hinweis (Google Ads) ========== */
.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 22px;
    background-color: #0a3d62;
    color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.cookie-banner-text {
    flex: 1 1 320px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.cookie-banner-text a {
    color: var(--white);
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.cookie-banner-actions .btn {
    padding: 10px 22px;
    font-size: 0.95rem;
}

.cookie-banner-actions .btn-secondary {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.5);
}

.cookie-banner-actions .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--white);
}

/* Widerruf-Schaltfläche im Seitenfuß: sieht aus wie die Fußzeilen-Links. */
.footer-consent {
    background: none;
    border: 0;
    padding: 0;
    color: var(--white);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.footer-consent:hover { color: var(--primary-color); }

@media (max-width: 560px) {
    .cookie-banner-actions { width: 100%; }
    .cookie-banner-actions .btn { flex: 1 1 0; }
}

/* Kleine Abstands-Helfer für Einzelfälle */
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-40 { margin-bottom: 40px; }
.ml-10 { margin-left: 10px; }

/* ========== Responsive - Tablet ========== */
@media (min-width: 768px) {
    .hero-content-wrapper {
        flex-direction: row;
        justify-content: space-between;
        gap: 25px;
        align-items: center;
    }

    .hero-image {
        order: -1;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-with-image {
        flex-direction: row;
        gap: 50px;
        align-items: flex-start;
    }

    /* Bild links statt rechts — für den abwechselnden Rhythmus der Bildreihen */
    .about-with-image--reverse {
        flex-direction: row-reverse;
    }

    /* Im Fließtext-Artikel umfließt der Text das Bild. Flexbox kann das nicht,
       deshalb hier bewusst kein Flex, sondern ein Float. Das Bild steht im Markup
       vor dem Text, sonst gäbe es nichts zum Umfließen. */
    .content-article .about-with-image {
        display: block;
    }

    .content-article .about-image--fixed {
        float: right;
        width: 400px;
        max-width: 45%;
        margin: 6px 0 24px 40px;
    }

    .content-article .about-with-image--reverse .about-image--fixed {
        float: left;
        margin: 6px 40px 24px 0;
    }

    /* Abschluss-Elemente stehen wieder über die volle Breite. */
    .content-article .article-note,
    .content-article .section-actions {
        clear: both;
    }

    .contact-wrapper {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }

    .contact-form {
        position: sticky;
        top: 100px;
        align-self: flex-start;
        max-width: 450px;
    }

    .contact-info-box {
        flex: 0 0 450px;
        width: auto;
    }

    .welpen-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero h1,
    .hero h2 {
        font-size: 2.5rem;
        line-height: 1.15;
    }
}

@media (min-width: 1100px) {
    .hamburger {
        display: none;
    }

    .nav-menu {
        position: static;
        width: auto;
        height: auto;
        background: none;
        box-shadow: none;
        padding: 0;
        display: flex;
        flex-direction: row;
        gap: 5px;
    }

    .nav-menu li {
        margin: 0;
    }

    .nav-menu a {
        font-size: 1rem;
        padding: 10px 15px;
    }
}

@media (max-width: 420px) {
    .logo .logo-text {
        display: none;
    }

    .contact-form {
        padding: 22px 16px;
    }

    .btn {
        width: 100%;
    }
}

/* ========== Responsive - Desktop ========== */
@media (min-width: 1024px) {
    .welpen-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero h1,
    .hero h2 {
        font-size: 3rem;
        line-height: 1.1;
    }

    section h1 {
        font-size: 2.75rem;
        line-height: 1.15;
    }

    section h2 { font-size: 2.1rem; }
}

/* ========== Print Styles ========== */
@media print {
    .site-header,
    .site-footer,
    .btn,
    .hamburger {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== Inline contact icons (SVG, emoji helyett) ========== */
.contact-icon {
    vertical-align: -3px;
    margin-right: 4px;
}

.status-page {
    min-height: 55vh;
    padding: 96px 0;
    text-align: center;
}

.status-page p {
    margin-top: 20px;
}

.admin-gallery-item {
    position: relative;
}

.admin-gallery-delete {
    position: absolute;
    right: 6px;
    bottom: 6px;
    min-height: 36px;
    padding: 6px 10px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: #a31320;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-gallery-delete:hover {
    background: #760d17;
}

.blog-hub,.blog-article{padding:72px 0}.blog-grid{display:grid;gap:24px;margin-top:36px}.blog-card{padding:28px;border:1px solid #e3e8ec;border-radius:12px;background:#fff}.blog-card h2{font-size:1.45rem;text-align:left}.article-container{max-width:820px}.article-container h1,.article-container h2{text-align:left}.article-container h2{margin-top:42px;font-size:1.7rem}.answer-first{font-size:1.15rem;line-height:1.75;padding:22px;border-left:5px solid var(--primary-color);background:#f3f8fb}.article-meta,.breadcrumbs{color:#64727d;font-size:.92rem;margin-bottom:22px}.article-note{margin:36px 0;padding:20px;background:#fff6df;border-radius:8px}.breadcrumbs a{color:inherit}@media(min-width:768px){.blog-grid{grid-template-columns:repeat(2,1fr)}}