/* ==========================================================================
   main.css — Grundgerüst und Inhalte
   Naturheilpraxis Pusteblume · Contao 5.7
   Stand: 2026-11-03

   Ersetzt: Standard.css, naviControl-1-Mobile.css (Inhaltsteil),
            naviControl-2.css (Inhaltsteil), naviControl-4.css (Inhaltsteil)

   Ladereihenfolge: font.css, main.css, navigation.css

   Dateiverweise sind absolut ab Dokumentwurzel (/files/...), damit der
   Ablageort der CSS-Dateien keine Rolle spielt.

   Mobile First: Die ungequerten Regeln gelten für Smartphones. Darüber wird
   mit nach oben offenen Breakpoints erweitert — anders als bisher, wo vier
   Dateien geschlossene Bereiche abdeckten und oberhalb von 1366 px keine
   davon mehr griff.

   AUFBAU
    1. VARIABLEN
    2. BASIS
    3. TYPOGRAFIE
    4. LAYOUT UND WRAPPER
    5. ARTIKEL UND INHALTSSPALTEN
    6. LISTEN
    7. KACHELN
    8. RECHTE SPALTE UND INFOBOXEN
    9. GALERIE UND SLIDER
   10. AKKORDEON
   11. FORMULARE
   12. FOOTER
   13. BREAKPOINT 500
   14. BREAKPOINT 768
   15. BREAKPOINT 1100
   16. RESERVE
   ========================================================================== */


/* ==========================================================================
   1. VARIABLEN
   ========================================================================== */

:root {
    /* Farben. Vorher lagen zwölf Hexwerte verstreut in den Dateien,
       darunter die leicht verwechselbaren Orangetöne f7ac00 und f47c00. */
    --farbe-primaer:      #f47c00;   /* Überschriften-Orange */
    --farbe-akzent:       #f7ac00;   /* Flächen-Orange, Telefon, Buttons */
    --farbe-logo:         #8a7031;   /* Gold-Braun für Logo und Praxisname */
    --farbe-text:         #333;
    --farbe-link:         #878787;
    --farbe-meta:         #4d4d4b;
    --farbe-seite:        #ede6d8;   /* Seitenhintergrund */
    --farbe-kopf:         rgba(251, 246, 242, .95);
    --farbe-kopfleiste:   #efe0bf;
    --farbe-leiste:       #f5f7fa;   /* ehem. mobile Leiste, derzeit ungenutzt:
                                        mobil und Desktop nutzen jetzt beide
                                        --farbe-kopfleiste */
    --farbe-navi:         #faf5f1;
    --farbe-rahmen:       #e7e3d6;   /* zugleich Footer-Hintergrund */
    --farbe-rahmen-hell:  #ddd;
    --farbe-box:          #fbf6f3;
    --farbe-fehler:       #ed0707;

    --schrift-text:       'Muli', 'Segoe UI', Tahoma, sans-serif;
    --schrift-icon:       'Font Awesome 5 Free';

    /* Layoutbreite. Steht bewusst NUR hier und nicht zusätzlich in der
       Breiteneinstellung des Seitenlayouts — doppelt gepflegte Werte laufen
       auseinander. Das Breitenfeld im Layout bleibt leer. */
    --layout-breite: 100%;
    --layout-max: none;
}


/* ==========================================================================
   2. BASIS
   ========================================================================== */

html {
    min-height: 100%;
}

body {
    background-color: var(--farbe-seite);
    color: var(--farbe-text);
    font-family: var(--schrift-text);
}

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

.center {
    text-align: center;
}

.mb1 {
    margin-bottom: 1rem;
}


/* ==========================================================================
   3. TYPOGRAFIE
   ========================================================================== */

p {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: normal;
    word-spacing: .05rem;
    text-align: justify;
}

a {
    color: var(--farbe-link);
    font-size: 1rem;
    text-decoration: none;
}

h1,
h2.start {
    margin-top: 0;
    margin-bottom: 3rem;
    color: var(--farbe-primaer);
    font-size: 1.5rem;
    letter-spacing: .05rem;
    font-weight: 600;
}

h2 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    line-height: 1.4rem;
}

h3 {
    font-size: 1.1rem;
    line-height: 1.3rem;
    font-weight: bold;
}

h4 {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
}

ul li {
    font-size: 1rem;
    line-height: 1.5rem;
}

p.willkomm {
    flex-direction: column;
}

/* Telefon-Icon */
.phone::before {
    font-family: var(--schrift-icon);
    font-weight: 900;
    content: '\f098';
    font-style: normal;
    text-decoration: inherit;
}


