/* ============================================================
   mitdenker. – Gestaltungssystem v7.2
   Aufbau: MOBILE FIRST. Basis = Handy, danach min-width-Stufen.
   Stufen: 600px · 900px (Typografie/Raster) · 1060px (Desktopnavigation)
           1100px (fünfspaltiger Fuß) · 1180px (Telefonnummer im Kopf) · 1280px

   Warum die Navigation erst ab 1060px umschaltet:
   Logo, fünf Navigationspunkte und Telefonnummer stehen zwischen 900 und
   etwa 1050px unnötig eng. Bis 1059px bleibt deshalb das Burger-Menü.

   Farbwelt nach architektonischer Referenz:
   warmes Papierweiß, Steingrau, weiche Schatten, Graphit.
   Kein Gold, kein Hochglanz – Kontrast entsteht über Fläche und Licht.

   Schrift: Newsreader (Serif, leicht) für Überschriften
            Instrument Sans für Text, Navigation und Auszeichnungen
            Beide lokal als WOFF2 – keine Anfrage an Google.
   Signatur: der Bogen – als Bildabschluss und Flächenmotiv
   ============================================================ */

/* ------------------------------------------------------------
   Schriften – lokal gehostet, nur die tatsächlich genutzten Schnitte.
   font-display:swap, damit Text sofort lesbar ist (LCP/CLS).
   ------------------------------------------------------------ */
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:300;font-display:swap;
  src:url("fonts/newsreader-300.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/newsreader-400.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader";font-style:italic;font-weight:300;font-display:swap;
  src:url("fonts/newsreader-300-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/instrument-sans-400.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/instrument-sans-500.woff2") format("woff2");
}
@font-face{
  font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/instrument-sans-600.woff2") format("woff2");
}

:root{
  /* Flächen */
  --papier:#FAF9F6;
  --papier-hell:#FFFFFF;
  --stein:#EFEDE7;
  --stein-tief:#DFDBD3;
  --graphit:#37342F;
  --graphit-tief:#2A2724;
  --graphit-mittel:#55504A;

  /* Schrift
     Kontrastwerte gegen die drei hellen Gründe (Papier #FAF9F6, Weiß, Stein
     #EFEDE7). Alle Textfarben liegen über 4,5:1 – auch die kleinen Labels
     in 0,7rem. --tinte-hell wurde dafür von #B4AEA4 (2,1:1) abgedunkelt. */
  --tinte:#24221E;        /* 14,1:1 */
  --tinte-weich:#6C6862;  /*  5,3:1 */
  --tinte-hell:#777168;   /*  4,6:1 – nur auf Papier und Weiß im Einsatz */

  /* Linien und Ton
     --ton war mit #8B8477 bei 3,5:1 zu hell für die Auszeichnungen. */
  --linie:#E4E0D9;
  --linie-dunkel:#4A4640;
  --ton:#716B61;          /*  5,0:1 auf Papier, 4,5:1 auf Stein */
  --ton-hell:#BFB8AB;     /* nur auf dunklem Grund */

  --wrap:1180px;
  --gutter:22px;
  --sec-y:64px;
  --radius:3px;

  --fs-hero:2.35rem;
  --fs-h2:1.75rem;
  --fs-h3:1.18rem;
  --fs-lead:1.06rem;
  --fs-body:1rem;
  --fs-small:0.88rem;

  /* Höhe des fixierten Kopfbereichs – Grundlage für Sprungmarken */
  --kopf-h:66px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* Bewusst KEIN overflow-x:hidden.
     Die Regel würde Überbreiten nur verstecken statt sie zu beheben.
     Falls nach der Abnahme doch nötig, hier ergänzen – aber erst dann. */
}
img{max-width:100%;display:block}
a{color:inherit}

/* ------------------------------------------------------------
   Umbruch- und Überlaufschutz
   Flex- und Grid-Kinder dürfen ihre Spalte nicht aufspreizen.
   Ohne min-width:0 verbreitert ein langes Wort die ganze Spalte
   und erzeugt horizontales Scrollen.
   ------------------------------------------------------------ */
.raster > *,.split > *,.hero-grid > *,.foot-grid > *,.rollen > *,
.markt-raster > *,.kennzahlen > *,.band > *,.head-inner > *,
.btn-row > *,.facts > *,.keks-inhalt > *,.feldpaar > *,
.steckbrief dl > *,.chips > *,.person--kompakt > *,.gegen > *,.wege > *{min-width:0}
.fliess,.lead,.karte p,.antwort,.foot-adr,.kdaten dd{overflow-wrap:break-word}

/* Sprungmarken: Überschrift darf nicht hinter dem fixierten Kopf liegen */
[id]{scroll-margin-top:calc(var(--kopf-h) + 40px)}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.sec--mist{background:var(--stein)}
.sec--ink{
  background:var(--graphit-mittel);color:var(--papier);
  /* Auf dem helleren Grund brauchen Linien und Sekundärtext mehr Helligkeit,
     damit der Kontrast lesbar bleibt (Fließtext 5,0:1). */
  --linie-dunkel:#7A746A;
  --tinte-hell:#D2CCC2;
  --ton-hell:#CFC8BB;
}
.sec--tight{padding-top:0}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:300;
  line-height:1.16;
  letter-spacing:-0.012em;
  margin:0 0 .55em;
  text-wrap:balance;
  color:var(--tinte);
}
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4{color:var(--papier)}
h1{font-size:var(--fs-hero);line-height:1.11}

