/* ==========================================================================
   Logopädie & Sprachtherapie Katerina Passameras – das gesamte Aussehen

   Inhalt
     1. Schriften
     2. Farben und Maße
     3. Grundlagen (Text, Links, Bilder)
     4. Hilfsklassen (Breite, Abschnitte, Spalten, Einblenden)
     5. Knöpfe und Symbole
     6. Kopfzeile und Menü
     7. Bühne (Einstieg der Startseite) mit Deko-Animation
     8. Therapieangebot (Karten)
     9. Werdegang
    10. FAQ
    11. Öffnungszeiten
    12. Kontakt, Formular und Meldungen
    13. Karte (Zwei-Klick-Einbindung)
    14. Unterseiten: Seitenkopf, Galerie, Links, Rechtstexte, Fehlerseite
    15. Seitenfuß
    16. Weniger Bewegung, Druck

   Aufbau: zuerst das Handy, größere Bildschirme kommen über
   @media (min-width: …) dazu.
   ========================================================================== */


/* 1. Schriften ============================================================ */
/* Beide Schriften liegen lokal in /fonts (keine Verbindung zu Google). */

@font-face {
    font-family: "Fraunces";
    src: url("/fonts/fraunces.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Nunito Sans";
    src: url("/fonts/nunito-sans.woff2") format("woff2");
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}


/* 2. Farben und Maße ====================================================== */

:root {
    /* Farben: das Sonnengelb des Logos, das Beerenrot aus den Fotos
       (Schal der Inhaberin) und ein warmes Papierweiß */
    --papier: #fffaf1;
    --papier-dunkel: #fbf0da;
    --weiss: #ffffff;
    --sonne: #f9ae2b;
    --sonne-hell: #fde4b0;
    --beere: #ac1d3a;
    --beere-dunkel: #86152c;
    --tinte: #2a211c;
    --tinte-weich: #5f534b;
    --linie: #ecdcc0;
    --gruen: #5c8a3a;          /* nur für die Deko-Buchstaben und Erfolgsmeldungen */

    --schrift-text: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --schrift-titel: "Fraunces", Georgia, "Times New Roman", serif;

    --rund: 1.25rem;
    --rund-klein: 0.6rem;
    --schatten: 0 0.6rem 1.8rem rgba(42, 33, 28, 0.09);
    --schatten-stark: 0 1rem 2.6rem rgba(42, 33, 28, 0.16);

    --kopf-hoehe: 4.5rem;
    --rand: 1.25rem;           /* Abstand zum Bildschirmrand */
}


/* 3. Grundlagen =========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Sprungziele nicht unter der festen Kopfzeile verstecken */
    scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    line-height: 1.65;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.6em;
    font-family: var(--schrift-titel);
    font-weight: 600;
    line-height: 1.2;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.65rem, 4.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p,
ul,
ol,
dl,
address {
    margin: 0 0 1em;
}

address {
    font-style: normal;
}

a {
    color: var(--beere);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--beere-dunkel);
}

/* Deutlich sichtbarer Rahmen bei Bedienung mit der Tastatur */
:focus-visible {
    outline: 3px solid var(--beere);
    outline-offset: 3px;
    border-radius: 4px;
}

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

/* Nur für Vorleseprogramme sichtbar */
.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* „Zum Inhalt springen“: erscheint erst beim Druck auf die Tab-Taste */
.sprunglink {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--tinte);
    color: var(--weiss);
    border-radius: var(--rund-klein);
}

.sprunglink:focus {
    top: 1rem;
    color: var(--weiss);
}


/* 4. Hilfsklassen ========================================================= */

/* Begrenzt die Inhaltsbreite und hält Abstand zum Bildschirmrand */
.breite {
    width: min(100% - 2 * var(--rand), 72rem);
    margin-inline: auto;
}

.breite-schmal {
    width: min(100% - 2 * var(--rand), 48rem);
}

