/* =====================================================================
   Iris Dorenburg Consulting - Entwurf 2 "Gelaende"
   Farbwelt uebernommen von ikd-virtual-assistant.de:
   #7e9bc2 gedecktes Blau, #15779b und #11607d Petrol,
   Weiss und #f5f5f5 als Grund, #222 als harter Kontrast.
   ===================================================================== */

:root{
  --paper:      #ffffff;
  --paper-2:    #f4f5f6;
  --paper-3:    #eef2f6;
  --ink:        #1e2225;
  --ink-2:      #3d474e;
  --ink-soft:   #6b767f;
  --blue:       #7e9bc2;
  --blue-soft:  #a8c0da;
  --petrol:     #15779b;
  --petrol-deep:#11607d;
  --line:       rgba(126,155,194,.42);
  --line-soft:  rgba(126,155,194,.20);
  --grid:       rgba(126,155,194,.13);

  --shell: min(1240px, 100% - 56px);
  --head:  76px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --sans: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head) + 20px) }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden }
img,svg,canvas{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button,input,textarea,select{ font:inherit; color:inherit }
::selection{ background:var(--petrol); color:#fff }

.shell{ width:var(--shell); min-width:0; margin-inline:auto }
/* haelt zusammengesetzte Begriffe in einer Zeile, damit auf schmalen
   Schirmen nicht am Bindestrich getrennt wird */
.nowrap{ white-space:nowrap }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; z-index:60; top:8px; left:8px; padding:10px 16px;
  background:var(--petrol-deep); color:#fff; transform:translateY(-160%);
  transition:transform .2s;
}
.skip:focus{ transform:none }

/* ---------------------------------------------------------------- *
   Gelaende: liegt hinter allem und laeuft ueber die ganze Seite
 * ---------------------------------------------------------------- */
.terrain-wrap{
  position:fixed; z-index:0; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 78% 8%,  rgba(126,155,194,.15), transparent 62%),
    radial-gradient(90% 70% at 8% 92%,   rgba(21,119,155,.09),  transparent 60%),
    var(--paper);
}
#terrain{ width:100%; height:100%; opacity:0; transition:opacity 1.4s ease }
body.terrain-ready #terrain{ opacity:.5 }

/* Am Schreibtisch liegen die Hoehenlinien halb so kraeftig im Bild. */
@media (min-width:1001px){
  body.terrain-ready #terrain{ opacity:.25 }
}

/* Am Handy darf der Kasten nicht mit der Adressleiste atmen. 100lvh ist
   die Fensterhoehe bei eingefahrenen Leisten und bleibt beim Scrollen
   konstant, waehrend inset:0 jede Aenderung mitgemacht haette. Der
   Zusatz steht in @supports, damit aeltere Browser bei inset:0 bleiben
   und der Kasten dort nicht in sich zusammenfaellt. */
@supports (height:100lvh){
  @media (pointer:coarse){
    .terrain-wrap{ bottom:auto; height:100lvh }
  }
}

/* Rueckfall ohne WebGL: gezeichnete Hoehenlinien */
.terrain-fallback{
  position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-radial-gradient(ellipse 62% 42% at 72% 26%,
      transparent 0 26px, rgba(126,155,194,.34) 26px 27px),
    repeating-radial-gradient(ellipse 48% 66% at 18% 78%,
      transparent 0 32px, rgba(21,119,155,.20) 32px 33px);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%, #000 40%, transparent 82%);
          mask-image:radial-gradient(120% 100% at 50% 40%, #000 40%, transparent 82%);
}
body.terrain-ready .terrain-fallback{ opacity:0; transition:opacity 1s }

main, .site-header, .site-footer{ position:relative; z-index:1 }

/* ---------------------------------------------------------------- *
   Kopf
 * ---------------------------------------------------------------- */
.site-header{
  position:fixed; z-index:40; top:0; left:0; right:0;
  display:flex; align-items:center; gap:28px;
  height:var(--head);
  padding-inline:28px;
  padding-top:env(safe-area-inset-top);
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:12px; min-height:44px }
.brand img{ width:38px; height:38px }
.brand-copy{ display:block }
.brand-copy b{ display:block; font-size:.98rem; font-weight:650; letter-spacing:-.015em; color:var(--ink) }
.brand-copy small{
  display:block; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--petrol);
}
.head-spacer{ flex:1 }

