/* Selbst gehostete Schrift „Jost" (variabel 300–600) — keine externe Anbindung (Google) */
@font-face{
  font-family:'Jost'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("fonts/jost-latin.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:'Jost'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url("fonts/jost-latin-ext.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;
}

/* ==========================================================================
   GVIC IT — Design-System v2
   Semantisches CSS · Grid/Flexbox auf Tags · Fluid Type · Dark Mode
   ========================================================================== */

/* ---------- 1. Design-Tokens ------------------------------------------- */
:root{
  /* Folgt der System-Einstellung; der Toggle (data-theme) überstimmt sie */
  color-scheme: light dark;

  /* Brand (konstant in beiden Modi) */
  --brand-blue:       #0a4d8c;
  --brand-blue-deep:  #073968;
  --brand-blue-light: #5ba8e6;
  --brand-amber:      #b06b00;
  --brand-green:      #1e7a4a;

  /* Semantische Farben — light-dark() folgt color-scheme
     (System-Einstellung oder manueller Toggle via data-theme) */
  --surface:      light-dark(#ffffff, #0c1622);
  --surface-alt:  light-dark(#eaf4fc, #101f30);
  --ink:          light-dark(#0b1e33, #e6eef7);
  --ink-soft:     light-dark(#41526b, #9fb2c8);
  --line:         light-dark(rgba(10,77,140,.12), rgba(91,168,230,.18));
  --accent:       light-dark(#0a4d8c, #6fb4e8);
  --accent-soft:  light-dark(#5ba8e6, #8fc6ee);
  --hero-sky:     linear-gradient(180deg,
                    light-dark(#3a7cb8,#0a1930) 0%,
                    light-dark(#5b9bcb,#10263f) 35%,
                    light-dark(#8fbdde,#16334f) 65%,
                    light-dark(#c4dcef,#1d3d5c) 85%,
                    var(--surface) 100%);
  --cloud-alpha:  .95;
  --glass:        light-dark(rgba(255,255,255,.72), rgba(12,22,34,.72));
  --panel-ink:    #0b1e33;          /* dunkle Panels (Werte, Footer, CTA) */

  /* Fluide Typo-Skala (Utopia-Prinzip: min ↔ max über Viewport) */
  --step--1: clamp(.84rem,  .80rem + .20vw,  .95rem);
  --step-0:  clamp(1.00rem, .93rem + .35vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.08rem + .60vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.24rem + 1.00vw, 1.95rem);
  --step-3:  clamp(1.73rem, 1.42rem + 1.55vw, 2.55rem);
  --step-4:  clamp(2.07rem, 1.58rem + 2.45vw, 3.40rem);
  --step-5:  clamp(2.60rem, 1.75rem + 4.25vw, 5.00rem);

  /* Fluider Raum */
  --space-xs: clamp(.50rem, .45rem + .25vw, .75rem);
  --space-s:  clamp(.75rem, .65rem + .50vw, 1.25rem);
  --space-m:  clamp(1.25rem, 1.05rem + 1.00vw, 2.00rem);
  --space-l:  clamp(2.00rem, 1.60rem + 2.00vw, 3.50rem);
  --space-xl: clamp(3.50rem, 2.60rem + 4.50vw, 6.50rem);

  /* Geometrie & Effekte */
  --r-s: 12px; --r-m: 20px; --r-l: 28px; --r-pill: 999px;
  --shadow-card: 0 1px 1px light-dark(rgba(10,30,51,.04),rgba(0,0,0,.3)),
                 0 20px 60px -20px light-dark(rgba(10,77,140,.18),rgba(0,0,0,.5));
  --shadow-deep: 0 14px 30px -10px rgba(7,57,104,.45);

  --font: "Futura","Futura PT","Jost","Century Gothic","Avenir Next",-apple-system,sans-serif;
  --content: 72rem;   /* max. Inhaltsbreite */
  --narrow:  46rem;   /* Textspalten */
}

/* Nicht-Farb-Token (opacity) können nicht über light-dark() laufen:
   System-Dunkel greift, solange keine manuelle Wahl getroffen wurde … */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --cloud-alpha:.16 }
}
/* … der Toggle (data-theme) überstimmt die System-Einstellung. */
:root[data-theme="light"]{ color-scheme:light }
:root[data-theme="dark"]{ color-scheme:dark; --cloud-alpha:.16 }

/* Sanfte Überblendung beim Theme-Wechsel (View Transitions API) */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.45s;
  animation-timing-function:ease;
}

/* ---------- 2. Reset (minimal) ------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0 }
img,svg{ display:block; max-width:100% }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
input,textarea{ font:inherit; color:inherit }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ---------- 3. Basis ---------------------------------------------------- */
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body{
  font-family:var(--font);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--ink);
  background:var(--surface);
  overflow-x:clip;
}
h1,h2,h3{ font-weight:400; line-height:1.12; letter-spacing:-.03em; text-wrap:balance }
h1{ font-size:var(--step-5) }
h2{ font-size:var(--step-3) }
h3{ font-size:var(--step-1); font-weight:500 }
h1 em,h2 em{
  font-style:normal; font-weight:300; letter-spacing:.01em;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-soft) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
p{ color:var(--ink-soft); max-width:var(--narrow) }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--accent-soft); color:#fff }

/* ---------- 4. Layout-Primitiv: Content-Grid ---------------------------
   Jede Section IST das Grid — kein .container-Div nötig.
   Spalte 1/3 = fluide Ränder, Spalte 2 = Inhalt.                          */
main > section{
  display:grid;
  grid-template-columns:
    minmax(clamp(1.25rem,4vw,3rem),1fr)
    min(100% - 2.5rem, var(--content))
    minmax(clamp(1.25rem,4vw,3rem),1fr);
  row-gap:var(--space-m);
  align-content:start;
  padding-block:var(--space-xl);
}
main > section > *{ grid-column:2 }

/* Zentrierte Text-Sections */
section.centered{ text-align:center }
section.centered > p{ margin-inline:auto }

/* ---------- 5. Header / Navigation -------------------------------------- */
body > header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
  /* Eigene View-Transition-Gruppe: löst die fixierte Glasleiste aus dem
     Root-Snapshot heraus (verhindert den Fixed-/Backdrop-Filter-Bug, der die
     Leiste kurz durchscheinen ließ). Die Standard-Überblendung nutzt
     mix-blend-mode:plus-lighter und hält die Deckung konstant – kein
     Durchsacken und kein Nachpoppen, synchron zum übrigen Seiten-Crossfade. */
  view-transition-name:site-header;
}
body > header nav{
  display:flex; align-items:center; gap:var(--space-s);
  max-width:var(--content); margin-inline:auto;
  padding:.8rem clamp(1.25rem,4vw,2rem);
  position:relative;
}
.logo{
  font-size:1.35rem; font-weight:500; letter-spacing:-.02em;
  color:light-dark(var(--brand-blue-deep), #fff);
}
.logo em{ font-style:normal; color:var(--accent-soft) }

/* Theme-Toggle: Sonne (hell) ⇆ Mond (dunkel), rechts neben dem Kontakt-Button */
.theme{
  display:grid; place-items:center;
  width:2.2rem; height:2.2rem; border-radius:50%;
  color:var(--ink-soft);
  border:1.5px solid var(--line);
  transition:color .25s, background .25s, border-color .25s, transform .2s;
}
.theme:hover{ color:var(--accent); border-color:var(--accent); background:light-dark(rgba(10,77,140,.07),rgba(255,255,255,.08)) }
.theme:active{ transform:scale(.88) }
/* Sprach-Umschalter DE ⇆ EN, direkt neben dem Theme-Toggle */
.lang{
  display:grid; place-items:center;
  min-width:2.2rem; height:2.2rem; padding:0 .55rem; border-radius:var(--r-pill);
  font-size:.78rem; font-weight:600; letter-spacing:.05em;
  color:var(--ink-soft); border:1.5px solid var(--line); text-decoration:none;
  transition:color .25s, background .25s, border-color .25s, transform .2s;
}
.lang:hover{ color:var(--accent); border-color:var(--accent); background:light-dark(rgba(10,77,140,.07),rgba(255,255,255,.08)) }
.lang:active{ transform:scale(.9) }
/* Beide Icons im selben Grid-Feld gestapelt, per Crossfade + Rotation getauscht */
.theme svg{
  grid-area:1/1; width:1.2rem; height:1.2rem; overflow:visible;
  transition:opacity .4s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.theme .ic-moon{ opacity:0; transform:rotate(-60deg) scale(.4) }
:root[data-theme="dark"] .theme .ic-sun{ opacity:0; transform:rotate(60deg) scale(.4) }
:root[data-theme="dark"] .theme .ic-moon{ opacity:1; transform:none }
body > header ul{
  display:flex; gap:clamp(1.25rem,3vw,2.75rem); list-style:none; padding:0;
  font-size:1rem; font-weight:500; color:var(--ink-soft);
  flex:1; justify-content:center; white-space:nowrap;
}
body > header ul a{ transition:color .25s }
body > header ul a:hover,
body > header ul a[aria-current="page"]{ color:var(--accent) }
.cta{
  background:var(--panel-ink); color:#fff;
  padding:.55rem 1.15rem; border-radius:var(--r-pill);
  font-size:.85rem; font-weight:500;
  transition:background .2s, transform .2s;
}
.cta:hover{ background:var(--brand-blue); transform:translateY(-1px) }
body > header button{ display:none; width:2rem; height:2rem; place-items:center }
body > header button span,
body > header button span::before,
body > header button span::after{
  display:block; content:""; width:22px; height:1.5px;
  background:var(--ink); position:relative; transition:transform .3s;
}
body > header button span::before{ position:absolute; top:-7px }
body > header button span::after{ position:absolute; top:7px }

/* Mobile-Navigation */
@media (max-width:56rem){
  body > header ul{
    position:fixed; inset:3.6rem 0 auto 0;
    flex-direction:column; align-items:center; gap:1.4rem;
    padding:2rem; font-size:1.05rem;
    background:light-dark(rgba(255,255,255,.96), rgba(12,22,34,.97));
    -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 50px -20px rgba(7,57,104,.25);
    translate:0 -130%; transition:translate .35s ease;
  }
  body.nav-open > header ul{ translate:0 0 }
  body > header button{ display:grid }
  .cta{ margin-left:auto }
}

/* ---------- 6. Hero ------------------------------------------------------ */
section.hero{
  min-height:92svh;
  align-content:center;
  text-align:center;
  padding-block:clamp(7rem,16svh,10rem) var(--space-xl);
  background:var(--hero-sky);
  position:relative;
  overflow:clip;
}
/* Sonne + Wolken: reine Pseudo-Elemente, kein DOM */
section.hero::before,
section.hero::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><path d="M30,70 Q15,70 15,55 Q15,40 30,40 Q35,25 55,25 Q75,15 90,30 Q105,20 120,30 Q140,25 145,45 Q165,45 165,60 Q165,75 145,75 L30,75 Z" fill="white"/></svg>');
  background-repeat:no-repeat; background-size:contain;
  opacity:var(--cloud-alpha);
  filter:drop-shadow(0 20px 40px rgba(7,57,104,.18));
}
section.hero::before{
  width:clamp(130px,22vw,380px); aspect-ratio:2/1;
  top:14%; left:clamp(-4rem,-2vw,2rem);
  animation:drift 44s ease-in-out infinite;
}
section.hero::after{
  width:clamp(110px,18vw,320px); aspect-ratio:2/1;
  bottom:16%; right:clamp(-3rem,-1vw,3rem);
  animation:drift 56s ease-in-out infinite reverse;
}
@keyframes drift{
  0%,100%{ transform:translate(0,0) }
  50%    { transform:translate(clamp(28px,4vw,70px),-18px) }
}
section.hero > *{ position:relative; z-index:1 }
section.hero h1{ line-height:1.08 }
/* Im Hellen endet der Standard-Verlauf zu hell für den Himmel —
   hier dunklerer Verlauf, im Dunkeln bleibt der helle. */
section.hero h1 em{
  background-image:linear-gradient(135deg,
    light-dark(var(--brand-blue-deep),var(--accent)) 0%,
    light-dark(var(--brand-blue),var(--accent-soft)) 100%);
}
section.hero > p{ margin-inline:auto; font-size:var(--step-1); color:light-dark(rgba(11,30,51,.78),var(--ink-soft)) }

/* Kompetenz-Pills */
.pills{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  list-style:none; padding:0;
}
.pills a{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem 1.1rem; border-radius:var(--r-pill);
  font-size:.9rem; font-weight:500;
  background:light-dark(rgba(255,255,255,.82),rgba(255,255,255,.08));
  border:1px solid light-dark(rgba(255,255,255,.9),var(--line));
  color:light-dark(var(--brand-blue-deep),var(--ink));
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:transform .2s;
}
.pills a:hover{ transform:translateY(-2px) }
.pills svg{ width:1.05em; height:1.05em; flex-shrink:0 }
@media (max-width:40rem){ .pills{ flex-direction:column; align-items:center } }

/* Aktionen (Buttons) */
.actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem }
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.65rem; border-radius:var(--r-pill);
  font-size:.95rem; font-weight:500;
  background:var(--panel-ink); color:#fff;
  box-shadow:var(--shadow-deep);
  transition:transform .2s, background .2s;
}
.btn:hover{ transform:translateY(-2px); background:var(--brand-blue) }
.btn.ghost{
  background:light-dark(#fff,rgba(255,255,255,.06));
  color:light-dark(var(--brand-blue-deep),var(--ink));
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.ghost:hover{ background:light-dark(var(--surface-alt),rgba(255,255,255,.12)) }
/* Im Hero: Frost-Optik auf Himmel */
section.hero .btn.ghost{
  background:light-dark(rgba(255,255,255,.7),rgba(255,255,255,.06));
  border-color:light-dark(rgba(255,255,255,.9),var(--line));
}
/* Auf dunklem CTA-Panel: transparente Outline */
section.cta-panel .btn.ghost{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.35);
  color:#fff;
}
section.cta-panel .btn.ghost:hover{ background:rgba(255,255,255,.18) }
/* Getönter Akzent-Button – prominenter als ghost, dezenter als der Vollton */
.btn.tinted{
  background-color:light-dark(rgba(10,77,140,.09), rgba(111,180,232,.12));
  color:var(--accent);
  border:1.5px solid light-dark(rgba(10,77,140,.32), rgba(111,180,232,.38));
  box-shadow:none;
}
.btn.tinted:hover{
  background-color:light-dark(#0a4d8c, #6fb4e8);
  color:light-dark(#fff, #0b1e33);
  border-color:light-dark(#0a4d8c, #6fb4e8);
}
.btn svg{ width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:2 }
@media (max-width:40rem){
  .actions{ flex-direction:column }
  .actions .btn{ justify-content:center }
}

/* ---------- 7. Eyebrow / Section-Kopf ----------------------------------- */
.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:600;
  letter-spacing:.25em; text-transform:uppercase; color:var(--accent);
}
.tag{
  display:inline-flex; align-items:center; gap:.5rem; width:fit-content;
  padding:.3rem .8rem; border-radius:var(--r-pill);
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.tag.amber{ background:rgba(217,143,0,.14);  color:light-dark(var(--brand-amber),#e8a33d) }
:root[data-theme="light"] .tag.amber{
  background:rgba(217,143,0,.2); border:1.5px solid rgba(217,143,0,.5);
  color:#9a5c00; font-weight:700;
}
.tag.green{ background:rgba(34,139,80,.14);  color:light-dark(var(--brand-green),#5cc08a) }
.tag.blue { background:rgba(10,77,140,.10);  color:var(--accent) }

/* ---------- 8. Karten (Leistungen) --------------------------------------
   ul.cards > li > article — Grid mit auto-fit, kein Breakpoint nötig.     */
ul.cards{
  display:grid; gap:var(--space-s);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  list-style:none; padding:0;
}
ul.cards article{
  display:flex; flex-direction:column; gap:var(--space-s);
  height:100%;
  padding:var(--space-m);
  background:light-dark(#fff,var(--surface-alt));
  border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-card);
  transition:transform .3s, box-shadow .3s;
}
ul.cards article:hover{ transform:translateY(-4px) }
ul.cards article ul{
  list-style:none; padding:0; display:grid; gap:.45rem;
  font-size:var(--step--1); color:var(--ink-soft);
}
ul.cards article ul li::before{ content:"✓  "; color:var(--accent); font-weight:700 }
ul.cards article footer{
  margin-top:auto; display:flex; flex-wrap:wrap; gap:1rem;
  font-size:.9rem; font-weight:500; color:var(--accent);
}
ul.cards article footer a:hover{ text-decoration:underline }

/* Karten-Header (Badge, Überschrift, Logo) zentriert */
ul.cards article .tag{ align-self:center }
ul.cards article h3{ text-align:center }

/* Marken-Logo direkt unter der Karten-Überschrift, zentriert */
.card-logo{ height:4rem; width:auto; align-self:center; margin:.4rem 0 .6rem }
img.card-logo{ display:block }
img.card-logo.logo-soldy{ border-radius:22.5% }
:root[data-theme="dark"] img.card-logo.logo-soldy{
  box-shadow:0 0 0 1px rgba(94,231,167,.3), 0 0 22px -3px rgba(94,231,167,.45);
}
/* Offizielles Apple-Technical-Partner-Badge in der Säulen-Karte:
   unverändertes Apple-Artwork, immer auf Weiß (Trademark-Vorgabe) */
img.card-logo.logo-apple-badge{
  height:auto; width:min(180px,70%);
  background:#fff; padding:.55rem .9rem;
  border:1px solid var(--line); border-radius:var(--r-s);
}

/* ---------- 9. Werte-Panel (dunkel) -------------------------------------- */
section.values{
  background:linear-gradient(135deg,var(--panel-ink) 0%,var(--brand-blue-deep) 100%);
  color:#fff;
}
section.values h2,section.values .eyebrow{ color:#fff }
/* Dunkle Panels sind in beiden Themes dunkel — em-Verlauf immer hell */
section.values h2 em,
section.cta-panel h2 em{
  background-image:linear-gradient(135deg,var(--brand-blue-light) 0%,#a5d2f2 100%);
}
section.values .eyebrow{ color:var(--brand-blue-light) }
section.values > p{ color:rgba(255,255,255,.65) }
section.values ol{
  display:grid; gap:1px;
  grid-template-columns:1fr; /* Mobile: 1 Spalte – keine leere Zelle */
  list-style:none; padding:0;
  counter-reset:wert;
  background:rgba(255,255,255,.12); border-radius:var(--r-m); overflow:clip;
}
/* Ab Tablet/Desktop: alle drei Werte nebeneinander */
@media (min-width:50rem){
  section.values ol{ grid-template-columns:repeat(3,1fr) }
}
section.values ol li{
  padding:var(--space-m);
  background:color-mix(in srgb,var(--panel-ink) 92%,#fff 8%);
  display:grid; gap:.6rem; align-content:start;
  counter-increment:wert;
}
section.values ol li strong{ font-size:var(--step-1); font-weight:500 }
section.values ol li::before{
  content:"— 0" counter(wert);
  font-size:.8rem; letter-spacing:.15em; color:var(--brand-blue-light);
}
section.values ol li p{ color:rgba(255,255,255,.6); font-size:var(--step--1) }

/* ---------- 10. Kontakt -------------------------------------------------- */
section.contact > div{
  display:grid; gap:var(--space-l);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  align-items:start;
}
address{
  font-style:normal; display:grid; gap:.75rem;
}
address a{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.2rem; border-radius:var(--r-m);
  border:1px solid var(--line);
  background:light-dark(#fff,var(--surface-alt));
  transition:transform .2s, border-color .2s;
}
address a:hover{ transform:translateX(4px); border-color:var(--accent) }
address a svg{ width:1.3rem; height:1.3rem; stroke:var(--accent); fill:none; stroke-width:2 }
address a b{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft) }

form{
  display:grid; gap:var(--space-s);
  padding:var(--space-m);
  background:light-dark(#fff,var(--surface-alt));
  border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-card);
}
form > p.row{ display:grid; gap:var(--space-s); grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); max-width:none }
form label{ display:grid; gap:.4rem; font-size:.85rem; font-weight:500; color:var(--ink-soft) }
form :is(input,textarea){
  padding:.8rem 1rem; border-radius:var(--r-s);
  border:1px solid var(--line);
  background:light-dark(#fafcfe,var(--surface));
  transition:border-color .2s;
}
form :is(input,textarea):focus{ border-color:var(--accent); outline:none }
form textarea{ min-height:8rem; resize:vertical }
form button{
  padding:1rem; border-radius:var(--r-pill);
  background:var(--panel-ink); color:#fff; font-weight:500;
  transition:background .2s, color .2s;
}
form button:hover{ background:var(--brand-blue) }
/* Dark Mode: panel-ink verschmilzt mit dem Formular – heller Akzent-Button */
:root[data-theme="dark"] form button{ background:#6fb4e8; color:var(--panel-ink) }
:root[data-theme="dark"] form button:hover{ background:#8fc6ee }
form small{ font-size:.78rem; color:var(--ink-soft) }
form small a{ color:var(--accent); text-decoration:underline }

/* ---------- 11. CTA-Box --------------------------------------------------- */
section.cta-panel{ padding-block:var(--space-l) var(--space-xl) }
section.cta-panel > div{
  display:grid; gap:var(--space-s); justify-items:center; text-align:center;
  padding:var(--space-xl) var(--space-m);
  border-radius:var(--r-l); overflow:clip; position:relative;
  background:linear-gradient(135deg,var(--panel-ink) 0%,var(--brand-blue-deep) 100%);
  color:#fff;
}
section.cta-panel > div::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%,rgba(91,168,230,.2) 0%,transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(10,77,140,.3) 0%,transparent 50%);
}
section.cta-panel h2{ color:#fff }
section.cta-panel p{ color:rgba(255,255,255,.7) }
section.cta-panel > div > *{ position:relative }
section.cta-panel .btn{ background:#fff; color:var(--brand-blue-deep); box-shadow:none }
section.cta-panel .btn:hover{ background:var(--brand-blue-light); color:#fff }

/* ---------- 12. Footer ---------------------------------------------------- */
body > footer{
  display:grid;
  grid-template-columns:
    minmax(clamp(1.25rem,4vw,3rem),1fr)
    min(100% - 2.5rem, var(--content))
    minmax(clamp(1.25rem,4vw,3rem),1fr);
  padding-block:var(--space-l);
  background:var(--panel-ink); color:rgba(255,255,255,.7);
  row-gap:var(--space-m);
}
body > footer > *{ grid-column:2 }
body > footer nav{
  display:grid; gap:var(--space-m) var(--space-l);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));
  padding-bottom:var(--space-m);
  border-bottom:1px solid rgba(255,255,255,.1);
}
body > footer nav section:first-child{ grid-column:1/-1 }
body > footer strong{ font-size:1.3rem; font-weight:500; color:#fff }
body > footer h4{ font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:.8rem }
body > footer ul{ list-style:none; padding:0; display:grid; gap:.5rem; font-size:.9rem }
body > footer ul a:hover{ color:#fff }
.socials{ display:flex; gap:.6rem; margin-top:1rem }
.socials a{
  display:grid; place-items:center; width:2.3rem; height:2.3rem;
  border-radius:50%; border:1px solid rgba(255,255,255,.2);
  transition:background .2s, transform .2s;
}
.socials a:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px) }
.socials svg{ width:1rem; height:1rem; fill:currentColor }
body > footer > p{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-size:.8rem; color:rgba(255,255,255,.4); max-width:none;
}
body > footer > p a{ color:rgba(255,255,255,.55); margin-left:1rem }
body > footer > p a:hover{ color:#fff }

/* ---------- 13. Scroll-Reveal (progressive enhancement) ------------------ */
[data-reveal]{ opacity:0; translate:0 26px; transition:opacity .7s ease, translate .7s ease }
[data-reveal].in{ opacity:1; translate:0 0 }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; translate:0 0 } }

/* ---------- 14. Unterseiten-Hero ------------------------------------------ */
section.hero.compact{ min-height:56svh; padding-block:clamp(6.5rem,14svh,9rem) var(--space-l) }
section.hero.compact::before{ top:9%; left:clamp(-5rem,-3vw,0rem) }
section.hero.compact::after{ bottom:4%; right:clamp(-4rem,-2vw,0rem); opacity:calc(var(--cloud-alpha)*.6) }

/* ---------- 15. Inhalts-Bausteine (Unterseiten) --------------------------- */
/* Häkchen-Liste */
.checklist{
  list-style:none; padding:0;
  width:min(100%,var(--narrow)); margin-inline:auto; text-align:left;
}
.checklist li{ padding:.85rem 0; border-bottom:1px solid var(--line) }
.checklist li:last-child{ border-bottom:none }
.checklist li::before{ content:"✓"; color:var(--accent); font-weight:700; margin-right:.8rem }

/* Portrait */
img.portrait{
  width:min(240px,60vw); border-radius:var(--r-l);
  box-shadow:var(--shadow-card); justify-self:center;
}
/* Kleines rundes Porträt als persönliche Signatur (Startseite, über dem Namen).
   object-position oben, damit der Kopf beim quadratischen Zuschnitt ganz sichtbar bleibt. */
img.portrait-mini{
  display:block; width:116px; height:116px; border-radius:50%; object-fit:cover;
  object-position:50% 14%;
  margin:0 auto .9rem;
  box-shadow:0 0 0 4px var(--surface), 0 8px 22px -8px light-dark(rgba(7,57,104,.42), rgba(0,0,0,.6));
}

/* Werdegang – vertikale Zeitleiste mit Kreis-Markern */
ol.timeline{
  list-style:none; padding:0; text-align:left;
  display:grid; gap:var(--space-l);
  width:min(100%,var(--narrow)); margin-inline:auto;
}
ol.timeline li{
  position:relative;
  padding-left:2.6rem;
  display:grid; gap:.4rem;
}
/* durchgehende Verbindungslinie von Kreis zu Kreis */
ol.timeline li::before{
  content:"";
  position:absolute; left:.5rem; top:.5rem;
  bottom:calc(-1 * var(--space-l) - .5rem);
  width:1.5px; background:var(--accent); opacity:.4;
}
ol.timeline li:last-child::before{ display:none }
/* Kreis-Marker (Ring) auf der Linie */
ol.timeline li::after{
  content:"";
  position:absolute; left:0; top:.15rem;
  width:1rem; height:1rem; border-radius:50%;
  border:2px solid var(--accent);
  background:var(--surface);
}
ol.timeline b{
  font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
}
ol.timeline h3{ font-size:var(--step-1) }
ol.timeline p{ font-size:var(--step--1) }

/* Produkt-Detailzeile (Leistungen) */
.detail{
  display:grid; gap:var(--space-l);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  align-items:center;
  padding-block:var(--space-l);
  border-bottom:1px solid var(--line);
}
.detail:last-of-type{ border-bottom:none }
.detail figure{
  display:grid; place-items:center; gap:.8rem;
  padding:var(--space-l);
  border-radius:var(--r-l);
  background:linear-gradient(135deg,light-dark(#fff,var(--surface-alt)) 0%,light-dark(var(--surface-alt),var(--surface)) 100%);
  border:1px solid var(--line);
  min-height:14rem;
}
.detail figure img{ max-width:min(240px,70%) }
.detail figure svg{ width:3.5rem; height:3.5rem; fill:var(--accent) }
.detail figcaption{ text-align:center; color:var(--ink-soft); font-size:var(--step--1) }
.detail article{ display:grid; gap:var(--space-s); justify-items:start }

/* App-Icon (Soldy): dunkles Icon abheben, im Dark Mode zusätzlich hervorheben */
.detail figure img.app-icon{
  width:min(180px,55%); max-width:none;
  border-radius:22.5%;
  box-shadow:var(--shadow-card);
}
:root[data-theme="dark"] .detail figure img.app-icon{
  box-shadow:0 0 0 1px rgba(94,231,167,.3),
             0 0 34px -4px rgba(94,231,167,.4),
             0 12px 30px -8px rgba(0,0,0,.6);
}

/* Apple-Technical-Partner-Badge */
img.partner-badge{
  width:clamp(180px,26vw,250px);
  padding:.8rem 1.2rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  box-shadow:var(--shadow-card);
  justify-self:center; margin-inline:auto;
}

/* Produkt-Logo oben im Hero (Soldy / Kitaversum) */
.hero-logo{
  height:clamp(4.5rem,10vw,6rem); width:auto;
  margin:0 auto var(--space-s); display:block;
}
.hero-logo.logo-soldy{ border-radius:22.5%; box-shadow:var(--shadow-card) }
:root[data-theme="dark"] .hero-logo.logo-soldy{
  box-shadow:0 0 0 1px rgba(94,231,167,.3),
             0 0 34px -4px rgba(94,231,167,.45),
             0 12px 30px -8px rgba(0,0,0,.6);
}

/* Hinweis-Box (Legal-Meta, Info) */
aside.note{
  padding:var(--space-m);
  border:1px solid var(--line); border-radius:var(--r-m);
  background:light-dark(var(--surface-alt),var(--surface-alt));
  width:min(100%,var(--narrow));
}
aside.note p{ max-width:none }

/* Legal-Seiten: engere Textspalte, mehr Abstand vor Überschriften */
section.legal{ row-gap:var(--space-s) }
section.legal > *{ grid-column:2; max-width:var(--narrow) }
section.legal h2{ font-size:var(--step-2); margin-top:var(--space-m) }

/* Ablauf-Schritte (nummerierte Karten) */
ol.steps{
  list-style:none; padding:0; counter-reset:step;
  display:grid; gap:var(--space-s);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));
  text-align:left;
}
ol.steps li{
  counter-increment:step;
  display:grid; gap:.5rem; align-content:start;
  padding:var(--space-m);
  background:light-dark(#fff,var(--surface-alt));
  border:1px solid var(--line); border-radius:var(--r-l);
  box-shadow:var(--shadow-card);
}
ol.steps li::before{
  content:counter(step);
  display:grid; place-items:center;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-soft) 100%);
  color:#fff; font-size:1.1rem; font-weight:600;
}
ol.steps h3{ margin-top:.2rem }
ol.steps p{ font-size:var(--step--1) }

/* FAQ-Akkordeon (natives <details>, kein JS) */
.faq{
  width:min(100%,var(--narrow)); margin-inline:auto; text-align:left;
  display:grid; gap:.6rem;
}
.faq details{
  border:1px solid var(--line); border-radius:var(--r-m);
  background:light-dark(#fff,var(--surface-alt)); overflow:hidden;
}
.faq summary{
  padding:1rem 1.2rem; font-weight:500; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between;
  align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; font-size:1.5rem; line-height:1; color:var(--accent);
  transition:transform .3s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ padding:0 1.2rem 1.1rem; max-width:none; color:var(--ink-soft) }