/* Design 1 = originalgetreu übernommen von strenge.proinnova.info/2/ (JIG-Vorbild),
   Farben/Typografie/Radius/Spacing 1:1, nur Inhalt für Migranten-hilfe angepasst.
   Neue Bausteine unten ergänzt (Buchung, Angebotskarten, Mitgliedschaft, Events). */
/* Lokale Schriften — seit 19.09.2026 vom eigenen Server statt von Google.
   Grund: Bei der Einbindung über fonts.googleapis.com wird bei jedem Seitenaufruf
   die IP-Adresse der Besucher an Google übertragen (LG München I, 3 O 17493/20).
   Subsets: latin + latin-ext. Erneuern mit scratchpad/fonts_lokal.py. */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url('fonts/fraunces-italic-300700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 700;font-display:swap;src:url('fonts/fraunces-italic-300700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/fraunces-normal-300700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/fraunces-normal-300700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-normal-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-normal-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-normal-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-normal-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-normal-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-normal-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-normal-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-normal-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-normal-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ink:#132420;
  --ink-soft:#3c534d;
  --paper:#f6f2e9;
  --paper-alt:#efe8d8;
  --card:#fffcf5;
  --green:#1f6f68;
  --green-dark:#14504b;
  --green-deep:#0d3733;
  --gold:#b8863a;
  --gold-soft:#e4c896;
  /* Gold traegt an vielen Stellen Schrift, ist dafuer aber zu hell: #b8863a kommt auf
     Papier nur auf 2,9:1, gefordert sind 4,5:1. Derselbe Ton dunkler erreicht 4,6-5,5:1
     auf allen hellen Flaechen. Das helle Gold bleibt fuer Linien, Rahmen und Zierrat. */
  --gold-text:#86612a;
  --line:#d8cfba;
  --radius:2px;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
select{max-width:100%;}   /* kein Auswahlfeld darf breiter werden als sein Platz */
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
/* Lange deutsche Komposita ("Verbraucherstreitbeilegung/Universal-
   schlichtungsstelle") und ausgeschriebene Adressen sprengten am Handy die
   Seitenbreite. Sie brechen jetzt um, statt quer scrollen zu lassen. */
h1,h2,h3,h4{
  overflow-wrap:break-word;
  /* Ohne eigene Angabe erbten Ueberschriften die 1,6 des Fliesstextes und standen
     dadurch auseinandergerissen da ("Bruecken bauen, / Zukunft gestalten").
     Die Stellen mit eigener Zeilenhoehe (Hero, .section-head) bleiben unberuehrt. */
  line-height:1.25;
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--green-deep);
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:26px; height:1.5px;
  background:var(--gold);
  display:inline-block;
}
.eyebrow--lg{font-size:16.5px; letter-spacing:0.1em;}
.section-head--sm h2{font-size:clamp(1.4rem, 2.2vw, 1.9rem);}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  background:var(--green-dark);
  color:#fdf9ee;
  font-family:'IBM Plex Sans', sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.01em;
  text-decoration:none;
  border:1px solid var(--green-dark);
  border-radius:var(--radius);
  cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .2s ease;
  position:relative;
}
.btn:hover{background:var(--green-deep); transform:translateY(-1px);}
.btn svg{width:16px; height:16px; transition:transform .25s ease;}
.btn:hover svg{transform:translateX(3px);}
.btn.ghost{
  background:transparent;
  color:var(--green-deep);
  border:1px solid var(--green-deep);
}
.btn.ghost:hover{background:var(--green-deep); color:#fdf9ee;}

/* ---------- TASTATUR-FOKUS ---------- */
/* Es gab bisher gar keine sichtbare Markierung: wer mit der Tabulatortaste bedient,
   sah nicht, wo er gerade steht. Der Rahmen nimmt das dunkle Gruen der Marke
   (8,3:1 auf Papier) und liegt mit Abstand um das Element, damit er auf Knoepfen
   mit eigenem Hintergrund nicht untergeht. */
:focus-visible{
  outline:3px solid var(--green-dark);
  outline-offset:3px;
}
/* Auf den dunkelgruenen Flaechen waere Gruen unsichtbar - dort helles Gold (8,1:1). */
.band-dark :focus-visible, footer :focus-visible, .angebot-kat :focus-visible{
  outline-color:var(--gold-soft);
}

/* ---------- HEADER ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(246,242,233,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 32px;
  /* Breiter als der Inhalt (1180px): Franzoesisch braucht im Menue rund 100px
     mehr als Englisch. Ohne diese Reserve saehe der Kopf in jeder Sprache
     anders aus - Englisch einzeilig, Deutsch und Franzoesisch umgebrochen. */
  max-width:1340px; margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:11px;
  font-family:'Fraunces', serif;
  font-weight:700;
  font-size:21px;
  color:var(--green-deep);
  letter-spacing:-0.01em;
}
.logo img{ height:60px; width:auto; }   /* 19.09.2026: 48px plus 25 % (Wunsch Thomas) */
/* nowrap: Der Kopf soll in ALLEN Sprachen gleich aussehen. Reicht der Platz
   nicht, uebernimmt das Burger-Menue (siehe Breakpoint 1240px) - und zwar
   fuer alle Sprachen zur selben Zeit. */