.site-nav{ display:flex; align-items:center; gap:34px }
.site-nav a{
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
  transition:color .25s;
}
.site-nav a::after{
  position:absolute; bottom:11px; left:0; width:100%; height:1px;
  background:var(--petrol); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease); content:"";
}
.site-nav a:hover, .site-nav a:focus-visible{ color:var(--petrol-deep) }
.site-nav a:hover::after, .site-nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left }
.site-nav .lang{
  padding-left:34px; border-left:1px solid var(--line-soft); color:var(--ink-soft);
}
.site-nav .cta{
  padding:0 20px; min-height:44px; color:#fff; background:var(--petrol-deep);
  transition:background .25s, transform .25s;
}
.site-nav .cta::after{ display:none }
.site-nav .cta:hover{ background:var(--petrol); color:#fff; transform:translateY(-1px) }

.burger{ display:none; width:46px; height:46px; padding:0; border:0; background:none; cursor:pointer }
.burger i{ display:block; width:24px; height:1.5px; margin:5px auto; background:var(--ink); transition:transform .3s, opacity .2s }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

/* ---------------------------------------------------------------- *
   Abschnitte, Raster, Randmarken
 * ---------------------------------------------------------------- */
.band{ position:relative; padding:132px 0 }
.band + .band{ padding-top:112px }
.band-rule{ border-top:1px solid var(--line-soft) }

.mark{
  display:flex; align-items:baseline; gap:14px; margin-bottom:26px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--petrol);
}
.mark::before{
  width:52px; height:1px; background:var(--blue); content:"";
  transform:translateY(-4px);
}
.mark em{ font-style:normal; color:var(--ink-soft); letter-spacing:.14em }

h1,h2,h3{ margin:0; font-weight:640; letter-spacing:-.03em; line-height:1.02 }
h2{ font-size:clamp(2.1rem, 4.4vw, 3.5rem) }
h3{ font-size:1.12rem; letter-spacing:-.012em; line-height:1.3 }
p{ margin:0 0 1.15em }
.lede{ max-width:46ch; font-size:1.09rem; color:var(--ink-2) }
/* Der Vorspann laeuft in der Ausgangslage und im Vorgehen ueber die ganze
   Breite, bis zur Fluchtlinie der Karten und Etappen darunter. Im Empfang
   bleibt er schmal: dort steht er neben der Legende und soll die grosse
   Zeile "Erst die Karte" nicht ueberholen.
   Die Auswahl haengt an data-mood und nicht an der Abschnittskennung,
   damit sie in beiden Sprachfassungen greift. */
[data-mood="situation"] > .shell > .lede,
[data-mood="process"] > .shell > .lede{ max-width:none; margin-top:24px }

/* ---------------------------------------------------------------- *
   Empfang
 * ---------------------------------------------------------------- */
.hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:100svh; padding:calc(var(--head) + 60px) 0 62px;
}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:52px;
  align-items:end; min-width:0;
}
.hero-grid > *{ min-width:0 }
.hero h1{
  max-width:14ch;
  font-size:clamp(2.7rem, 7vw, 6.2rem);
  letter-spacing:-.045em;
  overflow-wrap:break-word;
}
.hero h1 .soft{ color:var(--blue) }
.hero h1 .accent{
  display:block; color:var(--petrol-deep);
}
.hero .lede{ margin-top:34px; max-width:50ch; font-size:1.13rem }
.eyebrow{
  margin-bottom:30px; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--petrol);
}
.hero-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:16px 26px; margin-top:42px }

.btn{
  display:inline-flex; align-items:center; gap:14px;
  min-height:52px; padding:0 26px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--petrol-deep);
  transition:background .3s, transform .3s var(--ease), box-shadow .3s;
}
.btn:hover{ background:var(--petrol); transform:translateY(-2px); box-shadow:0 14px 30px rgba(17,96,125,.22) }
.btn-ghost{
  color:var(--petrol-deep); background:none;
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn-ghost:hover{ color:#fff; background:var(--petrol-deep); box-shadow:none }

/* Hoehenangaben rechts im Empfang, wie am Kartenrand */
.legend{
  display:grid; gap:20px; max-width:270px; padding-left:26px; border-left:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--ink-soft);
  text-transform:uppercase;
}
.legend b{ display:block; margin-bottom:3px; color:var(--petrol-deep); font-size:1.5rem; font-weight:600; letter-spacing:-.02em }

/* ---------------------------------------------------------------- *
   Ausgangslagen
 * ---------------------------------------------------------------- */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft) }
.case{
  position:relative; padding:38px 30px 34px; background:rgba(255,255,255,.82);
  transition:background .35s, transform .35s var(--ease);
}
.case:hover{ background:#fff; transform:translateY(-3px) }
.case b{
  display:block; margin-bottom:16px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.18em; color:var(--blue);
}
.case h3{ margin-bottom:12px }
.case p{ margin:0; font-size:.94rem; color:var(--ink-soft) }
.case::after{
  position:absolute; top:0; left:0; width:100%; height:2px;
  background:var(--petrol); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease); content:"";
}
.case:hover::after{ transform:scaleX(1) }

