/*
Theme Name:  ERGO POINT
Theme URI:   https://ergo-point.de
Author:      Stephanie Meurer
Description: Custom-Theme fuer die Fachpraxis ERGO POINT (Ergotherapie & Sporttherapie, Grevesmuehlen). Onepager mit Hero, Leistungen, Team, Praxis und Kontaktformular. Alle Bilder und Schriften sind direkt eingebettet - keine externen Server, keine Cookies, DSGVO-freundlich.
Version:     1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:     Alle Rechte vorbehalten
Text Domain: ergo-point
*/

/* ===================================================================
   WICHTIGER HINWEIS

   Das eigentliche Design der Seite (Farben, Schriften, Layout,
   Animationen) steht NICHT in dieser Datei, sondern direkt im
   <style>-Block in der header.php - genau so wie in der urspruenglichen
   index.html. Das hat zwei Gruende:

     1. Das Layout bleibt zu 100 % identisch zur Vorlage.
     2. Die Schriften (Cormorant Garamond, DM Sans) sind als
        Base64-Daten eingebettet und laden dadurch sofort mit,
        ohne zusaetzlichen Serveraufruf.

   Diese Datei braucht WordPress trotzdem: ohne style.css mit dem
   Kommentarblock oben erkennt WordPress den Ordner nicht als Theme
   und man kann es nicht aktivieren.

   Unten stehen nur ergaenzende Regeln fuer normale WordPress-Seiten
   und -Beitraege (index.php). Die Startseite braucht sie nicht.
   =================================================================== */


/* -------------------------------------------------------------------
   Teamfoto: hier steht mit Absicht KEINE Regel mehr

   Frueher stand hier ".team-photo-main img { height: auto; }". Das war
   richtig, solange das Layout dem Bild keine Hoehe vorgab - dann haette
   sonst das height-Attribut aus der Mediathek als feste Hoehe gewirkt.

   Seit der Ueberarbeitung nimmt der Bildkasten die Hoehe der Textspalte an
   (align-items: stretch), und das Bild fuellt ihn per object-fit: cover.
   Verzerren kann dabei nichts mehr - dafuer sorgt cover.

   Diese Datei wird NACH dem eingebetteten Style-Block der header.php
   geladen. Bei gleicher Spezifitaet gewinnt sie also. "height: auto" hat
   das Bild deshalb wieder auf seine natuerliche Hoehe zurueckgesetzt: Der
   Kasten war 1214 px hoch, das Bild nur 577 px - darunter blieb Weissraum,
   und Bild und Text schlossen nicht mehr buendig ab.

   Merksatz: Regeln fuer die Startseite gehoeren in die header.php.
   Was hier steht, ueberstimmt sie im Zweifel.
   ------------------------------------------------------------------- */


/* -------------------------------------------------------------------
   Sprunglink zum Inhalt

   Erste Station beim Durchtabben und für Screenreader. Normalerweise
   unsichtbar, wird aber sichtbar, sobald er den Tastaturfokus bekommt.
   ------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9500;
    padding: 14px 22px;
    background: var(--gold);
    color: var(--petrol-dk);
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-decoration: none;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    outline: 2px solid var(--petrol-dk);
    outline-offset: 2px;
}


/* -------------------------------------------------------------------
   Admin-Leiste: Kopfzeile nicht darunter schieben

   Die Kopfzeile der Seite klebt beim Scrollen oben fest
   (position: sticky, top: 0). Wenn man als Redakteur eingeloggt ist,
   liegt dort aber die schwarze WordPress-Leiste (32 Pixel hoch) und
   verdeckt sie. Diese Regel rueckt die Kopfzeile dann nach unten.

   Besucher der Seite sehen keinen Unterschied - ohne Login setzt
   WordPress die Klasse "admin-bar" nicht.

   Unter 783 Pixel Breite scrollt die WordPress-Leiste mit weg,
   dort ist keine Korrektur noetig.
   ------------------------------------------------------------------- */

@media screen and (min-width: 783px) {
    body.admin-bar header {
        top: 32px;
    }
}


/* -------------------------------------------------------------------
   Unterseite Mikrostromtherapie (template-mikrostrom.php)

   WICHTIG: Alle Klassen hier tragen das Praefix "mikroseite-". Diese Datei
   wird NACH dem <style>-Block der header.php geladen und wuerde bei gleichem
   Selektor gewinnen. Genau daran ist schon einmal das Teamfoto gescheitert.
   Deshalb: nichts wiederverwenden, was oben schon belegt ist.

   Was bewusst wiederverwendet wird, bleibt unveraendert: .section-eyebrow,
   .faq-liste, .faq-item, .faq-antwort, .btn-primary, .kontakt-link. Die
   Aufklapper sehen damit genauso aus wie auf der Startseite.
   ------------------------------------------------------------------- */

.mikroseite-kopf {
    background: var(--white);
    padding: 130px 60px 0;
    max-width: 1400px;
    margin: 0 auto;
}

.mikroseite-titel {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 24px;
}

.mikroseite-lead {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--ink-soft);
    max-width: 760px;
    margin: 0;
}

.mikroseite-bild {
    max-width: 1400px;
    margin: 56px auto 0;
    padding: 0 60px;
}