nav.links{display:flex; gap:18px; align-items:center; flex-wrap:nowrap; justify-content:flex-end;}
nav.links a{
  font-size:13.5px; font-weight:500;
  text-decoration:none; color:var(--ink-soft);
  transition:color .2s ease;
  white-space:nowrap;
}
nav.links a:hover{color:var(--green-dark);}
.nav .btn{padding:11px 20px; font-size:13px; white-space:nowrap;}
/* nav.links a hat hoehere Spezifitaet als .btn – Textfarbe des Buttons sonst dunkel auf dunkel */
nav.links a.btn, nav.links a.btn:hover{color:#fdf9ee;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.burger span{width:24px; height:2px; background:var(--green-deep);}

/* Abstand zwischen den Unterbloecken eines Abschnitts (Mission, Was uns
   auszeichnet, Unsere Werte auf der Startseite). Stand frueher als Inline-Stil
   im HTML und liess sich deshalb am Handy nicht verkleinern - dort ruecken die
   Abschnitte selbst zusammen, die Unterbloecke blieben weit auseinander. */
.block-folge{ margin-top:86px; }

/* ---------- SPRACHUMSCHALTER ---------- */
/* Die drei Flaggen stehen rechts untereinander (Wunsch Thomas, 19.09.2026).
   Sie muessen zusammen in die Kopfzeile passen: 3 x 26px plus Abstaende. */
.sprachen{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin-left:18px; }
/* Die Deckkraft von .5 lag auf dem ganzen Feld und traf damit auch die Schrift:
   "FR"/"EN" kamen so auf 2,35:1 und waren kaum zu entziffern. Zurueckgenommen wird
   jetzt nur die Flagge, das Kuerzel bleibt voll deckend (7,4:1). */
.sprache{
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  padding:3px 6px; border:1px solid transparent; border-radius:var(--radius);
  text-decoration:none;   /* stand als Link unterstrichen da, anders als das uebrige Menue */
  transition:border-color .2s ease, background .2s ease;
}
.sprache svg{ width:22px; height:15px; display:block; box-shadow:0 0 0 1px rgba(19,36,32,.15);
  opacity:.5; transition:opacity .2s ease; }
.sprache__kuerzel{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.06em; color:var(--ink-soft); min-width:17px; text-align:left;
}
.sprache:hover svg, .sprache:focus-visible svg, .sprache.is-aktiv svg{ opacity:1; }
/* Die Flaggen stehen dicht gestapelt - ein Rahmen mit 3px Abstand ragte in die Nachbarn. */
.sprache:focus-visible{ outline-offset:1px; }
.sprache:hover{ border-color:var(--line); }
/* Die gewaehlte Sprache wird am dunklen Rahmen erkannt, nicht mehr am blassen Gold. */
.sprache.is-aktiv{ border-color:var(--gold-text); background:var(--card); }
.sprache.is-aktiv .sprache__kuerzel{ color:var(--green-deep); }
nav.links{ margin-left:auto; }

/* Hinweis auf den uebersetzten Rechtsseiten: massgeblich ist die deutsche Fassung */
.sprachhinweis{
  background:var(--paper-alt); border-left:3px solid var(--gold);
  padding:16px 20px; margin:0 0 28px; font-size:14px; color:var(--ink-soft); line-height:1.6;
}
.sprachhinweis a{ color:var(--green-dark); font-weight:600; }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:190px 0 110px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 600px at 82% -10%, rgba(31,111,104,0.14), transparent 60%),
    var(--paper);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.35;
  mask-image:linear-gradient(180deg, black, transparent 78%);
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:64px;
  align-items:start;
}
.hero h1{
  font-size:clamp(2.5rem, 4.6vw, 3.85rem);
  line-height:1.06;
  margin-bottom:26px;
}
.hero h1 em{ font-style:italic; color:var(--green); }
.hero p.lead{
  font-size:18.5px;
  color:var(--ink-soft);
  max-width:520px;
  margin-bottom:36px;
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:48px;}
.trust-row{display:flex; gap:28px; flex-wrap:wrap;}
.trust-row .item{
  display:flex; align-items:center; gap:9px;
  font-size:13px; color:var(--ink-soft);
  font-family:'IBM Plex Mono', monospace;
}
.trust-row .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}

.hero-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
  position:relative;
  box-shadow:0 30px 60px -30px rgba(13,55,51,0.25);
}
.hero-panel::before{
  content:"";
  position:absolute; top:-1px; left:-1px; right:-1px;
  height:5px;
  background:linear-gradient(90deg, var(--green-dark), var(--gold));
}
.hero-panel .cap{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--green); margin-bottom:22px; display:block;
}
.stack-item{
  display:flex; align-items:flex-start; gap:14px;
  padding:15px 0;
  border-top:1px solid var(--line);
}
.stack-item:first-of-type{border-top:none;}
.stack-item .num{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; color:var(--gold-text); font-weight:600;
  padding-top:2px;
}
.stack-item .txt strong{display:block; font-size:14.5px; font-weight:600; margin-bottom:2px;}
.stack-item .txt span{font-size:13px; color:var(--ink-soft);}

