/*
Theme Name: Die Osteopathen
Theme URI: https://die-osteopathen.com
Author: Praxis Die Osteopathen
Description: Block-Theme für die Praxis Die Osteopathen in Fürstenberg/Havel. Kühle Sommertyp-Farbwelt aus Rauchblau, Salbei und Lavendel, gebaut auf WCAG 2.2 AA, ohne externe Ressourcen.
Version: 1.5.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: die-osteopathen
Tags: block-theme, full-site-editing, one-column, accessibility-ready
*/

/* Grundlagen, die theme.json nicht abbildet */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Sichtbarer Fokus – Pflicht für WCAG 2.2 */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2.5px solid var(--wp--preset--color--rauchblau);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Überschriften ruhiger umbrechen */
h1, h2, h3, .wp-block-heading { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Mindestgröße für Klickziele (WCAG 2.2, 2.5.8) */
.wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }

/* Klickziele im Fußbereich: WCAG 2.2 verlangt mindestens 24 px Höhe */
.wp-block-site-footer a,
footer .wp-block-list li a,
footer .wp-block-paragraph a {
  display: inline-block;
  padding-block: 4px;
}
footer .wp-block-list li { margin-bottom: .15em; }

/* Bilder nie über den Rand */
img, video { max-width: 100%; height: auto; }

/* Tabellen horizontal scrollbar statt Seite verschieben */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { min-width: 32rem; }
.wp-block-table th {
  font-family: var(--wp--preset--font-family--ui);
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--schiefer-hell);
  background: var(--wp--preset--color--nebel);
}
.wp-block-table td, .wp-block-table th {
  border-bottom: 1px solid var(--wp--preset--color--linie);
  padding: .85rem 1rem;
  vertical-align: top;
}
.wp-block-table tr:last-child td { border-bottom: 0; }
.wp-block-table td.preis { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* Aufklappbare Fragen */
.wp-block-details {
  border-bottom: 1px solid var(--wp--preset--color--linie);
  padding: 0;
}
.wp-block-details summary {
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-weight: 600;
  font-size: 1.08rem;
  list-style: none;
  min-height: 44px;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: "+";
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--wp--preset--color--rauchblau);
}
.wp-block-details[open] summary::after { content: "\2013"; }
.wp-block-details > *:not(summary) { padding: 0 2.5rem 1.25rem 0; color: var(--wp--preset--color--schiefer-hell); }

/* Blockstil: Karte mit Haarlinie statt Schatten */
.is-style-karte {
  background: var(--wp--preset--color--weiss);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: 10px;
  padding: 1.5rem;
}

/* Blockstil: Antwortblock – die zitierfähige Kurzantwort oben auf jeder Seite */
.is-style-antwort {
  background: var(--wp--preset--color--nebelblau);
  border-radius: 16px;
  padding: 1.6rem 1.75rem;
}
.is-style-antwort p { font-size: 1.1rem; margin-bottom: .7rem; }
.is-style-antwort p:last-child { margin-bottom: 0; }

/* Blockstil: Kleines Label über einer Überschrift */
.is-style-kicker {
  font-family: var(--wp--preset--font-family--ui);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--rauchblau);
  margin-bottom: .35rem;
}

/* ---------------------------------------------------------------
   Mouseover-Verhalten
   Grundsatz: Beim Zeigen wird ein Element deutlicher, nie schwächer.
   Ein Link, der beim Zeigen seine Unterstreichung verliert, sieht
   aus wie ein Fehler. Stattdessen wird die Linie dicker und die
   Farbe dunkler.
   --------------------------------------------------------------- */

