/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY */
body {
    font-family: Arial, sans-serif;
    background: url("Hintergrund.jpg") no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 20px;
    color: #333;
}

/* spezieller Hintergrund nur für Startseite */
body.Startseite {
    background: url("YoodleStartseite.jpg") no-repeat center center fixed;
    background-size: cover;
}

/* NAVBAR */
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    transition: all 0.4s ease;
    z-index: 1000;
}


/* NAVBAR-spezifische Listen-Reset */
.navbar .nav-menu,
.navbar .nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Navbar-Listeneinträge separiert von globalen li/ul */
.navbar .nav-menu li {
    margin: 0;
    padding: 0;
}

/* 👇 Beim Scrollen */
.navbar.scrolled {
    background: rgba(245, 235, 226, 0.55);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

/* CONTAINER */
.nav-container {
    display: flex;
    justify-content: center;
    padding: 15px;
    position: relative;
}

/* HAMBURGER */
.menu-toggle {
    display: none;
    width: 30px;
    height: 22px;
    position: absolute;
    right: 20px;
    cursor: pointer;
}

/* Linien */
.menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background: #4a4036;
    margin: 5px 0;
    transition: 0.4s;
}

/* 👇 Animation zu X */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

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

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

.bottom-box {
  position: fixed; /* klebt unten am Bildschirm */
  left: 0;
  bottom: 60px;
  width: 100%;
  text-align: center;
  padding: 16px;
  background: #eee;
  border: 5px solid red; /* Roter Rahmen mit 5px Dicke */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}



/* NAV MENU */
.nav-menu {
    display: flex;
    gap: 40px;
    list-style: none;
}

.nav-menu a {
    text-decoration: none;
    color: #4a4036;
    padding: 5px 10px;
    border-radius: 8px;
    transition: 0.3s;
    font-size: larger;
    text-shadow: 0 1px 15px rgba(255, 255, 255, 0.9);
}

.nav-menu ul {
    padding-left: 0;
    margin-bottom: 0;
}

/* ACTIVE */
.nav-menu a.active {
    background: #4a4036;
    color: white;
}

.nav-menu a:hover {
    background: rgba(74, 64, 54, 0.4);
}

.nav-menu a.active:hover {
    color: #000;
}

/* DROPDOWN */
.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    border-radius: 8px;
    padding: 5px 0;
    margin-top: 5px;
    /* zusätzlicher Abstand */
}

.nav-menu li:hover .dropdown-content {
    display: block;
}

/* MOBILE */
@media (max-width: 768px) {

    .menu-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.95);
        position: fixed;
        /* fixed bleibt sichtbar beim Scrollen */
        top: 60px;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 60px);
        /* begrenzt auf Viewport minus Header */
        overflow-y: auto;
        /* aktiviert Scrollen innerhalb des Menüs */
        -webkit-overflow-scrolling: touch;
        /* flüssiges Scrollen auf iOS */
        text-align: center;
        padding: 10px 0;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu li {
        position: relative;
    }

    .dropdown-content {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        /* optional: damit Dropdown über anderen Elementen liegt */
        z-index: 999;
        /* evtl. volle Breite begrenzen */
        min-width: 160px;
    }

    /* Wenn das Dropdown immer offen sein soll: */
    .nav-menu .dropdown-content {
        display: block !important;
        position: static;
        /* wird Teil des Flows, klappt direkt aus */
        transform: none;
        left: auto;
        right: auto;
        z-index: auto;
        min-width: 0;
        width: 100%;
        /* optional: volle Breite innerhalb des Menüs */
        padding: 0;
        margin-top: 24px;
        /* ggf. anpassen */
    }

    /* Falls das Dropdown zusätzliche Listenelemente enthält */
    .nav-menu .dropdown-content li {
        display: block;
        text-align: left;
        /* oder center nach Bedarf */
        padding: 10px 16px;
    }
}

