/* ==========================================================================
   www.clarahaffner.at · neuer Stil (seit 13.10.2026), ergänzt ordilife.css
   Vorbild ist www.ordi-life.at (Ordilife/Webseite/quellen/neu/stil2.css): Titelfoto von Rand zu Rand, Pastellfelder,
   Linien und Nummern statt Symbolen, keine Türbögen. Konzept: docs/superpowers/specs/2026-10-13-neuer-stil-design.md
   Eigene Klassen beginnen mit .ch-, damit nichts mit ordilife.css zusammenstößt (.weg, .wege, .quelle sind dort belegt).
   ========================================================================== */

/* 1. Grundwerte: dunkles Salbei als Schrift, breitere Seite, keine Rundung mehr (der Türbogen entfällt überall) */
:root{
  --ink:var(--sage-dark);--text-2:var(--sage-dark);
  --w-page:1240px;
  --bogen:0;
  --b-aerzte:#5F8573;   /* Salbei: Unternehmensberatung für Ärzte */
  --b-ki:#557C93;       /* Blau: KI in Unternehmen */
  --b-web:#A27C43;      /* Sand: Webdesign und Auffindbarkeit */
}
html{overflow-x:clip;}

/* 2. Bereichsfarben. Die Klasse am <body> setzt seite_bauen.py aus dem Pfad der Seite (bereich()).
   --mod = Farbe des Bereichs, --mod-ink = Schriftstufe (mind. 4,5:1 auf Feld und Weiß), --feld = Pastellfeld. */
.bereich-aerzte,.weg-aerzte,.ch-k.-aerzte{--mod:var(--b-aerzte);}
.bereich-ki,.weg-ki,.ch-k.-ki{--mod:var(--b-ki);}
.bereich-web,.weg-web,.ch-k.-web{--mod:var(--b-web);}
.farbe,.bereich-kopf,.ch-k{--mod-ink:color-mix(in srgb,var(--mod) 54%,var(--ink));--feld:color-mix(in srgb,var(--mod) 16%,var(--white));}

h1 em,h2 em,.section-title em{color:var(--mod-ink,var(--sage-deep));}
.band em{color:inherit;}

/* 3. Startseite */
.ch-in{max-width:var(--w-page);margin:0 auto;padding-inline:var(--gutter);}
.ch-ein{padding-bottom:clamp(40px,6vw,72px);}
.ch-foto{margin:0;}
.ch-foto img{display:block;width:100%;height:clamp(400px,72vh,780px);object-fit:cover;object-position:50% 25%;}   /* niedrige Fenster: Lampe und Kopf bleiben im Bild */
.ch-text{padding-top:clamp(26px,3vw,40px);}
.ch-text h1{font-size:clamp(30px,4.2vw,54px);line-height:1.1;max-width:20em;}
.ch-text .lead{max-width:36em;margin-top:clamp(18px,2vw,26px);}
.ch-text .btn-dark{margin-top:var(--s6);}

.ch-drei{background:var(--white);border-block:1px solid var(--line);padding-block:clamp(56px,8vw,104px);}
.ch-drei h2{font-size:clamp(28px,3.4vw,42px);}
.ch-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,3vw,40px);}
.ch-k{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--white);border:1px solid var(--line);transition:border-color var(--t);}
.ch-k:hover{border-color:var(--mod);}
.ch-k:focus-within{outline:2px solid var(--mod-ink);outline-offset:3px;}
.ch-kopf{background:var(--feld);padding:clamp(20px,2.4vw,30px);transition:background var(--t);}
.ch-k:hover .ch-kopf{background:color-mix(in srgb,var(--mod) 20%,var(--white));}
.ch-kz{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;font-size:var(--caps);letter-spacing:.16em;text-transform:uppercase;line-height:1.5;color:var(--muted);}
.ch-kz b{font-weight:600;color:var(--mod-ink);}
.ch-k h3{margin-top:clamp(28px,4vw,56px);font-size:clamp(25px,2.5vw,34px);font-weight:300;line-height:1.14;overflow-wrap:normal;}
.ch-k h3 a{color:var(--ink);text-decoration:none;}
.ch-k h3 a::after{content:"";position:absolute;inset:0;}
.ch-k h3 a:focus-visible{outline:none;}
.ch-k h3 b{font-weight:600;color:var(--mod-ink);}
.ch-rumpf{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2vw,24px) clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px);}
.ch-rumpf ul{list-style:none;padding:0;margin-top:var(--s4);}
.ch-rumpf li{padding:9px 0;border-bottom:1px solid var(--line);line-height:1.45;}
.ch-rumpf li:first-child{border-top:1px solid var(--line);}
.ch-zusatz{position:relative;z-index:1;align-self:flex-start;margin-top:var(--s4);color:var(--mod-ink);font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--mod) 45%,var(--white));text-underline-offset:5px;}
.ch-zusatz:hover{text-decoration-color:var(--mod-ink);}
.ch-ziel{margin-top:auto;padding-top:var(--s6);display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:var(--caps);font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--mod-ink);}
.ch-ziel i{font-style:normal;font-size:22px;line-height:1;transition:transform .2s ease;}
.ch-k:hover .ch-ziel i{transform:translateX(5px);}

