/* ==========================================================================
   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)
     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 ============================================================ */
/* Die Schrift liegt lokal in /fonts (keine Verbindung zu Google). */

@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: warmes Korallrot als Hauptfarbe, cremeweißer Grund und das
       Sonnengelb des alten Logos als sparsamer Akzent */
    --weiss: #ffffff;
    --papier: #fffaf5;          /* Hintergrund der Seite */
    --papier-dunkel: #fbf0e6;   /* Hintergrund getönter Abschnitte */
    --koralle: #be4b2b;
    --koralle-dunkel: #9a3a1f;
    --koralle-hell: #fbe5da;
    --sonne: #f5b53d;
    --sonne-hell: #fdf0cf;
    --tinte: #2b1d19;           /* Textfarbe */
    --tinte-weich: #6a564f;     /* zurückhaltender Text */
    --linie: #f0dfd2;
    --gruen: #2e7d4f;           /* nur für Erfolgsmeldungen */
    --rot: #b3261e;             /* nur für Fehlermeldungen */

    --schrift: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --rund: 1.25rem;
    --rund-klein: 0.6rem;
    --schatten: 0 0.5rem 1.6rem rgba(70, 35, 20, 0.08);
    --schatten-stark: 0 1rem 2.6rem rgba(70, 35, 20, 0.18);

    --kopf-hoehe: 4.5rem;
    --rand: 1.25rem;            /* Abstand zum Bildschirmrand */
    --abschnitt-abstand: clamp(3.5rem, 9vw, 6rem);   /* Luft über und unter einem Abschnitt */
}


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

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

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

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

h1,
h2,
h3,
h4 {
    margin: 0 0 0.6em;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
    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(--koralle);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

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

/* Deutlich sichtbarer Rahmen bei Bedienung mit der Tastatur */
:focus-visible {
    outline: 3px solid var(--koralle);
    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: var(--abschnitt-abstand);
    /* Sprung aus dem Menü: nicht am oberen Rand des Abschnitts anhalten,
       sondern so weit scrollen, dass die Überschrift knapp unter der
       Kopfzeile steht (negativer Wert = weiter scrollen) */
    scroll-margin-top: calc(1.5rem - var(--abschnitt-abstand));
}

.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(--koralle);
    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(--koralle);
    border-radius: 999px;
    background: var(--koralle);
    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(--koralle-dunkel);
    border-color: var(--koralle-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(--koralle);
}

.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, 245, 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;
    min-width: 0;             /* darf schrumpfen, damit der Menü-Knopf daneben bleibt */
    color: var(--tinte);
    text-decoration: none;
}

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

.marke img {
    flex: none;
    width: 3rem;
    height: 3rem;
}

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

.marke-name {
    font-size: 1.1rem;
    font-weight: 800;
}

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

/* Schmale Handys: Logo und Schrift etwas kleiner, damit Name und
   Menü-Knopf in eine Zeile passen */
@media (max-width: 26rem) {
    .marke {
        gap: 0.6rem;
    }

    .marke img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .marke-name {
        font-size: 1rem;
    }

    .marke-unten {
        font-size: 0.62rem;
        letter-spacing: 0.04em;
    }
}

/* Menü-Knopf („Hamburger“) – nur auf kleinen Bildschirmen */
.menue-knopf {
    display: none;
    flex: 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(--koralle-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) {
    /* Logo und Menü-Knopf teilen sich die erste Zeile,
       das aufgeklappte Menü bekommt eine eigene Zeile darunter */
    .kopf-innen {
        flex-wrap: wrap;
    }

    .marke {
        flex: 1;
    }

    .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;
    }
}

/* Startseite auf Handy und Tablet: Ganz oben ist von der Kopfzeile nur der
   Menü-Knopf zu sehen, damit die Begrüßung den ganzen Bildschirm bekommt.
   Sobald man scrollt oder das Menü öffnet, erscheint die ganze Leiste
   (Klasse "kopf-sichtbar", siehe js/main.js). */
@media (max-width: 55.99rem) {
    .js .seite-start .kopf {
        position: fixed;
        left: 0;
        right: 0;
        transition: background-color 0.3s ease, border-color 0.3s ease;
    }

    .js .seite-start .marke {
        transition: opacity 0.3s ease, visibility 0.3s;
    }

    .js .seite-start .kopf:not(.kopf-sichtbar) {
        border-color: transparent;
        background: transparent;
        backdrop-filter: none;
        pointer-events: none;     /* die leere Leiste fängt keine Klicks ab */
    }

    .js .seite-start .kopf:not(.kopf-sichtbar) .marke {
        visibility: hidden;
        opacity: 0;
    }

    .js .seite-start .kopf:not(.kopf-sichtbar) .menue-knopf {
        pointer-events: auto;
    }
}