/* Fließtext-Links */
.wp-block-post-content a:not(.wp-element-button),
.entry-content a:not(.wp-element-button),
.is-style-antwort a:not(.wp-element-button),
footer a:not(.wp-element-button),
.wp-block-list a:not(.wp-element-button) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color .15s ease, text-decoration-color .15s ease, text-decoration-thickness .15s ease;
}
.wp-block-post-content a:not(.wp-element-button):hover,
.entry-content a:not(.wp-element-button):hover,
.is-style-antwort a:not(.wp-element-button):hover,
footer a:not(.wp-element-button):hover,
.wp-block-list a:not(.wp-element-button):hover {
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* Navigation: ohne Linie, beim Zeigen mit */
.wp-block-navigation a:where(:not(.wp-element-button)) {
  text-decoration: none;
  transition: color .15s ease;
}
.wp-block-navigation a:where(:not(.wp-element-button)):hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  color: var(--wp--preset--color--schiefer);
}

/* Schaltflächen.
   Die Fliesstext-Regeln oben schliessen .wp-element-button aus —
   sonst gewinnen sie durch hoehere Spezifitaet und der Farbwechsel
   wird gar nicht animiert. Genau das war der Grund, warum der Hover
   hart umsprang statt zu gleiten. */
.wp-block-button__link {
  transition:
    background-color .26s cubic-bezier(.2,.7,.2,1),
    border-color     .26s cubic-bezier(.2,.7,.2,1),
    color            .26s cubic-bezier(.2,.7,.2,1),
    box-shadow       .26s cubic-bezier(.2,.7,.2,1),
    transform        .26s cubic-bezier(.2,.7,.2,1);
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(35,43,56,.45);
}
.wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(35,43,56,.06);
}

/* Umrissknopf: hatte bisher gar keinen Hover, weil der Umrissstil
   den Hintergrund aus theme.json ueberschreibt. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  border-color: var(--wp--preset--color--linie);
  color: var(--wp--preset--color--schiefer);
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
  border-color: var(--wp--preset--color--rauchblau);
  background-color: var(--wp--preset--color--nebelblau);
  color: var(--wp--preset--color--schiefer);
}

/* Aufklappbare Fragen: die ganze Zeile reagiert, nicht nur der Text */
.wp-block-details summary {
  transition: color .15s ease;
}
.wp-block-details summary:hover { color: var(--wp--preset--color--rauchblau-tief); }
.wp-block-details summary::after { transition: color .15s ease, transform .15s ease; }
.wp-block-details summary:hover::after { color: var(--wp--preset--color--schiefer); }

/* Karten sind nicht anklickbar – sie bekommen bewusst keinen Hover */

@media (hover: none) {
  /* Touchgeräte: keine hängenbleibenden Hover-Zustände */
  .wp-block-navigation a:where(:not(.wp-element-button)):hover { text-decoration: none; }
}

/* ---------------------------------------------------------------
   Bewegung
   Drei Dinge, mehr nicht: Wellen hinter dem Aufmacher, Abschnitte
   die beim Scrollen auftauchen, und Karten mit Leben.
   Alles darunter respektiert prefers-reduced-motion (siehe oben,
   Zeile 19) — dort werden sämtliche Übergänge stillgelegt.
   --------------------------------------------------------------- */

/* Wellenfläche im Aufmacher.
   Die Mindesthöhe gibt den Wellen Raum — ohne sie wäre der
   einspaltige Aufmacher zu flach, und die Animation liefe
   fast unsichtbar am unteren Rand. */