/* ---------------------------------------------------------------- *
   Leistungsversprechen
 * ---------------------------------------------------------------- */
.promise{ display:grid; grid-template-columns:1.15fr 1fr; gap:80px; align-items:start }
.promise-quote{
  font-size:clamp(1.6rem, 3vw, 2.4rem); font-weight:600; line-height:1.22;
  letter-spacing:-.028em;
}
.promise-quote span{ color:var(--petrol-deep) }
.promise-list{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line-soft) }
.promise-list li{
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  padding:20px 0; border-bottom:1px solid var(--line-soft);
}
.promise-list i{
  font-family:var(--mono); font-style:normal; font-size:.68rem; letter-spacing:.14em;
  color:var(--blue); padding-top:4px;
}
.promise-list p{ margin:0; font-size:.96rem; color:var(--ink-2) }
.promise-list b{ display:block; color:var(--ink) }

/* ---------------------------------------------------------------- *
   Arbeitsfelder
 * ---------------------------------------------------------------- */
.fields{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 64px }
.field{
  display:grid; grid-template-columns:56px 1fr; gap:24px;
  padding:30px 0; border-top:1px solid var(--line-soft);
  transition:padding-left .4s var(--ease);
}
.field:hover{ padding-left:10px }
.field-no{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--blue);
  padding-top:5px; transition:color .3s;
}
.field:hover .field-no{ color:var(--petrol) }
.field h3{ margin-bottom:8px }
.field p{ margin:0; font-size:.93rem; color:var(--ink-soft) }

/* ---------------------------------------------------------------- *
   Vorgehen mit Wegprofil
 * ---------------------------------------------------------------- */
.route{ margin-top:56px }
.route-svg{ width:100%; height:auto; overflow:visible }
.route-svg .terrainline{
  fill:none; stroke:var(--blue); stroke-width:1.1;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 2.4s var(--ease);
}
.route-svg .path{
  fill:none; stroke:var(--petrol-deep); stroke-width:2;
  stroke-dasharray:1400; stroke-dashoffset:1400;
  transition:stroke-dashoffset 2.6s var(--ease) .25s;
}
.route-svg .stop{ opacity:0; transition:opacity .5s ease }
.route-svg.is-drawn .terrainline,
.route-svg.is-drawn .path{ stroke-dashoffset:0 }
.route-svg.is-drawn .stop{ opacity:1 }
.route-svg.is-drawn .stop:nth-of-type(1){ transition-delay:.7s }
.route-svg.is-drawn .stop:nth-of-type(2){ transition-delay:1.1s }
.route-svg.is-drawn .stop:nth-of-type(3){ transition-delay:1.5s }
.route-svg.is-drawn .stop:nth-of-type(4){ transition-delay:1.9s }
.route-svg.is-drawn .stop:nth-of-type(5){ transition-delay:2.3s }
.route-svg .stop circle{ fill:#fff; stroke:var(--petrol-deep); stroke-width:2 }
.route-svg .stop .dot{ fill:var(--petrol-deep); stroke:none }

.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:26px; margin-top:26px }
.step b{
  display:block; margin-bottom:9px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--petrol);
}
.step h3{ margin-bottom:7px; font-size:1rem }
.step p{ margin:0; font-size:.88rem; color:var(--ink-soft) }


/* ---------------------------------------------------------------- *
   Das dunkle Feld
   Seit dem 16.9.2026 traegt es das Vorgehen. Vorher stand hier der
   Abschnitt "Grenzen", der entfallen ist. Ein einziger dunkler Streifen
   in der Seite, er setzt die Mitte ab und gibt dem Wegprofil Tiefe.
 * ---------------------------------------------------------------- */
