/* ==========================================================================
   Amando Sol GmbH — Wartungsmodus
   Reine HTML/CSS-Umsetzung des Design-Comps "Wartungsmodus.dc.html".

   Aufbau:
     1. Tokens      — unveraendert aus dem Amando Sol Design System
     2. Basis       — Reset und Standard-Elementstile
     3. Komponenten — Signpost, EmergencyBar, ContactRow, Button, Callout
     4. Seite       — Layout dieser einen Seite
     5. Responsive
     6. Druck
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/* --- Schrift -------------------------------------------------------------
   Source Sans 3 — humanistische Sans, sehr gute Lesbarkeit in kleinen Graden,
   vollstaendige deutsche Diakritika, SIL Open Font License.

   ACHTUNG DSGVO: Der @import unten laedt die Schrift von Google Fonts und
   uebertraegt dabei die IP-Adresse der Besucherinnen und Besucher an Google.
   Solange die Datenschutzerklaerung offline ist, ist das heikel. Fuer den
   Produktivbetrieb die WOFF2-Dateien selbst hosten: den @import auskommentieren
   und stattdessen die beiden @font-face-Regeln darunter aktivieren.
   Ohne beides faellt die Seite sauber auf Segoe UI / system-ui zurueck. */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700;800&display=swap");

/*
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("assets/fonts/SourceSans3-VariableFont.woff2") format("woff2-variations")}
*/

/* --- Farben --------------------------------------------------------------
   Abgeleitet aus dem Logo: Blau #0070C0, Sonnengelb #FFF030, Schriftschwarz.
   Alle als Textfarbe vorgesehenen Werte erfuellen WCAG 2.2 AA auf --surface-page. */
:root{
  /* Blau: Markenfarbe */
  --blue-50:#EAF4FC; --blue-100:#CFE6F7; --blue-200:#A5D0F0; --blue-300:#6BB2E4;
  --blue-400:#2E90D3; --blue-500:#0070C0; --blue-600:#005EA2; --blue-700:#004C83;
  --blue-800:#003A64; --blue-900:#002A4A;

  /* Tinte: entsaettigtes, leicht waermeres Navy fuer Text */
  --ink-900:#14304A; --ink-800:#22405A; --ink-700:#2F4A61; --ink-600:#4C6478;
  --ink-500:#6E8497; --ink-400:#93A5B4; --ink-300:#B9C5CF;

  /* Sand: warme Neutraltoene fuer Flaechen und Linien */
  --sand-50:#FDFBF7; --sand-100:#FAF6EF; --sand-200:#F2EDE3; --sand-300:#E9E2D4;
  --sand-400:#E3DACB; --sand-500:#CFC3AE; --sand-600:#A89A82;

  /* Waldgruen: dritte Farbe, ruhig und natuerlich */
  --green-50:#EFF4F1; --green-100:#DAE7DF; --green-300:#8FAF9C;
  --green-500:#3F6B52; --green-600:#33573F; --green-700:#274430;

  /* Sonnengelb: reiner Akzent aus dem Logo. Nie Textfarbe, nie grossflaechig. */
  --sun-200:#FFFCD6; --sun-300:#FFF8A8; --sun-400:#FFF470; --sun-500:#FFF030; --sun-600:#D9C400;

  /* Statusfarben */
  --amber-100:#FBEFD6; --amber-600:#8A5A00;
  --red-50:#FCF0EE; --red-100:#F7DBD7; --red-600:#A82A20; --red-700:#8A2018;

  --white:#FFFFFF;

  /* --- semantische Aliase --- */
  --color-brand:var(--blue-500);
  --color-brand-hover:var(--blue-600);
  --color-brand-active:var(--blue-700);
  --color-brand-subtle:var(--blue-50);
  --color-accent:var(--green-500);
  --color-accent-hover:var(--green-600);
  --color-highlight:var(--sun-500);

  --text-strong:var(--ink-900);
  --text-body:var(--ink-600);
  --text-muted:var(--ink-500);
  --text-brand:var(--blue-600);
  --text-accent:var(--green-600);
  --text-inverse:var(--white);
  --text-on-brand:var(--white);
  --text-on-highlight:var(--ink-900);
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-800);

  --surface-page:var(--sand-100);
  --surface-card:var(--white);
  --surface-sunken:var(--sand-200);
  --surface-raised:var(--sand-50);
  --surface-brand:var(--blue-500);
  --surface-brand-subtle:var(--blue-50);
  --surface-accent-subtle:var(--green-50);
  --surface-highlight:var(--sun-500);
  --surface-inverse:var(--ink-900);
  --surface-overlay:rgba(20,48,74,.55);

  --border-subtle:var(--sand-400);
  --border-strong:var(--sand-500);
  --border-brand:var(--blue-500);
  --border-inverse:rgba(255,255,255,.24);
  --border-input:var(--sand-500);

  --status-info:var(--blue-600);        --status-info-surface:var(--blue-50);
  --status-success:var(--green-600);    --status-success-surface:var(--green-50);
  --status-warning:var(--amber-600);    --status-warning-surface:var(--amber-100);
  --status-danger:var(--red-600);       --status-danger-surface:var(--red-50);

  --focus-ring:var(--blue-600);
  --focus-ring-offset:var(--surface-page);
}

