/* ===================================================================
   SCHRIFTEN - lokal eingebunden, kein Google-Fonts-CDN.
   Dadurch wird beim Seitenaufruf keine IP-Adresse an Google uebertragen;
   der entsprechende Abschnitt der Datenschutzerklaerung entfaellt.
   Archivo: variabel, Gewicht 100-900, Breite 62-125 %.
   IBM Plex Sans: 400 / 500 / 600.
   Lizenz beider Schriften: SIL Open Font License 1.1 (siehe fonts/).
   =================================================================== */
@font-face{
  font-family:"Archivo"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  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:"Archivo"; font-style:normal; font-display:swap;
  font-weight:100 900; font-stretch:62% 125%;
  src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  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-display:swap; font-weight:400;
  src:url(fonts/ibm-plex-sans-latin-400-normal.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-display:swap; font-weight:400;
  src:url(fonts/ibm-plex-sans-latin-ext-400-normal.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-display:swap; font-weight:500;
  src:url(fonts/ibm-plex-sans-latin-500-normal.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-display:swap; font-weight:500;
  src:url(fonts/ibm-plex-sans-latin-ext-500-normal.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-display:swap; font-weight:600;
  src:url(fonts/ibm-plex-sans-latin-600-normal.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-display:swap; font-weight:600;
  src:url(fonts/ibm-plex-sans-latin-ext-600-normal.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;
}

/* Haki Transporte — gemeinsames Stylesheet für alle Seiten
   Layout: linke Textspalte, Haarlinien statt Karten, ein Akzent, Bilder in festen Seitenverhältnissen */

:root{
  --paper:#F8F8F6;
  --surface:#EFEFEA;
  --ink:#131B26;
  --muted:#5C6673;
  --line:#DCDCD5;
  --brand:#182C51;        /* Navy aus dem Logo */
  --on-brand:#FFFFFF;
  --green:#5E9A35;        /* Logo-Grün, für Text etwas abgedunkelt */
  --green-mark:#76AF48;   /* Logo-Grün original, für Flächen und Linien */
  --wa:#25D366;           /* WhatsApp-Grün, nur für das Icon auf hellem Grund */
  --wa-solid:#128C7E;     /* dunkleres WhatsApp-Grün, für den Kreis mit weißem Icon */
  --card:#AD8156;         /* Karton aus dem Logo */
  --card-tint:#EFE7DC;
  --invert-bg:#142441;
  --invert-fg:#F4F6F4;
  --invert-line:#2C3F61;
  --invert-muted:#9FB0C8;
  --danger:#B3261E;
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --wrap:1140px;
  --gutter:clamp(20px,5vw,56px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C1218; --surface:#141C25; --ink:#E7EBE8; --muted:#94A0AD; --line:#242F3A;
    --brand:#7BA4DE; --on-brand:#0A1220;
    --green:#8CC96A; --green-mark:#8CC96A;
    --card:#C79A6C; --card-tint:#20262A; --wa:#3BE07A;
    --invert-bg:#16202C; --invert-fg:#E7EBE8; --invert-line:#2C3947; --invert-muted:#94A0AD;
    --danger:#F2B8B5;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0C1218; --surface:#141C25; --ink:#E7EBE8; --muted:#94A0AD; --line:#242F3A;
  --brand:#7BA4DE; --on-brand:#0A1220;
  --green:#8CC96A; --green-mark:#8CC96A;
  --card:#C79A6C; --card-tint:#20262A; --wa:#3BE07A;
  --invert-bg:#16202C; --invert-fg:#E7EBE8; --invert-line:#2C3947; --invert-muted:#94A0AD;
  --danger:#F2B8B5;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--gutter); top:8px; z-index:99; background:var(--brand); color:var(--on-brand); padding:10px 16px}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px}

.eyebrow{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-weight:600; display:flex; align-items:center; gap:.9em;
}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--green-mark); flex:none}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  padding:.9rem 1.5rem; border-radius:2px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary{background:var(--brand); color:var(--on-brand)}
.btn--primary:hover{background:var(--ink); color:var(--paper)}
.btn--ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn--ghost:hover{border-color:var(--ink)}
.btn--wa{border-color:var(--line); color:var(--ink); background:transparent}
.btn--wa:hover{border-color:var(--wa)}
.ico-wa{width:1.2em; height:1.2em; flex:none; color:var(--wa)}

/* Platzhalter, vor dem Launch per Suche nach "ph" bzw. [[ prüfen */
.ph{color:var(--brand); border-bottom:1px dashed currentColor; font-weight:500; white-space:nowrap}
.contact .ph{color:var(--invert-fg)}

/* ---------- Kopf ---------- */
.head{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:40;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.head__in{display:flex; align-items:center; gap:clamp(16px,3vw,40px); min-height:76px; flex-wrap:wrap}
.mark{display:flex; align-items:center; margin-right:auto; text-decoration:none}
.mark img{height:46px; width:auto}
@media (max-width:860px){ .mark img{height:38px} }
@media (max-width:420px){ .mark img{height:34px} }
/* Logo-Schrift ist dunkles Navy — im Dark Mode auf heller Platte, sonst unlesbar */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mark img{background:#FFFFFF; padding:5px 9px; border-radius:2px}
}
:root[data-theme="dark"] .mark img{background:#FFFFFF; padding:5px 9px; border-radius:2px}
.nav{display:flex; gap:clamp(14px,2vw,28px); font-size:.95rem}
.nav a{text-decoration:none; color:var(--muted); padding-block:4px}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--green-mark)}
@media (max-width:860px){
  .head__in{min-height:64px; row-gap:0; padding-bottom:8px}
  .nav{order:3; width:100%; overflow-x:auto; padding-block:6px; font-size:.9rem}
}
@media (max-width:420px){ .nav{display:none} }

/* ---------- Hero ---------- */
.hero{padding-block:clamp(44px,8vw,96px)}
.hero h1{
  font-size:clamp(2.35rem,7.2vw,4.5rem); line-height:1.03; font-weight:800; font-stretch:105%;
  max-width:16ch; margin-top:22px;
}
.hero__lead{margin-top:22px; max-width:52ch; font-size:clamp(1.02rem,2.2vw,1.18rem); color:var(--muted)}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.hero__why{margin-top:16px; max-width:46ch; font-size:.95rem; color:var(--muted)}
.hero__alt{margin-top:8px; font-size:.95rem; color:var(--muted)}
.hero__alt a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.hero__alt a:hover{border-color:var(--green-mark)}
.frame{
  position:relative; background:var(--card-tint); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; text-align:center;
  max-width:100%; padding:16px;
}
.frame span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); max-width:30ch}
.frame--hero{aspect-ratio:16/9; margin-top:44px}
.frame--team{aspect-ratio:4/3}

/* ---------- Abschnitte ---------- */
.sec{border-top:1px solid var(--line); padding-block:clamp(48px,7.5vw,92px)}
.sec--plain{border-top:0}
.sec__head{max-width:56ch}
.sec__head h2{font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.1; font-weight:700; margin-top:18px}
.sec__head p{margin-top:16px; color:var(--muted)}

.svc{margin-top:clamp(28px,4vw,52px)}
.svc > li{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:10px clamp(24px,5vw,64px); padding-block:28px; border-top:1px solid var(--line)}
.svc > li:last-child{border-bottom:1px solid var(--line)}
.svc h3{font-size:clamp(1.25rem,2.6vw,1.6rem); font-weight:700}
.svc p{color:var(--muted)}
.svc .incl{margin-top:10px; font-size:.9rem; color:var(--muted)}
.svc .incl b{color:var(--green); font-weight:600}
.svc .points{margin-top:12px}
.svc .points li{position:relative; padding-left:18px; margin-top:7px; color:var(--muted); font-size:.97rem}
.svc .points li::before{content:""; position:absolute; left:0; top:.72em; width:6px; height:1px; background:var(--green-mark)}
@media (max-width:760px){ .svc > li{grid-template-columns:1fr} }

.extras{margin-top:18px; font-size:.92rem; color:var(--muted)}
.extras a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--green-mark)}
.extras a:hover{color:var(--green)}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(28px,4vw,52px)}
.steps li{border-top:2px solid var(--green-mark); padding-top:18px}
.steps .n{font-family:var(--font-display); font-weight:800; font-size:.85rem; letter-spacing:.14em; color:var(--green); font-variant-numeric:tabular-nums}
.steps h3{font-size:1.2rem; font-weight:700; margin-top:10px}
.steps p{color:var(--muted); margin-top:8px; font-size:.97rem}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }

.trust{max-width:68ch; margin-top:clamp(28px,4vw,52px)}
.trust dl{margin:0}
.trust .row{display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding-block:16px; border-top:1px solid var(--line)}
.trust .row:last-child{border-bottom:1px solid var(--line)}
.trust dt{color:var(--muted); font-size:.95rem}
.trust dd{margin:0; font-family:var(--font-display); font-weight:600; text-align:right; font-variant-numeric:tabular-nums}

/* ---------- Kontakt ---------- */
.contact{background:var(--invert-bg); color:var(--invert-fg); padding-block:clamp(52px,8vw,96px); margin-top:0}
.contact .eyebrow{color:var(--invert-muted)}
.contact h2{font-size:clamp(1.8rem,4.4vw,2.7rem); line-height:1.08; font-weight:700; margin-top:18px; max-width:20ch}
.contact__grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); margin-top:40px; align-items:start}
.contact__alt{color:var(--invert-muted); font-size:.95rem; margin-bottom:12px}
.contact__tel{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.45rem,3.4vw,1.9rem);
  letter-spacing:-.02em; text-decoration:none; font-variant-numeric:tabular-nums; display:inline-block;
}
.contact__mail{display:inline-block; margin-top:14px; color:var(--invert-muted); text-decoration:none; border-bottom:1px solid var(--invert-line)}
.contact__mail:hover{color:var(--invert-fg)}
.contact__note{margin-top:22px; color:var(--invert-muted); font-size:.95rem; max-width:44ch}
.contact .btn--primary{background:var(--invert-fg); color:var(--invert-bg)}
.contact .btn--primary:hover{background:var(--brand); color:var(--on-brand)}
.contact .btn--wa{border-color:var(--invert-line); color:var(--invert-fg); margin-top:22px}
.contact .btn--wa:hover{border-color:var(--wa)}
.contact__form{border:1px solid var(--invert-line); padding:clamp(20px,3vw,30px)}
.contact__form h3{font-size:1.1rem; font-weight:700}
.contact__form p{color:var(--invert-muted); font-size:.95rem; margin-top:10px}
.contact__form .btn{margin-top:22px; width:100%}
@media (max-width:860px){ .contact__grid{grid-template-columns:1fr} }