/* Mehrteilige Satzüberschrift: bricht an den Kommas, nicht irgendwo */
.h1--satz{font-size:1.6rem;line-height:1.24;letter-spacing:-0.006em;text-wrap:pretty}
/* Nur die direkten Zeilen-Spans umbrechen – der Satzpunkt (.dot) ist ein
   verschachteltes span und muss in der Zeile stehen bleiben. */
.h1--satz > span{display:block}
.h1--satz > span + span{margin-top:.06em}
.h1--satz .dot{display:inline}
/* Variante für den Auftakt der Startseite: größer gesetzt */
.h1--gross{font-size:1.85rem;line-height:1.2}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:400;line-height:1.32;letter-spacing:0}
h4{font-size:1.02rem;font-weight:400}
p{margin:0 0 1.15em}
.dot{color:var(--ton)}
.sec--ink .dot{color:var(--ton-hell)}

.eyebrow{
  font-family:"Instrument Sans",sans-serif;
  font-size:0.71rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--ton);
  margin:0 0 16px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--ton);flex:none}
.sec--ink .eyebrow{color:var(--ton-hell)}
.sec--ink .eyebrow::before{background:var(--ton-hell)}
/* Variante für die längere Einordnungszeile über der H1 der Startseite:
   gleiche Auszeichnung wie auf den Unterseiten, nur mehrzeilig gesetzt. */
.eyebrow--lang{
  align-items:flex-start;line-height:1.6;letter-spacing:.12em;
  margin-bottom:22px;
}
.eyebrow--lang::before{margin-top:.78em}

.lead{font-size:var(--fs-lead);line-height:1.65;color:var(--tinte-weich);max-width:62ch;margin:0 0 30px}
.sec--ink .lead{color:var(--tinte-hell)}
.sec-head{max-width:64ch;margin-bottom:36px}
.sec-head p:last-child{margin-bottom:0;color:var(--tinte-weich);font-size:var(--fs-lead);line-height:1.65}
.sec--ink .sec-head p:last-child{color:var(--tinte-hell)}
.fliess{max-width:68ch}
.fliess p{color:var(--tinte-weich)}
/* Hervorhebungen im Text werden über die Farbe gesetzt, nicht über das
   Schriftgewicht. Fette Passagen im Fließtext wirken laut und zerreißen
   den ruhigen Satz. */
strong,b,.hebt{font-weight:400;color:var(--tinte)}
.sec--ink strong,.sec--ink b,.sec--ink .hebt{color:var(--papier)}
.fliess strong,.fliess .hebt{color:var(--tinte)}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:54px;padding:15px 28px;
  border:1px solid var(--graphit);background:var(--graphit);color:var(--papier);
  text-decoration:none;border-radius:var(--radius);
  font-size:0.97rem;font-weight:500;letter-spacing:.01em;cursor:pointer;text-align:center;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
.btn:hover{background:var(--tinte);border-color:var(--tinte)}
.btn--ghost{background:transparent;color:var(--tinte);border-color:var(--stein-tief)}
.btn--ghost:hover{background:transparent;border-color:var(--graphit);color:var(--tinte)}
.btn--onink{background:var(--papier);border-color:var(--papier);color:var(--graphit)}
.btn--onink:hover{background:var(--stein);border-color:var(--stein);color:var(--graphit)}
.btn-row{display:flex;flex-direction:column;gap:12px}

.tlink{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:0.94rem;font-weight:500;color:var(--tinte);
  border-bottom:1px solid var(--ton);padding-bottom:4px;min-height:32px;
  transition:gap .22s ease,color .22s ease,border-color .22s ease;
}
.tlink:hover{gap:15px;color:var(--ton)}
.sec--ink .tlink{color:var(--papier);border-bottom-color:var(--ton-hell)}
.sec--ink .tlink:hover{color:var(--ton-hell)}

/* ---------- Kopfbereich ---------- */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--linie);
}
.head-inner{display:flex;align-items:center;gap:14px;min-height:66px}
.wordmark{display:block;margin-right:auto;flex:none;line-height:0}
.wordmark img{height:38px;width:auto}
.head-tel{display:none}
.burger{
  display:flex;width:46px;height:46px;border:1px solid var(--linie);background:transparent;
  border-radius:var(--radius);cursor:pointer;padding:0;align-items:center;justify-content:center;flex:none;
}
.burger span{display:block;width:20px;height:1px;background:var(--tinte);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:1px;background:var(--tinte);
  transition:transform .22s ease,top .22s ease;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mainnav{
  position:absolute;top:100%;left:0;right:0;background:#fff;display:none;
  border-bottom:1px solid var(--linie);max-height:calc(100vh - 66px);overflow-y:auto;
}
.mainnav.is-open{display:block}
.mainnav ul{list-style:none;margin:0;padding:6px var(--gutter) 20px}
.mainnav li{border-bottom:1px solid var(--linie)}
.mainnav a{display:block;padding:15px 0;text-decoration:none;font-size:1.02rem;font-weight:500}
.mainnav a[aria-current="page"]{color:var(--ton)}
.mainnav .nav-tel{color:var(--ton)}

/* ---------- Brotkrumen ---------- */
.krumen{font-size:var(--fs-small);color:var(--tinte-weich);padding-block:20px 0}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.krumen li+li::before{content:"/";margin-right:8px;color:var(--tinte-hell)}
.krumen a{text-decoration:none}
.krumen a:hover{color:var(--ton)}

/* ---------- Hero ---------- */
.hero{padding-block:42px 50px;position:relative}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:28px}