.mittig {
    text-align: center;
}

.abschnitt {
    padding-block: clamp(3.5rem, 9vw, 6rem);
}

.abschnitt-oben-knapp {
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
}

.abschnitt-getoent {
    background: var(--papier-dunkel);
}

.abschnitt-kopf {
    max-width: 44rem;
    margin: 0 auto clamp(2rem, 5vw, 3rem);
    text-align: center;
}

.abschnitt-kopf h2 {
    margin-bottom: 0.3em;
}

/* Der Wahlspruch der Praxis */
.motto {
    margin-bottom: 0.6rem;
    color: var(--beere);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.22em;
}

/* Zwei Spalten nebeneinander (auf dem Handy untereinander) */
.zweispaltig {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.zweispaltig-oben {
    align-items: start;
}

@media (min-width: 56rem) {
    .zweispaltig {
        grid-template-columns: 1fr 1fr;
    }

    .zweispaltig-portraet {
        grid-template-columns: 5fr 7fr;
    }
}

.fliesstext > :last-child {
    margin-bottom: 0;
}

.hervorgehoben {
    padding: 0.9rem 1.1rem;
    border-left: 4px solid var(--sonne);
    border-radius: 0 var(--rund-klein) var(--rund-klein) 0;
    background: var(--papier-dunkel);
    font-weight: 700;
}

.bild {
    width: 100%;
    border-radius: var(--rund);
    box-shadow: var(--schatten);
}

/* Sanftes Einblenden beim Scrollen. Gilt nur, wenn JavaScript läuft
   (Klasse "js" am <html>, siehe js/start.js) – sonst ist alles sofort sichtbar. */
.js .einblenden {
    opacity: 0;
    transform: translateY(1.2rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .einblenden.sichtbar {
    opacity: 1;
    transform: none;
}


/* 5. Knöpfe und Symbole =================================================== */

.symbol {
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--beere);
    border-radius: 999px;
    background: var(--beere);
    color: var(--weiss);
    font: inherit;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.knopf:hover {
    background: var(--beere-dunkel);
    border-color: var(--beere-dunkel);
    color: var(--weiss);
    transform: translateY(-2px);
    box-shadow: var(--schatten);
}

.knopf:disabled {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

/* Zweiter, zurückhaltender Knopf */
.knopf-hell {
    background: transparent;
    color: var(--beere);
}

.knopf-klein {
    padding: 0.5rem 1.1rem;
}

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0;
}

/* Link zu einer fremden Website (mit kleinem Pfeil-Symbol) */
.extern-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.extern-link .symbol {
    width: 1em;
    height: 1em;
}


/* 6. Kopfzeile und Menü =================================================== */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 250, 241, 0.94);
    border-bottom: 1px solid var(--linie);
    backdrop-filter: blur(10px);
}

.kopf-innen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(100% - 2 * var(--rand), 78rem);
    min-height: var(--kopf-hoehe);
    margin-inline: auto;
}

/* Logo + Name */
.marke {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--tinte);
    text-decoration: none;
}

.marke:hover {
    color: var(--tinte);
}

.marke img {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;       /* schneidet die weißen Ecken des Logo-Bildes ab */
}

.marke-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.marke-name {
    font-family: var(--schrift-titel);
    font-size: 1.1rem;
    font-weight: 700;
}