.dunkel{ background:var(--ink); color:rgba(255,255,255,.76) }
.dunkel .mark{ color:var(--blue-soft) }
.dunkel .mark::before{ background:var(--blue) }
.dunkel .mark em{ color:rgba(255,255,255,.5) }
.dunkel h2{ color:#fff }
.dunkel .lede{ color:rgba(255,255,255,.66) }

/* Das Wegprofil: auf dunklem Grund traegt das tiefe Petrol nicht mehr,
   deshalb zeichnet der Weg hier in Blau und die Hoehenlinie zurueckhaltend
   in Weiss. */
.dunkel .route-svg .terrainline{ stroke:rgba(255,255,255,.22) }
.dunkel .route-svg .path{ stroke:var(--blue-soft) }
.dunkel .route-svg .stop circle{ fill:var(--ink); stroke:var(--blue-soft) }
.dunkel .route-svg .stop .dot{ fill:var(--blue-soft) }

.dunkel .step b{ color:var(--blue-soft) }
.dunkel .step h3{ color:#fff }
.dunkel .step p{ color:rgba(255,255,255,.62) }


/* ---------------------------------------------------------------- *
   Ueber Iris
 * ---------------------------------------------------------------- */
.about{ display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:start }
/* Das Portraet steht hochkant und laeuft am Text entlang nach unten. Iris
   blickt im Bild nach unten, die Blickrichtung fuehrt damit in den Text. */
.about-portrait{ width:220px }
.about-portrait img{
  width:220px; height:330px; object-fit:cover; object-position:50% 28%;
  filter:grayscale(.15) contrast(1.03);
}
.about-portrait figcaption{
  margin-top:14px; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
/* Die Ueberschrift bricht im Text selbst um, nicht ueber eine Breitengrenze:
   nach "Ich sehe Muster," beginnt die zweite Zeile. Gemessen brauchte diese
   zweite Zeile in der allgemeinen Groesse 920 Pixel, die Spalte hat 884.
   Deshalb hier eine Spur kleiner, damit sie in einer Zeile bleibt. */
.about-body h2{ max-width:none; margin-bottom:26px; font-size:clamp(1.9rem, 3.5vw, 3.25rem) }
/* Der Text laeuft ueber die volle Spaltenbreite, bis dorthin, wo auch der
   Strich ueber der Faktenliste endet. Keine eigene Satzbreite. */
.about-body p, .about-body .lede{ max-width:none }
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 30px; margin-top:40px; border-top:1px solid var(--line-soft) }
.facts div{ padding:20px 0 }
.facts dt{
  margin-bottom:6px; font-family:var(--mono); font-size:.64rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--petrol);
}
.facts dd{ margin:0; font-size:.94rem; color:var(--ink-2) }

/* ---------------------------------------------------------------- *
   Anfrage
 * ---------------------------------------------------------------- */
.contact{ display:grid; grid-template-columns:1fr 1.05fr; gap:76px; align-items:start }
.contact h2{ max-width:14ch; margin-bottom:22px }
.direct{ margin-top:34px; border-top:1px solid var(--line-soft) }
.direct a, .direct p{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:56px; margin:0; padding:12px 0; border-bottom:1px solid var(--line-soft);
  font-size:.96rem;
}
.direct a span:last-child{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--petrol) }
.direct a:hover{ color:var(--petrol-deep) }

.form{ padding:40px; background:#fff; box-shadow:0 24px 60px rgba(30,42,52,.09); border:1px solid var(--line-soft) }
.form label{ display:block; margin-bottom:24px }
.form label > span{
  display:block; margin-bottom:7px; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.form input:not([type=checkbox]), .form textarea{
  width:100%; padding:13px 14px; font-size:16px;
  background:var(--paper-2); border:1px solid transparent; border-radius:0;
  transition:border-color .25s, background .25s;
}
.form input:focus, .form textarea:focus{ outline:none; background:#fff; border-color:var(--petrol) }
.form textarea{ min-height:132px; resize:vertical }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:20px }
.consent{ display:grid !important; grid-template-columns:24px 1fr; gap:14px; align-items:start; margin-top:8px }
.consent input{ width:24px; height:24px; margin:1px 0 0; accent-color:var(--petrol-deep) }
/* Spezifitaet, wie bei den Kacheln: .form label > span zaehlt eine Klasse und
   zwei Elemente und schlaegt ein blosses .consent span. Ohne das .form davor
   stand dieser ganze Satz in gesperrten Versalien, also genau die Schrift, in
   der man einen Satz am schlechtesten liest. Ausgerechnet die Einwilligung. */
.form .consent span{
  margin:0; font-family:var(--sans); font-size:.9rem; letter-spacing:0;
  text-transform:none; color:var(--ink-2); line-height:1.6;
}
.consent a{ color:var(--petrol-deep); text-decoration:underline; text-underline-offset:2px }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px }
.form-foot small{ font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-soft) }
.status{ min-height:1.4em; margin:16px 0 0; font-size:.88rem; color:var(--petrol-deep) }
.trap{ position:absolute !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none }

/* ---------------------------------------------------------------- *
   Fuss
 * ---------------------------------------------------------------- */
.site-footer{ padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line-soft); background:rgba(255,255,255,.7) }
.foot-top{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding:44px 0 }
/* Der Satz im Fuss laeuft in einer Zeile, bis zum Knopf daneben. Mit der
   alten Begrenzung auf 34 Zeichen brach er nach "Dann den Weg" um, mitten
   im Gedanken. */
.foot-claim{ margin:0; max-width:none; font-size:1.16rem; letter-spacing:-.018em; color:var(--ink-2) }
/* Hinweise im Fuss. Seit dem 16.9.2026 stehen sie hier statt im Abschnitt
   Vorgehen: Der Fixpreis gilt fuer das ganze Angebot, nicht fuer eine
   Etappe, und der Hinweis zur Rechtsberatung gehoert auf jede Seite. */
