/* ============================================================
   softmob.de — Stylesheet
   Richtung A ("Wappen", streng-heraldisch) aus dem Design-System v2.
   Keine externen Abhängigkeiten. Keine Webfonts. Kein JavaScript.
   ============================================================ */

/* ---------- 1. Custom Properties (Richtung A) ---------- */
:root{
  --bg:#020204; --surf:#0A0A0E; --surf-2:#101016;
  --header-bg:#020204; --hero-bg:#020204; --footer-bg:#020204;
  --line:#272730; --line-ui:#6A6A7C;
  --ink:#F3F1EB; --muted:#ACA8A1; --prose-ink:#E3E0D9;
  --gold:#C9A227; --gold-hi:#E3C05A; --on-gold:#020204; --link:#E3C05A;
  --logo-fill:#C9A227;

  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-prose:var(--font-body);
  --font-meta:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fw-display:600; --fw-brand:600;

  --fs-base:16px; --lh-body:1.6;
  --fs-h1:clamp(40px,7vw,76px); --fs-h2:clamp(24px,3vw,34px); --fs-h3:19px;
  --fs-lead:clamp(17px,1.9vw,20px); --fs-prose:17px; --lh-prose:1.75;
  --fs-brand:clamp(21px,2.4vw,27px); --ls-brand:.16em; --tt-brand:lowercase;
  --ls-h1:-.008em; --ls-h2:.005em;

  --sp-1:6px; --sp-2:10px; --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --sp-6:48px; --sp-7:64px; --sp-8:clamp(56px,9vw,112px); --sp-9:clamp(72px,12vw,152px);
  --pad-x:clamp(16px,4vw,40px); --header-h:88px; --logo-h:52px;
  --measure-wide:1180px; --measure-text:68ch;
  --clip-card:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);

  --ok:#8FB573; --warn:#C9A227;
}

/* ---------- 2. Reset / Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
svg{display:block}
a{color:inherit}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  overflow-x:hidden;
}
*:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}

/* Skip-Link */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--on-gold);padding:10px 16px;font-weight:600;z-index:99}
.skip:focus{left:12px;top:12px}

/* ---------- 3. Layout ---------- */
.wrap{max-width:var(--measure-wide);margin:0 auto;padding:0 var(--pad-x)}

/* Wappen (Inline-SVG, einfärbbar über currentColor / color) */
.crest{width:100%;height:auto;color:var(--logo-fill)}
.crest-wrap{display:block;flex:0 0 auto}

/* Header */
.m-header{background:var(--header-bg);border-bottom:3px double var(--gold)}
.m-header .m-wrap{display:flex;align-items:center;gap:var(--sp-4);min-height:var(--header-h);flex-wrap:wrap;padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.m-brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;min-height:44px}
.m-brand .crest-wrap{width:var(--logo-h);color:var(--ink)}
.m-brand:hover .crest{color:var(--gold-hi)}
.m-wordmark{font-family:var(--font-display);font-size:var(--fs-brand);letter-spacing:var(--ls-brand);text-transform:var(--tt-brand);line-height:1;color:var(--ink);font-weight:var(--fw-brand)}
.m-wordmark span{display:block;font-family:var(--font-meta);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px;font-weight:400}
.m-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);align-items:center}
.m-nav a{font-family:var(--font-meta);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:8px 2px;position:relative;min-height:44px;display:inline-flex;align-items:center}
.m-nav a:hover{color:var(--ink)}
.m-nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.m-nav a:hover::after,.m-nav a:focus-visible::after{transform:scaleX(1)}
.m-nav a[aria-current="page"]{color:var(--ink)}
.m-nav a[aria-current="page"]::after{transform:scaleX(1)}

/* Hero: Wappen auf der Achse, gross, in Messing */
.m-hero{background:var(--hero-bg);border-bottom:1px solid var(--line);padding:var(--sp-9) 0;text-align:center}
.m-hero h1{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h1);line-height:1.04;letter-spacing:var(--ls-h1);margin:0 0 var(--sp-4)}
.m-hero p{margin:0 auto;color:var(--muted);font-size:var(--fs-lead);max-width:52ch;line-height:1.55}
.crest-stack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-5)}
.crest-stack .crest-wrap{width:clamp(132px,26vw,292px);color:var(--gold)}
.crest-rule{display:flex;align-items:center;gap:var(--sp-3);width:100%;max-width:540px;color:var(--gold)}
.crest-rule::before,.crest-rule::after{content:"";height:1px;background:var(--gold);flex:1}
.crest-rule span{font-family:var(--font-meta);font-size:11px;letter-spacing:.3em;text-transform:uppercase}