.marke-unten {
    color: var(--tinte-weich);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Menü-Knopf („Hamburger“) – nur auf kleinen Bildschirmen */
.menue-knopf {
    display: none;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 2px solid var(--linie);
    border-radius: var(--rund-klein);
    background: var(--weiss);
    cursor: pointer;
}

.menue-knopf-striche,
.menue-knopf-striche::before,
.menue-knopf-striche::after {
    display: block;
    width: 1.3rem;
    height: 2px;
    margin-inline: auto;
    border-radius: 2px;
    background: var(--tinte);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.menue-knopf-striche {
    position: relative;
}

.menue-knopf-striche::before,
.menue-knopf-striche::after {
    content: "";
    position: absolute;
    left: 0;
}

.menue-knopf-striche::before { top: -0.42rem; }
.menue-knopf-striche::after  { top: 0.42rem; }

/* Geöffnet: die Striche werden zum Kreuz */
.menue-knopf[aria-expanded="true"] .menue-knopf-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::before { transform: translateY(0.42rem) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::after  { transform: translateY(-0.42rem) rotate(-45deg); }

.hauptmenue ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hauptmenue a:not(.knopf) {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: var(--rund-klein);
    color: var(--tinte);
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
}

.hauptmenue a:not(.knopf):hover,
.hauptmenue a[aria-current="page"] {
    background: var(--sonne-hell);
}

.hauptmenue .knopf {
    margin-left: 0.4rem;
}

/* Kleine Bildschirme: Menü klappt unter der Kopfzeile auf.
   Ohne JavaScript bleibt es einfach sichtbar (kein Knopf nötig). */
@media (max-width: 67.99rem) {
    .kopf-innen {
        flex-wrap: wrap;
    }

    .hauptmenue {
        width: 100%;
        padding-bottom: 1rem;
    }

    .hauptmenue ul {
        flex-direction: column;
        align-items: stretch;
    }

    .hauptmenue a:not(.knopf) {
        padding: 0.75rem 0.8rem;
        font-size: 1.05rem;
    }

    .hauptmenue .knopf {
        margin: 0.5rem 0 0;
    }

    .js .menue-knopf {
        display: block;
    }

    .js .hauptmenue {
        display: none;
    }

    .js .hauptmenue.offen {
        display: block;
    }

    /* Ohne JavaScript ist das Menü immer offen und würde beim Scrollen
       den halben Bildschirm verdecken – dann die Kopfzeile nicht festhalten. */
    html:not(.js) .kopf {
        position: static;
    }
}


/* 7. Bühne (Einstieg der Startseite) ====================================== */

.buehne {
    position: relative;
    overflow: hidden;         /* Deko darf nicht seitlich aus dem Bild ragen */
    padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3.5rem, 9vw, 6rem);
    background:
        radial-gradient(60rem 30rem at 85% 10%, var(--sonne-hell), transparent 70%),
        var(--papier);
}

.buehne-innen {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
}

@media (min-width: 56rem) {
    .buehne-innen {
        grid-template-columns: 11fr 10fr;
    }
}

.buehne h1 {
    margin-bottom: 0.5rem;
}

/* Die Überschrift besteht aus zwei Zeilen: Fach (klein) und Name (groß) */
.buehne-fach {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--tinte-weich);
    font-family: var(--schrift-text);
    font-size: clamp(0.85rem, 2.4vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.buehne-name {
    display: block;
    font-size: clamp(2.5rem, 8.5vw, 4.4rem);
    line-height: 1.05;
}

.buehne-gruss {
    margin: 1.6rem 0 0.2rem;
    font-family: var(--schrift-titel);
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    font-weight: 500;
    font-style: italic;
}

.buehne-hinweis {
    max-width: 28rem;
    margin-bottom: 1.8rem;
    color: var(--tinte-weich);
    font-size: 1.15rem;
}

/* Foto in einer weichen, unregelmäßigen Form vor einer Sonnenscheibe */
.buehne-bild {
    position: relative;
    width: min(100%, 30rem);
    margin-inline: auto;
}

.buehne-bild::before {
    content: "";
    position: absolute;
    inset: -6% -8% -4% 6%;
    border-radius: 50%;
    background: var(--sonne);
}

.buehne-bild img {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 28% 30%;
    border-radius: 46% 54% 52% 48% / 50% 44% 56% 50%;
    box-shadow: var(--schatten-stark);
}

/* --- Deko 1: Schallwellen (die drei Bögen aus dem Logo) -------------------
   Drei Kreisbögen links unten am Foto, die nacheinander nach außen laufen. */
.schallwellen {
    position: absolute;
    left: -1%;
    bottom: 16%;
    width: 0;
    height: 0;
}

.schallwellen span {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.2rem;
    height: 3.2rem;
    margin: -1.6rem 0 0 -1.6rem;
    border: 0.3rem solid transparent;
    border-left-color: var(--beere);
    border-radius: 50%;
    opacity: 0;
    animation: schallwelle 3s ease-out infinite;
}

.schallwellen span:nth-child(2) { animation-delay: 0.5s; }
.schallwellen span:nth-child(3) { animation-delay: 1s; }

@keyframes schallwelle {
    0%   { transform: scale(0.5); opacity: 0; }
    20%  { opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* --- Deko 2: die Buchstaben S-P-R-A-C-H-E -------------------------------
   Sie schweben in den Farben des Logos über dem Foto. Jede Zeile unten legt
   Ort, Farbe, Neigung und Startzeit eines Buchstabens fest. */
.buchstaben span {
    position: absolute;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--weiss);
    box-shadow: var(--schatten);
    font-family: var(--schrift-titel);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    animation: schweben 6s ease-in-out infinite;
}

.buchstaben span:nth-child(1) { top: 28%;  left: -7%;  color: var(--gruen); rotate: -12deg; animation-delay: 0s; }
.buchstaben span:nth-child(2) { top: 6%;   left: 4%;   color: var(--sonne); rotate: 9deg;   animation-delay: -1.2s; }
.buchstaben span:nth-child(3) { top: -7%;  left: 26%;  color: var(--sonne); rotate: -6deg;  animation-delay: -2.4s; }
.buchstaben span:nth-child(4) { top: -9%;  left: 52%;  color: var(--beere); rotate: 10deg;  animation-delay: -3.6s; }
.buchstaben span:nth-child(5) { top: 0%;   left: 77%;  color: var(--sonne); rotate: -9deg;  animation-delay: -0.6s; }
.buchstaben span:nth-child(6) { top: 22%;  left: 95%;  color: var(--beere); rotate: 7deg;   animation-delay: -1.8s; }
.buchstaben span:nth-child(7) { top: 50%;  left: 99%;  color: var(--gruen); rotate: -5deg;  animation-delay: -3s; }

@keyframes schweben {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.6rem); }
}

/* Auf Handys füllt das Foto die ganze Breite: Buchstaben und Schallwellen
   etwas nach innen holen, damit sie nicht am Bildschirmrand abgeschnitten werden */
@media (max-width: 40rem) {
    .buchstaben span { width: 2rem; height: 2rem; font-size: 1.1rem; }
    .buchstaben span:nth-child(1) { left: 0%; }
    .buchstaben span:nth-child(6) { left: 87%; }
    .buchstaben span:nth-child(7) { left: 90%; }
    .schallwellen { left: 9%; bottom: 8%; }
}


/* 8. Therapieangebot ====================================================== */

/* Zwei Fotos, leicht versetzt übereinander */
.bildpaar {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
}

.bildpaar .bild:first-child {
    grid-column: 1 / 9;
    grid-row: 1;
}

.bildpaar .bild:last-child {
    grid-column: 6 / 13;
    grid-row: 1;
    margin-top: 55%;
    border: 0.4rem solid var(--papier);
}

/* Die vier Therapiebereiche */
.karten {
    display: grid;
    gap: 1.25rem;
    margin-top: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 40rem) {
    .karten { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 68rem) {
    .karten { grid-template-columns: repeat(4, 1fr); }
}

.karte {
    padding: 1.6rem 1.4rem;
    border: 1px solid var(--linie);
    border-top: 5px solid var(--sonne);
    border-radius: var(--rund);
    background: var(--weiss);
    box-shadow: var(--schatten);
}

.karte:nth-child(even) {
    border-top-color: var(--beere);
}

.karte-symbol {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    padding: 0.65rem;
    border-radius: 50%;
    background: var(--sonne-hell);
    color: var(--beere-dunkel);
}

.karte ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.98rem;
    line-height: 1.5;
}

.karte li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.2rem;
    border-top: 1px dashed var(--linie);
}

.karte li:first-child {
    border-top: 0;
}

/* Sonnenpunkt als Aufzählungszeichen */
.karte li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--sonne);
}