.foot-notes{
  display:grid; gap:14px; padding:26px 0 4px;
  border-top:1px solid var(--line-soft);
  font-size:.83rem; line-height:1.62; color:var(--ink-soft);
}
.foot-notes p{ margin:0; max-width:none }
.foot-notes strong{ color:var(--ink-2); font-weight:600 }

.foot-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 30px;
  padding:20px 0; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.foot-credit{ margin:0 }
.foot-credit a{ color:var(--ink-2) }
.foot-credit a:hover{ color:var(--petrol-deep) }
.foot-bottom nav{ display:flex; flex-wrap:wrap; gap:0 26px }
.foot-bottom a{ display:inline-flex; align-items:center; min-height:44px }
.foot-bottom a:hover{ color:var(--petrol-deep) }

/* ---------------------------------------------------------------- *
   Erstgespraech: das Dialogfenster
   Ersetzt seit dem 16.9.2026 den Verweis auf einen fremden Terminkalender.
 * ---------------------------------------------------------------- */
.direct-knopf{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  width:100%; padding:19px 0; min-height:44px;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--line-soft);
}
.direct-knopf span:last-child{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--petrol) }
.direct-knopf:hover{ color:var(--petrol-deep) }

.gespraech{
  width:min(680px, calc(100% - 32px)); max-height:min(88vh, 900px);
  padding:0; border:0; background:transparent; overflow:visible;
}
.gespraech::backdrop{ background:rgba(20,28,34,.58); backdrop-filter:blur(2px) }
.gespraech-inhalt{
  max-height:min(88vh, 900px); overflow-y:auto; overscroll-behavior:contain;
  padding:44px; background:var(--paper); border:1px solid var(--line-soft);
  box-shadow:0 30px 80px rgba(20,28,34,.28);
}
.gespraech-inhalt h2{ margin-bottom:14px; font-size:clamp(1.5rem, 3.4vw, 2rem) }
.gespraech-inhalt .lede{ max-width:none; margin-bottom:30px; font-size:1rem }
/* Im Fenster traegt schon der Kasten des Fensters. Das Formular braucht
   deshalb keinen eigenen Rahmen und keinen Schatten. */
.gespraech .form{ padding:0; background:none; border:0; box-shadow:none }

.gespraech-schliessen{ position:sticky; top:0; z-index:2; height:0; text-align:right }
.gespraech-schliessen button{
  position:relative; top:8px; right:8px;
  width:44px; height:44px; font-size:1.5rem; line-height:1;
  color:var(--ink-soft); background:var(--paper); border:1px solid var(--line-soft);
  cursor:pointer;
}
.gespraech-schliessen button:hover{ color:var(--ink); border-color:var(--petrol) }

.wahl{ margin:0 0 24px; padding:0; border:0 }
.wahl legend{
  padding:0; margin-bottom:12px;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}
.wahl-liste{ display:flex; flex-wrap:wrap; gap:10px }
/* Tippziele: jede Kachel ist mindestens 44 Pixel hoch, auch am Handy. */
.kachel{
  display:inline-flex !important; align-items:center; gap:9px;
  min-height:44px; margin:0 !important; padding:0 16px;
  background:var(--paper-2); border:1px solid var(--line-soft); cursor:pointer;
  font-size:.92rem; white-space:nowrap;
}
.kachel input{ width:18px; height:18px; margin:0; accent-color:var(--petrol-deep) }
/* Die Beschriftung einer Kachel ist keine Feldbeschriftung, sondern der
   Knopftext selbst. Sie erbt sonst Versalien und Sperrung aus .form label
   und liest sich als "9 B I S  1 2  U H R". */
/* Spezifitaet: .form label > span zaehlt eine Klasse und zwei Elemente,
   .kachel > span nur eine Klasse und ein Element. Ohne das .form davor
   verliert diese Regel. */