.hat-wellen {
  position: relative;
  overflow: hidden;
  min-height: clamp(24rem, 48vh, 33rem);
}
.hat-wellen > .wellen-flaeche {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.hat-wellen > *:not(.wellen-flaeche) { position: relative; z-index: 1; }

/* Auftauchen beim Scrollen.
   Wichtig: Das Verstecken haengt an der Klasse .bewegung, die ein
   winziges Inline-Skript im Kopfbereich setzt. Laedt oder scheitert
   JavaScript, fehlt die Klasse und alles ist von Anfang an sichtbar.
   Kein Zustand, in dem Inhalt unsichtbar haengenbleibt. */
.bewegung :where(.auf, .schritt, .symptomkarte) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.bewegung :where(.auf, .schritt, .symptomkarte).sichtbar {
  opacity: 1; transform: none;
}
.bewegung .auf.v1, .bewegung .schritt:nth-child(2), .bewegung .symptomkarte:nth-child(2) { transition-delay: .07s; }
.bewegung .auf.v2, .bewegung .schritt:nth-child(3), .bewegung .symptomkarte:nth-child(3) { transition-delay: .14s; }
.bewegung .auf.v3, .bewegung .schritt:nth-child(4), .bewegung .symptomkarte:nth-child(4) { transition-delay: .21s; }
.bewegung .symptomkarte:nth-child(5) { transition-delay: .28s; }
.bewegung .symptomkarte:nth-child(6) { transition-delay: .35s; }

/* Ablauf: die vier Schritte */
.schritt {
  background: var(--wp--preset--color--weiss);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: 14px;
  padding: 1.6rem 1.4rem 1.35rem;
  position: relative; overflow: hidden;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1),
              transform .7s cubic-bezier(.2,.7,.2,1),
              box-shadow .22s ease;
}
.schritt:hover { box-shadow: 0 4px 22px -8px rgba(35,43,56,.18); }
.schritt .schrittzahl {
  position: absolute; right: .85rem; top: .1rem;
  font-family: var(--wp--preset--font-family--serif);
  font-size: 3.8rem; line-height: 1;
  color: var(--wp--preset--color--nebel);
  z-index: 0; pointer-events: none; user-select: none;
}
.schritt > *:not(.schrittzahl) { position: relative; z-index: 1; }
.schritt .balken {
  height: 3px; border-radius: 2px; margin-top: 1.15rem;
  background: var(--wp--preset--color--linie); overflow: hidden;
}
.schritt .balken::after {
  content: ""; display: block; height: 100%; width: 0;
  background: var(--wp--preset--color--rauchblau);
  transition: width .8s cubic-bezier(.2,.7,.2,1) .15s;
}
.schritt.sichtbar .balken::after,
html:not(.bewegung) .schritt .balken::after { width: 100%; }

/* Symptomkarten */
.symptomkarte {
  display: block; text-decoration: none;
  background: var(--wp--preset--color--weiss);
  border: 1px solid var(--wp--preset--color--linie);
  border-radius: 14px;
  padding: 1.15rem 1.3rem;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1),
              transform .7s cubic-bezier(.2,.7,.2,1),
              box-shadow .22s ease, border-color .22s ease;
}
.symptomkarte:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(35,43,56,.32);
  border-color: var(--wp--preset--color--rauchblau);
}
.symptomkarte .name {
  display: block; font-weight: 600; font-size: 1.02rem;
  color: var(--wp--preset--color--schiefer);
  line-height: 1.3; margin-bottom: .2rem;
}
.symptomkarte .dazu {
  display: block; font-size: .86rem; line-height: 1.5;
  color: var(--wp--preset--color--schiefer-hell);
}
.symptomkarte .pfeil {
  float: right; margin-left: .6rem;
  color: var(--wp--preset--color--rauchblau);
  font-size: 1.15rem; line-height: 1.4;
  transition: transform .22s ease;
}
.symptomkarte:hover .pfeil { transform: translateX(4px); }
.symptomkarte:focus-visible { outline-offset: 4px; }

.symptomgitter {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 1rem;
}

/* Wortmarke */
.site-wortmarke { line-height: 1.1; }
.site-wortmarke .punkt { color: var(--wp--preset--color--rauchblau); }

/* Praxis-Signet im Header */
.praxis-logo { flex-wrap: nowrap; }
.praxis-signet { display: flex; align-items: center; flex: 0 0 auto; }
.praxis-signet svg { display: block; width: auto; height: clamp(34px, 6vw, 46px); }
@media (max-width: 480px) {
  .praxis-logo { gap: 10px; }
}