.breitbild {
    max-width: 44rem;
    margin: clamp(2.5rem, 6vw, 4rem) auto 0;
}

.breitbild img {
    width: 100%;
    border-radius: var(--rund);
    box-shadow: var(--schatten);
}


/* 9. Werdegang ============================================================ */

.bild-portraet {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 55% 40%;
    max-width: 26rem;
    margin-inline: auto;
}

.unterzeile {
    color: var(--beere);
    font-weight: 800;
}


/* 10. FAQ ================================================================= */

.frage {
    margin-bottom: 0.8rem;
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    background: var(--weiss);
    box-shadow: var(--schatten);
}

.frage summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    cursor: pointer;
    list-style: none;         /* Standard-Dreieck ausblenden */
}

.frage summary::-webkit-details-marker {
    display: none;
}

.frage summary h3 {
    margin: 0;
    font-size: 1.15rem;
}

/* Plus-Zeichen rechts; wird beim Aufklappen zum Minus */
.frage summary::after {
    content: "+";
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sonne-hell);
    color: var(--beere-dunkel);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.25s ease;
}

.frage[open] summary::after {
    content: "–";
    transform: rotate(180deg);
}

.frage-antwort {
    padding: 0 1.3rem 1.2rem;
}

.frage-antwort > :last-child {
    margin-bottom: 0;
}


