/* Gemeinsame Feinabstimmung fuer alle Seiten.
   Laedt bewusst als letztes Stylesheet, damit sie ohne !important
   gegen die seiteneigenen Regeln ankommt. */

.hero-scroll-cue {
  display: none;
}

@media (min-width: 901px) {
  .site-header .nav {
    gap: 34px;
    font-size: 17px !important;
  }

  .site-header .nav a,
  .site-header .nav-dropdown__toggle {
    font-size: 17px !important;
    font-weight: 700;
  }

  .site-header .btn,
  .header-inner > .btn,
  .md-hero-c__cta {
    min-height: 56px !important;
    padding: 0 30px !important;
    font-size: 16px !important;
  }

  .md-hero-c__lead {
    font-size: 28px !important;
  }

  .md-hero-c__art {
    left: 68% !important;
    width: min(580px, 38vw) !important;
    height: 88% !important;
  }

  .lead,
  .copy,
  .text-block p,
  .section-intro,
  .info-card p,
  .process-list p,
  .closing p,
  .axis-card p,
  .method-card p,
  .focus-card p,
  .story-card p,
  .um-lede p,
  .um-block p,
  .um-card p,
  .um-kicker p,
  .value-card p,
  .stat-card p,
  .spectrum-card p,
  .check-list li,
  .role p,
  .sit p,
  .step p,
  .proc-note,
  .vs-col dd,
  .why p,
  .three p,
  .faq-a,
  .sp p,
  .ab p,
  .ab-list li,
  .tm blockquote,
  .ce-body p,
  .kl-v p,
  .g-body {
    font-size: clamp(20.5px, 1.42vw, 24px) !important;
    line-height: 1.68 !important;
  }

  .section-intro,
  .hero-lead,
  .lead {
    font-size: clamp(24px, 1.85vw, 31px) !important;
    line-height: 1.5 !important;
  }

  .step p,
  .info-card p,
  .axis-card p,
  .role p,
  .sit p {
    font-size: 20.5px !important;
  }

  .hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 30px;
    z-index: 9;
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 1px solid rgba(38, 65, 99, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--md-blue, var(--blue, #264163));
    text-decoration: none;
    box-shadow: 0 14px 32px rgba(21, 36, 56, .14);
    transform: translateX(-50%);
    animation: hero-cue-float 2.3s ease-in-out infinite;
  }

  .hero-scroll-cue:hover {
    border-color: var(--md-gold, var(--gold, #d0a62b));
    background: var(--md-blue, var(--blue, #264163));
    color: var(--md-gold, var(--gold, #d0a62b));
    animation-play-state: paused;
  }

  .hero-scroll-cue svg {
    display: block;
    width: 22px;
    height: 22px;
  }
}

@keyframes hero-cue-float {
  0%, 100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, 7px);
  }
}

/* ---------------------------------------------------------------
   Site-wide robustness layer (applies to every page via this file)
   --------------------------------------------------------------- */

/* Visible keyboard focus. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--md-gold, var(--gold, #d0a62b));
  outline-offset: 3px;
}

/* Gradient-clipped text is invisible in Windows high-contrast mode. */
@media (forced-colors: active) {
  .blue-grad,
  .gold-grad,
  .cta-gradient-label,
  .h2-gold,
  .pk-kicker,
  .kl-cap span,
  .um-block h3,
  .md-hero-c__title span,
  .md-hero-c__title em {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText !important;
  }
}

/* Reduced motion, enforced on every page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: .001ms;
    animation-iteration-count: 1;
    transition-duration: .001ms;
  }
}

/* Decorative separator in the footer should not be announced. */
.footer-links a + a::before { speak: never; }

/* ===================================================================
   TYPOGRAFISCHES SYSTEM  —  08.11.2026
   EINE Grundgroesse waechst mit der Fensterbreite, alles andere ist
   ein festes Vielfaches davon. Dadurch koennen die Verhaeltnisse
   zwischen Ueberschrift und Text nicht mehr auseinanderlaufen.
   Gesamte Seite groesser oder kleiner: nur die Zahlen in der
   html-Regel aendern. Einzelne Stufe anpassen: ihren rem-Wert.
   Grundgroesse: 390px -> 10,5px | 1440px -> 15px | 3090px -> 22px
   =================================================================== */

html {
  font-size: clamp(10.5px, calc(0.42vw + 8.9px), 23px);
}

/* Stufe 1 — Kicker und Auszeichnungen (1.15x) */
.strang,
.eyebrow {
  font-size: 1.15rem !important;
  line-height: 1.3 !important;
}

/* Stufe 2 — Abschnittslabels (1.45x) */
.themen-head,
.pivot-intro,
.ce-kicker,
.role-link {
  font-size: 1.45rem !important;
}

/* Stufe 3 — Fliesstext (1.65x) */
.copy, .lead, .sp p, .ab p, .text-block p, .section-intro,
.closing p, .faq-a, .tm blockquote, .ce-body p, .g-body,
.um-lede p, .um-block p, .um-card p, .pivot-answer, .cta-inner p {
  font-size: 1.55rem !important;
  line-height: 1.62 !important;
}

/* Stufe 4 — Nebentext in Karten und Listen (1.5x) */
.role p, .sit p, .step p, .info-card p, .axis-card p,
.method-card p, .focus-card p, .story-card p, .value-card p,
.stat-card p, .spectrum-card p, .three p, .why p, .proc-note,
.process-list p, .vs-col dd, .kl-v p,
.iso-list li, .ab-list li, .check-list li {
  font-size: 1.5rem !important;
  line-height: 1.6 !important;
}

/* Stufe 5 — Zwischenueberschriften (1.9x) */
h3,
.kl-k {
  font-size: 1.9rem !important;
  line-height: 1.25 !important;
}
.kl-v strong {
  font-size: 1.8rem !important;
  line-height: 1.25 !important;
}
.vs-col h3, .ab h3, .step h3, .why h3 {
  font-size: 1.7rem !important;
}

/* Stufe 6 — Abschnittsueberschriften (2.9x) */
h2,
.h2-gold,
.ce-h {
  font-size: 2.9rem !important;
  line-height: 1.12 !important;
}

/* Stufe 7 — Displayzeilen (2.7x) */
.pivot .question {
  font-size: 2.7rem !important;
  line-height: 1.16 !important;
}

/* Kopfzeile: Hoehe, Logo und Schrift im selben Verhaeltnis */
@media (min-width: 1051px) {
  .header-inner {
    height: clamp(76px, 3.6vw, 116px) !important;
  }
  .brand img {
    height: clamp(38px, 1.8vw, 58px) !important;
  }
  .brand span {
    font-size: 1rem !important;
  }
  .site-header .nav,
  .site-header .nav-dropdown__toggle {
    gap: clamp(30px, 1.9vw, 58px);
  }
  .site-header .nav a,
  .site-header .nav-dropdown__toggle {
    font-size: 1rem !important;
  }
  .site-header .btn {
    font-size: .92rem !important;
    min-height: clamp(44px, 2.3vw, 72px) !important;
    padding: 0 clamp(20px, 1.4vw, 40px) !important;
  }
}

/* ===================================================================
   LAYOUT  —  08.11.2026
   =================================================================== */

/* Inhaltsbreite steht als Token in site.css */

/* Bild-Text-Bloecke: Bild groesser, Textspalte breiter */
@media (min-width: 901px) {
  /* Das Bild behaelt seine Groesse, die zusaetzliche Seitenbreite
     geht vollstaendig in die Textspalte. */
  .sp-split {
    grid-template-columns: minmax(0, clamp(300px, 32%, 760px)) minmax(0, 1fr) !important;
    gap: clamp(40px, 3.6vw, 96px);
  }
  .sp-figure {
    max-width: none !important;
    width: 100% !important;
  }
}

/* Kontaktleiste: groesser und raus aus dem Textbereich */
.contact-rail {
  right: clamp(22px, 5vw, 150px);
  gap: clamp(12px, .9vw, 20px);
}
.contact-rail a {
  width: clamp(62px, 3vw, 94px) !important;
  height: clamp(62px, 3vw, 94px) !important;
}
.contact-rail a svg {
  width: clamp(24px, 1.3vw, 40px) !important;
  height: clamp(24px, 1.3vw, 40px) !important;
}

/* Ueber mich: Foto bleibt beim Scrollen stehen, statt oben zu verschwinden */
@media (min-width: 981px) {
  .about-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
    gap: clamp(44px, 3.6vw, 96px);
    align-items: start;
  }
  .about-grid .photo-frame {
    position: sticky;
    top: clamp(100px, 7vw, 150px);
    align-self: start;
  }
}

/* ===================================================================
   NACHTRAEGE  —  08.11.2026
   =================================================================== */

/* Der Bild-Text-Block war nicht durch die Spalten begrenzt, sondern
   durch .pivot .center mit max-width:900px. */
@media (min-width: 901px) {
  .pivot .center {
    max-width: none !important;
  }
}

/* Grosses Zitat (Julian) und Quellenzeile */
.fb-quote {
  font-size: 1.9rem !important;
  line-height: 1.5 !important;
}
.fb-attr {
  font-size: .95rem !important;
}

/* FAQ-Fragen standen auf 21px gedeckelt, waehrend die Antwort darunter
   deutlich groesser war. */
.faq-q {
  font-size: 1.55rem !important;
}

/* Garantie-Kasten: die Schlusszeile ist die wichtigste und war die
   kleinste. Jetzt auf Fliesstextgroesse, Montserrat-Fett unterscheidet
   sie weiterhin vom Absatz darueber. */
.g-head {
  font-size: 1.9rem !important;
}
.g-why {
  font-size: 1.6rem !important;
  line-height: 1.5 !important;
}
.guarantee {
  max-width: 72ch !important;
}

/* ===================================================================
   TERMIN-SEITE  —  war beim Neuschreiben verlorengegangen
   =================================================================== */

body.booking-page .appointment-inner,
.appointment-inner {
  min-height: 0 !important;
  align-items: start;
  padding-top: clamp(40px, 4vw, 72px);
  padding-bottom: clamp(48px, 5vw, 96px) !important;
}

/* Buchungsfenster ist ein iframe - Schrift darin nur ueber zoom erreichbar */
@media (min-width: 901px) {
  .zeeg-inline-widget { zoom: 1.35; }
}
@media (min-width: 1500px) {
  .zeeg-inline-widget { zoom: 1.5; }
}
@media (min-width: 2200px) {
  .zeeg-inline-widget { zoom: 1.7; }
}

body.booking-page .zeeg-inline-widget,
.zeeg-inline-widget {
  min-height: 480px !important;
}
@media (max-width: 980px) {
  body.booking-page .zeeg-inline-widget,
  .zeeg-inline-widget {
    min-height: 700px !important;
  }
}

/* Eckdaten unter dem Einleitungstext */
.appt-facts {
  margin: clamp(32px, 3vw, 56px) 0 0;
  display: grid;
  gap: 22px;
  max-width: 44ch;
}
.appt-facts > div {
  display: grid;
  gap: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--md-line, #dde5ea);
}
.appt-facts dt {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-gold, #d0a62b);
}
.appt-facts dd {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--md-ink, #24313c);
}


/* Themenkarten: Innenabstaende waren fest in Pixel und dadurch bei
   grosser Schrift zu eng. Jetzt im selben Verhaeltnis wie die Typografie. */
/* max() haelt die bisherigen Werte als Untergrenze fest: auf dem Handy
   bleibt alles wie es war, nur auf grossen Schirmen waechst es mit. */
.sit-grid {
  gap: max(22px, 1.5rem);
}
.sit {
  padding: max(30px, 2rem) max(26px, 1.75rem) max(32px, 2.15rem);
}
.sit h3 {
  margin-bottom: max(12px, .8rem);
}
.themen-sec .sit-grid {
  margin-top: max(clamp(28px, 3vw, 38px), 1.9rem) !important;
}
/* Das Abschnittslabel stand auf festen 27px und ist als einziges
   nicht mitgewachsen. */
.themen-sec .themen-head {
  font-size: max(27px, 1.45rem) !important;
}


/* ===================================================================
   KORREKTUREN  —  08.11.2026, zweiter Durchgang
   =================================================================== */

/* --- Lange deutsche Komposita brechen statt ueberzulaufen --- */
h1, h2, .fb-quote {
  overflow-wrap: break-word;
}
/* Silbentrennung nur dort, wo die Spalte schmal ist. In Schlagzeilen
   erzeugt sie Brueche wie "Ex-perten". */
h3, .kl-k, .sit h3, .tm blockquote {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --- Kopfzeile: Navigation lief in den Schriftzug hinein --- */
@media (min-width: 1051px) {
  .header-inner {
    gap: max(24px, 1.4rem);
    flex-wrap: nowrap;
  }
  .brand {
    flex: 0 0 auto;
  }
  .brand span {
    white-space: nowrap;
  }
  /* nicht schrumpfbar: sonst laufen die Menuepunkte aus ihrem Kasten
     heraus und ueber den Schriftzug */
  .site-header .nav {
    flex: 0 0 auto;
    gap: max(26px, 1.15rem) !important;
    margin-right: max(20px, .9rem);
  }
  .site-header .nav a,
  .site-header .nav-dropdown__toggle {
    white-space: nowrap;
  }
  .site-header .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* --- Schaltflaechen: Groesse im System, und sie heben beim Zeigen ab --- */
.btn,
.md-hero-c__cta {
  transition: transform .22s ease, box-shadow .22s ease,
              background-color .22s ease, border-color .22s ease, color .22s ease;
}
.btn:hover,
.md-hero-c__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(21, 36, 56, .24);
}
.md-hero-c__cta {
  font-size: max(16px, 1.05rem) !important;
  padding: max(16px, .85rem) max(28px, 1.5rem) !important;
  min-height: max(52px, 2.6rem) !important;
}
.btn {
  font-size: max(14px, .95rem);
  min-height: max(52px, 2.6rem);
  padding: max(15px, .8rem) max(28px, 1.5rem);
}

/* --- Meine Klienten: Beschriftungsspalte war zu schmal --- */
@media (min-width: 761px) {
  .kl-row {
    grid-template-columns: minmax(300px, .34fr) 1fr !important;
  }
  .kl-k {
    min-width: 0;
  }
}

/* --- Stimmen: drei Spalten in der Inhaltsbreite waren zu eng.
       Dieser eine Abschnitt darf breiter als der Rest sein. --- */
@media (min-width: 1200px) {
  .tm-grid {
    gap: max(24px, 1.6rem);
  }
  .tm {
    padding: max(30px, 1.9rem) max(28px, 1.8rem) max(32px, 2rem);
  }
}


/* ===================================================================
   UNTERSEITEN INS SYSTEM HOLEN  —  08.11.2026
   Die Unterseiten benutzen eigene Klassennamen und waren deshalb
   von den Stufen oben nicht erfasst. Zuordnung nach derselben Logik.
   =================================================================== */

/* Fliesstext (Stufe 3) */
.text-block p,
.um-story p,
.um-focus-intro p,
.um-kicker-copy,
.rhythm-lead,
.topic p,
.choice p,
.axis-card p {
  font-size: 1.55rem !important;
  line-height: 1.62 !important;
}

/* Hervorhebungen im Fliesstext behalten die Groesse des Absatzes */
.story-mark,
.text-block p strong,
.text-block p b {
  font-size: inherit !important;
  font-weight: 700;
  color: var(--md-blue, #264163);
}

/* Auszeichnungen und Kicker (Stufe 1) */
.axis-card span,
.choice strong,
.um-num,
.topic-kicker {
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
}

/* Belegzeilen unter den Kompetenzbloecken */
.um-facts li {
  font-size: 1.2rem !important;
  line-height: 1.45 !important;
}

/* Schaltflaechen waren mit 20px zu klein fuer die uebrige Schrift */
.btn,
.btn.secondary,
.md-hero-c__cta {
  font-size: max(15px, 1.15rem) !important;
  min-height: max(54px, 3rem) !important;
  padding: max(15px, .85rem) max(30px, 1.7rem) !important;
}

/* Die versetzten Karten im Seitenkopf brauchen mehr Luft */
@media (min-width: 901px) {
  .axis-card {
    padding: max(28px, 1.9rem) max(26px, 1.8rem) max(30px, 2rem) !important;
  }
  .choice {
    padding: max(28px, 1.9rem) max(26px, 1.8rem) max(30px, 2rem) !important;
  }
}

/* Mehr Abstand ueber "Typische Sparringthemen" */
.topic-kicker {
  margin-top: max(44px, 2.8rem) !important;
}

/* Lesebreite begrenzen, damit die breitere Seite keine ueberlangen
   Zeilen erzeugt. Die Kaesten duerfen breit sein, der Satz darin nicht. */
.role p,
.ce-body p,
.tm blockquote,
.text-block p,
.um-story p {
  max-width: 62ch;
}

/* Terminseite: die Umschaltung auf eine Spalte hatte geringere
   Spezifitaet als die Zweispalten-Regel und griff zwischen 980 und
   1050px nicht - die Seite scrollte dort waagerecht. */
@media (max-width: 1100px) {
  body.booking-page .appointment-inner,
  .appointment-inner {
    grid-template-columns: 1fr !important;
  }
  body.booking-page .booking-panel,
  .booking-panel {
    max-width: 100% !important;
    justify-self: start !important;
  }
  body.booking-page .zeeg-inline-widget,
  .zeeg-inline-widget {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Terminseite: main ist ein Flex-Container, sein Kind liess sich nicht
   unter die Inhaltsbreite stauchen und erzeugte 17px waagerechtes
   Scrollen (Breite der Bildlaufleiste). */
body.booking-page main,
body.booking-page main > * {
  min-width: 0;
  max-width: 100%;
}


/* ===================================================================
   INHALTSBREITE DURCHSETZEN  —  08.11.2026
   Jede Unterseite definierte .wrap mit festen 1480px neu und der Hero
   der Startseite mit 1500px. Dadurch blieb der Token aus site.css
   dort wirkungslos. Hier wird er fuer alle Container verbindlich.
   =================================================================== */

.wrap,
body.booking-page .wrap,
.klienten .wrap {
  width: var(--md-shell) !important;
  max-width: none !important;
  margin-inline: auto;
}

/* Die Buchungsseite bleibt bewusst schmaler: zwei Spalten mit einem
   Kalender darin brauchen keine 2520px. */
.appointment-inner,
body.booking-page .appointment-inner {
  width: min(1700px, var(--md-shell)) !important;
  max-width: none !important;
  margin-inline: auto;
}


/* Ueber mich, zweiter Abschnitt im dunkelblauen Design.
   Der Abschnitt enthaelt Verlaufsschrift (.blue-grad), die ihre Farbe
   ueber -webkit-text-fill-color setzt - color allein reicht dort nicht. */
.um-lede {
  background: var(--md-blue, #264163) !important;
}
.um-lede,
.um-lede * {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.um-lede .blue-grad,
.um-lede .gold-grad {
  background: none !important;
}
.um-lede .eyebrow {
  color: var(--md-gold, #d0a62b) !important;
  -webkit-text-fill-color: var(--md-gold, #d0a62b);
}
/* Hervorhebungen als Goldverlauf.
   display:inline-block ist noetig, sonst greift background-clip:text
   nicht und man sieht nur einen goldenen Block ohne Schrift. */
.um-lede .story-mark {
  display: inline-block !important;
  background-image: linear-gradient(90deg, #9f7418 0%, #f0cf6a 48%, #d0a62b 100%) !important;
  background-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Abschlussblock auf "Ueber mich" an den der Startseite angleichen.
   Dort ist die Ueberschrift ein h2, hier ein <p> - deshalb blieb sie
   auf 24px statt auf Ueberschriftengroesse. */
.um-kicker {
  background-image: linear-gradient(90deg, var(--md-blue-dark, #203653) 0%, var(--md-blue, #264163) 58%, #486c9f 100%) !important;
  padding-top: clamp(56px, 7vw, 104px) !important;
  padding-bottom: clamp(56px, 7vw, 104px) !important;
}
.um-kicker .wrap > p:first-child {
  font-size: 2.9rem !important;
  line-height: 1.12 !important;
  max-width: 24ch;
  margin-inline: auto;
  color: #fff !important;
}
.um-kicker .um-kicker-copy {
  font-size: 1.55rem !important;
  line-height: 1.62 !important;
  color: rgba(255, 255, 255, .86) !important;
  max-width: 62ch;
  margin-inline: auto;
}
.um-kicker .um-detail {
  font-size: 1.55rem !important;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--md-gold, #d0a62b) !important;
}