/* CONTAINER */
/* .container {
    max-width: 1000px;
    margin: 140px auto;
    background: rgba(255,255,255,0.9);
    padding: 40px;
    border-radius: 15px;
} */
.container {
    max-width: 1000px;
    margin: 55px auto 0;
    background: rgba(255, 255, 255, 0.9);
    /* leicht transparent für Lesbarkeit */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

h1, h2, h3 {
    color: #444;
}

h1 {
    text-align: center;
    margin-bottom: 40px;
}

.centered {
    text-align: center;
}

.subtitle {
    margin-bottom: 40px;
    color: #666;
    text-align: center;
}

h2 {
    margin-top: 30px;
    margin-bottom: 10px;
}

h3.datenschutz {
    margin-top: 30px;
    margin-bottom: 10px;
    text-align: center;
}

ul {
    padding-left: 40px;
    margin-bottom: 20px;
}

strong {
    display: block;
    margin-left: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

strong.datenschutz {
    display: block;
    margin-left: 0px;
    margin-top: 20px;
    margin-bottom: 0px;
}

li {
    margin-bottom: 10px;
    margin-left: 45px;
}

p {
    line-height: 1.6;
    margin-left: 30px;
    margin-bottom: 10px;
}

.highlight-text {
    font-size: 1.15em;
    text-align: center;
}

.contact-highlight {
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    margin: 30px 0;
    line-height: 1.5;
}

#anschrift {
    margin: 20px auto;
    text-align: center;
    border-radius: 10px;
    border-color: #000;
    box-shadow: 10px 10px 30px grey;
    padding: 8px;
    border: 3px solid #021a40;
    background-color: #ccc;
    color: black;
}

/* Galerie-Tree */



.tree-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Eltern-Row: nebeneinander auf Desktop/Tablet, Umbruch nur auf kleinen Geräten */
.parents {
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    /* verhindert Umbruch auf größeren Bildschirmen */
    box-sizing: border-box;
}

/* Eltern-Item (jeweils Node + Label) */
.parents>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    /* je 50% Breite, damit Mutter und Vater nebeneinander stehen */
    max-width: 540px;
    box-sizing: border-box;
    padding: 0 8px;
}

/* Node-Grundform — füllt die Eltern-Item-Breite */
.node {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    border-radius: 50px;
    border: 2px solid #333;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    box-sizing: border-box;
}

/* Mutter & Vater füllen ihr 50%-Eltern-Item */
.mutter, .vater {
    /* width: 100%;
    height: auto; */
    width: clamp(140px, 25vw, 450px);
    height: clamp(140px, 18vw, 320px);
    border-radius: clamp(20px, 4vw, 60px);
}

/* Gruppe separat skalieren */
.gruppe {
    width: clamp(220px, 40vw, 520px);
    height: clamp(140px, 18vw, 320px);
    border-radius: clamp(20px, 4vw, 60px);
}

/* Label zentriert unter der Node */
.label {
    margin-top: 10px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    font-size: clamp(13px, 1.6vw, 18px);
}

/* Hover */
.node:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.node::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    transition: background 0.25s ease;
}

/* Responsive: auf kleineren Bildschirmen zwei Spalten, dann eine Spalte */
@media (max-width: 720px) {
    .parents {
        flex-wrap: wrap;
        /* erlaubt Umbruch */
    }

    .parents>div {
        width: 46%;
        /* zwei Spalten auf kleinen Geräten */
        padding: 0;
    }

    .gruppe {
        width: 100%;
    }
}



/* Hover */
.node:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.node::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    transition: background 0.25s ease;
}





/* WELPEN */
.puppies {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Welpen-Buttons als Karten darstellen */
.puppies a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
}

/* Bild-Buttons */
.btn {
    /* width: 160px;
    height: 120px; */
    width: 200px;
    height: 160px;
    border-radius: 20px;
    border: 2px solid #333;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 8px;

    transition: transform 0.4s ease, box-shadow 0.4s ease, background-size 0.4s ease;

    /* Text ausblenden (kommt darunter) */
    display: block;
    font-size: 0;
}

.puppies a:nth-child(1)::after {
    content: "Welpe 1";
}

.puppies a:nth-child(2)::after {
    content: "Welpe 2";
}

.puppies a:nth-child(3)::after {
    content: "Welpe 3";
}