/* Faktenbox */
.steckbrief{
  border:1px solid var(--linie);background:var(--papier-hell);
  padding:24px;border-radius:var(--radius);margin-top:34px;
}
.steckbrief--breit{margin-top:0}
.steckbrief h2{
  font-family:"Instrument Sans",sans-serif;font-size:0.71rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;color:var(--ton);margin-bottom:18px;
}
.steckbrief dl{margin:0;display:grid;gap:0}
.steckbrief .fakt{margin-bottom:20px}
.steckbrief .fakt:last-child{margin-bottom:0}
.steckbrief dt{
  font-size:0.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--tinte-hell);margin-bottom:6px;
}
.steckbrief dd{margin:0;font-size:0.97rem;line-height:1.55;color:var(--tinte-weich)}

/* Situationsliste */
.anliegen{
  border:1px solid var(--linie);background:var(--papier-hell);
  padding:24px;border-radius:var(--radius);
}
.anliegen h2{font-family:"Newsreader",Georgia,serif;font-size:1.24rem;font-weight:400;margin-bottom:4px}
.anliegen > p{margin:0 0 14px;font-size:var(--fs-small);color:var(--tinte-weich)}
.anliegen ul{list-style:none;margin:0;padding:0}
.anliegen li+li{border-top:1px solid var(--linie)}
.anliegen a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  text-decoration:none;padding:15px 0;line-height:1.45;min-height:48px;
  font-size:0.99rem;transition:color .22s ease;
}
.anliegen a:hover{color:var(--ton)}
.anliegen .arw{color:var(--ton);flex:none}

.facts{
  display:flex;flex-direction:column;gap:10px;margin-top:34px;
  padding-top:24px;border-top:1px solid var(--linie);
}
.facts span{font-size:var(--fs-small);color:var(--tinte-weich);display:flex;align-items:flex-start;gap:10px}
.facts span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ton);flex:none;margin-top:9px}

/* ---------- Raster ---------- */
.raster{display:grid;gap:20px}
.raster--linie{gap:1px;background:var(--linie);border:1px solid var(--linie)}

/* ---------- Karten ---------- */
.karte{background:var(--papier-hell);padding:26px;display:flex;flex-direction:column}
.raster:not(.raster--linie) .karte{border:1px solid var(--linie);border-radius:var(--radius)}
.karte .marke{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--ton);margin:0 0 16px;
}
.karte p{color:var(--tinte-weich);margin:0 0 22px}
.karte .tlink{margin-top:auto;align-self:flex-start}
.karte ul{list-style:none;margin:0 0 24px;padding:0}
.karte ul li{
  padding:10px 0 10px 20px;border-top:1px solid var(--linie);position:relative;
  font-size:0.96rem;color:var(--tinte-weich);
}
.karte ul li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:1px;background:var(--ton)}

/* ---------- Schlagworte ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.chips li{
  border:1px solid var(--linie);background:transparent;border-radius:99px;
  padding:9px 17px;font-size:0.89rem;color:var(--tinte-weich);
}
.sec--ink .chips li{border-color:var(--linie-dunkel);color:var(--tinte-hell)}

/* ---------- Aufzählung im Fließtext ---------- */
.fliess .liste{list-style:none;margin:0 0 1.15em;padding:0}
.fliess .liste li{
  padding:7px 0 7px 20px;position:relative;color:var(--tinte-weich);font-size:0.97rem;
}
.fliess .liste li::before{
  content:"";position:absolute;left:0;top:17px;width:8px;height:1px;background:var(--ton);
}
.fliess h2{font-size:1.35rem;margin-top:2em;margin-bottom:.5em}
.fliess h2:first-child{margin-top:0}

/* ---------- Bildfelder ---------- */
.bildfeld{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--stein);line-height:0}
.bildfeld img{width:100%;height:auto;display:block}
.bildfeld--oben{margin-bottom:32px}

/* ---------- Märkte als aufklappbare Kacheln ---------- */
.markt-raster{display:grid;gap:12px;align-items:start}
.markt{
  background:var(--papier-hell);border:1px solid var(--linie);border-radius:var(--radius);
  transition:border-color .2s ease;
}
.markt[open]{border-color:var(--stein-tief)}
.markt summary{
  list-style:none;cursor:pointer;position:relative;
  padding:18px 46px 18px 20px;min-height:56px;display:flex;align-items:center;
  font-family:"Newsreader",Georgia,serif;font-size:1.06rem;font-weight:400;line-height:1.35;
}
.markt summary::-webkit-details-marker{display:none}
.markt summary::after{
  content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:1px solid var(--ton);border-bottom:1px solid var(--ton);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.markt[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.markt-text{padding:0 20px 20px}
.markt-text p{margin:0;font-size:0.95rem;line-height:1.6;color:var(--tinte-weich)}
.marktliste-hinweis{
  margin:26px 0 0;font-size:var(--fs-small);color:var(--tinte-weich);max-width:62ch;
}

/* ---------- Rollenliste ---------- */
.rollen{display:grid;gap:24px}
.rollen-block h3{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--linie)}
.sec--ink .rollen-block h3{border-bottom-color:var(--linie-dunkel)}
.rollen-block ul{list-style:none;margin:0;padding:0}
.rollen-block li{padding:6px 0 6px 18px;position:relative;font-size:0.96rem;color:var(--tinte-weich)}
.sec--ink .rollen-block li{color:var(--tinte-hell)}
.rollen-block li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--ton)}
.sec--ink .rollen-block li::before{background:var(--ton-hell)}