/* 7. Bühne (Einstieg der Startseite) ====================================== */
/* Das Foto steckt in einer großen Sprechblase, von der drei Schallwellen
   ausgehen – dieselbe Form wie das Logo der Praxis. */

.buehne {
    padding-block: clamp(1.5rem, 5vw, 4.5rem) var(--abschnitt-abstand);
    background: linear-gradient(180deg, var(--papier-dunkel), var(--papier));
    overflow: hidden;
}

.buehne-innen {
    display: grid;
    gap: clamp(2.25rem, 5vw, 3rem);
    align-items: center;
}

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

/* Der Wahlspruch: die drei Wörter werden von links nach rechts kräftiger */
.buehne-motto {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.85em;
    margin-bottom: 0.9rem;
    font-size: clamp(1.05rem, 3.6vw, 1.3rem);
    font-weight: 300;
    letter-spacing: 0;
}

.buehne-motto span:nth-child(2) { font-weight: 600; }
.buehne-motto span:nth-child(3) { font-weight: 900; }

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

/* Die Überschrift besteht aus zwei Zeilen: Fach (groß) und Name (kleiner) */
.buehne-fach {
    display: block;
    font-size: clamp(2.1rem, 9vw, 3.4rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.buehne-name {
    display: block;
    margin-top: 0.8rem;
    color: var(--koralle);
    font-size: clamp(1.25rem, 4vw, 1.6rem);
    font-weight: 700;
    letter-spacing: 0;
}

@media (min-width: 56rem) {
    .buehne-fach {
        font-size: clamp(2.4rem, 4.5vw, 3.5rem);
    }
}

.buehne-gruss {
    max-width: 30rem;
    margin-bottom: 1.8rem;
    font-size: 1.15rem;
}

/* Die Sprechblase mit dem Foto. Die Zeichnung (Rand, Spitze, Schallwellen)
   liegt als <svg> über die ganze Fläche; das Foto sitzt als Kreis genau
   in der Blase. Die Prozentwerte gehören zu den Maßen der Zeichnung –
   bitte nur gemeinsam mit ihr ändern. */
.buehne-bild {
    position: relative;
    width: min(100%, 25rem);
    aspect-ratio: 76 / 58;
    margin: 0 auto 1.25rem;
    transform-origin: 8% 96%;   /* wächst beim Laden aus der Spitze heraus */
    animation: blase-auf 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15) backwards;
}

.buehne-zeichnung {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;        /* die Wellen dürfen beim Pulsieren über den Rand hinaus */
}

.buehne-blase {
    fill: var(--koralle);
    stroke: var(--koralle);
}

.buehne-welle {
    fill: none;
    stroke: var(--koralle);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1;
    /* Die Wellen zeichnen sich beim Laden nacheinander. Danach fließt ohne
       Pause ein sanfter Impuls durch sie hindurch: jede Welle wird langsam
       ein wenig größer und wieder kleiner, von innen nach außen versetzt.
       Der Mittelpunkt der Vergrößerung ist die Mitte der Sprechblase. */
    transform-origin: 32px 46px;
    animation: welle-zeichnen 0.55s ease-out 0.55s backwards,
               welle-puls 4.5s ease-in-out 2s infinite;
}

.buehne-welle:nth-of-type(3) {
    stroke: #e2823a;
    animation-delay: 0.75s, 2.6s;
}

.buehne-welle:nth-of-type(4) {
    stroke: var(--sonne);
    animation-delay: 0.95s, 3.2s;
}

.buehne-foto {
    position: absolute;
    left: 4.47%;
    top: 5.86%;
    width: 59.47%;
    height: 77.93%;
    overflow: hidden;
    border-radius: 50%;
}

/* Das Foto ist größer als der Kreis: "height" bestimmt, wie nah man
   herangeht, "left" und "top" verschieben den Ausschnitt (Gesicht mittig). */
.buehne-foto img {
    position: absolute;
    left: -20%;
    top: -30%;
    width: auto;
    max-width: none;
    height: 180%;
}

@keyframes blase-auf {
    from {
        opacity: 0;
        transform: scale(0.86);
    }
}

@keyframes welle-zeichnen {
    from {
        opacity: 0;
        stroke-dashoffset: 1;
    }
}

@keyframes welle-puls {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.0175);
    }
}

/* Handy und Tablet: Wahlspruch und Überschrift, darunter die Sprechblase,
   dann der Gruß und die beiden Knöpfe nebeneinander. Dafür löst sich der
   Textblock auf ("display: contents") und die Teile werden einzeln
   einsortiert. Die Sprechblase richtet sich auch nach der Bildschirmhöhe,
   damit die Knöpfe ohne Scrollen zu sehen sind. */