.form .kachel > span{
  display:inline; margin:0; font-family:var(--sans); font-size:.92rem;
  letter-spacing:normal; text-transform:none; color:inherit;
}
.kachel:hover{ border-color:var(--petrol) }
.kachel:has(input:checked){ background:#fff; border-color:var(--petrol-deep); color:var(--petrol-deep) }
.kachel:has(input:focus-visible){ outline:2px solid var(--petrol-deep); outline-offset:2px }
/* Vier Zeitfenster: zwei mal zwei statt drei und eine einsame vierte. */
.kachel.breit{ flex:1 1 calc(50% - 5px); justify-content:center }
.wahl-liste.eng .kachel{ flex:0 0 auto }
.wahl-hinweis{ margin:12px 0 0; font-size:.82rem; color:var(--ink-soft) }
/* Bestaetigung nach dem Absenden, steht dort, wo der Knopf steht. */
.gespraech-danke{
  margin:18px 0 0; padding:16px 18px;
  background:var(--paper-3); border-left:2px solid var(--petrol);
  font-size:.92rem; color:var(--ink-2);
}
.ab{ max-width:260px }

/* ---------------------------------------------------------------- *
   Rechtsseiten
 * ---------------------------------------------------------------- */
.legal-head{ padding:calc(var(--head) + 78px) 0 44px }
.legal-head h1{ font-size:clamp(2.4rem, 5vw, 3.8rem) }
.legal{ padding-bottom:104px }
.legal-inner{ max-width:72ch }
.legal-inner h2{
  margin:44px 0 14px; font-size:1.06rem; letter-spacing:.01em;
  font-family:var(--mono); font-weight:500; text-transform:uppercase;
  letter-spacing:.14em; color:var(--petrol-deep);
}
.legal-inner p{ font-size:.97rem; color:var(--ink-2) }
.legal-inner a{ color:var(--petrol-deep); text-decoration:underline; text-underline-offset:2px }
.legal-note{
  margin-top:34px; padding:22px 26px; background:var(--paper-3);
  border-left:2px solid var(--blue); font-size:.92rem; color:var(--ink-2);
}

/* ---------------------------------------------------------------- *
   Einblenden
 * ---------------------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
[data-reveal].is-in{ opacity:1; transform:none }

/* =====================================================================
   Anpassung an kleinere Schirme und an Fingerbedienung.
   Von Anfang an mitgedacht: Tippziele ab 44 Pixeln, Eingabefelder
   16 Pixel, Aussparungen beruecksichtigt, Menue immer scrollbar.
   ===================================================================== */

/* Empfang am Schreibtisch: der Textblock beginnt 140 Pixel weiter oben.
   Der Hero richtet seinen Inhalt an der Unterkante aus, deshalb schiebt
   ein groesseres Polster unten den ganzen Block nach oben. Das Polster
   waechst mit der Schirmhoehe und ist bei 202 Pixeln gedeckelt: auf
   hohen Schirmen die vollen 140 Pixel Versatz, auf flachen entsprechend
   weniger, damit der Empfang nicht ueber die Bildkante hinauswaechst.
   Gilt erst ab 1001 Pixel Breite, also im zweispaltigen Empfang. Die
   mobile und die einspaltige Ansicht bleiben unberuehrt. */
@media (min-width:1001px){
  .hero{ padding-bottom:clamp(62px, calc(62px + 14vh), 202px) }
}

@media (max-width:1180px){
  :root{ --shell:min(1100px, 100% - 44px) }
  .promise{ gap:54px }
  .fields{ gap:0 44px }
  .contact{ gap:52px }
}

@media (max-width:1000px){
  .cases{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr); gap:30px 26px }
  .hero-grid{ grid-template-columns:1fr; gap:44px }
  .legend{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
    padding:22px 0 0; border-left:0; border-top:1px solid var(--line-soft);
  }
}

@media (max-width:860px), (max-height:520px) and (pointer:coarse){
  :root{ --shell:calc(100vw - 36px); --head:66px }
  .band{ padding:92px 0 }
  .band + .band{ padding-top:80px }
  .site-header{ padding-inline:18px }
  .burger{ display:block; position:relative; z-index:46 }
  .site-nav{
    position:fixed; z-index:45; inset:0;
    display:flex; flex-direction:column; align-items:flex-start;
    justify-content:safe center; gap:6px;
    padding:max(92px, calc(var(--head) + 26px + env(safe-area-inset-top)))
            max(28px, env(safe-area-inset-right))
            max(28px, calc(20px + env(safe-area-inset-bottom)))
            max(28px, env(safe-area-inset-left));
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(18px);
    overflow-y:auto; overscroll-behavior:contain;
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .32s, visibility .32s, transform .32s;
  }
  .site-nav.is-open{ visibility:visible; opacity:1; transform:none }
  .site-nav a{
    min-height:52px; font-family:var(--sans); font-size:1.6rem;
    letter-spacing:-.03em; text-transform:none; color:var(--ink);
  }
  .site-nav a::after{ display:none }
  .site-nav .lang{ margin-top:8px; padding:0; border-left:0; font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase }
  .site-nav .cta{ margin-top:14px; font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase }
  .promise, .about, .contact{ grid-template-columns:1fr; gap:44px }
  .fields{ grid-template-columns:1fr; gap:0 }
  /* Einspaltig braucht die Bildunterschrift nicht die Breite des Bildes zu
     erben, sonst bricht "Iris Dorenburg · LL.B." mitten im Namen um. */
  .about-portrait{ width:auto }
  .about-portrait img{ width:170px; height:255px }
  .about-portrait figcaption{ white-space:nowrap }
  .facts{ grid-template-columns:1fr }
  .facts div{ padding:16px 0; border-bottom:1px solid var(--line-soft) }
  .form{ padding:30px 22px }
  .gespraech{ width:calc(100% - 20px); max-height:92vh }
  .gespraech-inhalt{ max-height:92vh; padding:26px 20px 30px }
  .kachel{ padding:0 13px; font-size:.88rem }
  .kachel.breit{ flex:1 1 calc(50% - 5px) }
  .ab{ max-width:none }
}