/* ---------- Formular (anfrage.html) ---------- */
.formpage{padding-block:clamp(36px,6vw,72px)}
.formpage h1{font-size:clamp(2rem,5.6vw,3.2rem); line-height:1.05; font-weight:800; margin-top:20px; max-width:18ch}
.formpage__lead{margin-top:18px; max-width:54ch; color:var(--muted); font-size:clamp(1rem,2vw,1.1rem)}

.form{margin-top:clamp(32px,5vw,56px); max-width:760px}
.form__grp{border:0; margin:0 0 clamp(28px,4vw,44px); padding:0}
.form__grp legend{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; padding:0;
  margin-bottom:6px; width:100%; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.form__hint{color:var(--muted); font-size:.92rem; margin-top:10px}

.f{display:flex; flex-direction:column; gap:7px; margin-top:20px}
.f label{font-size:.92rem; font-weight:600}
.f .req{color:var(--green); font-weight:700}
.f .sub{font-size:.85rem; color:var(--muted); font-weight:400}
.f input,.f select,.f textarea{
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:.78rem .9rem; width:100%;
  transition:border-color .15s ease;
}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--muted)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brand); outline:2px solid var(--brand); outline-offset:1px}
.f textarea{resize:vertical; min-height:120px; line-height:1.55}
.f select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:42px}
/* Rot erst NACH der Eingabe, nicht beim Laden der Seite */
.f input:user-invalid,.f select:user-invalid,.f textarea:user-invalid{border-color:var(--danger)}