/* ---------- Ablauf ---------- */
.ablauf{list-style:none;margin:0;padding:0;counter-reset:schritt;display:grid;gap:0}
.ablauf li{counter-increment:schritt;padding:24px 0 24px 54px;border-top:1px solid var(--linie);position:relative}
.ablauf li:last-child{border-bottom:1px solid var(--linie)}
.ablauf li::before{
  content:counter(schritt,decimal-leading-zero);position:absolute;left:0;top:26px;
  font-size:0.8rem;color:var(--ton);letter-spacing:.1em;
}
.ablauf h3{margin-bottom:7px}
.ablauf p{margin:0 0 12px;color:var(--tinte-weich);font-size:0.97rem}
.ablauf p:last-child{margin-bottom:0}
/* Was in diesem Schritt tatsächlich geliefert wird */
.lieferung{
  margin:0;padding:12px 0 0;border-top:1px solid var(--linie);
  font-size:0.93rem;color:var(--tinte-weich);
}
.lieferung b{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--ton);margin-bottom:5px;
}

/* ---------- Personen ---------- */
.person{display:flex;flex-direction:column}
.portraet{margin:0 0 22px;overflow:hidden;border-radius:var(--radius);background:var(--stein)}
.portraet img{width:100%;height:auto;display:block}
.person h3{margin-bottom:4px;font-size:1.32rem}
.person .rolle{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--tinte-hell);margin:0 0 18px;
}
.merkmale{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0 0 18px;padding:0}
.merkmale li{
  font-size:.76rem;color:var(--tinte-weich);border:1px solid var(--linie);
  border-radius:99px;padding:5px 12px;line-height:1.35;
}
.person blockquote{
  margin:0 0 18px;font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;
  font-size:1.14rem;line-height:1.5;color:var(--tinte);
  border-left:1px solid var(--ton);padding-left:18px;
}
.person .vita{margin:0 0 14px;font-size:0.95rem;color:var(--tinte-weich)}
/* Durchwahl und E-Mail direkt am Porträt */
.direktwahl{margin:0;font-size:0.97rem;line-height:1.9}
.direktwahl a{
  text-decoration:none;color:var(--tinte);font-weight:500;
  border-bottom:1px solid var(--linie);padding-bottom:2px;
}
.direktwahl a:hover{border-bottom-color:var(--ton);color:var(--ton)}

/* ---------- Partnernetzwerk ---------- */
.netzwerk{border-top:1px solid var(--linie);padding-top:34px}
.sec--ink .netzwerk{border-top-color:var(--linie-dunkel)}

/* ---------- Kennzahlen ---------- */
.kennzahlen{display:grid;gap:0;border-top:1px solid var(--linie)}
/* Fünf Werte im ersten Bildschirm – kompakter gesetzt als im Fließtext */
.kennzahlen--fuenf{margin-top:38px}
.kennzahlen--fuenf .kennzahl{padding:18px 0}
.kennzahlen--fuenf .kennzahl b{font-size:2.1rem;margin-bottom:6px}
.kennzahlen--fuenf .kennzahl span{font-size:0.9rem;max-width:30ch}
.kennzahl{padding:22px 0;border-bottom:1px solid var(--linie)}
.kennzahl b{
  display:block;font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:2.6rem;line-height:1;letter-spacing:-0.02em;margin-bottom:10px;color:var(--tinte);
}
.kennzahl span{color:var(--tinte-weich);font-size:0.94rem;display:block;max-width:34ch}
.sec--ink .kennzahlen{border-top-color:var(--linie-dunkel)}
.sec--ink .kennzahl{border-bottom-color:var(--linie-dunkel)}
.sec--ink .kennzahl b{color:var(--papier)}
.sec--ink .kennzahl span{color:var(--tinte-hell)}

/* ---------- Kennzahlen nach Arbeitsfeld getrennt ----------
   Zwei beschriftete Gruppen unter den beiden Leistungskarten. Jede Zahl
   erklärt sich durch ihre Gruppe – niemand muss sortieren, was gezählt wird. */