/* Sektionen */
.m-section{padding:var(--sp-8) 0;border-bottom:1px solid var(--line)}
.m-section--quiet{padding:var(--sp-7) 0}
.m-section-head{margin-bottom:var(--sp-6);text-align:center}
.m-section-head h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:1.15;letter-spacing:var(--ls-h2);margin:0 0 var(--sp-2)}
.m-section-head h2::after{content:"";display:block;width:44px;height:2px;background:var(--gold);margin:var(--sp-3) auto 0}
.m-section-head p{margin:0 auto;color:var(--muted);max-width:58ch}
.m-rule-gold{height:2px;background:var(--gold);width:56px;margin:0 auto var(--sp-4)}

/* Dienste-Raster: ein Ausdruck, keine Media-Query, 360–1920px */
.m-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}

/* Dienste-Karte (inaktiver Zustand: gestrichelt, kein Link) */
.svc{background:transparent;border:1px dashed var(--line-ui);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);position:relative}
.svc-top{display:flex;align-items:flex-start;gap:var(--sp-3)}
.svc-icon{width:46px;height:46px;flex:0 0 auto;border:1px dashed var(--line-ui);display:grid;place-items:center;color:var(--muted);background:transparent;clip-path:polygon(50% 0,100% 22%,100% 74%,50% 100%,0 74%,0 22%)}
.svc-icon svg{width:22px;height:22px}
.svc h3{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h3);line-height:1.2;margin:0;color:var(--ink)}
.svc p.svc-desc{margin:0;color:var(--muted);font-size:15px;line-height:1.6;flex:1 1 auto}
.svc-foot{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-1);padding-top:var(--sp-3);border-top:1px dashed var(--line)}

/* Statusindikator: Wort + Form + Farbe */
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-meta);font-size:12px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.status i{width:10px;height:10px;flex:0 0 auto;display:block}
.status-progress{color:var(--gold-hi)}
.status-progress i{background:var(--gold-hi);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.status-planned{color:var(--warn)}
.status-planned i{border:2px solid var(--warn);background:transparent}

/* Fliesstext */
.prose{max-width:var(--measure-text);font-family:var(--font-prose);font-size:var(--fs-prose);line-height:var(--lh-prose);margin-inline:auto}
.prose > * + *{margin-top:var(--sp-4)}
.prose h1{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--fs-h2);letter-spacing:var(--ls-h2);margin:0}
.prose h2{font-family:var(--font-display);font-weight:var(--fw-display);font-size:calc(var(--fs-h3) + 2px);margin-top:var(--sp-6)}
.prose p{margin:0;color:var(--prose-ink)}
.prose ul{margin:0;padding-left:1.4em;color:var(--prose-ink)}
.prose li + li{margin-top:10px}
.prose .lede{font-size:calc(var(--fs-prose) * 1.12);color:var(--ink)}
.prose small{display:block;color:var(--muted);font-family:var(--font-meta);font-size:12.5px;letter-spacing:.04em}
.prose a{color:var(--link);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--link) 45%,transparent);padding-bottom:1px}
.prose a:hover{color:var(--gold-hi);border-bottom-color:var(--gold-hi)}
.eyebrow{font-family:var(--font-meta);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--sp-3);text-align:center}

/* Callout */
.callout{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--surf);padding:var(--sp-4) var(--sp-5);margin-top:var(--sp-5)}
.callout-title{font-family:var(--font-meta);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.callout p{margin:0;color:var(--ink);font-size:15px}

/* Footer */
.m-footer{background:var(--footer-bg);padding:var(--sp-7) 0 var(--sp-6);border-top:1px solid var(--line)}
.m-footer-grid{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.m-footer h2{font-family:var(--font-meta);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--sp-3);font-weight:600}
.m-footer ul{list-style:none;margin:0;padding:0}
.m-footer li + li{margin-top:2px}
.m-footer a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.m-footer a:hover{color:var(--gold-hi)}
.m-footer .m-colophon{color:var(--muted);font-size:13.5px;max-width:40ch;margin:var(--sp-3) 0 0}
.m-footer .m-brand .crest-wrap{width:var(--logo-h);color:var(--muted)}
.m-legal{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px var(--sp-4);color:var(--muted);font-size:12.5px;font-family:var(--font-meta);letter-spacing:.06em}

/* ---------- 4. Motion-Präferenz ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- 5. Sehr schmale Viewports ---------- */
@media (max-width:420px){
  .m-header .m-wrap{min-height:0}
  .m-nav{margin-left:0;width:100%;gap:0 var(--sp-3);border-top:1px solid var(--line);padding-top:6px}
  .m-wordmark span{display:none}
}