.mikroseite-bild img {
    width: 100%;
    max-width: 900px;
    height: auto;
    display: block;
    border-radius: 3px;
}

.mikroseite-fragen {
    background: var(--white);
    padding: 64px 60px 90px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Auf der Startseite steht die Fragenliste unter einer Überschrift und
   braucht deshalb 52 px Abstand nach oben. Hier steht sie unter der
   Einleitung, und die Abstände addieren sich auf 116 px. Zusammengesetzter
   Selektor, damit die Regel der header.php unangetastet bleibt. */
.mikroseite-fragen .faq-liste {
    margin-top: 0;
}

/* Abschluss auf Creme, damit die Seite nicht im Weissen ausläuft. */
.mikroseite-schluss {
    background: var(--cream);
    padding: 72px 60px;
}

.mikroseite-schluss-text {
    font-family: "Cormorant Garamond", serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
    color: var(--ink);
    max-width: 700px;
    margin: 0 auto 32px;
    text-align: center;
}

.mikroseite-aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    max-width: 900px;
    margin: 0 auto;
}

.mikroseite-zurueck {
    text-align: center;
    margin: 40px 0 0;
    font-size: 15px;
}

/* Steht allein in seiner Zeile und ist damit kein Link im Fliesstext -
   die Ausnahme fuer kleine Textlinks gilt hier nicht. Gemessen waren
   23 px Hoehe, gefordert sind mindestens 24, bequem sind 44. */
.mikroseite-zurueck a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid rgba(1,51,62,0.25);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
}

.mikroseite-zurueck a:hover {
    color: var(--petrol);
    border-bottom-color: var(--petrol);
}

@media (max-width: 768px) {
    .mikroseite-kopf { padding: 96px 20px 0; }
    .mikroseite-lead { font-size: 18px; }
    .mikroseite-bild { padding: 0 20px; margin-top: 36px; }
    .mikroseite-fragen { padding: 44px 20px 64px; }
    .mikroseite-schluss { padding: 52px 20px; }
    .mikroseite-schluss-text { font-size: 22px; text-align: left; }
    .mikroseite-aktionen { justify-content: flex-start; gap: 18px; }
    .mikroseite-zurueck { text-align: left; }
}


/* -------------------------------------------------------------------
   Darstellung normaler Seiten und Beitraege (index.php)
   ------------------------------------------------------------------- */

.wp-inhalt {
    padding: 140px 40px 120px;
    max-width: 820px;
    margin: 0 auto;
    background: var(--white);
}

.wp-inhalt .wp-inhalt-titel {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 300;
    line-height: 1.15;
    color: var(--petrol);
    margin-bottom: 32px;
}

.wp-inhalt-text {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink-soft);
}

.wp-inhalt-text h2,
.wp-inhalt-text h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    color: var(--petrol);
    margin: 40px 0 14px;
}

.wp-inhalt-text h2 { font-size: 30px; }
.wp-inhalt-text h3 { font-size: 23px; }

.wp-inhalt-text p,
.wp-inhalt-text ul,
.wp-inhalt-text ol {
    margin-bottom: 20px;
}

.wp-inhalt-text ul,
.wp-inhalt-text ol {
    padding-left: 24px;
}

.wp-inhalt-text li {
    margin-bottom: 8px;
}

.wp-inhalt-text a {
    color: var(--petrol);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 3px;
}

.wp-inhalt-text a:hover {
    color: var(--gold);
}

.wp-inhalt-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 32px 0;
}

.wp-inhalt-text blockquote {
    border-left: 2px solid var(--gold);
    padding-left: 22px;
    margin: 32px 0;
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    font-style: italic;
    color: var(--petrol);
}

.wp-inhalt-zurueck {
    display: inline-block;
    margin-top: 40px;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
}

.wp-inhalt-zurueck:hover {
    color: var(--petrol);
}

/* Blog-Uebersicht: mehrere Beitraege untereinander */
.wp-inhalt-eintrag + .wp-inhalt-eintrag {
    margin-top: 72px;
    padding-top: 72px;
    border-top: 1px solid var(--cream-dk);
}

.wp-inhalt-datum {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
}

@media (max-width: 700px) {
    .wp-inhalt { padding: 110px 22px 80px; }
}


/* -------------------------------------------------------------------
   Mikrostromtherapie-Abschnitt der Startseite: hier mit Absicht NICHTS

   Die Regeln fuer #mikrostrom und .mikro-* standen hier UND im
   <style>-Block der header.php - wortgleich, aber doppelt. Da diese Datei
   spaeter geladen wird, hat sie die Regeln aus der header.php ueberstimmt.
   Solange beide gleich sind, faellt das nicht auf. Sobald jemand nur die
   eine Stelle aendert, wird die Aenderung unsichtbar - genau so ist beim
   Teamfoto ein halber Vormittag verlorengegangen.

   Einzige Quelle fuer das Design der Startseite ist die lokale index.html;
   daraus entsteht der <style>-Block der header.php. Hier gehoeren nur
   Regeln hin, die es dort NICHT gibt - erkennbar am Praefix "mikroseite-"
   fuer die Unterseite und "wp-inhalt-" fuer normale WordPress-Seiten.
   ------------------------------------------------------------------- */