.feldzahlen{display:grid;gap:34px;margin-top:44px}
.feldzahlen .marke{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--ton);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--linie);
}
.feldzahlen-reihe{display:grid;gap:18px 24px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.feldzahlen-reihe > div{min-width:0}
.feldzahlen-reihe b{
  display:block;font-family:"Newsreader",Georgia,serif;font-weight:300;
  font-size:1.85rem;line-height:1;letter-spacing:-0.02em;margin-bottom:6px;color:var(--tinte);
}
.feldzahlen-reihe span{display:block;font-size:0.84rem;line-height:1.45;color:var(--tinte-weich)}

/* Definitions- und Quellenzeile unter den Kennzahlen */
.zahlen-fussnote{
  margin:16px 0 0;font-size:0.82rem;line-height:1.55;color:var(--tinte-weich);max-width:78ch;
}
.sec--ink .zahlen-fussnote{color:var(--tinte-hell)}

/* ---------- Disziplinen ---------- */
.disziplin{padding:20px 0;border-top:1px solid var(--linie)}
.disziplin h3{margin-bottom:6px}
.disziplin p{margin:0;color:var(--tinte-weich);font-size:0.96rem}
.sec--ink .disziplin{border-top-color:var(--linie-dunkel)}
.sec--ink .disziplin p{color:var(--tinte-hell)}

/* ---------- Werte ---------- */
.wert{padding-top:20px;border-top:1px solid var(--linie)}
.sec--ink .wert{border-top-color:var(--linie-dunkel)}
.wert h3{margin-bottom:8px}
.wert p{margin:0;color:var(--tinte-weich);font-size:0.96rem}
.sec--ink .wert p{color:var(--tinte-hell)}

/* ---------- Aussage ---------- */
.statement{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:300;
  font-size:1.65rem;line-height:1.32;letter-spacing:-0.01em;margin:0 0 22px;text-wrap:balance;
}

/* ---------- Band ---------- */
.band{
  background:var(--graphit-mittel);color:var(--papier);
  border-radius:var(--radius);padding:32px 24px;
  --linie-dunkel:#7A746A;
  --tinte-hell:#D2CCC2;
  --ton-hell:#CFC8BB;
}
.band h2{margin-bottom:12px;color:var(--papier)}
.band p{color:var(--tinte-hell);max-width:56ch}
.band .eyebrow{color:var(--ton-hell)}
.band .eyebrow::before{background:var(--ton-hell)}
.band .dot{color:var(--ton-hell)}
.band .btn-row{margin-top:24px}

/* ---------- Karte (Zwei-Klick-Lösung) ---------- */
.mapbox{
  position:relative;margin-top:36px;background:var(--papier-hell);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;
  aspect-ratio:4/3;display:grid;place-items:center;
}
.mapbox-platzhalter{padding:28px 22px;text-align:center;max-width:52ch}
.mapbox-platzhalter h3{margin-bottom:10px}
.mapbox-platzhalter p{color:var(--tinte-weich);font-size:var(--fs-small);margin:0 0 20px}
.mapbox-platzhalter .btn{width:auto;min-width:200px}
.mapbox-alternative{margin:18px 0 0!important;font-size:0.82rem!important;color:var(--tinte-hell)!important}
.mapbox-alternative a{color:var(--tinte-weich)}
.mapbox iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  /* Kartenmaterial auf die warme Graustufenwelt der Seite bringen */
  filter:grayscale(1) sepia(.24) saturate(.55) contrast(.9) brightness(1.06);
}
/* leichter Farbschleier, damit die Karte im Papierton der Seite liegt */
.mapbox.ist-geladen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--papier);opacity:.10;mix-blend-mode:multiply;
}

/* ---------- Fragen ---------- */
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:1.1rem;line-height:1.4;
  min-height:56px;display:flex;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:1px solid var(--ton);border-bottom:1px solid var(--ton);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .antwort{padding:0 0 24px;color:var(--tinte-weich);max-width:70ch}
.faq .antwort p:last-child{margin-bottom:0}

/* ---------- Kontakt ---------- */
.kdaten dt{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ton);margin-bottom:8px;
}
.kdaten dd{margin:0 0 24px;line-height:1.7;color:var(--tinte-weich)}
.kdaten dd .hebt{color:var(--tinte-weich)}
.kdaten a{text-decoration:none;color:var(--tinte);border-bottom:1px solid var(--linie);padding-bottom:2px}
.kdaten a:hover{border-bottom-color:var(--ton);color:var(--ton)}
.hinweis{font-size:var(--fs-small);color:var(--tinte-weich);border-left:1px solid var(--linie);padding-left:16px;margin:0}

.form{background:var(--papier-hell);border:1px solid var(--linie);padding:26px;border-radius:var(--radius)}
.form h2{font-size:1.35rem}
.feldpaar{display:grid;gap:0}
.feld{margin-bottom:18px;display:flex;flex-direction:column}
.feld label{font-size:var(--fs-small);font-weight:500;margin-bottom:7px;color:var(--tinte-weich)}
.feld input,.feld select,.feld textarea{
  font:inherit;font-size:1rem;color:var(--tinte);background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--radius);padding:14px;min-height:52px;width:100%;
}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:1px solid var(--ton);outline-offset:1px;border-color:var(--ton)}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;font-size:var(--fs-small);color:var(--tinte-weich)}
.check input{width:22px;height:22px;min-height:22px;flex:none;margin-top:2px;accent-color:var(--ton)}
.form-note{margin:16px 0 0;font-size:var(--fs-small);color:var(--tinte-hell)}

/* ---------- Fußbereich ---------- */
.site-foot{
  background:var(--graphit-mittel);color:#D2CCC2;
  padding-block:52px 30px;
  --linie-dunkel:#7A746A;
  --ton-hell:#CFC8BB;
}
.foot-grid{display:grid;gap:32px}
.site-foot h4{
  font-family:"Instrument Sans",sans-serif;color:var(--papier);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;margin:0 0 16px;
}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:11px}
.site-foot a{text-decoration:none;font-size:0.95rem}
.site-foot a:hover{color:var(--papier)}
.foot-mark{margin:0 0 18px;line-height:0}
.foot-mark img{height:44px;width:auto}
.foot-adr{font-size:0.95rem;line-height:1.75;margin:0}
.social{display:flex;gap:10px;margin-top:20px}
.social a{
  width:44px;height:44px;border:1px solid var(--linie-dunkel);border-radius:50%;
  display:grid;place-items:center;font-size:.72rem;letter-spacing:.04em;
}
.social a:hover{background:var(--papier);border-color:var(--papier);color:var(--graphit)}
.foot-bottom{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--linie-dunkel);
  display:flex;flex-direction:column;gap:8px;font-size:var(--fs-small);
}