/* --- Typografie ----------------------------------------------------------
   Eine Schrift fuer alles. Hierarchie ueber Groesse, Gewicht und Farbe.
   Mindestgroesse im Fliesstext: 17px. */
:root{
  --font-sans:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:var(--font-sans);
  --font-mono:ui-monospace,"SFMono-Regular","Consolas",monospace;

  --text-2xs:12px; --text-xs:13px; --text-sm:15px; --text-base:17px;
  --text-md:19px;  --text-lg:21px; --text-xl:24px;  --text-2xl:28px;
  --text-3xl:32px; --text-4xl:40px; --text-5xl:52px; --text-6xl:64px;

  --weight-light:300; --weight-regular:400; --weight-medium:500;
  --weight-semibold:600; --weight-bold:700; --weight-black:800;

  --leading-tight:1.08; --leading-snug:1.25; --leading-normal:1.5;
  --leading-relaxed:1.65; --leading-loose:1.8;

  /* --tracking-label ist die einzige Sperrung und gilt nur fuer kurze
     Grossbuchstaben-Labels, nie fuer Subheadlines. */
  --tracking-tight:-.015em; --tracking-snug:-.008em; --tracking-normal:0;
  --tracking-label:.06em;

  --measure-tight:34em; --measure:46em; --measure-wide:58em;

  --type-h1-size:var(--text-5xl); --type-h1-weight:var(--weight-bold);
  --type-h2-size:var(--text-3xl); --type-h2-weight:var(--weight-bold);
  --type-h3-size:var(--text-lg);  --type-h3-weight:var(--weight-bold);
  --type-body-size:var(--text-base);
  --type-lead-size:var(--text-md);
  --type-label-size:var(--text-xs);
}

/* --- Abstaende — 4px-Raster ---------------------------------------------
   Grosszuegig: die Zielgruppe liest teils unter Stress. */
:root{
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px;
  --space-10:56px; --space-11:72px; --space-12:96px; --space-13:128px;

  --layout-max:1200px;
  --layout-narrow:760px;
  --gutter:56px;
  --gutter-mobile:20px;
  --section-y:80px;
  --section-y-tight:56px;
  --grid-gap:18px;
  --stack-gap:22px;

  /* Mindest-Trefferflaeche (WCAG 2.2 AA, 2.5.8) */
  --target-min:44px;
}

/* --- Form — kleine bis mittlere Radien, Haarlinien statt Schatten -------- */
:root{
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-2xl:24px; --radius-pill:999px;
  --radius-card:var(--radius-lg);
  --radius-control:var(--radius-md);

  --border-width:1px;
  --border-width-strong:1.5px;
  --border-width-accent:3px;   /* Wegweiser-Kante an hervorgehobenen Baendern */

  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(20,48,74,.05);
  --shadow-sm:0 2px 6px rgba(20,48,74,.07);
  --shadow-md:0 8px 24px rgba(20,48,74,.10);
  --shadow-lg:0 20px 48px rgba(20,48,74,.16);
  --shadow-focus:0 0 0 3px rgba(0,112,192,.32);

  /* Wegweiser-Pfeil: das Leitmotiv aus dem Logo als clip-path */
  --clip-signpost:polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  --clip-signpost-lg:polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}

/* --- Bewegung — knapp und zweckgebunden --------------------------------- */
:root{
  --dur-instant:80ms;
  --dur-fast:120ms;
  --dur:180ms;
  --dur-slow:280ms;
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --transition-color:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
  --transition-control:var(--transition-color),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0ms; --dur-fast:0ms; --dur:0ms; --dur-slow:0ms}
}