.f__hint{font-size:.84rem; color:var(--muted); margin-top:2px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(16px,3vw,28px)}
@media (max-width:620px){ .f2{grid-template-columns:1fr} }

.check{display:flex; gap:12px; align-items:flex-start; margin-top:20px}
.check input{width:20px; height:20px; flex:none; margin-top:2px; accent-color:var(--brand)}
.check label{font-size:.93rem; font-weight:400; color:var(--muted)}
.check label a{color:var(--ink)}

/* Honeypot — für Menschen unsichtbar, Bots füllen ihn aus */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.wabox{
  border:1px solid var(--line); border-left:3px solid var(--wa);
  padding:clamp(18px,3vw,24px); margin-top:24px; background:var(--surface);
}
.wabox h3{font-size:1.02rem; font-weight:700}
.wabox p{color:var(--muted); font-size:.94rem; margin-top:8px}
.wabox .btn{margin-top:16px}

.form__send{display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin-top:8px}
.form__send .btn--primary{padding-inline:2rem}
.form__send small{color:var(--muted); font-size:.87rem}

/* ---------- Foto-Auswahl ---------- */
.fotos{margin-top:22px}
/* Eingabefeld selbst verstecken, das Label ist die Fläche */
.fotos__input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.fotos__drop{
  display:flex; align-items:center; gap:16px; cursor:pointer;
  border:1px dashed var(--line); background:var(--surface);
  padding:clamp(18px,3vw,26px); border-radius:2px;
  transition:border-color .15s ease, background-color .15s ease;
}
.fotos__drop:hover{border-color:var(--green-mark); background:var(--card-tint)}
.fotos__input:focus-visible + .fotos__drop{outline:2px solid var(--brand); outline-offset:3px}
.fotos__drop svg{width:30px; height:30px; flex:none; color:var(--green)}
.fotos__drop span{font-size:.95rem; color:var(--muted); line-height:1.45}
.fotos__drop b{color:var(--ink); font-weight:600}