/* ---------- Einblicke: aufklappbare Essaykacheln ---------- */
.einblicke{display:grid;gap:14px;align-items:start}
.einblick{
  background:var(--papier-hell);border:1px solid var(--linie);border-radius:var(--radius);
  transition:border-color .2s ease;
}
.einblick[open]{border-color:var(--stein-tief)}
.einblick summary{
  list-style:none;cursor:pointer;position:relative;padding:24px 52px 24px 24px;min-height:56px;
}
.einblick summary::-webkit-details-marker{display:none}
.einblick summary::after{
  content:"";position:absolute;right:24px;top:32px;width:10px;height:10px;
  border-right:1px solid var(--ton);border-bottom:1px solid var(--ton);
  transform:rotate(45deg);transition:transform .22s ease;
}
.einblick[open] summary::after{transform:rotate(-135deg);top:36px}
.einblick .marke{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--ton);margin:0 0 10px;display:block;
}
.einblick h3{margin:0 0 10px;font-size:1.22rem;line-height:1.3}
.einblick .anriss{margin:0;font-size:0.95rem;line-height:1.6;color:var(--tinte-weich)}
.einblick-text{padding:0 24px 26px;max-width:70ch}
.einblick-text p{margin:0 0 1.1em;color:var(--tinte-weich);font-size:0.99rem}
.einblick-text p:last-child{margin-bottom:0}
.einblick-text .liste{list-style:none;margin:0 0 1.1em;padding:0}
.einblick-text .liste li{
  padding:7px 0 7px 20px;position:relative;color:var(--tinte-weich);font-size:0.97rem;
}
.einblick-text .liste li::before{
  content:"";position:absolute;left:0;top:17px;width:8px;height:1px;background:var(--ton);
}
.einblick-fuss{
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--linie);
  font-size:var(--fs-small);color:var(--tinte-hell);
}

/* ---------- Zwei Hauptwege im ersten Bildschirm ---------- */
.wege{display:grid;gap:12px;margin:0 0 24px;list-style:none;padding:0}
.weg{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border:1px solid var(--stein-tief);background:var(--papier-hell);
  border-radius:var(--radius);padding:16px 20px;min-height:64px;text-decoration:none;
  transition:border-color .22s ease,transform .22s ease;
}
.weg:hover{border-color:var(--graphit)}
.weg b{
  display:block;font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:1.06rem;line-height:1.3;letter-spacing:0;
}
.weg small{display:block;font-size:.82rem;line-height:1.45;color:var(--tinte-weich);margin-top:4px}
.weg .arw{color:var(--ton);flex:none}
/* Innerhalb der Situationsbox: abgesetzte Fläche statt Rahmen im Rahmen */
.anliegen .wege{margin:16px 0 18px;grid-template-columns:1fr}
.anliegen .wege:last-child{margin-bottom:0}
/* Schaltflächen mit Wegekasten darunter (Personalberatung, seit v8.0):
   Ab 600px ist der Block nur so breit wie die Schaltflächenzeile,
   der Kasten darunter füllt genau diese Breite. */
.cta-stapel{display:flex;flex-direction:column;gap:14px}
.cta-stapel .wege{margin:0;grid-template-columns:1fr}
@media (min-width:600px){
  .cta-stapel{display:inline-flex;max-width:100%}
  .cta-stapel .btn-row > .btn{flex:1 1 auto}
}
.anliegen .weg{background:var(--stein);border-color:var(--stein)}
.anliegen .weg:hover{border-color:var(--graphit)}
.anliegen > p{margin-top:0}

/* ---------- Anonymisierte Mandatsbeispiele ---------- */
.mandat{
  background:var(--papier-hell);border:1px solid var(--linie);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;
}
.mandat .marke{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--ton);margin:0 0 12px;
}
.mandat h3{font-size:1.14rem;margin-bottom:16px}
.mandat dl{margin:0}
.mandat dt{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--tinte-hell);margin-bottom:4px;
}
.mandat dd{margin:0 0 14px;font-size:.93rem;line-height:1.55;color:var(--tinte-weich)}
.mandat .ergebnis{margin-top:auto;padding-top:16px;border-top:1px solid var(--linie)}
.mandat .ergebnis dd{margin-bottom:0;color:var(--tinte);font-weight:500}

/* ---------- Kompakte Personendarstellung ---------- */
.person--kompakt{flex-direction:row;gap:18px;align-items:flex-start}
.person--kompakt .portraet{flex:none;width:104px;margin:0}
.person--kompakt h3{font-size:1.16rem;margin-bottom:2px}
.person--kompakt .rolle{margin-bottom:10px}
.person--kompakt blockquote{font-size:1rem;margin-bottom:0;padding-left:14px}
.person--kompakt .vita{margin-bottom:10px}

/* ---------- Aussage mit Rahmen (zweite Botschaft) ---------- */
.botschaft{
  border-left:2px solid var(--ton);padding:4px 0 4px 22px;margin:0 0 30px;max-width:60ch;
}
.botschaft p{
  font-family:"Newsreader",Georgia,serif;font-weight:300;font-size:1.32rem;
  line-height:1.36;letter-spacing:-0.008em;color:var(--tinte);margin:0;text-wrap:pretty;
}
.sec--ink .botschaft{border-left-color:var(--ton-hell)}
.sec--ink .botschaft p{color:var(--papier)}