/* ==========================================================================
   2. BASIS
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--type-body-size);
  line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-strong);font-weight:var(--weight-bold);
  line-height:var(--leading-snug);letter-spacing:var(--tracking-snug);text-wrap:balance}
h1{font-size:var(--type-h1-size);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
h2{font-size:var(--type-h2-size)}
h3{font-size:var(--type-h3-size)}
p{margin:0;text-wrap:pretty}
p+p{margin-top:var(--space-4)}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;transition:var(--transition-color)}
a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);
  outline-offset:2px;border-radius:var(--radius-xs)}
strong,b{font-weight:var(--weight-semibold);color:var(--text-strong)}
img{max-width:100%;height:auto}
hr{border:0;border-top:var(--border-width) solid var(--border-subtle);margin:var(--space-8) 0}
::selection{background:var(--sun-400);color:var(--ink-900)}
:lang(de){hyphens:auto}


/* ==========================================================================
   3. KOMPONENTEN
   ========================================================================== */

/* --- Signpost ------------------------------------------------------------
   Das Wegweiser-Leitmotiv aus dem Logo: ein Balken mit Pfeilspitze.
   Rein dekorativ. Faerbung ueber `color` am Element. */
.signpost{display:inline-block;flex:none;width:22px;height:8px;
  background:currentColor;clip-path:var(--clip-signpost)}
.signpost--md{width:18px;height:8px}
.signpost--sm{width:16px;height:7px}

/* --- Icon ----------------------------------------------------------------
   Lucide-Glyphen im Markenstil (2px Strich, runde Enden).
   Erbt die Textfarbe; Groesse ueber width/height am <svg>. */
.icon{flex:none;display:block;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* --- EmergencyBar --------------------------------------------------------
   Die 24-Stunden-Notrufleiste. Immer sichtbar, dunkelblau mit gelbem
   Wegweiser. Bewusst nicht rot: kein Alarm, sondern Verlaesslichkeit. */
.emergency-bar{position:sticky;top:0;z-index:60;
  background:var(--surface-inverse);color:var(--text-inverse)}
.emergency-bar__inner{max-width:var(--layout-max);margin:0 auto;
  padding:10px var(--gutter);display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;font-size:var(--text-sm);line-height:1.4}
.emergency-bar__signpost{color:var(--sun-500)}
.emergency-bar__text{font-weight:var(--weight-medium)}
.emergency-bar__link{display:inline-flex;align-items:center;gap:8px;min-height:32px;
  padding:4px 12px;border-radius:var(--radius-sm);text-decoration:none;
  font-weight:var(--weight-bold);font-size:var(--text-base);
  color:var(--sun-500);background:transparent;transition:var(--transition-color)}
.emergency-bar__link:hover,
.emergency-bar__link:focus-visible{color:var(--ink-900);background:var(--sun-500);
  text-decoration:none}
/* Blauer Fokusring waere auf dem dunklen Band nicht sichtbar. */
.emergency-bar__link:focus-visible{outline-color:var(--sun-500)}

/* --- ContactRow ----------------------------------------------------------
   Eine Kontaktzeile: Icon, Bezeichnung, Wert. Als Link oder als reine Angabe. */
.contact-row{display:flex;gap:14px;align-items:flex-start;min-height:var(--target-min);
  padding:12px 14px;margin-left:-14px;border-radius:var(--radius-md);
  text-decoration:none;background:transparent;transition:var(--transition-color)}
a.contact-row:hover,
a.contact-row:focus-visible{background:var(--surface-sunken);text-decoration:none}
.contact-row__icon{flex:none;margin-top:2px;color:var(--color-accent)}
.contact-row__body{display:grid;gap:2px}
.contact-row__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.contact-row__value{font-size:var(--text-md);font-weight:var(--weight-semibold);
  color:var(--text-strong);line-height:1.4;word-break:break-word}
.contact-row__note{font-size:var(--text-sm);color:var(--text-body);line-height:1.5}

/* --- Button --------------------------------------------------------------
   Groesse `md`: 52px hoch, damit die Trefferflaeche auch mit zittrigen
   Haenden sicher getroffen wird. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;min-height:52px;
  font-family:var(--font-sans);font-size:var(--text-base);
  font-weight:var(--weight-semibold);line-height:1.2;
  text-align:center;text-decoration:none;
  border:var(--border-width-strong) solid transparent;
  border-radius:var(--radius-control);cursor:pointer;
  transition:var(--transition-control)}
.btn:hover{text-decoration:none}

.btn--primary{background:var(--color-brand);color:var(--text-on-brand)}
.btn--primary:hover,
.btn--primary:focus-visible{background:var(--color-brand-hover);color:var(--text-on-brand)}
.btn--primary:active{background:var(--color-brand-active);transform:translateY(1px)}

.btn--secondary{background:transparent;color:var(--text-strong);
  border-color:var(--border-subtle)}
.btn--secondary:hover,
.btn--secondary:focus-visible{background:var(--surface-raised);
  border-color:var(--border-strong);color:var(--text-strong)}
.btn--secondary:active{background:var(--surface-sunken);transform:translateY(1px)}

/* --- Callout -------------------------------------------------------------
   Hervorgehobener Hinweis mit farbiger Wegweiser-Kante links. */
.callout{display:flex;gap:14px;padding:18px 20px;
  background:var(--callout-surface);border-radius:var(--radius-lg);
  border-left:var(--border-width-accent) solid var(--callout-color)}
.callout--plain{--callout-surface:var(--surface-accent-subtle);--callout-color:var(--color-accent)}
.callout--danger{--callout-surface:var(--status-danger-surface);--callout-color:var(--status-danger)}
.callout__icon{flex:none;margin-top:2px;color:var(--callout-color)}
.callout__body{display:grid;gap:5px}
.callout__title{font-size:var(--text-base);font-weight:var(--weight-bold);color:var(--text-strong)}
.callout__text{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-body)}
.callout__text p+p{margin-top:8px}