section{padding:110px 0;}
.section-head{ max-width:640px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(2rem, 3.2vw, 2.7rem); line-height:1.12; }
.section-head p{ font-size:17px; color:var(--ink-soft); margin-top:16px; }
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
/* Muss NACH .section-head stehen, sonst gewinnt dessen 64px (gleiche Spezifitaet).
   Die Bloecke auf der Startseite haengen 86px untereinander; bei 64px Luft unter dem
   Kopf war kaum zu sehen, welcher Kopf zu welchem Inhalt gehoert. */
.section-head--sm{ margin-bottom:34px; }

/* ---------- LEISTUNGEN ---------- */
/* Das Kartenraster steht in einem .wrap ohne Seitenabstand und ragte dadurch 32px
   weiter nach links und rechts als jeder andere Block der Seite (Saeulen, Werte,
   Ueberschriften). Derselbe Abstand wie .wrap bringt alle Kanten auf eine Linie. */
.service-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  margin:0 32px;
  background:var(--line);
  border:1px solid var(--line);
}
/* Spaltenweise Anordnung, damit die Marke ("Termin buchbar") in allen Karten einer
   Reihe auf gleicher Hoehe sitzt und nicht dort, wo der Text zufaellig endet. */
.service-card{ background:var(--card); padding:36px 32px; display:flex; flex-direction:column;
  transition:background .25s ease; }
.service-card:hover{background:#fffef9;}
.service-card .icon{ width:46px; height:46px; margin-bottom:22px; color:var(--green-dark); }
/* 20px in allen drei Kartenarten (Leistung/Saeule/Wert) - vorher 19/21/20px. */
.service-card h3{ font-size:20px; font-weight:600; margin-bottom:10px; font-family:'Fraunces', serif; }
.service-card p{font-size:14.5px; color:var(--ink-soft); margin-bottom:auto;}
.service-card .tag{
  display:inline-block; margin-top:16px; align-self:flex-start;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold-text); border:1px solid var(--gold); padding:3px 9px; border-radius:20px;
}
.service-card__link{ display:block; margin-top:14px; align-self:flex-start; font-size:13px; font-weight:600; color:var(--green-dark); }