/* ---------- Gegenüberstellung: sinnvoll / nicht sinnvoll ---------- */
.gegen{display:grid;gap:20px}
.gegen-block{border-top:2px solid var(--ton);padding-top:20px}
.gegen-block--aus{border-top-color:var(--stein-tief)}
.gegen-block h3{margin-bottom:14px}
.gegen-block ul{list-style:none;margin:0;padding:0}
.gegen-block li{
  padding:9px 0 9px 20px;position:relative;font-size:0.96rem;
  color:var(--tinte-weich);border-top:1px solid var(--linie);
}
.gegen-block li:first-child{border-top:0}
.gegen-block li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--ton)}
.gegen-block--aus li::before{background:var(--stein-tief)}

/* ---------- Hilfsklassen ---------- */
/* Hinweis in der WordPress-Fassung: erscheint nur, wenn dieses Stylesheet
   NICHT geladen wurde – also wenn die Datei ohne Server geöffnet wird.
   Auf der fertigen Website ist er deshalb nie sichtbar. */
.nur-ohne-css{display:none}

/* Die frühere .reveal-Einblendung ist entfallen. Sie setzte Elemente auf
   opacity:0 und machte sie erst per JavaScript sichtbar – ohne JavaScript
   blieben ganze Abschnitte unsichtbar. Zur ruhigen Anmutung der Seite passt
   die Animation ohnehin nicht. */
/* Tastaturfokus: 2px in Tintenschwarz, auf dunklem Grund in Papierweiß.
   Deutlich sichtbar auf jedem Untergrund der Seite. */
:focus-visible{outline:2px solid var(--tinte);outline-offset:3px;border-radius:1px}
.sec--ink :focus-visible,.site-foot :focus-visible,.band :focus-visible{outline-color:var(--papier)}
.btn:focus-visible{outline-offset:4px}
/* Sprunglink: unsichtbar, aber ohne Einfluss auf die Seitenbreite.
   Bewusst kein left:-9999px – das kann je nach Kontext Überbreite erzeugen. */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{
  width:auto;height:auto;overflow:visible;clip:auto;
  left:var(--gutter);top:10px;z-index:99;background:var(--papier);
  padding:12px 18px;border:1px solid var(--ton);
}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   AB 600 px
   ============================================================ */
@media (min-width:600px){
  :root{--gutter:34px;--sec-y:82px;--fs-hero:3rem;--fs-h2:2.1rem;--fs-h3:1.24rem;--fs-lead:1.12rem}
  /* 600–1099px: zweispaltiger Fuß, nicht der Fünfspalter */
  .h1--satz{font-size:2.05rem}
  .h1--gross{font-size:2.5rem}
  .btn{width:auto}
  .btn-row{flex-direction:row;flex-wrap:wrap;gap:14px}
  .raster--2{grid-template-columns:repeat(2,1fr)}
  .raster--3{grid-template-columns:repeat(2,1fr)}
  .facts{flex-direction:row;flex-wrap:wrap;gap:10px 30px}
  .feldpaar{grid-template-columns:1fr 1fr;gap:18px}
  .steckbrief{padding:28px}
  .steckbrief--breit{padding:34px}
  .steckbrief dl{grid-template-columns:1fr 1fr;gap:0 32px}
  .steckbrief .fakt{margin-bottom:24px}
  .rollen{grid-template-columns:repeat(2,1fr);gap:32px}
  .markt-raster{grid-template-columns:repeat(2,1fr)}
  .kennzahlen{grid-template-columns:repeat(3,1fr);gap:0 34px}
  .kennzahlen--fuenf{grid-template-columns:repeat(3,1fr);gap:0 30px}
  .kennzahlen--zwei{grid-template-columns:repeat(2,1fr);gap:0 40px}
  .feldzahlen-reihe b{font-size:2rem}
  .einblicke{grid-template-columns:repeat(2,1fr)}
  /* Gleiche Kachelhöhe im geschlossenen Zustand, damit nebeneinander
     liegende Kacheln nicht ohne inhaltlichen Grund unterschiedlich hoch sind. */
  .einblick summary{padding:28px 56px 28px 30px;min-height:186px}
  .einblick summary::after{right:28px}
  .einblick-text{padding:0 30px 30px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-direction:row;justify-content:space-between;flex-wrap:wrap;gap:10px 28px}
  .band{padding:40px 34px}
  .statement{font-size:2rem}
  .karte{padding:32px}
  .form{padding:32px}
  .hero{padding-block:56px 68px}
  .mapbox{aspect-ratio:16/9;margin-top:44px}
  .wordmark img{height:42px}
  .foot-mark img{height:52px}
  .wege{grid-template-columns:1fr 1fr;gap:14px}
  .mandat{padding:30px}
  .gegen{grid-template-columns:1fr 1fr;gap:40px}
  .botschaft p{font-size:1.5rem}
  .person--kompakt .portraet{width:124px}
}

/* ============================================================
   AB 900 px – Typografie und mehrspaltige Inhalte.
   Die Navigation bleibt hier bewusst noch im Burger-Menü.
   ============================================================ */
