/* ============================================================
   concanis — Website-Stylesheet
   Tokens gespiegelt aus dem Design System (concanis-designsystem,
   tokens/*.css). Bei Aenderungen dort hier nachziehen.
   ============================================================ */

/* ---------- Inter, selbst gehostet (echte Markenschrift) ---------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  --grad-orange:#FF7A00; --grad-pink:#FF3DA6; --grad-purple:#6B2FE0; --grad-blue:#00C2FF;
  --gradient-brand:linear-gradient(90deg,var(--grad-orange) 0%,var(--grad-pink) 34%,var(--grad-purple) 66%,var(--grad-blue) 100%);

  --ink-900:#0F1115; --ink-800:#1A1A1A; --ink-700:#2A2D33; --ink-500:#6B6F76;
  --ink-200:#E5E7EB; --ink-100:#F4F5F7; --white:#FFFFFF;
  --blue-500:#00C2FF; --blue-600:#00A3D9; --blue-700:#0083B0;
  --green-500:#1F9D57; --danger:#E5484D;

  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --lh-body:1.6; --ls-tight:-0.02em; --ls-caps:0.06em;

  --shadow-md:0 8px 24px rgba(15,17,21,.08);
  --focus-ring:0 0 0 3px rgba(0,194,255,.35);
  --ease:cubic-bezier(0.4,0,0.2,1);
  --dur-base:200ms;
}

*{margin:0;padding:0;box-sizing:border-box}

/* Das hidden-Attribut setzt nur display:none — jede explizite display-Regel
   (etwa .countdown{display:flex}) schlaegt es. Ohne diese Zeile blieben
   Countdown und Formular sichtbar, obwohl das Skript sie ausgeblendet hat. */
[hidden]{display:none!important}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  min-height:100svh; display:flex; flex-direction:column;
  font-family:var(--font-sans); line-height:var(--lh-body);
  color:var(--ink-800); background:var(--white);
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Tastaturnutzer sollen den Sprung in den Inhalt bekommen, ohne dass der Link
   den Entwurf fuer alle anderen stoert. */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink-900);color:var(--white);
  padding:12px 20px;border-radius:0 0 10px 0;z-index:10}
.skip:focus{left:0}

main{flex:1}

/* ---------- Zentrierte Startseite ---------- */
.stage{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(32px,7vw,56px) clamp(20px,6vw,48px);
}
.lockup svg{width:min(300px,72vw);height:auto;display:block}
.divider{display:block;width:72px;height:4px;border-radius:2px;background:var(--gradient-brand);
  margin:clamp(18px,4vw,28px) auto 0}
.claim{font-size:clamp(15px,4vw,18px);color:var(--ink-700);margin-top:clamp(14px,3.5vw,22px)}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--ink-700);background:var(--ink-100);
  border:1px solid var(--ink-200);border-radius:999px;
  padding:8px 16px;margin-top:clamp(32px,7vw,52px);
}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--blue-500);flex:none}

h1{font-size:clamp(30px,8vw,46px);font-weight:700;letter-spacing:var(--ls-tight);
  line-height:1.15;margin-top:clamp(16px,4vw,24px);text-wrap:balance}
.intro{font-size:clamp(15px,4vw,18px);color:var(--ink-700);max-width:34em;
  margin:clamp(16px,4vw,24px) auto 0;text-wrap:pretty}

a{color:var(--blue-600);text-decoration:none;transition:color var(--dur-base) var(--ease)}
a:hover{color:var(--blue-700);text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px}

/* ---------- Countdown ----------
   Ruhige, rein typografische Anzeige. Kein Blinken, kein Puls — die Marke
   ist "ruhig, kein Hype". Die Sekunden laufen mit, ziehen aber optisch
   nicht die Aufmerksamkeit auf sich. */
.countdown{
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(6px,2.2vw,18px);margin-top:clamp(14px,3vw,20px);
}
.countdown div{min-width:clamp(56px,16vw,84px)}
.countdown b{
  display:block;font-size:clamp(30px,9vw,52px);font-weight:700;
  letter-spacing:var(--ls-tight);line-height:1;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.countdown span{
  display:block;margin-top:8px;font-size:11px;font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-500);
}
.launch-date{margin-top:clamp(16px,4vw,22px);font-size:clamp(14px,3.6vw,16px);color:var(--ink-700)}

/* ---------- Textbloecke der Startseite ----------
   Die Seite ist keine zentrierte Karte mehr, sondern eine Folge von Aussagen.
   Jede bekommt Luft, damit sie einzeln wirkt statt als Textwand. */
.block{max-width:38em;margin:0 auto;padding:0 clamp(20px,6vw,48px) clamp(44px,9vw,72px);text-align:center}
.block h2{font-size:clamp(21px,5.4vw,29px);font-weight:700;letter-spacing:var(--ls-tight);
  line-height:1.2;text-wrap:balance}