.puppies a:nth-child(4)::after {
    content: "Welpe 4";
}

.puppies a:nth-child(5)::after {
    content: "Welpe 5";
}

.puppies a:nth-child(6)::after {
    content: "Welpe 6";
}

.puppies a:nth-child(7)::after {
    content: "Welpe 7";
}

.puppies a::after {
    font-weight: bold;
    margin-top: 5px;
}

.btn:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Kontakt FORM */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.col-6 {
    flex: 1 1 calc(50% - 20px);
}

.col-12 {
    flex: 1 1 100%;
}

input, textarea {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 1em;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* Placeholder-Stil angleichen (für die meisten Browser) */
input::placeholder, textarea::placeholder {
    font-size: 18px;

}

input[type="text"], textarea {
    font-size: 18px;
    /* gewünschte Größe */
    line-height: 1.4;
    /* optional für bessere Vertikalabstimmung */
    font-family: inherit;
    /* sorgt für gleiche Schriftart */
}

/* Besser: nur sichtbaren Fokus für Tastaturnutzer */
input:focus-visible, textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 64, 54, 0.25);
    /* gewünschte Farbe */
    border-color: #4a4036;
}

#submit {
    background: #4a4036;
    color: white;
    cursor: pointer;
    transition: 0.3s;
}

#submit:hover {
    background: #6b5c4e;
}

#response {
    text-align: center;
    font-size: 0.9em;
    color: #888;
}

/* MOBILE */
@media (max-width: 600px) {
    .col-6 {
        flex: 1 1 100%;
    }
}

.contact-container p {
    margin-left: 0;
}

.contact-card {
    margin-left: 60px;
}

.field-error {
    color: #b00020;
    font-size: 0.95rem;
    margin-top: 0.35rem;
}

.errors {
    background: #fff4f4;
    border: 1px solid #f1c0c0;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.success {
    background: #f4fff4;
    border: 1px solid #c0f1c0;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

/* Basis-Stil für die Jacascript-Benachrichtigung */
/* Reset */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

/* Seitencontainer */
.page {
    min-height: 100%;
}

/* Basis-Stil für die Benachrichtigung */
.js-warning {
    width: 100%;
    background: #c62828;
    color: #fff;
    padding: 0.75rem 1rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.25;
    text-align: center;
    z-index: 9999;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}

/* Fixiert die Leiste unten und sorgt dafür, dass ihr Inhalt nicht aus dem Balken ragt */
.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
}

/* Inhalt innerhalb der Leiste */
.js-warning .icon {
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

.js-warning .content {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 2.5rem);
    /* Platz für Icon + Padding */
    word-break: break-word;
    /* verhindert Überlauf */
    white-space: normal;
}

/* Platzreserve für Seiteninhalt, damit die Leiste ihn nicht überlappt.   Padding nur dann nötig, wenn noscript angezeigt wird (JavaScript deaktiviert).   Da noscript nicht gezielt ansprechbar ist per CSS, setzen wir eine conservative Reserve. */
body {
    padding-bottom: 3.5rem;
}

/* Responsive Anpassungen */
@media (max-width: 700px) {
    .js-warning {
        font-size: 0.95rem;
        padding: 0.65rem 0.75rem;
    }

    body {
        padding-bottom: 5rem;
    }

    ul {
        padding-left: 0px;
        margin-left: 0px;
    }

    li {
        margin-left: 10px;
    }

    strong {
        margin-left: 0px;
    }

    .container {
        padding: 20px;
    }

    .contact-card {
        margin-left: 10px;
    }

    p {
        margin-left: 10px;
    }

}

@media (max-width: 360px) {
    .js-warning {
        font-size: 0.9rem;
        padding: 0.5rem 0.6rem;
    }

    body {
        padding-bottom: 5.5rem;
    }
}

.javameldung {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    background-color: red;
    width: 100%;
    color: #FFF;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* FOOTER */
footer {
    text-align: center;
    margin-top: 10px;
    color: #666;
    font-size: 0.9em;
}

footer p {
    margin: 0;
}