/* ==========================================================================
   Business Assistance — Stylesheet
   Farben laut Asset-Paket: Burgund #5E1224 · Rot #A81F32 · Signalrot #C0392F
                            Tinte #241416 · Papier #FCFAF9
   ========================================================================== */

:root{
  --burgundy:#5E1224;
  --red:#A81F32;
  --signal:#C0392F;
  --ink:#241416;
  --paper:#FCFAF9;
  --white:#FFFFFF;

  --ink-soft:#5C4B4E;
  --ink-faint:#7A6A6C;
  --line:#E7DFDD;
  --line-strong:#D2C6C4;
  --tint:#F6EEEE;

  --f-sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono:"IBM Plex Mono", "Noto Sans JP", "Noto Sans SC", "Hiragino Sans", "Yu Gothic", "Microsoft YaHei", ui-monospace, Menlo, Consolas, monospace;

  --measure:62ch;
  --pad:clamp(1.25rem, 5vw, 4.5rem);
  --rule:1px solid var(--line);

  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

.wrap{max-width:1140px;margin-inline:auto;padding-inline:var(--pad)}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--burgundy);color:var(--white);
  padding:.7rem 1.1rem;font-family:var(--f-mono);font-size:.78rem;z-index:99;
}
.skip:focus{left:.75rem;top:.75rem}

/* ---------------- Kopfzeile / Logo ---------------- */
.topbar{background:var(--white);border-bottom:var(--rule);position:sticky;top:0;z-index:20}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:5rem}

.ba-logo{display:flex;align-items:center;gap:1.05rem;text-decoration:none}
.ba-logo img{width:52px;height:auto;display:block;flex:none}
.ba-rule{width:1px;align-self:stretch;background:rgba(94,18,36,.28);flex:none}
.ba-text{display:flex;flex-direction:column;gap:.42rem;min-width:0}
.ba-name{
  font-size:clamp(1.05rem,.9rem + .6vw,1.42rem);font-weight:700;line-height:1;
  letter-spacing:.01em;color:var(--burgundy);white-space:nowrap;
}
.ba-name em{font-style:normal;font-weight:300;letter-spacing:.07em;color:var(--ink)}
.ba-sub{
  font-family:var(--f-mono);font-size:.68rem;font-weight:400;line-height:1;
  letter-spacing:.14em;color:var(--red);white-space:nowrap;
}
.ba-sub b{font-weight:400;color:var(--ink)}
.ba-caret{
  display:inline-block;width:6px;height:12px;background:var(--signal);
  margin-left:6px;vertical-align:-2px;
}
@media (max-width:520px){
  .ba-logo{gap:.7rem}
  .ba-logo img{width:40px}
  .ba-sub{font-size:.6rem;letter-spacing:.1em}
}

.lang{display:flex;align-items:center;gap:.1rem;font-family:var(--f-mono);font-size:.72rem;flex:none}
.lang button{
  font:inherit;letter-spacing:.12em;background:none;border:0;color:var(--ink-faint);
  padding:.4rem .5rem;cursor:pointer;transition:color .15s ease;
}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{color:var(--burgundy);font-weight:500;text-decoration:underline;text-underline-offset:.3em}
.lang span{color:var(--line-strong)}

/* ---------------- Bausteine ---------------- */
.eyebrow{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 1.5rem;
}
.row{
  display:grid;grid-template-columns:13rem minmax(0,1fr);
  gap:clamp(1rem,4vw,4rem);
  padding-block:clamp(3rem,6.5vw,5.5rem);
  border-top:var(--rule);
}
.row__label{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:.5rem;margin:0;
}
@media (max-width:820px){
  .row{grid-template-columns:1fr;gap:1.25rem}
  .row__label{padding-top:0}
}
h2{
  font-size:clamp(1.5rem,1.2rem + 1.3vw,2.1rem);font-weight:600;line-height:1.18;
  letter-spacing:-.015em;margin:0 0 1rem;max-width:26ch;text-wrap:balance;
}
.lede{margin:0;max-width:var(--measure);color:var(--ink-soft);font-size:1.06rem}

.btn{
  display:inline-flex;align-items:center;
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--white);background:var(--burgundy);
  padding:.95rem 1.6rem;border:1px solid var(--burgundy);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn--ghost{background:transparent;color:var(--burgundy);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--burgundy);color:var(--white);border-color:var(--burgundy)}