.fotos__list{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:16px}
.fotos__list:empty{display:none}
.fotos__list li{
  position:relative; display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); background:var(--paper); padding:8px; border-radius:2px;
}
.fotos__list img{width:44px; height:44px; object-fit:cover; flex:none; border-radius:2px}
.fotos__list span{
  font-size:.82rem; color:var(--muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1;
}
.fotos__x{
  flex:none; width:26px; height:26px; line-height:1; font-size:1.15rem;
  border:1px solid var(--line); background:var(--paper); color:var(--muted);
  border-radius:2px; cursor:pointer; padding:0;
  transition:border-color .15s ease, color .15s ease;
}
.fotos__x:hover{border-color:var(--danger); color:var(--danger)}

.fotos__status{margin-top:12px; font-size:.88rem; color:var(--muted)}
.fotos__status--ok{color:var(--green)}
.fotos__status--warn{color:var(--danger); font-weight:600}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal{padding-block:clamp(32px,5vw,64px); max-width:76ch}
/* Platzhalter sind hier ganze Sätze — nowrap aus der Grundregel aufheben */
.legal .ph{white-space:normal}
.legal h1{
  font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.08; font-weight:800; margin-top:18px;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;  /* „Datenschutzerklärung“ passt sonst nicht auf schmale Displays */
}
.legal__lead{margin-top:16px; color:var(--muted); font-size:1.02rem}
.legal h2{
  font-size:clamp(1.2rem,2.6vw,1.45rem); font-weight:700; margin-top:clamp(34px,5vw,52px);
  padding-top:18px; border-top:1px solid var(--line);
}
.legal h3{font-size:1.02rem; font-weight:700; margin-top:26px}
.legal p{margin-top:12px; color:var(--muted)}
.legal p.strong{color:var(--ink)}
.legal a{color:var(--ink)}
.legal ul.bullet{margin-top:12px; list-style:none}
.legal ul.bullet li{position:relative; padding-left:18px; margin-top:7px; color:var(--muted)}
.legal ul.bullet li::before{content:""; position:absolute; left:0; top:.65em; width:6px; height:1px; background:var(--green-mark)}
.legal ul.bullet li b{color:var(--ink); font-weight:600}

/* Angaben-Tabelle im Impressum */
.legal dl{margin:18px 0 0; display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
.legal dl > div{display:contents}
.legal dt{padding:12px 24px 12px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.93rem}
.legal dd{padding:12px 0; border-top:1px solid var(--line); margin:0; color:var(--ink)}
@media (max-width:640px){
  .legal dl{grid-template-columns:minmax(0,1fr)}
  .legal dt{padding-bottom:0; border-top:1px solid var(--line)}
  .legal dd{padding-top:2px; border-top:0}
}

/* Verarbeiter-Tabelle in der Datenschutzerklärung */
.legal table.proc{width:100%; border-collapse:collapse; margin-top:16px; font-size:.93rem}
.legal table.proc th{
  text-align:left; font-weight:600; color:var(--muted); font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase; padding:0 16px 10px 0; border-bottom:1px solid var(--line);
}
.legal table.proc td{padding:12px 16px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; color:var(--muted)}
.legal table.proc td:first-child{color:var(--ink); font-weight:600; white-space:nowrap}
@media (max-width:700px){
  .legal table.proc, .legal table.proc tbody, .legal table.proc tr, .legal table.proc td{display:block; width:100%}
  .legal table.proc thead{display:none}
  .legal table.proc tr{border-bottom:1px solid var(--line); padding-block:12px}
  .legal table.proc td{border:0; padding:2px 0}
  .legal table.proc td:first-child{margin-bottom:4px}
  .legal table.proc td[data-l]::before{content:attr(data-l) ": "; color:var(--ink); font-weight:600}
}

/* Entwurfshinweis — vor dem Livegang entfernen */
.draft{
  border:1px solid var(--danger); border-left-width:3px; background:var(--surface);
  padding:clamp(16px,2.5vw,22px); margin-top:28px;
}
.draft h2{font-size:1rem; font-weight:700; margin:0; padding:0; border:0; color:var(--danger)}
.draft p{margin-top:8px; font-size:.93rem}
.draft ul.bullet li::before{background:var(--danger)}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line); padding-block:48px; font-size:.92rem}
.foot__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px}
.foot h4{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:600; font-family:var(--font-body)}
.foot li{margin-bottom:8px; color:var(--muted)}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot__end{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; margin-top:40px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem}
@media (max-width:860px){ .foot__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .foot__grid{grid-template-columns:1fr} }

/* ---------- Mobile Aktionsleiste ---------- */
.bar{display:none}
@media (max-width:700px){
  .bar{
    display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--paper); border-top:1px solid var(--line);
    padding:10px var(--gutter); padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); gap:10px;
  }
  .bar .btn{padding:.8rem 1rem; font-size:.94rem}
  .bar__tel{color:var(--muted); text-decoration:none; font-size:.94rem; white-space:nowrap; padding-right:4px}
  .bar__tel:hover{color:var(--ink)}
  body{padding-bottom:88px}
}

/* ---------- Schwebender WhatsApp-Button ---------- */
.fab{
  position:fixed; z-index:70;
  right:clamp(16px,3vw,28px); bottom:clamp(18px,3vw,28px);
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--wa-solid); color:#FFFFFF;
  box-shadow:0 6px 20px rgba(10,18,32,.26);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.fab:hover{transform:scale(1.07); box-shadow:0 10px 28px rgba(10,18,32,.34); background:#0F7A6E}
.fab svg{width:30px; height:30px; color:#FFFFFF}
/* Auf Mobil sitzt unten die Aktionsleiste — Button darüber schieben */
@media (max-width:700px){
  .fab{bottom:calc(86px + env(safe-area-inset-bottom, 0px)); width:54px; height:54px}
  .fab svg{width:28px; height:28px}
}

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