@media (min-width:900px){
  :root{--gutter:46px;--sec-y:108px;--fs-hero:3.7rem;--fs-h2:2.5rem;--fs-h3:1.3rem}
  .h1--satz{font-size:2.3rem;line-height:1.22}
  .h1--gross{font-size:2.9rem;line-height:1.16}
  .wordmark img{height:44px}

  .hero{padding-block:76px 96px}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
  .hero .steckbrief,.hero .anliegen{margin-top:0}
  .steckbrief dl{grid-template-columns:1fr}
  .steckbrief--breit{padding:44px}
  .steckbrief--breit dl{grid-template-columns:repeat(3,1fr);gap:0 48px}
  .steckbrief--breit .fakt{margin-bottom:30px}
  .raster--3{grid-template-columns:repeat(3,1fr)}
  .markt-raster{grid-template-columns:repeat(3,1fr);gap:14px}
  .raster--2{gap:44px}
  .feldzahlen{grid-template-columns:1fr 1fr;gap:44px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
  .split--schmal{grid-template-columns:.85fr 1.15fr}
  .band{display:grid;grid-template-columns:1.4fr auto;gap:44px;align-items:center;padding:56px}
  .band .btn-row{margin-top:0}
  .statement{font-size:2.45rem}
  .karte{padding:38px}
  .netzwerk{padding-top:44px}
  .mapbox{aspect-ratio:21/9;margin-top:56px}
  .botschaft p{font-size:1.7rem}
  .person--kompakt .portraet{width:150px}
  .person--kompakt{gap:26px}
}

/* ============================================================
   AB 1060 px – jetzt erst die vollständige Desktopnavigation.
   Darunter bleibt das Burger-Menü, damit Logo und Navigation
   auf kleinen Notebooks und Tablets nicht gequetscht werden.
   ============================================================ */
@media (min-width:1060px){
  :root{--kopf-h:82px}
  .burger{display:none}
  .head-inner{min-height:82px;gap:26px}
  .wordmark img{height:46px}
  .mainnav{position:static;display:block;background:none;border:0;max-height:none;overflow:visible}
  .mainnav ul{display:flex;gap:26px;padding:0}
  .mainnav li{border:0}
  .mainnav a{padding:8px 0;font-size:0.93rem;font-weight:400;color:var(--tinte-weich);position:relative;white-space:nowrap}
  .mainnav a:hover{color:var(--tinte)}
  .mainnav a::after{
    content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
    background:var(--ton);transition:right .26s ease;
  }
  .mainnav a:hover::after,.mainnav a[aria-current="page"]::after{right:0}
  .mainnav .nav-tel{display:none}
  .kennzahlen--fuenf{grid-template-columns:repeat(5,1fr);gap:0 26px}
  .kennzahlen--fuenf .kennzahl b{font-size:2.3rem}
}

/* ============================================================
   AB 1100 px – fünfspaltiger Fußbereich.
   ============================================================ */
@media (min-width:1100px){
  .foot-grid{grid-template-columns:1.5fr repeat(4,1fr);gap:34px}
}

/* ============================================================
   AB 1180 px – Telefonnummer im Kopfbereich.
   Zwischen 1060 und 1179px bleibt der Kopf bewusst ruhig: nur Logo
   und Navigation. Mit fünf Navigationspunkten stünde die Nummer
   darunter zu dicht an „Kontakt".
   ============================================================ */
@media (min-width:1180px){
  .head-tel{display:inline-flex;text-decoration:none;font-size:0.93rem;white-space:nowrap;color:var(--tinte-weich)}
  .head-tel:hover{color:var(--tinte)}
  .mainnav ul{gap:30px}
}

/* ============================================================
   AB 1280 px
   ============================================================ */
@media (min-width:1280px){
  :root{--gutter:64px;--sec-y:128px;--fs-hero:4.2rem;--fs-h2:2.8rem}
  .foot-grid{gap:44px}
  .h1--satz{font-size:2.5rem}
  .h1--gross{font-size:3.2rem}
  .karte--gross{grid-column:span 2}
  .statement{font-size:2.7rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Datenschutzhinweis am Seitenfuß ----------
   Der Hinweis darf weder Inhalte noch die Schaltflächen verdecken.
   Solange er sichtbar ist, bekommt die Seite unten so viel Abstand,
   wie der Hinweis hoch ist (--hinweis-h wird per Skript gesetzt).
   Auf 360–390px bleibt er dadurch unter rund einem Drittel der Höhe. */
.keks{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--papier-hell);border-top:1px solid var(--linie);
  box-shadow:0 -14px 30px -26px rgba(36,34,30,.5);
  padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .35s ease;
  max-height:32vh;overflow-y:auto;overscroll-behavior:contain;
}
.keks.ist-sichtbar{transform:none}
body.hinweis-offen{padding-bottom:var(--hinweis-h,0px)}
.keks-inhalt{
  width:100%;max-width:var(--wrap);margin:0 auto;
  display:flex;flex-direction:column;gap:12px;
}
.keks p{
  margin:0;font-size:0.84rem;line-height:1.5;color:var(--tinte-weich);max-width:74ch;
}
.keks a{color:var(--tinte)}
.keks-knoepfe{display:flex;gap:10px}
.keks .btn{width:100%;min-height:46px;padding:11px 22px;font-size:0.92rem}

@media (min-width:600px){
  .keks{padding-block:18px}
  .keks p{font-size:var(--fs-small)}
}
@media (min-width:760px){
  .keks{max-height:none;overflow:visible}
  .keks-inhalt{flex-direction:row;align-items:center;gap:28px}
  .keks-knoepfe{flex:none}
  .keks .btn{width:auto}
}