/* ==========================================================================
   4. LAYOUT UND WRAPPER
   ========================================================================== */

#wrapper {
    width: var(--layout-breite);
    max-width: var(--layout-max);
    margin: 0 auto;
}

#main {
    background-color: #fff;
}


/* ==========================================================================
   5. ARTIKEL UND INHALTSSPALTEN
   ========================================================================== */

.mod_article {
    margin: 0;
    padding: 2rem;
}

.mod_article ul {
    padding-left: 1rem;
    font-size: 1.2rem;
    line-height: 1.5rem;
    list-style-type: square;
}

/* Zweispaltiges Seitenlayout (eigene Divs, nicht Contaos Layoutspalten) */
.zweispaltig {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2vw;
}

.zweispaltig p {
    padding-right: 0;
}

.left  { flex: 3; }
.right { flex: 1; width: 100%; }

.text-2col { display: flex; }
.flex1 { flex: 1; }
.flex2 { flex: 2; }

/* Bild neben Absatz */
.bild-rechts {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bottom {
    position: absolute;
    bottom: 0;
}


/* ==========================================================================
   6. LISTEN
   ========================================================================== */

/* Auf Mobilgeräten ein Viereck statt der Pusteblumen-Grafik —
   die wäre bei dieser Schriftgröße nicht mehr erkennbar. */
.liste ul li {
    margin-bottom: .5rem;
    font-size: 1rem;
    line-height: 1.2rem;
    list-style-type: none;
    background-image: none;
}

.liste ul li::before {
    display: inline-block;
    width: 3rem;
    margin-left: -3rem;
    color: var(--farbe-logo);
    font-size: .8rem;
    content: '\25A0';
}

.liste-start {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1rem;
    margin-left: 0;
}

.liste-start ul li {
    font-size: 1rem;
    line-height: 2rem;
    list-style-type: none;
    padding-left: 2rem;
    background-image: url('/files/Inhalt-Bilder/li-puste.png');
    background-repeat: no-repeat;
    background-position: left center;
}

/* Seite Ozon */
.liste-bild {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-around;
    font-size: 1rem;
    line-height: 2rem;
}


/* ==========================================================================
   7. KACHELN
   ========================================================================== */

/* Contao 5 legt die Ausgabe von Textelementen zusätzlich in
   <div class="rte">. Dadurch steckt zwischen .therapie-kacheln und den
   Kacheln ein weiterer Kasten — ein Flex- oder Grid-Layout auf dem
   äußeren Element greift also ins Leere und die Kacheln stapeln sich.
   Deshalb sitzt das Spaltenlayout hier auf .rte, nicht auf dem Container.
   Auf Mobilgeräten bleibt es beim Stapeln, das ist dort richtig. */
.therapie-kacheln {
    display: block;
    margin-bottom: 2rem;
}

.tk-inhalt {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1rem;
    align-content: flex-end;
}

.therapie-kacheln h3,
.therapie-kacheln a {
    font-size: 1rem;
    line-height: 1.2rem;
    text-transform: uppercase;
    font-weight: 600;
}

.therapie-kacheln h3 {
    color: var(--farbe-primaer);
    letter-spacing: .06rem;
}

.therapie-kacheln a {
    padding: .3rem;
    background-color: var(--farbe-akzent);
    border: 1px solid rgba(138, 112, 49, .2);
    color: #fff;
    letter-spacing: .1rem;
}

.therapie-kacheln p {
    font-size: 1rem;
    line-height: 1.3rem;
}

.therapie-kacheln img {
    width: 90%;
}

.therapie-kacheln div.text {
    width: 100%;
    padding-left: 0;
}


/* ==========================================================================
   8. RECHTE SPALTE UND INFOBOXEN
   ========================================================================== */

.right h4 {
    margin-top: 0;
    padding: .5rem;
    background-color: var(--farbe-akzent);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.right h5 {
    margin-top: 0;
    padding: .5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.right a,
.right p {
    padding: .5rem 1rem;
    color: var(--farbe-text);
    font-size: 1rem;
    line-height: 1.5rem;
}

.right p { font-weight: 300; }
.right a { font-weight: 600; }

/* Download-Icon */
.right a.dl::before {
    margin-right: .5rem;
    margin-left: -1rem;
    font-family: var(--schrift-icon);
    font-weight: 900;
    font-size: 1rem;
    content: '\f019';
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
}

/* Link-Icon */
.right a.hyperlink_txt::before {
    margin-right: .5rem;
    font-family: var(--schrift-icon);
    font-weight: 900;
    font-size: 1rem;
    content: '\f2f5';
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
}

.infobox h4 {
    margin-top: 0;
    margin-bottom: 0;
    padding: .5rem;
    background-color: var(--farbe-akzent);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.box {
    margin-bottom: 1rem;
    padding: .5rem;
    background-color: var(--farbe-box);
}


/* ==========================================================================
   9. GALERIE UND SLIDER
   ========================================================================== */

.galerie ul li {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    list-style-type: none;
}

.galerie img {
    padding: .2rem;
    border: 1px solid var(--farbe-akzent);
    border-radius: .2rem;
}

/* Header-Slider (Swiper). Das Seitenverhältnis entspricht den
   Bildern mit 1400 x 400 px, die Optik bleibt dadurch wie gewohnt. */
.header-swiper {
    width: 100%;
    aspect-ratio: 1400 / 400;
    overflow: hidden;
}

.header-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video-Einbettungen mitskalieren.
   Contao bringt dafür eigentlich .aspect--16:9 mit (responsive.css) —
   das greift aber nur, wenn im Inhaltselement ein Seitenverhältnis
   gewählt ist. Diese Regel ist das Netz für Einbettungen ohne diese
   Angabe: ohne sie zieht ein iframe mit width="640" die linke Spalte
   auf 640 px, und weil mmenu am body overflow-x: hidden setzt, wird
   der Überhang auf Mobilgeräten abgeschnitten statt scrollbar.
   Bewusst auf Element-Ebene notiert (niedrigste Spezifität): sobald
   im Inhaltselement ein Seitenverhältnis gesetzt ist, gewinnt Contaos
   .aspect iframe und diese Regel tritt zurück. */
iframe,
object,
embed {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

video {
    max-width: 100%;
    height: auto;
}


/* ==========================================================================
   10. AKKORDEON
   ========================================================================== */

details {
    margin-bottom: 1em;
}

/* Contaos reset.css setzt am body font: 12px/1. Absätze und Listen
   bringen eine eigene Größe mit, summary nicht — ohne diese Regel
   stünde die Aufklappzeile in 12 px bei Zeilenhöhe 1 da (auf der
   alten Seite war das ebenso). */
summary {
    padding-left: .5em;
    font-size: 1rem;
    line-height: 1.4;
}

summary:focus {
    outline: none;
}

summary:focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 2px;
}

details[open] summary {
    margin-bottom: 1em;
    padding: .5rem;
    background-color: var(--farbe-akzent);
    color: #fff;
}


/* ==========================================================================
   11. FORMULARE
   ========================================================================== */

.formbody fieldset {
    width: 100%;
}

.formbody fieldset div.widget.widget-explanation.explanation p {
    margin-bottom: 5px;
}

form button,
input[type="submit"],
input[type="text"],
.button {
    font-size: 1rem;
}

.error {
    color: var(--farbe-fehler);
    font-size: .8rem;
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 1rem;
    padding-left: 1rem;
    background-color: var(--farbe-rahmen);
}

.widget-explanation.explanation.footer-adresse {
    display: flex;
    justify-content: space-between;
}

.footer figcaption.caption,
.footer figcaption.caption a {
    color: var(--farbe-text);
    font-size: .9rem;
}

.kontakt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: .5rem;
    padding-right: .5rem;
    background-color: var(--farbe-rahmen);
}


/* ==========================================================================
   13. BREAKPOINT 500
   ========================================================================== */

@media (min-width: 500px) {

    .liste-start {
        margin-right: 1%;
        margin-left: 1%;
    }

    /* Ab hier wieder die Pusteblume als Aufzählungszeichen.
       Die Grenze bei 500 px entspricht der Original-Seite; darunter
       wäre die Grafik bei dieser Schriftgröße nicht mehr erkennbar. */
    .liste ul li {
        line-height: 1.5rem;
        padding-left: 2rem;
        background-image: url('/files/Inhalt-Bilder/li-puste.png');
        background-repeat: no-repeat;
        background-position: left center;
    }

    .liste ul li::before {
        content: none;
    }
}


/* ==========================================================================
   14. BREAKPOINT 768
   ========================================================================== */

@media (min-width: 768px) {

    p {
        line-height: 1.5rem;
        text-align: left;
    }

    h2 { font-size: 1.3rem; line-height: 1.5rem; }
    h3 { font-size: 1.1rem; }

    .mod_article {
        margin: 2rem;
        padding: 0;
    }

    .bild-rechts {
        flex-direction: row;
    }

    .liste-bild {
        flex-direction: row;
    }

    /* Kacheln in Spalten. Je Inhaltselement liegen drei Kacheln, zwei
       Elemente ergeben also zwei Reihen à drei Spalten. Die leeren
       Abstandsabsätze (&nbsp;) aus dem Editor würden als Rasterzellen
       mitzählen und die Reihen zerreißen — deshalb hier ausgeblendet.
       Sollte dort einmal ein echter Absatz stehen, muss diese Regel
       enger gefasst werden. */
    .therapie-kacheln > .rte {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        align-items: start;
    }

    .therapie-kacheln > .rte > p {
        display: none;
    }

    .tk-inhalt {
        width: auto;
        margin-bottom: 0;
    }

    .therapie-kacheln img {
        width: 100%;
    }

    /* Begrüßungstext mittig, wie auf der Live-Seite */
    p.willkomm {
        text-align: center;
    }

    .liste-start {
        flex-direction: row;
        justify-content: center;
    }

    .footer {
        flex-direction: row;
    }

    .kontakt {
        flex-direction: row;
        padding-left: 1rem;
        padding-right: 0;
    }

    .formbody fieldset {
        width: 90%;
    }
}


/* ==========================================================================
   15. BREAKPOINT 1100
   ==========================================================================
   Ab hier übernimmt die Desktop-Navigation (siehe navigation.css).
   Die Layoutbreite wird eingezogen und nach oben begrenzt: Ohne
   max-width wird der Wrapper auf großen Monitoren beliebig breit —
   bei 2560 px wären es rund 2300 px, was sich nicht mehr liest.
   1400 px ist die native Breite der Slider-Bilder, dadurch wird
   nie hochskaliert. */

@media (min-width: 1100px) {

    :root {
        --layout-breite: 90%;
        --layout-max: 1400px;
    }

    .zweispaltig {
        flex-direction: row;
    }

    .right {
        width: auto;
    }
}


/* ==========================================================================
   16. RESERVE
   ==========================================================================
   Nicht gelöscht, nur geparkt. Mit Datum, damit nachvollziehbar bleibt,
   wann und warum etwas hier gelandet ist.

   2026-11-03 — TELEFONNUMMER NICHT ANKLICKBAR. In Standard.css und
   naviControl-4 stand zweimal:
       .tel { pointer-events: none; cusor: default; text-decoration: none; }
   In beiden Fassungen mit dem Tippfehler "cusor" statt "cursor", die
   Cursor-Angabe verfiel also ohnehin. Wirksam war nur pointer-events.
   Auf der Live-Seite trägt der Link KEINE Klasse "tel", die Nummer ist
   dort anklickbar; in der neuen Datenbank trägt er sie, dort wäre sie es
   nicht — auch nicht auf dem Handy. Bei einer Praxis ist der Anruf die
   wichtigste Handlung, deshalb ist die Regel hier bewusst NICHT
   übernommen. Soll die Nummer auf dem Desktop kein Link sein, dann so:
       @media (min-width: 1100px) { .tel { pointer-events: none; cursor: default; } }

   2026-11-03 — HARTE ARTIKEL-IDs aus naviControl-1-Mobile. Brüchig,
   sobald ein Artikel neu angelegt wird. Die Abstände kommen jetzt aus
   ".mod_article". Nur zurückholen, falls diese beiden Artikel
   tatsächlich abweichen müssen.
       #article-39 { padding: 0 2rem 2rem 2rem; }
       #article-15 { padding: 0 2rem 0 2rem; }

   2026-11-03 — TOTE SELEKTOREN, am Objekt nachgezählt, treffen null
   Elemente. Contao 5 benennt die Klassen um und legt die Ausgabe von
   Textelementen zusätzlich in ein <div class="rte">.
       #header-zeile2.sticky.scrolling_active div.ce_text.first.last.block …
       figure.image_container img
       #logo > div:nth-child(1) > h1:nth-child(1)
       #logo > div:nth-child(1) > h2:nth-child(2)
       #header > div > div.header-zeile1        (Klasse statt ID)
       .slick-slide img                          (Slick ist ersetzt)

   2026-11-03 — SCHRIFTGRÖSSEN-ÜBERSTEUERUNG aus naviControl-4 für den
   Bereich 1225–1366 px. Durch die Mobile-First-Staffel überflüssig.
   ========================================================================== */