@media (max-height:520px) and (pointer:coarse){
  .hero{ min-height:100svh; padding-top:calc(var(--head) + 24px); padding-bottom:30px }
  .hero h1{ font-size:clamp(1.8rem, 4.6vw, 2.7rem) }
  .hero .lede{ margin-top:18px; font-size:.92rem }
  .hero-actions{ margin-top:24px }
  .eyebrow{ margin-bottom:16px }
  .legend{ display:none }
  .site-nav{ gap:2px }
  .site-nav a{ min-height:46px; font-size:1.24rem }
}

@media (max-width:620px){
  :root{ --shell:calc(100vw - 30px) }
  body{ font-size:15.5px }
  .band{ padding:78px 0 }
  .cases{ grid-template-columns:1fr }
  /* ---- Das Wegprofil am Handy -------------------------------------
     Waagerecht schrumpft die Grafik mit der Breite: aus 1240 mal 206 werden
     360 mal 60, die fuenf Etappenpunkte ruecken zusammen und die Steigung
     verschwindet. Deshalb kippt der Weg hier um neunzig Grad. Er laeuft
     dann senkrecht an den Etappen entlang, und jeder Punkt sitzt neben
     seiner Etappe, statt irgendwo ueber allen zu schweben. Gebaut aus der
     Liste selbst, ohne zweite Grafik: was nicht da ist, kann auch nicht
     schrumpfen. */
  .route{ display:none }
  .steps{ grid-template-columns:1fr; gap:34px; position:relative; padding-left:32px; margin-top:44px }
  .step{ position:relative }
  /* Haltepunkt: Ring und Punkt darin, wie bei der waagerechten Fassung.
     Beides in einem Element, damit das zweite fuer die Linie frei bleibt.
     Die Fuellung traegt die Farbe des Hintergrunds, sonst schiene die Linie
     durch den Ring hindurch. */
  .step::before{
    position:absolute; top:2px; left:-32px; width:13px; height:13px; content:"";
    border:1px solid var(--blue-soft); border-radius:50%;
    background:radial-gradient(circle at 50% 50%, var(--blue-soft) 0 2px, var(--ink) 2px);
  }
  /* Der Weg zwischen zwei Haltepunkten. Er haengt am Abschnitt und nicht an
     der Liste: so endet er am letzten Punkt, statt darueber hinaus ins Leere
     zu laufen. */
  .step:not(:last-child)::after{
    position:absolute; top:16px; bottom:-36px; left:-26px; width:1px; content:"";
    background:var(--blue-soft); opacity:.5;
  }
  .hero{ padding-top:calc(var(--head) + 42px); padding-bottom:44px }
  .hero h1{ font-size:clamp(2.5rem, 11vw, 3.6rem) }
  .hero .lede{ font-size:1rem; max-width:40ch }
  .legend{ grid-template-columns:1fr; gap:14px }
  .legend b{ font-size:1.3rem }
  .promise-quote{ font-size:1.42rem }
  .form .row{ grid-template-columns:1fr; gap:0 }
  .form-foot{ align-items:stretch; flex-direction:column-reverse; gap:16px }
  .form-foot .btn{ justify-content:center; width:100% }
  .foot-top{ grid-template-columns:1fr; gap:26px; padding:36px 0 }
  .foot-bottom{ flex-direction:column; align-items:flex-start; gap:2px }
  h1,h2,h3{ overflow-wrap:break-word }
  .lede, .case p, .field p, .step p{ text-wrap:pretty }

  /* Die Marke ist eine Zeile aus Strich, Nummer und Zusatz. Am Handy passt
     das nicht nebeneinander: der Zusatz brach mitten im Wort um und stand
     versetzt neben der Nummer. Deshalb hier untereinander, der Strich wird
     kuerzer. */
  .mark{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:.72rem; letter-spacing:.18em }
  .mark::before{ width:28px; align-self:center; grid-row:1 }
  .mark em{ grid-column:2; letter-spacing:.12em }

  /* ---- Das Erstgespraechsfenster -----------------------------------
     Auf dem Handy standen sieben Zeilen Vorspann vor dem ersten Feld. Wer
     das Fenster oeffnet, will ausfuellen, nicht lesen. */
  .gespraech-inhalt .lede{ font-size:.94rem; line-height:1.58; margin-bottom:24px }
  .gespraech-inhalt h2{ font-size:1.5rem; margin-bottom:10px }
  .gespraech .form label{ margin-bottom:18px }
  .gespraech .wahl{ margin-bottom:20px }
}