/* 11. Öffnungszeiten ====================================================== */

.abschnitt-kraeftig {
    background: var(--sonne);
}

.zeiten-symbol {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.8rem;
}

.zeiten-hinweis {
    font-size: 1.15rem;
    font-weight: 700;
}

.zeiten {
    display: grid;
    gap: 1rem;
    margin: 2rem 0 0;
}

@media (min-width: 40rem) {
    .zeiten { grid-template-columns: 1fr 1fr; }
}

.zeiten div {
    padding: 1.4rem 1rem;
    border-radius: var(--rund);
    background: var(--papier);
    box-shadow: var(--schatten);
}

.zeiten dt {
    font-weight: 700;
}

.zeiten dd {
    margin: 0.2rem 0 0;
    font-family: var(--schrift-titel);
    font-size: 1.6rem;
    font-weight: 600;
}


/* 12. Kontakt, Formular und Meldungen ===================================== */

.kontaktdaten .bild {
    margin-bottom: 1.6rem;
}

.kontaktzeile {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-top: 1px dashed var(--linie);
}

.kontaktzeile .symbol {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.15rem;
    color: var(--beere);
}

.kontaktzeile p,
.kontaktzeile address {
    margin: 0;
}

.kontaktzeile a {
    font-weight: 700;
}

.formular-karte {
    padding: clamp(1.4rem, 4vw, 2.2rem);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    background: var(--weiss);
    box-shadow: var(--schatten);
}

.feld {
    margin-bottom: 1rem;
}

.feld label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--linie);
    border-radius: var(--rund-klein);
    background: var(--papier);
    color: var(--tinte);
    font: inherit;
}

.feld textarea {
    resize: vertical;
}

.feld input:focus,
.feld textarea:focus {
    border-color: var(--beere);
    outline: none;
    background: var(--weiss);
}

.feld-hinweis {
    margin: 0.3rem 0 0;
    color: var(--tinte-weich);
    font-size: 0.9rem;
}

/* Einwilligung: Kästchen links, Text rechts */
.feld-haken {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

.feld-haken input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.2rem 0 0;
    accent-color: var(--beere);
}