.ch-ich{padding-block:clamp(48px,7vw,88px);}
.ch-ich .ch-in{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;}
.ch-ich img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;}
.ch-ich h2{margin-top:var(--s3);font-size:clamp(26px,2.8vw,34px);}
.ch-ich p{max-width:36em;}
.ch-ich h2 + p{margin-top:var(--s4);}
.ch-ich .link-caps{margin-top:var(--s5);}

@media (min-width:861px){.ch-k h3{min-height:2.28em;}}   /* ein- und zweizeilige Überschriften: Text darunter auf gleicher Höhe */
@media (max-width:860px){
  .ch-raster{grid-template-columns:minmax(0,1fr);}
  .ch-k h3{margin-top:28px;}
}
@media (max-width:760px){
  .ch-foto img{height:auto;aspect-ratio:4/4.4;object-position:50% 50%;}
}
@media (max-width:620px){
  .ch-ich .ch-in{grid-template-columns:minmax(0,1fr);}
  .ch-ich img{max-width:180px;}
}
@media (prefers-reduced-motion:reduce){.ch-k,.ch-kopf,.ch-ziel i{transition:none;}.ch-k:hover .ch-ziel i{transform:none;}}

/* 4. Unterseiten in der Farbe ihres Bereichs (body.farbe) */
.bereich-kopf{background:var(--feld);border-bottom:0;padding:clamp(48px,7vw,88px) 0;}
.bereich-kopf-inner{width:100%;}   /* .bereich-kopf ist in ordilife.css auch ein Flex-Kopf: ohne volle Breite rückt der Text ein */
.farbe .seiten-kopf{background:var(--feld);box-shadow:0 0 0 100vmax var(--feld);clip-path:inset(0 -100vmax);padding-bottom:var(--s8);}
.farbe .eyebrow,.farbe .link-caps,.farbe .zwei-links span{color:var(--mod-ink);}
.farbe .link-caps:hover{border-bottom-color:var(--mod-ink);}
.farbe main .btn,.farbe main .btn-dark{background:var(--mod-ink);border-color:var(--mod-ink);}
.farbe main .btn:hover,.farbe main .btn-dark:hover{background:color-mix(in srgb,var(--mod-ink) 82%,#000);border-color:color-mix(in srgb,var(--mod-ink) 82%,#000);}
.farbe main .btn-outline{border-color:var(--mod-ink);color:var(--mod-ink);}
.farbe main .btn-outline:hover{background:var(--mod-ink);color:#fff;}
.farbe .zeilen{border-top-color:var(--mod-ink);}
.farbe .zeilen dd a{color:var(--mod-ink);text-decoration-color:color-mix(in srgb,var(--mod) 45%,var(--white));}
.farbe .zwei-links a{border-bottom-color:var(--mod);}
.farbe .zwei-links a:hover{background:var(--feld);}
.farbe .section.-mist{background:color-mix(in srgb,var(--mod) 8%,var(--paper));}

/* 5. Ohne Türbogen: Nummern als 01, 02, 03, Karten und Porträts eckig */
.schritte > li::before,.stufen li::before{display:block;width:auto;height:auto;padding:0;border:0;font-size:15px;font-weight:600;letter-spacing:.1em;line-height:1.9;color:var(--mod-ink,var(--sage-deep));}
.schritte > li::before{content:counter(schritt,decimal-leading-zero);}
.stufen li::before{content:counter(stufe,decimal-leading-zero);margin-bottom:var(--s4);}
.stufen{gap:0;background:var(--white);border:1px solid var(--line);border-top:1.5px solid var(--mod-ink,var(--sage-deep));}
.stufen li{background:none;border:0;border-right:1px solid var(--line);}
.stufen li:last-child{border-right:0;}
.ordilife-karte{border:1px solid var(--line);border-top:3px solid var(--mod);padding:var(--s6);text-align:left;}
.ordilife-karte img{margin:0;}
.hub-tueren a{align-items:flex-start;padding:var(--s5) var(--s4);border:1px solid var(--line);border-top:3px solid var(--mod);text-align:left;}
.bogen{padding:0;}
.bogen::after{display:none;}
.bogen.-rahmen img,.bogen.-rahmen .bogen-leer{border:0;}
/* Über mich: Foto von Rand zu Rand wie das Titelfoto der Startseite (Clara, 13.10.2026) */
.section.-lesen.bild-oben{max-width:none;padding-inline:0;}
.section.-lesen.bild-oben .om-photo{max-width:none;}
.section.-lesen.bild-oben .om-photo img{display:block;aspect-ratio:auto;height:clamp(380px,64vh,760px);object-position:50% 22%;}
@media (max-width:760px){.section.-lesen.bild-oben .om-photo img{height:auto;aspect-ratio:4/3;object-position:42% 30%;}}
@media (max-width:860px){
  .stufen li{border-right:0;border-bottom:1px solid var(--line);}
  .stufen li:last-child{border-bottom:0;}
}

/* 6. Menü mit sechs Punkten: zwischen Handy-Menü und voller Breite enger setzen, damit „Erstgespräch“ nicht übersteht */
@media (max-width:1180px){
  .nav-links a{padding-inline:9px;letter-spacing:.03em;}
  .nav-links a.nav-neben{margin-left:16px;}
  .nav-links a.nav-neben::before{left:-9px;}
  .nav-links .nav-cta{margin-left:6px;padding-inline:14px;letter-spacing:.12em;}
}