/* ==========================================================================
   4. SEITE
   ========================================================================== */

.page{min-height:100vh;background:var(--surface-page);
  font-family:var(--font-sans);color:var(--text-body)}
.container{max-width:var(--layout-max);margin:0 auto;padding:0 var(--gutter)}

/* Eyebrow — kurzes Grossbuchstaben-Label ueber einem Block */
.eyebrow{font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-accent)}

/* --- Kopf --- */
.site-header{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:28px 0 4px}
.site-header__logo{height:56px;width:auto;display:block}

/* --- Hero: die eigentliche Wartungsmeldung --- */
.hero{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:56px 48px;margin-top:32px}
.hero__eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.hero__eyebrow .signpost{color:var(--color-accent)}
.hero__title{max-width:var(--measure-tight)}
.hero__lead{margin-top:22px;max-width:var(--measure);
  font-size:var(--type-lead-size);line-height:var(--leading-relaxed);color:var(--text-body)}
.hero__text{margin-top:14px;max-width:var(--measure);
  font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-body)}

.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--grid-gap);margin-top:40px;padding-top:32px;
  border-top:var(--border-width) solid var(--border-subtle)}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* --- Hinweiskarten --- */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--grid-gap);margin-top:var(--grid-gap)}
.notes a{color:inherit}

/* --- Impressum --- */
.imprint{margin-top:var(--section-y);padding-top:32px;
  border-top:var(--border-width) solid var(--border-subtle)}
.imprint__title{margin-bottom:4px;font-size:var(--type-h3-size);
  font-weight:var(--type-h3-weight);color:var(--text-strong)}
.imprint__subtitle{margin-bottom:26px;font-size:var(--text-sm);color:var(--text-muted)}
.imprint__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:32px var(--grid-gap);font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.imprint__label{margin-bottom:8px}
.imprint__name{color:var(--text-strong);font-weight:var(--weight-semibold)}
.imprint__note{margin-top:32px;max-width:var(--measure);
  font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--text-muted)}

/* --- Fuss --- */
.page-footer{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-top:40px;padding:40px 0 56px;
  border-top:var(--border-width) solid var(--border-subtle)}
.page-footer .signpost{color:var(--color-highlight)}
.page-footer__text{font-size:var(--text-sm);color:var(--text-muted)}


/* ==========================================================================
   5. RESPONSIVE
   ========================================================================== */

@media (max-width:900px){
  :root{--gutter:32px;--type-h1-size:var(--text-4xl)}
  .hero{padding:40px 28px}
  .imprint{margin-top:var(--section-y-tight)}
}

@media (max-width:620px){
  :root{--gutter:var(--gutter-mobile);--type-h1-size:var(--text-3xl)}
  .site-header{padding-top:20px;gap:12px}
  .site-header__logo{height:44px}
  .hero{padding:28px 20px;margin-top:24px}
  .hero__lead{font-size:var(--text-base)}
  /* Volle Breite: sicherer zu treffen, klarere Reihenfolge. */
  .btn{width:100%}
  .emergency-bar__inner{padding:8px var(--gutter);gap:8px}
  .page-footer{padding-bottom:40px}
}


/* ==========================================================================
   6. DRUCK
   Das Impressum soll sich sauber ausdrucken lassen, solange die
   Pflichtangaben nur hier stehen.
   ========================================================================== */

@media print{
  :root{--gutter:0}
  body,.page{background:var(--white)}
  .emergency-bar{position:static}
  .actions{display:none}
  .hero{border:none;padding:0;margin-top:24px}
  .callout{break-inside:avoid}
  a{text-decoration:none;color:var(--ink-900)}
  .imprint__grid > div{break-inside:avoid}
}