.feld-haken label {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 400;
}

/* Falle für Spam-Programme: liegt weit außerhalb des Bildschirms */
.feld-falle {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Meldungen (Hinweis, Fehler, Erfolg) */
.meldung {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 1.2rem;
    padding: 0.9rem 1.1rem;
    border-left: 4px solid;
    border-radius: var(--rund-klein);
}

/* Das Attribut "hidden" muss gegen display:flex gewinnen */
.meldung[hidden] {
    display: none;
}

.meldung > :last-child {
    margin-bottom: 0;
}

.meldung .symbol {
    margin-top: 0.2rem;
}

.meldung-hinweis {
    border-color: var(--sonne);
    background: var(--sonne-hell);
}

.meldung-fehler {
    border-color: var(--beere);
    background: #fbe6ea;
}

.meldung-erfolg {
    border-color: var(--gruen);
    background: #e9f3e1;
}


/* 13. Karte (Zwei-Klick-Einbindung) ======================================= */
/* Zeigt zuerst nur einen Platzhalter. Erst nach dem Klick ersetzt
   js/main.js den Inhalt durch die Karte von Google Maps. */

.einbettung {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 22rem;
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding: 2rem 1.5rem;
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    overflow: hidden;
    /* angedeutetes Straßenraster */
    background:
        linear-gradient(var(--linie) 1px, transparent 1px) 0 0 / 3.5rem 3.5rem,
        linear-gradient(90deg, var(--linie) 1px, transparent 1px) 0 0 / 3.5rem 3.5rem,
        var(--papier-dunkel);
    text-align: center;
}

.einbettung-platzhalter .symbol {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--beere);
}

.einbettung-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--tinte);
    color: var(--weiss);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.einbettung-knopf:hover {
    background: var(--beere);
}

.einbettung-hinweis {
    max-width: 34rem;
    margin: 0;
    padding: 0.5rem 0.8rem;
    border-radius: var(--rund-klein);
    background: rgba(255, 250, 241, 0.9);
    font-size: 0.9rem;
}

/* Nach dem Klick: die Karte füllt den ganzen Rahmen */
.einbettung.geladen {
    display: block;
    padding: 0;
}

.einbettung iframe {
    display: block;
    width: 100%;
    height: 26rem;
    border: 0;
}


/* 14. Unterseiten ========================================================= */

/* Titelbereich oben auf Galerie, Links, Impressum, Datenschutz */
.seitenkopf {
    padding-block: clamp(2.5rem, 7vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
    background: radial-gradient(50rem 20rem at 85% 0%, var(--sonne-hell), transparent 70%);
}

.seitenkopf h1 {
    margin-bottom: 0.3em;
}

.seitenkopf p {
    max-width: 40rem;
    margin: 0;
    color: var(--tinte-weich);
}

/* --- Galerie ---------------------------------------------------------- */
.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1.25rem;
}