.block p{margin-top:clamp(12px,3vw,16px);font-size:clamp(15px,4vw,17.5px);
  color:var(--ink-700);text-wrap:pretty}
.block .lead{font-size:clamp(16px,4.3vw,19px)}
/* Die rhetorische Frage traegt den Kern der Positionierung — sie bekommt den
   Verlaufsstrich, den sonst nur die Wortmarke hat. */
.block .ask{margin-top:clamp(20px,4.5vw,28px);padding-top:clamp(20px,4.5vw,28px);
  position:relative;color:var(--ink-800);font-weight:500}
.block .ask::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:72px;height:4px;border-radius:2px;background:var(--gradient-brand)}
.block.launch h2{font-size:clamp(19px,4.6vw,23px);font-weight:600;color:var(--ink-700)}
.block.launch time{color:var(--ink-900);font-weight:700}
.noch{margin-top:clamp(22px,5vw,30px)!important;font-size:11px!important;font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-500)!important}
.countdown i{font-style:normal;font-size:clamp(22px,6vw,38px);font-weight:300;
  color:var(--ink-200);line-height:1;align-self:flex-start}
.block .signup{margin-top:0}

.launch-date strong{font-weight:600}

/* ---------- Newsletter ---------- */
.signup{
  width:100%;max-width:520px;margin:clamp(36px,8vw,56px) auto 0;
  background:var(--ink-100);border:1px solid var(--ink-200);border-radius:16px;
  padding:clamp(24px,5vw,32px);text-align:left;
}
.signup h2{font-size:clamp(19px,4.6vw,22px);font-weight:600;letter-spacing:var(--ls-tight)}
.signup p{margin-top:8px;font-size:14.5px;color:var(--ink-700)}
.signup form{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.signup input[type=email]{
  flex:1 1 220px;min-width:0;font:inherit;font-size:15px;color:var(--ink-800);
  background:var(--white);border:1px solid var(--ink-200);border-radius:10px;
  padding:13px 15px;transition:border-color var(--dur-base) var(--ease);
}
.signup input[type=email]::placeholder{color:var(--ink-500)}
.signup input[type=email]:hover{border-color:var(--ink-500)}
.signup input[type=email]:focus-visible{border-color:var(--blue-500)}
.signup button{
  flex:0 0 auto;font:inherit;font-size:15px;font-weight:500;cursor:pointer;
  color:var(--white);background:var(--ink-800);border:0;border-radius:999px;
  padding:13px 26px;transition:background var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.signup button:hover:not(:disabled){background:var(--ink-900)}
.signup button:active:not(:disabled){transform:scale(.98)}
.signup button:disabled{opacity:.55;cursor:progress}

/* Honigtopf: fuer Menschen unsichtbar, fuer Formular-Bots verlockend.
   Nicht display:none — manche Bots ueberspringen genau das. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.consent{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--ink-500)}
.note{margin-top:14px;font-size:14px;line-height:1.55;display:none}
.note.show{display:block}
.note.ok{color:var(--green-500)}
.note.err{color:var(--danger)}

/* ---------- Textseiten (Impressum, Datenschutz, Statusseiten) ---------- */
.prose{max-width:44em;margin:0 auto;padding:clamp(40px,8vw,72px) clamp(20px,6vw,48px)}
.prose .lockup{margin-bottom:clamp(28px,6vw,40px)}
.prose .lockup svg{width:min(200px,52vw)}
.prose h1{margin-top:0;font-size:clamp(27px,6.5vw,38px)}
.prose h2{margin-top:clamp(30px,6vw,44px);font-size:clamp(18px,4.4vw,21px);font-weight:600;letter-spacing:var(--ls-tight)}
.prose h3{margin-top:26px;font-size:16px;font-weight:600}
.prose p,.prose ul,.prose ol{margin-top:14px;color:var(--ink-700);font-size:15.5px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-top:6px}
.prose .meta{font-size:13px;color:var(--ink-500)}
.prose address{font-style:normal;margin-top:14px;color:var(--ink-700);font-size:15.5px}
.prose table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--ink-200);vertical-align:top}
.prose th{font-weight:600;color:var(--ink-800)}
.prose td{color:var(--ink-700)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- Markenband zum Seitenabschluss ----------
   Nachbau des Instagram-Motivs von Judith und Sandra.

   Die Figuren sind jetzt echte Freisteller mit Alphakanal (aus den Vorlagen
   zurueckgerechnet, siehe assets/band/HERKUNFT.md). Damit steckt die Welle
   nicht mehr in den Fotos — sie wird frei platziert, und die Bilder liegen
   sauber davor.

   HELL/DUNKEL IST EIN SCHALTER: nur die drei Farbwerte unten aendern. Alles
   andere — Groessen, Lagen, Verlauf — bleibt gleich. Fuer die helle Fassung:
     --band-bg:var(--ink-100); --band-ink:var(--ink-800); --band-ink-2:var(--ink-500);
   Die Wortmarke traegt den Verlauf und funktioniert auf beidem. */
.band{
  /* HELL. Fuer die dunkle Fassung stattdessen:
       --band-bg:#0D0E11; --band-ink:#FFFFFF; --band-ink-2:rgba(255,255,255,.72);
     Auf hellem Grund fallen zudem die Reste der Freistellung nicht auf — die
     Kanten der Vorlagen tragen einen hellen Rest des Karo-Hintergrunds, der
     auf Dunkel als Flaum sichtbar wird. */
  --band-bg:var(--ink-100);
  --band-ink:var(--ink-800);
  --band-ink-2:var(--ink-500);
  --namen-h:2.9rem;

  --fig-h:clamp(230px,34vw,430px);
  position:relative;background:var(--band-bg);color:var(--band-ink);
  overflow:hidden;margin-top:clamp(36px,7vw,64px);
}

/* Die Welle laeuft hinter den Figuren durch das untere Drittel — wie im
   Motiv. z-index 0 gegen 1; die Freisteller sind deckend, es scheint also
   nichts mehr durch sie hindurch. */
.band-welle{
  position:absolute;left:0;right:0;line-height:0;z-index:0;
  bottom:calc(var(--namen-h) + var(--fig-h) * 0.06);
  height:calc(var(--fig-h) * 0.22);
}
.band-welle svg{display:block;width:100%;height:100%}

.band-inhalt{
  position:relative;z-index:1;
  /* Spalten nach dem Seitenverhaeltnis der Freisteller: Judith 506x900,
     Sandra 750x900. Beide gleich hoch, also stehen sie auf einer Linie. */
  display:grid;
  grid-template-columns:calc(var(--fig-h) * 0.562) 1fr calc(var(--fig-h) * 0.833);
  grid-template-rows:auto var(--namen-h);
  align-items:end;
  padding-top:clamp(36px,6vw,64px);
}
.band-figur{display:block;width:100%;height:auto;align-self:end}
/* Ausdruecklich zuweisen: .band-mitte ist absolut positioniert und faellt aus
   dem Raster — sonst rutscht das rechte Bild in die mittlere 1fr-Spalte. */
.band-figur.links {grid-row:1;grid-column:1}
.band-figur.rechts{grid-row:1;grid-column:3}

/* Namen: zurueckhaltend, aber lesbar. Versalien mit weiter Laufweite tragen
   hier besser als eine groessere Schrift — sie ordnen sich dem Bild unter,
   statt mit der Wortmarke zu konkurrieren. */
.band-name{
  grid-row:2;align-self:center;text-align:center;
  margin:0;font-size:11.5px;font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--band-ink-2);
}
.band-name.links {grid-column:1}
.band-name.rechts{grid-column:3}