/* ---------------- Hero ---------------- */
.hero{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem)}
.hero h1{
  font-size:clamp(2.2rem,1.35rem + 3.7vw,4.1rem);font-weight:700;
  line-height:1.04;letter-spacing:-.027em;
  margin:0 0 1.5rem;max-width:21ch;text-wrap:balance;
}
.hero h1 .accent{color:var(--burgundy);display:block}
.hero p{margin:0;max-width:var(--measure);font-size:clamp(1.08rem,1rem + .4vw,1.24rem);color:var(--ink-soft)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem 1.1rem;margin-top:2.5rem}

/* ---------------- Sprachband ---------------- */
.band{background:var(--burgundy);color:var(--paper)}
.band__inner{padding-block:clamp(2.75rem,6vw,4.25rem)}
.band__words{
  display:flex;flex-wrap:wrap;gap:.55em 1.1em;align-items:baseline;
  font-family:var(--f-mono);font-size:clamp(1.15rem,.85rem + 1.5vw,2rem);
  letter-spacing:.02em;margin:0 0 1.6rem;
}
.band__words span{opacity:.55}
.band__words span:first-child{opacity:1;color:var(--white)}
.band__words i{font-style:normal;color:rgba(252,250,249,.35)}
.band p{margin:0;max-width:54ch;color:rgba(252,250,249,.82);font-size:1.06rem}

/* ---------------- Ablauf / Leistungen ---------------- */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(1.5rem,4vw,3.5rem)}
@media (max-width:700px){.steps{grid-template-columns:1fr}}
.step{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.9rem;padding-block:1.5rem;border-top:var(--rule)}
.steps>.step:nth-child(-n+2){border-top:0}
@media (max-width:700px){.steps>.step:nth-child(2){border-top:var(--rule)}}
.step__no{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--red);
  padding-top:.28rem;font-variant-numeric:tabular-nums;
}
.step h3{font-size:1.08rem;font-weight:600;margin:0 0 .35rem;letter-spacing:-.005em}
.step p{margin:0;color:var(--ink-soft);font-size:.96rem;max-width:44ch}

/* ---------------- Haltung / Werte ---------------- */
.values{display:grid;gap:2.4rem}
.value{border-left:2px solid var(--red);padding-left:1.15rem}
.value h3{font-size:1.16rem;font-weight:600;margin:0 0 .4rem;letter-spacing:-.008em}
.value p{margin:0;color:var(--ink-soft);max-width:56ch}

/* ---------------- Hinweiskasten (EU/DSGVO) ---------------- */
.note{background:var(--tint);border-left:2px solid var(--burgundy);padding:1.4rem 1.5rem;margin-top:1.8rem}
.note p{margin:0;max-width:56ch;font-size:.98rem;color:var(--ink-soft)}
.note strong{color:var(--ink);font-weight:600}

/* ---------------- Kontakt ---------------- */
.datasheet{border-collapse:collapse;width:100%;max-width:34rem;margin-top:2rem}
.datasheet th,.datasheet td{text-align:left;vertical-align:top;padding:.75rem 0;border-bottom:var(--rule)}
.datasheet th{
  font-family:var(--f-mono);font-weight:400;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);width:10rem;padding-right:1rem;
}
.datasheet td{font-size:.99rem}
.datasheet a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(168,31,50,.4);padding-bottom:1px}
.datasheet a:hover{color:var(--burgundy);border-color:var(--burgundy)}

/* ---------------- Fußzeile ---------------- */
.site-foot{border-top:var(--rule);background:var(--paper)}
.foot{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:space-between;align-items:baseline;
  padding-block:2.25rem 3rem;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.05em;color:var(--ink-faint);
}
.foot p{margin:0}
.foot nav{display:flex;gap:1.4rem}
.foot a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{color:var(--burgundy);border-color:var(--burgundy)}

/* ---------------- Rechtsseiten ---------------- */
.legal{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5rem);max-width:none}
.legal h1{
  font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem);font-weight:700;letter-spacing:-.022em;
  margin:0 0 .6rem;
}
.legal .updated{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 2.5rem}
.legal section{border-top:var(--rule);padding-block:1.9rem}
.legal h2{font-size:1.2rem;font-weight:600;margin:0 0 .7rem;max-width:none;letter-spacing:-.008em}
.legal h3{font-size:1rem;font-weight:600;margin:1.5rem 0 .4rem}
.legal p,.legal li{color:var(--ink-soft);max-width:70ch}
.legal p{margin:0 0 .9rem}
.legal ul{margin:0 0 .9rem;padding-left:1.15rem}
.legal li{margin-bottom:.35rem}
.legal a{color:var(--red)}
.legal dl{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.55rem 1.2rem;margin:0 0 1rem;max-width:44rem}
.legal dt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);padding-top:.22rem}
.legal dd{margin:0;color:var(--ink)}
@media (max-width:620px){
  .legal dl{grid-template-columns:1fr;gap:.15rem}
  .legal dd{margin-bottom:.8rem}
}
.todo{
  background:#FFF6DA;border-left:2px solid #C08A2F;padding:.35rem .6rem;
  font-family:var(--f-mono);font-size:.76rem;color:#7A5410;display:inline-block;
}
.backlink{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;display:inline-block;margin-bottom:2rem;
}
.backlink:hover{color:var(--burgundy)}