/* ---------- BAND DARK ---------- */
.band-dark{ background:var(--green-deep); color:#eef2ee; position:relative; }
.band-dark::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 700px 400px at 10% 100%, rgba(184,134,58,0.14), transparent 60%);
  pointer-events:none;
}
.band-dark .eyebrow{color:#8fc9c1;}
.band-dark .eyebrow::before{background:var(--gold);}
.band-dark h2{color:#fbf6ea;}
.band-dark .section-head p{color:#b7cbc6;}

.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; position:relative; }
.step{ position:relative; padding:0 28px 0 0; }
.step:not(:last-child)::after{
  content:""; position:absolute; top:26px; right:-2px;
  width:calc(100% - 52px); border-top:1.5px dashed rgba(184,134,58,0.5);
}
.step .idx{
  width:52px; height:52px; border:1.5px solid var(--gold); color:var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-size:20px; font-weight:600;
  margin-bottom:26px; background:var(--green-deep); position:relative; z-index:1;
}
.step h4{ color:#fbf6ea; font-size:17.5px; margin-bottom:10px; }
.step p{font-size:14px; color:#b7cbc6;}

.biz-benefits{ margin-top:70px; display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.badge-card{
  border:1px solid rgba(255,255,255,0.16); padding:26px 28px;
  display:flex; gap:18px; align-items:flex-start; background:rgba(255,255,255,0.03);
}
.badge-card .seal{
  width:52px; height:52px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:10px; text-align:center; line-height:1.2; color:var(--gold);
}
.badge-card h4{color:#fbf6ea; font-size:16px; margin-bottom:6px;}
.badge-card p{font-size:13.5px; color:#b7cbc6;}

/* ---------- ZWEISPALTIG (Zielgruppen / Vertrauen) ---------- */
.applicant-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start; }
.req-list{list-style:none;}
.req-list li{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.req-list li:first-child{padding-top:0;}
.req-list .check{
  width:24px; height:24px; flex-shrink:0; border-radius:50%; background:var(--green);
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.req-list .check svg{width:13px; height:13px; stroke:#fff;}
.req-list strong{display:block; font-size:15.5px; font-weight:600; color:var(--green-deep);}
.req-list span{font-size:14px; color:var(--ink-soft);}

.free-panel{ background:var(--card); border:1px solid var(--line); padding:44px 40px; position:relative; }
/* Weiss auf hellem Gold ergab 3,2:1 - das Band traegt jetzt den dunklen Goldton (5,6:1). */
.free-panel .ribbon{
  position:absolute; top:-14px; left:40px; background:var(--gold-text); color:#fff;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:7px 16px;
}
.free-panel h3{ font-size:24px; margin:18px 0 16px; }
.free-panel p{font-size:15px; color:var(--ink-soft); margin-bottom:22px;}
.flow-mini{display:flex; align-items:center; gap:0; margin-top:28px; flex-wrap:wrap;}
.flow-mini .node{
  font-family:'IBM Plex Mono', monospace; font-size:12px; background:var(--paper-alt);
  border:1px solid var(--line); padding:9px 14px; color:var(--green-deep);
}
.flow-mini .arrow{color:var(--gold-text); padding:0 8px; font-size:14px;}
.flow-graphic{ display:flex; align-items:flex-start; justify-content:space-between; gap:4px; margin-top:32px; position:relative; }
.flow-graphic::before{ content:""; position:absolute; top:17px; left:34px; right:34px; height:1px; background:var(--gold-soft); z-index:0; }
.flow-graphic .fg-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:9px; flex:1; text-align:center; }
.flow-graphic .fg-num{
  width:34px; height:34px; border-radius:50%; background:var(--green-dark); color:#fdf9ee;
  display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono', monospace; font-size:13px; flex-shrink:0;
}
.flow-graphic .fg-label{ font-size:12.5px; color:var(--ink-soft); font-weight:500; }

/* ---------- ÜBER UNS + KENNZAHLEN ---------- */
.about-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-text p{font-size:17px; color:var(--ink-soft); margin-bottom:18px;}
.about-text p:first-of-type{
  font-size:22px; font-family:'Fraunces', serif; font-weight:450; font-style:italic;
  color:var(--green-deep); line-height:1.45;
}
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.stat-card{ background:var(--card); padding:34px 28px; }
.stat-card .num{ font-family:'Fraunces', serif; font-size:2.6rem; font-weight:600; color:var(--green-dark); line-height:1; }
.stat-card .lbl{ margin-top:10px; font-size:13px; color:var(--ink-soft); line-height:1.4; }

/* ---------- KONTAKT ---------- */
.contact{ background:var(--paper-alt); border-top:1px solid var(--line); }
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }
.contact-card{ background:var(--card); border:1px solid var(--line); padding:44px; }
.contact-card h3{font-size:22px; margin-bottom:26px;}
.info-row{ display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line); }
.info-row:first-of-type{border-top:none;}
.info-row .ic{width:20px; height:20px; color:var(--green); flex-shrink:0; margin-top:2px;}
.info-row strong{display:block; font-size:14.5px; margin-bottom:2px;}
.info-row span{font-size:14px; color:var(--ink-soft);}
.agent-note{
  margin-top:26px; padding:18px 20px; background:var(--paper-alt);
  border-left:3px solid var(--gold); font-size:13.5px; color:var(--ink-soft);
}
.contact-cta{ display:flex; flex-direction:column; justify-content:center; padding:20px 0; }
/* Der Knopf wurde als Kind der Spalte auf deren volle Breite gezogen, der Pfeil blieb
   aber am Text kleben - das sah nach Versehen aus. Jetzt so breit wie seine Beschriftung. */
.contact-cta .btn{ align-self:flex-start; }
.contact-cta h2{font-size:clamp(1.9rem, 3vw, 2.5rem); margin-bottom:20px;}
.contact-cta p{font-size:16.5px; color:var(--ink-soft); margin-bottom:32px; max-width:440px;}
.seal-row{display:flex; gap:14px; margin-top:40px; flex-wrap:wrap;}
.seal-mini{
  display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:9px 14px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--green-dark); background:var(--card);
}

footer{ background:var(--green-deep); color:#a8beb8; padding:36px 0; font-size:13px; }
.footer-wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }

[data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}

/* Textseiten (Impressum/Datenschutz/AGB, Angebote-Kopf) */
.textpage{ padding:190px 0 90px; max-width:760px; }
.textpage h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:20px; }
/* Silbentrennung nur in den kleineren Ueberschriften und im Fliesstext: In einer
   grossen Schlagzeile sieht ein Trennstrich ("Um-meldung") unruhig aus, bei
   langen Komposita wie "Verbraucherstreitbeilegung" ist er dagegen richtig. */
.textpage h2, .textpage h3, .textpage p, .textpage li{ hyphens:auto; }
.textpage h2{ font-size:1.4rem; margin:2.2rem 0 .7rem; }
.textpage h3{ font-size:1.1rem; margin:1.6rem 0 .4rem; color:var(--ink); font-family:'IBM Plex Sans',sans-serif; font-weight:600; }
.textpage p{ color:var(--ink-soft); margin-bottom:1rem; line-height:1.75; overflow-wrap:break-word; }
.textpage a{ overflow-wrap:anywhere; }   /* ausgeschriebene Adressen umbrechen lassen */
.textpage ul{ margin:0 0 1.2rem 1.2rem; }
.textpage li{ color:var(--ink-soft); margin-bottom:.5rem; line-height:1.6; overflow-wrap:break-word; }
.textpage a{ color:var(--green-dark); text-decoration:underline; }
.back-link{ display:inline-block; margin-bottom:1.4rem; color:var(--green-dark); font-weight:600; font-size:14px; }

/* ================= NEUE BAUSTEINE: Buchung / Angebote / Mitgliedschaft / Events ================= */

/* Preis-Auswahl (Beratungsdauer) */
.price-picker{ display:flex; flex-wrap:wrap; gap:14px; margin:22px 0; }
.price-chip{
  flex:1 1 190px; border:1px solid var(--line); background:var(--card); padding:18px 20px; cursor:pointer;
  transition:border-color .2s ease;
}
.price-chip input{ position:absolute; opacity:0; pointer-events:none; }
.price-chip__len{ display:block; font-weight:600; font-size:14.5px; color:var(--green-deep); }
.price-chip__price{ display:block; font-family:'Fraunces',serif; font-weight:600; font-size:1.6rem; color:var(--green-dark); margin-top:4px; }
.price-chip__note{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:4px; }
/* Ausgewaehlt/ueberfahren muss man sehen koennen: helles Gold kam als Rahmen nur auf
   2,9:1 gegen die Seitenflaeche. Der dunkle Goldton liegt bei 5,0:1. */
.price-chip:hover{ border-color:var(--gold-text); }
.price-chip.is-active{ border-color:var(--gold-text); box-shadow:inset 0 0 0 1px var(--gold-text); }

/* Buchungs-Assistent */
.booking{ background:var(--card); border:1px solid var(--line); padding:36px; margin-top:28px; }
.booking__steps{ display:flex; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.booking__step-tag{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.04em; color:var(--ink-soft);
  background:var(--paper-alt); padding:6px 12px;
}
.booking__step-tag.is-active{ background:var(--gold-text); color:#fff; }
.booking__step-tag.is-done{ background:var(--green); color:#fff; }
/* Das Feld liegt im .wrap, NICHT in .booking - die fruehere Regel
   ".booking select#bk-thema" hat deshalb nie gegriffen und das Feld war so
   breit wie seine laengste Option (am Handy 465px statt 390). */
select#bk-thema{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; font:inherit; font-size:15px; color:var(--ink); margin-bottom:24px;
}
.booking__calendar{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; margin-bottom:24px;
  max-height:360px; overflow-y:auto; padding:6px; border:1px solid var(--line); background:var(--paper-alt);
}
.bk-day{ border:1px solid var(--line); padding:10px 6px; text-align:center; background:var(--card); cursor:pointer; transition:border-color .2s; }
.bk-day:hover{ border-color:var(--gold-text); }
.bk-day__weekday{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; }
.bk-day__date{ font-weight:600; font-size:15px; margin-top:3px; }
.bk-day.is-active{ border-color:var(--gold-text); background:var(--paper-alt); box-shadow:inset 0 0 0 1px var(--gold-text); }
.booking__slots{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.bk-slot{ border:1px solid var(--line); padding:9px 16px; background:var(--card); cursor:pointer; font-weight:600; font-size:14px; transition:border-color .2s; }
.bk-slot:hover{ border-color:var(--gold-text); }
.bk-slot.is-active{ border-color:var(--gold-text); background:var(--paper-alt); color:var(--green-deep); box-shadow:inset 0 0 0 1px var(--gold-text); }
/* Bereits vergebene Zeiten: sichtbar, aber nicht waehlbar. Der durchgestrichene
   Text sagt ohne Legende, was gemeint ist -- auch fuer Besucher, die die Seite
   in einer Sprache lesen, die sie nur halb beherrschen. */
.bk-slot.is-belegt{ cursor:not-allowed; opacity:.4; text-decoration:line-through; background:var(--paper-alt); }
.bk-slot.is-belegt:hover{ border-color:var(--line); }
.booking__pay{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.bk-pay{ flex:1 1 150px; border:1px solid var(--line); padding:13px 14px; cursor:pointer; background:var(--card); text-align:center; font-weight:600; color:var(--ink-soft); }
.bk-pay.is-active{ border-color:var(--gold-text); background:var(--paper-alt); color:var(--green-deep); box-shadow:inset 0 0 0 1px var(--gold-text); }
.booking__summary{ background:var(--paper-alt); border-left:3px solid var(--gold); padding:18px 20px; margin-bottom:24px; font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.booking__summary b{ color:var(--ink); }

/* Formulare (Kontakt/Anfrage) */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--ink-soft); }
.field input, .field textarea, .field select, .angebot-kat__form select{
  width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ink); padding:12px 14px; font:inherit; font-size:15px;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gold); }
.field textarea{ min-height:100px; resize:vertical; }
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.form__note{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; line-height:1.6; }
.form__ok{ display:none; padding:18px 0; }
.form.is-sent .form__body{ display:none; }
.form.is-sent .form__ok{ display:block; }
.form__ok h3{ font-size:1.2rem; margin-bottom:8px; }
.form__error{ color:#a3372c; font-size:13px; margin-top:10px; }

/* Angebots-Kategorien (2–6) */
.angebot-kat{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.16); padding:32px; margin-top:22px; }
.angebot-kat h3{ color:#fbf6ea; font-size:1.2rem; margin-bottom:6px; }
.angebot-kat__sub{ color:#b7cbc6; font-size:13.5px; margin-bottom:18px; }
.angebot-kat__items{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 20px; margin-bottom:22px; }
.angebot-kat__items li{ position:relative; padding-left:16px; color:#dfe8e2; font-size:14px; }
.angebot-kat__items li::before{ content:"–"; position:absolute; left:0; color:#8fc9c1; }
/* Der Knopf muss hell bleiben, damit er sich vom dunkelgruenen Band abhebt (4,0:1).
   Weisse Schrift darauf kam nur auf 3,2:1, dunkle Schrift erreicht 5,0:1. Deshalb
   wird beim Ueberfahren auch aufgehellt statt abgedunkelt. */
.angebot-kat__toggle{
  background:var(--gold); color:var(--ink); border:0; padding:12px 22px; font-weight:600; font-size:13.5px; cursor:pointer;
  letter-spacing:.02em; font-family:'IBM Plex Sans',sans-serif;
}
.angebot-kat__toggle:hover{ background:#c9963f; }
.angebot-kat__form{ display:none; margin-top:22px; padding-top:22px; border-top:1px solid rgba(255,255,255,.16); }
.angebot-kat.is-open .angebot-kat__form{ display:block; }
.angebot-kat__form select{ margin-bottom:16px; }
.angebot-kat__form .field label{ color:#dfe8e2; }
.angebot-kat__form .field input, .angebot-kat__form .field textarea{ background:#fffcf5; }
.angebot-kat__form .form__ok{ color:#8fc9c1; }
.angebot-kat__form .btn{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.angebot-kat__form .btn:hover{ background:#c9963f; border-color:#c9963f; }

/* Mitgliedschaft */
.member-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.member-hero__photo{ border:1px solid var(--line); overflow:hidden; }
.member-hero__photo > div{ aspect-ratio:4/5; width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem; background:linear-gradient(150deg, var(--green), var(--gold-soft)); color:#fff; font-weight:600; }

/* Events */
.event-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px; }
.event-card{ background:var(--card); padding:30px; }
.event-card__date{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--gold-text); border:1px solid var(--gold); padding:3px 10px; border-radius:20px; margin-bottom:14px; }
.event-card h3{ font-size:1.1rem; margin-bottom:8px; }
.event-card p{ color:var(--ink-soft); font-size:14px; }
.event-card__pdf{ display:inline-block; margin-top:14px; color:var(--green-dark); font-weight:600; font-size:13.5px; }
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px; }
.gallery-grid div{ aspect-ratio:1; background:var(--paper-alt); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:13px; text-align:center; padding:.6rem; }

/* Vier Säulen der Zielgruppe (Startseite) */
.pillar-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
/* Gleicher Innenabstand wie .service-card und .value-card. */
.pillar-card{ background:var(--card); padding:36px 32px; }
/* Schrift auf 2,9:1 und ein Rahmen auf 1,6:1 - die Marke war praktisch nicht da. */
.pillar-card__num{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-text); border:1px solid var(--gold); padding:4px 10px; margin-bottom:16px;
}
.pillar-card h3{ font-family:'Fraunces', serif; font-size:20px; font-weight:600; color:var(--green-deep); margin-bottom:8px; }
.pillar-card__q{ font-weight:600; font-size:15px; color:var(--green-dark); margin-bottom:10px; }
.pillar-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; }

/* Über uns: Mission / Werte */
.about-columns{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
.about-columns p{ font-size:16.5px; color:var(--ink-soft); line-height:1.8; }
.about-claim{
  margin-top:36px; font-family:'Fraunces', serif; font-style:italic; font-size:clamp(1.25rem,2.2vw,1.65rem);
  color:var(--green-dark); border-left:3px solid var(--gold); padding-left:22px; max-width:760px;
}
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.value-card{ background:var(--card); padding:36px 32px; }
.value-card h3{ font-family:'Fraunces', serif; font-size:20px; font-weight:600; color:var(--green-deep); margin-bottom:10px; }
.value-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; }

/* Mitgliedschaft: Inland / Ausland */
.member-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px; }
.member-card{ background:var(--card); padding:40px 36px; }
.member-card__tag{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; background:var(--green); padding:5px 12px; margin-bottom:18px;
}
.member-card h3{ font-family:'Fraunces', serif; font-size:22px; font-weight:600; color:var(--green-deep); margin-bottom:14px; line-height:1.25; }
.member-card p{ font-size:15px; color:var(--ink-soft); line-height:1.75; margin-bottom:14px; }
.member-card strong{ color:var(--ink); }
.member-benefits{ list-style:none; margin:18px 0 0; }
.member-benefits li{ position:relative; padding:10px 0 10px 26px; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft); }
.member-benefits li::before{ content:"\2713"; position:absolute; left:0; top:10px; color:var(--gold-text); font-weight:700; }
.member-benefits strong{ color:var(--green-deep); }

/* Fotos (25.09.2026) */
.foto{ margin:0; border:1px solid var(--line); overflow:hidden; background:var(--card); }
.foto img, .member-hero__photo img{ display:block; width:100%; height:auto; }

/* Startseiten-Video (25.09.2026): läuft einmal; Steuerleiste oben rechts, blendet sich nach
   kurzer Zeit aus, damit sie die Einblendungen unten im Video nicht verdeckt */
.hero-video{ padding:0; overflow:hidden; align-self:center; }
.hero-video video{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.hero-video__leiste{ position:absolute; right:12px; top:14px; display:flex; gap:6px;
  padding:6px; border-radius:999px; background:rgba(13,55,51,.78); opacity:0; pointer-events:none; transition:opacity .3s; }
.hero-video.zeigt-steuerung .hero-video__leiste{ opacity:1; pointer-events:auto; }
.hero-video__leiste button{ width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.hero-video__leiste button:hover{ background:rgba(255,255,255,.16); }
.hero-video__leiste button:focus-visible{ outline:3px solid var(--gold); outline-offset:1px; }
.hero-video__leiste svg{ width:20px; height:20px; fill:currentColor; }
.hero-video.laeuft [data-aktion=play], .hero-video:not(.laeuft) [data-aktion=pause]{ opacity:.45; }
.hero-video [data-aktion=ton]{ margin-left:6px; border-left:1px solid rgba(255,255,255,.25); border-radius:0 50% 50% 0; }
.hero-video .i-an, .hero-video.mit-ton .i-aus{ display:none; }
.hero-video.mit-ton .i-an{ display:inline; }

/* Ab hier reicht die Breite fuer das waagerechte Menue nicht mehr - in keiner
   Sprache. Bewusst frueher als der Layout-Breakpoint (980px): Sonst haette
   Englisch bei 1100px noch ein Menue und Franzoesisch schon ein Burger-Symbol. */
@media (max-width:1240px){
  nav.links{display:none;}
  .burger{display:flex;}
  /* Fingerfreundliche Trefferflaechen: Die Menuepunkte waren nur 22px hoch,
     der Burger-Knopf 16px - empfohlen sind mindestens 44px. */
  nav.links a{padding:12px 0; font-size:15px;}
  .nav .btn{width:100%; justify-content:center; padding:14px 22px; font-size:14px;}
}

@media (max-width:980px){
  /* Die Kopfzeile hatte 32px Seitenabstand, der Seiteninhalt darunter 20px - das Logo
     stand sichtbar weiter innen als die Ueberschriften. Bei 320px Breite wurde es
     ausserdem zu eng fuer Logo, Flaggen und Menueknopf nebeneinander. */
  .nav{padding:12px 20px;}
  .burger{padding:14px 10px; margin-right:-10px;}
  /* Logo plus drei Flaggen plus Burger passen sonst nicht auf 390px Breite. */
  .block-folge{margin-top:56px;}
  .logo img{height:48px;}
  .sprache__kuerzel{display:none;}
  /* Ohne Kuerzel war eine Flagge nur 23px hoch - darunter trifft man am Handy daneben.
     Mit mehr Polsterung sind es 27px je Flagge, ohne die Kopfzeile aufzublaehen. */
  .sprache{padding:6px 10px; gap:0;}
  .sprachen{gap:2px; margin-left:8px;}
  /* Kalendertage und Zeitfenster im Buchungsassistenten: knapp unter der
     empfohlenen Fingerbreite, deshalb am Handy etwas hoeher. */
  .bk-day{padding:13px 6px;}
  .bk-slot{padding:12px 18px;}
  .hero-grid{grid-template-columns:1fr; gap:48px;}
  .service-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr; gap:44px;}
  .step:not(:last-child)::after{display:none;}
  .biz-benefits{grid-template-columns:1fr;}
  .applicant-wrap{grid-template-columns:1fr; gap:48px;}
  .about-wrap{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr;}
  .contact-wrap{grid-template-columns:1fr; gap:36px;}
  .member-hero{grid-template-columns:1fr;}
  .pillar-grid{grid-template-columns:1fr;}
  .about-columns{grid-template-columns:1fr; gap:0;}
  .value-grid{grid-template-columns:1fr;}
  .member-cards{grid-template-columns:1fr;}
  .event-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .angebot-kat__items{grid-template-columns:1fr;}
  section{padding:76px 0;}
  .wrap{padding:0 20px;}
  .service-grid{margin:0 20px;}
}

/* Nur auf den schmalsten Geraeten (iPhone SE, 320px): Dort passt
   "Wohnungsanmeldung" in keine Zeile und brach ohne Trennstrich mitten im Wort um.
   Ab 390px ist der Platz da, und die Schlagzeilen bleiben wie gewollt ungetrennt. */
@media (max-width:380px){
  h2,h3{hyphens:auto;}
}

/* ---------- WENIGER BEWEGUNG ---------- */
/* Wer im Betriebssystem Bewegung abbestellt hat, bekommt den Inhalt sofort zu sehen
   statt eingeblendet - und die Sprungmarken springen, statt zu scrollen. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal], [data-reveal].is-visible{opacity:1; transform:none; transition:none;}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}

/* ---------- DRUCKANSICHT ---------- */
/* Vor allem fuer die Rechtstexte (Widerrufsbelehrung, AGB, Datenschutz): Die
   bekommt man ausgedruckt zu den Unterlagen. Bedienelemente haben auf Papier
   nichts verloren, Adressen dagegen schon - im Druck sieht man kein Ziel. */
@media print{
  header, .burger, .sprachen, .back-link, footer, .btn, .form, .booking{ display:none !important; }
  html, body{ background:#fff !important; color:#000 !important; font-size:11pt; }
  body{ line-height:1.5; }
  section, .textpage{ padding:0 !important; }
  .textpage{ max-width:none; }
  .wrap{ max-width:none; padding:0; }
  h1,h2,h3,h4,.textpage p,.textpage li,.textpage h2,.textpage h3{ color:#000 !important; }
  /* Das Einblenden haengt an JavaScript - ohne diese Zeile bliebe im Druck alles leer. */
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  a{ color:#000 !important; text-decoration:underline; }
  /* Nur vollstaendige Adressen anhaengen: Bei "mailto:"/"tel:" steht die Adresse
     im Rechtstext ohnehin schon als Linktext da, das waere doppelt. */
  a[href^="http"]::after{
    content:" (" attr(href) ")"; font-size:9pt; overflow-wrap:anywhere;
  }
  h1,h2,h3,h4{ break-after:avoid-page; }
  p,li{ orphans:3; widows:3; }
  .sprachhinweis, .agent-note, .booking__summary{ border-left:2px solid #000; background:none; }
}


/* ================= HANDY-NACHBESSERUNGEN 19.09.2026 =================
   Aus einer Pruefung aller 36 Seiten (12 Seiten x 3 Sprachen) bei 390x844
   und 320x568. Die Messwerte stehen in /root/migranten-hilfe/mobil-befunde.md. */

/* flex:1 setzt min-width:auto - eine Stufe schrumpft dann nicht unter ihr
   laengstes Wort. "Rendez-vous" (fr) und "Appointment" (en) schoben die
   Startseite bei 320px auf 331 bzw. 354 Pixel Breite; die feste Kopfzeile
   wurde mitgezogen und der Menueknopf rutschte aus dem Bild. Auf Deutsch
   passte "Zahlung" gerade noch - deshalb fiel es nie auf. */
.flow-graphic .fg-step{ min-width:0; }
.flow-graphic .fg-label{ overflow-wrap:anywhere; hyphens:auto; }

@media (max-width:1240px){
  /* Das aufgeklappte Menue haengt an der Kopfzeile statt an einem gemessenen
     Pixelwert. max-height/overflow: auf dem iPhone SE ragte es 111px unten
     heraus - "Beratung buchen" war schlicht nicht erreichbar. stretch: die
     Eintraege waren nur so breit wie ihr Text ("Events" 46px in einem 326px
     breiten Menue), daneben tippte man ins Leere. */
  nav.links.is-offen{
    display:flex;
    position:absolute;
    top:100%; left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:16px 20px;
    gap:10px;
    max-height:calc(100vh - 100%);
    max-height:calc(100dvh - 100%);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  nav.links.is-offen a{ padding:12px 8px; }
}

@media (max-width:980px){
  /* Die Ueberschrift lag auf 30 von 36 Seiten hinter der Kopfzeile:
     ".wrap{padding:0 20px}" ist die Kurzform und loescht den Abstand nach oben
     von .textpage gleich mit. Zwei Klassen schlagen eine - deshalb greift das
     hier zuverlaessig, unabhaengig von der Reihenfolge. */
  .wrap.textpage{ padding-top:144px; padding-bottom:64px; }

  /* 36px Polster liessen bei 320px nur 206px Inhalt uebrig. Mit 16px sind es
     246px - dadurch schafft der Kalender 3 statt 2 Spalten (bei 390px: 4). */
  .booking{ padding:20px 16px; }
  .angebot-kat{ padding:24px 18px; }
  .booking__calendar{ grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); }
  .price-chip{ flex:1 1 100%; min-width:0; }
  .price-chip__price{ font-size:1.35rem; overflow-wrap:anywhere; }

  /* Trefferflaechen lagen bei 42-43px, empfohlen sind 44px. */
  .bk-slot{ padding:13px 18px; }
  .bk-pay{ padding:15px 14px; }
  .angebot-kat__toggle{ width:100%; padding:15px 22px; }

  /* Kein Zierrat, sondern Fliesstext mit echter Information. */
  .form__note{ font-size:13.5px; }
  .booking__step-tag{ font-size:12px; }
  .field select{ padding-left:10px; padding-right:10px; }
}