@media (max-width: 55.99rem) {
    .buehne-innen {
        gap: 0;
    }

    .buehne-text {
        display: contents;
    }

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

    .buehne-bild {
        order: 1;
        width: min(100%, 23rem);
        width: min(100%, 23rem, 48svh);
        margin: 0.25rem auto 2rem;     /* unten Luft zwischen Adresskarte und Gruß */
    }

    .buehne-gruss {
        order: 2;
        margin-bottom: 1.1rem;
        font-size: 1.05rem;
    }

    .buehne .knopfreihe {
        order: 3;
        flex-wrap: nowrap;
        gap: 0.6rem;
    }

    .buehne .knopfreihe .knopf {
        flex: 1;
        padding-inline: 0.8rem;
        white-space: nowrap;
    }
}

/* Schmale Handys: Knöpfe ohne Symbol, damit beide nebeneinander passen */
@media (max-width: 30rem) {
    .buehne .knopfreihe .symbol {
        display: none;
    }
}

@media (min-width: 56rem) {
    .buehne-bild {
        width: 100%;
        margin-bottom: 0;
    }
}

/* Kleine weiße Karte mit der Adresse, unter den Schallwellen */
.buehne-ort {
    position: absolute;
    right: 0;
    bottom: -0.75rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0.55rem 0.95rem 0.55rem 0.6rem;
    border-radius: var(--rund);
    background: var(--weiss);
    box-shadow: var(--schatten-stark);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

.buehne-ort .symbol {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0.45rem;
    border-radius: 50%;
    background: var(--koralle-hell);
    color: var(--koralle);
}

@media (min-width: 56rem) {
    .buehne-ort {
        right: 6%;
        bottom: -0.5rem;
        padding: 0.75rem 1.1rem 0.75rem 0.8rem;
        font-size: 0.95rem;
    }

    .buehne-ort .symbol {
        width: 2.4rem;
        height: 2.4rem;
        padding: 0.5rem;
    }
}


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

/* 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-radius: var(--rund);
    background: var(--weiss);
    box-shadow: var(--schatten);
}

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

.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 solid 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(--koralle);
    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(--koralle-hell);
    color: var(--koralle);
    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 ====================================================== */

/* Korallrotes Band mit weißer Schrift */
.abschnitt-kraeftig {
    background: var(--koralle);
    color: var(--weiss);
}

.zeiten-symbol {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.8rem;
    color: var(--sonne-hell);
}

.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(--weiss);
    color: var(--tinte);
    box-shadow: var(--schatten);
}

.zeiten dt {
    font-weight: 700;
}

.zeiten dd {
    margin: 0.2rem 0 0;
    color: var(--koralle);
    font-size: 1.6rem;
    font-weight: 800;
}


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

/* Das Foto steht unter den Kontaktdaten, damit diese sofort zu sehen sind */
.kontaktdaten .bild {
    margin-top: 1.6rem;
}

.kontaktdaten .kontaktzeile:first-child {
    padding-top: 0;
    border-top: 0;
}

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

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

.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-dunkel);
    color: var(--tinte);
    font: inherit;
}

.feld textarea {
    resize: vertical;
}

.feld input:focus,
.feld textarea:focus {
    border-color: var(--koralle);
    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(--koralle);
}

.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(--rot);
    background: #fbe9e7;
}

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


/* 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(--koralle);
}

.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(--koralle);
}

.einbettung-hinweis {
    max-width: 34rem;
    margin: 0;
    padding: 0.5rem 0.8rem;
    border-radius: var(--rund-klein);
    background: rgba(255, 255, 255, 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: linear-gradient(180deg, var(--papier-dunkel), var(--papier));
}

.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);
}

/* 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(30, 18, 14, 0.9);
}

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

/* Runde Knöpfe der Großansicht: Schließen und die beiden Pfeile */
.grossansicht button {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    padding: 0 0 0.15em;      /* rückt das Zeichen optisch in die Mitte */
    border: 0;
    border-radius: 50%;
    background: var(--weiss);
    color: var(--tinte);
    font: inherit;
    font-size: 1.8rem;
    line-height: 1;
    box-shadow: var(--schatten-stark);
    cursor: pointer;
}

.grossansicht button:hover {
    background: var(--sonne);
}

.grossansicht-schliessen {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* Die Pfeile stehen links und rechts in der Mitte des Bildschirms */
.grossansicht-pfeil {
    position: fixed;
    top: 50%;
    translate: 0 -50%;
}

.grossansicht-zurueck { left: 0.75rem; }
.grossansicht-weiter  { right: 0.75rem; }

/* --- 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(--koralle);
    border-radius: var(--rund);
    background: var(--weiss);
    box-shadow: var(--schatten);
}

.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: #f3e7df;
}

/* 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: #f3e7df;
}

.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;
}

.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(243, 231, 223, 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;
    }
}

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

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

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