@media (max-width:380px){
  :root{ --shell:calc(100vw - 24px) }
  .form{ padding:24px 18px }
  .case{ padding:30px 22px 28px }
  /* Auf sehr schmalen Geraeten bricht die Zeile unter dem Namen sonst um
     und macht die Kopfleiste doppelt so hoch. Gemessen bei 320 Pixeln. */
  .brand-copy small{ font-size:.66rem; letter-spacing:.1em }
  .gespraech-inhalt{ padding:22px 16px 26px }
  .kachel{ padding:0 11px }
}

@media (pointer:coarse){
  a,button,summary,input,textarea{ -webkit-tap-highlight-color:rgba(21,119,155,.14) }
  .direct a{ min-height:60px }

  .mark{ font-size:.72rem; letter-spacing:.18em }
  /* ---- Lesbarkeit an Beruehrungsgeraeten ----------------------------------------
     Die Auszeichnungen in Festbreite stehen am Schreibtisch bei 10 bis 11
     Pixeln. Auf einem Geraet, das man in der Hand haelt, ist das
     zu klein. Gemessen wurden 9,6 bis 11,2 Pixel, hier gehen sie auf 11,5
     bis 12,5 hoch. Die Sperrung wird dabei etwas zurueckgenommen, sonst
     brauchen die Zeilen mehr Platz, als sie haben. */
  .eyebrow{ font-size:.72rem; letter-spacing:.2em }
  .direct a span:last-child, .direct-knopf span:last-child{ font-size:.72rem }
  .facts dt{ font-size:.75rem; letter-spacing:.14em }
  .about-portrait figcaption{ font-size:.75rem; letter-spacing:.12em }
  .form label > span{ font-size:.75rem; letter-spacing:.12em }
  .wahl legend{ font-size:.75rem; letter-spacing:.12em }
  .form-foot small{ font-size:.75rem; letter-spacing:.08em }
  .foot-bottom{ font-size:.75rem; letter-spacing:.1em }
  .form .consent span{ font-size:.9rem; line-height:1.7 }
  .brand-copy small{ font-size:.72rem; letter-spacing:.14em }

  /* ---- Tippziele in Fliesstext -------------------------------------
     Ein Verweis mitten im Satz ist am Finger nur 12 bis 17 Pixel hoch.
     Beim Datenschutzverweis im Formular ist das besonders laestig: daneben
     liegt das Kaestchen, ein Fehlgriff setzt den Haken statt den Verweis zu
     oeffnen. Etwas Polster nach oben und unten vergroessert die Flaeche,
     ohne den Satz auseinanderzureissen. */
  .consent a{ display:inline-block; padding:7px 0 }
  .legal-inner a{ display:inline-block; padding:6px 0 }
  .direct a{ padding:17px 0 }
  /* Die Regeln haengen bewusst am Finger und nicht an der Breite: im
     Querformat und auf einem Tablet liest dasselbe Auge und tippt derselbe
     Finger. Gemessen wurden dort vorher dieselben 9,6 bis 11,2 Pixel wie
     im Hochformat. */
  .field{ padding:26px 0 }
  .case:hover{ transform:none }
  .field:hover{ padding-left:0 }
}

/* Kopfleiste darf das offene Menue nicht einsperren.
   Ein Element mit backdrop-filter wird zum Bezugsrahmen fuer fest
   positionierte Nachkommen. Die Navigation liegt in der Kopfleiste,
   also wuerde ihr "ganzer Bildschirm" nach dem Scrollen nur noch die
   Hoehe der Leiste bedeuten. Solange das Menue offen ist, bleibt der
   Weichzeichner deshalb aus. */
body.nav-open .site-header.is-scrolled{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none }
  .route-svg .terrainline, .route-svg .path{ stroke-dashoffset:0 }
  .route-svg .stop{ opacity:1 }
}

@media print{
  .site-header, .terrain-wrap, .burger{ display:none !important }
  body{ background:#fff }
  .band{ padding:26px 0 }
  .dunkel{ color:#000; background:#fff }
  .dunkel h2, .dunkel .lede, .dunkel .step h3, .dunkel .step p{ color:#000 }
  [data-reveal]{ opacity:1; transform:none }
}