/* Wortmarke und Claim sitzen im Motiv auf 45 % der Figurenhoehe von oben.
   Absolut positioniert, damit die Mitte des Blocks die Linie trifft,
   unabhaengig davon wie hoch er gerade ist. */
.band-mitte{
  position:absolute;left:50%;
  top:calc(100% - var(--fig-h) * 0.55);
  transform:translate(-50%,-50%);
  width:min(520px,42%);
  text-align:center;padding:0 clamp(12px,3vw,28px);
}
.band-marke svg{width:min(300px,34vw);height:auto;display:block;margin:0 auto}
.band-mitte p{margin-top:16px;font-size:clamp(14px,3.6vw,17px);color:var(--band-ink-2)}

/* Unter 980px ist zwischen zwei Figuren kein Platz mehr fuer die Wortmarke.
   Dort steht sie oben, die Figuren darunter nebeneinander. Zeilen und Spalten
   explizit, sonst schiebt die Dokumentreihenfolge den Text dazwischen. */
@media (max-width:980px){
  .band{--fig-h:clamp(200px,42vw,320px)}
  .band-inhalt{
    grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
    align-items:end;gap:0 clamp(8px,3vw,24px);
    padding-top:clamp(28px,7vw,48px);
  }
  .band-mitte{
    position:static;transform:none;width:auto;
    grid-row:1;grid-column:1 / -1;padding-bottom:clamp(20px,6vw,36px);
  }
  .band-inhalt{grid-template-rows:auto auto var(--namen-h)}
  .band-figur.links {grid-row:2;grid-column:1;width:auto;height:var(--fig-h);justify-self:center}
  .band-figur.rechts{grid-row:2;grid-column:2;width:auto;height:var(--fig-h);justify-self:center}
  .band-name.links {grid-row:3;grid-column:1}
  .band-name.rechts{grid-row:3;grid-column:2}
}

/* ---------- Footer ---------- */
footer{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  font-size:12.5px;color:var(--ink-500);
  padding:24px clamp(20px,6vw,48px) calc(24px + env(safe-area-inset-bottom));
}
footer a{color:var(--ink-500)}
footer a:hover{color:var(--ink-700)}
footer .sep{color:var(--ink-200)}

/* ---------- Bewegungsreduktion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}