/* --------------------------------------------------------------------------
   Schriften lokal einbinden (empfohlen, spart die Verbindung zu Google)
   1. IBM Plex Sans + IBM Plex Mono von https://github.com/IBM/plex/releases
      herunterladen (OFL-Lizenz, kostenlos) und die woff2-Dateien nach
      assets/fonts/ legen.
   2. Den <link>-Tag auf fonts.googleapis.com in allen drei HTML-Dateien
      entfernen.
   3. Den folgenden Block einkommentieren.
   Erledigt: Schriften liegen in assets/fonts/, die Google-Links sind entfernt,
   der Google-Fonts-Abschnitt im Datenschutz ist gestrichen.
   -------------------------------------------------------------------------- */

@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* --------------------------------------------------------------------------
   Aus der Praxis — Faktenliste, Grafiken, Zielgruppen
   -------------------------------------------------------------------------- */
#praxis{border-top:var(--rule)}
.steps{margin-top:2.5rem}
.facts{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;
  gap:0 clamp(1.5rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:820px){.facts{grid-template-columns:1fr 1fr}}
.facts li{border-top:var(--rule);padding:1.15rem 0 1.35rem}
.facts h3{font-size:1rem;font-weight:600;line-height:1.35;margin:0 0 .45rem;color:var(--burgundy)}
.facts p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.65}

.figure{margin:2.6rem 0;padding:0}
.figure svg{width:100%;height:auto;display:block;max-width:34rem;overflow:visible}
.figure__title{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem}
.figure figcaption{margin-top:.9rem;font-size:.88rem;color:var(--ink-soft);max-width:34rem}

.audience{margin-top:clamp(2.4rem,5vw,3.4rem);border-top:var(--rule);padding-top:1.6rem}
.audience__label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 .9rem}
.audience ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.audience li{color:var(--ink-soft);font-size:.95rem;padding-left:1rem;position:relative}
.audience li::before{content:"";position:absolute;left:0;top:.62em;width:.4rem;height:1px;
  background:var(--line-strong)}

/* --------------------------------------------------------------------------
   Mobil: Kopfzeile auf sehr schmalen Geräten, Größe der Berührungsziele
   -------------------------------------------------------------------------- */

/* Der Logotext steht auf nowrap. Unter rund 400px passte die Kopfzeile
   dadurch nicht mehr neben den Sprachumschalter und erzeugte waagrechtes
   Scrollen (iPhone SE und schmaler). */
@media (max-width:400px){
  .topbar__inner{gap:.5rem}
  .ba-logo{gap:.55rem;min-width:0}
  .ba-logo img{width:34px}
  .ba-name{font-size:.95rem}
  .ba-sub{font-size:.54rem;letter-spacing:.07em}
  .ba-caret{width:5px;height:10px;margin-left:4px}
  .lang{font-size:.68rem}
  .lang button{padding:.45rem .3rem}
}
@media (max-width:340px){
  .ba-name{font-size:.86rem}
  .ba-sub{font-size:.5rem;letter-spacing:.04em}
}

/* WCAG 2.2 verlangt 24x24 CSS-Pixel für eigenständige Bedienelemente.
   Die Trefferfläche wird unsichtbar vergrößert, das Schriftbild bleibt gleich. */
.foot nav a, .backlink{position:relative}
.foot nav a::after, .backlink::after{
  content:"";position:absolute;inset:-7px 0;
}

/* Lange deutsche Komposita ("Datenschutzerklärung") sprengen auf sehr
   schmalen Geräten die Textspalte. Trennung nach Sprachregeln erlauben. */
.legal h1,.legal h2{overflow-wrap:break-word;hyphens:auto}
@media (max-width:340px){
  .ba-name{font-size:.8rem}
}