.galerie-bild {
    margin: 0;
    border-radius: var(--rund);
    background: var(--weiss);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.galerie-bild a {
    display: block;
    overflow: hidden;
    cursor: zoom-in;
}

.galerie-bild img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.galerie-bild a:hover img {
    transform: scale(1.05);
}

.galerie-bild figcaption {
    padding: 0.8rem 1rem 1rem;
    color: var(--tinte-weich);
    font-size: 0.95rem;
    line-height: 1.45;
}

.galerie-bild figcaption strong {
    display: block;
    color: var(--tinte);
    font-family: var(--schrift-titel);
    font-size: 1.1rem;
}

/* Das Panorama darf zwei Spalten breit sein */
@media (min-width: 40rem) {
    .galerie-bild-breit {
        grid-column: span 2;
    }

    .galerie-bild-breit img {
        aspect-ratio: 8 / 3;
    }
}

/* Großansicht eines Bildes (wird von js/main.js als <dialog> erzeugt) */
.grossansicht {
    max-width: 96vw;
    max-height: 96vh;
    padding: 0;
    border: 0;
    border-radius: var(--rund-klein);
    background: transparent;
    overflow: visible;
}

.grossansicht::backdrop {
    background: rgba(42, 33, 28, 0.88);
}

.grossansicht img {
    max-width: 96vw;
    max-height: 92vh;
    width: auto;
    border-radius: var(--rund-klein);
}

.grossansicht-schliessen {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: var(--papier);
    color: var(--tinte);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

/* --- Links ------------------------------------------------------------ */
.linkliste {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.linkkarte {
    padding: 1.3rem 1.4rem;
    border: 1px solid var(--linie);
    border-left: 5px solid var(--sonne);
    border-radius: var(--rund);
    background: var(--weiss);
    box-shadow: var(--schatten);
}

.linkkarte:nth-child(even) {
    border-left-color: var(--beere);
}

.linkkarte p {
    margin-bottom: 0.6rem;
}

/* --- Rechtstexte (Impressum, Datenschutz) ----------------------------- */
.rechtstext {
    overflow-wrap: anywhere;  /* sehr lange Internetadressen umbrechen */
}

.rechtstext h2 {
    margin-top: 2em;
    font-size: 1.45rem;
}

.rechtstext h3 {
    margin-top: 1.5em;
    font-size: 1.15rem;
}

.rechtstext h4 {
    margin-top: 1.2em;
}

/* --- Fehlerseite 404 -------------------------------------------------- */
.fehlerseite-symbol {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    color: var(--sonne);
}


/* 15. Seitenfuß =========================================================== */

.fuss {
    position: relative;
    margin-top: 3.5rem;
    background: var(--tinte);
    color: #f1e7da;
}

/* Deko: Schallwelle als oberer Rand des Seitenfußes */
.fuss-welle {
    position: absolute;
    bottom: calc(100% - 1px);
    left: 0;
    width: 100%;
    height: 3.5rem;
    fill: var(--tinte);
}

.fuss a {
    color: #f1e7da;
}

.fuss a:hover {
    color: var(--sonne);
}

.fuss-innen {
    display: grid;
    gap: 2rem;
    width: min(100% - 2 * var(--rand), 72rem);
    margin-inline: auto;
    padding-block: 2.5rem 2rem;
}

@media (min-width: 48rem) {
    .fuss-innen {
        grid-template-columns: 1.1fr 1fr 1fr;
    }
}

.fuss-marke img {
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
}

.fuss-motto {
    color: var(--sonne);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.fuss-spalte h2 {
    margin-bottom: 0.7rem;
    color: var(--sonne);
    font-size: 1.15rem;
}

.fuss-unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 2rem;
    width: min(100% - 2 * var(--rand), 72rem);
    margin-inline: auto;
    padding-block: 1.2rem 1.6rem;
    border-top: 1px solid rgba(241, 231, 218, 0.2);
    font-size: 0.92rem;
}

.fuss-unten p {
    margin: 0;
}

.fuss-unten nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
}


/* 16. Weniger Bewegung, Druck ============================================= */

/* Wer im Betriebssystem „Bewegung reduzieren“ eingestellt hat, bekommt
   keine Animationen und kein sanftes Scrollen. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .schallwellen span {
        opacity: 0.7;
    }

    .schallwellen span:nth-child(2) { transform: scale(1.6); opacity: 0.45; }
    .schallwellen span:nth-child(3) { transform: scale(2.2); opacity: 0.25; }
}

@media print {
    .kopf,
    .menue-knopf,
    .schallwellen,
    .buchstaben,
    .einbettung,
    .formular-karte,
    .fuss-welle {
        display: none;
    }

    .js .einblenden {
        opacity: 1;
        transform: none;
    }

    body,
    .fuss {
        background: #fff;
        color: #000;
    }
}