@import url("/start/fonts/schriften.css");

/* =============================================================================
   Specter Write — Aussehen

   Der Gedanke dahinter: die Seite ist Tinte auf Papier, und der Akzent ist der
   rote Stift. Deshalb kein weiteres buntes Markenlila, sondern genau drei
   Flaechen — dunkle Tinte, helles Papier, roter Korrekturstrich — und der Rest
   ist Abstand. Die Tarifstufe Plus wird nicht durch ein Bapperl kenntlich
   gemacht, sondern dadurch, dass ihre Karte in Tinte steht statt auf Papier.

   Fraunces schreibt die Ueberschriften, Figtree den Rest. Beide liegen unter
   /start/fonts/ auf diesem Server (siehe schriften.css).
   ========================================================================== */

:root{
  /* Flaechen */
  --tinte:#141d2e;          /* die geschriebene Farbe, zugleich das dunkle Band */
  --tinte-hoch:#1e2b42;     /* aufgehellte Tinte, fuer Karten im Band          */
  --papier:#f7f6f3;         /* der Grund: warm-neutral, bewusst keine Creme    */
  --karte:#ffffff;
  --karte-rand:#e6e3dc;

  /* Schrift */
  --text:#141d2e;
  --text-leise:#6b6a64;
  --text-auf-tinte:#eceae4;
  --text-auf-tinte-leise:#a3a9b8;

  /* Akzent — der rote Stift. Sparsam, sonst ist er keiner mehr. */
  --rot:#b8332a;
  --rot-tief:#94271f;
  --rot-weich:#fbeeec;
  --rot-rand:#f0d5d1;
  --rot-auf-tinte:#f0705c;  /* aufgehellt, damit er auf Tinte lesbar bleibt   */
  /* Schrift auf roter Flaeche. Im Hellen Weiss; im Dunkeln wird das Rot heller,
     und Weiss darauf kaeme nur auf rund 2,6:1 -- dort also dunkle Schrift. */
  --auf-rot:#ffffff;

  /* Bedeutungsfarben, bewusst getrennt vom Akzent */
  --gut:#2c6e49; --gut-weich:#eaf3ed;
  --warn:#8a5a12; --warn-weich:#fbf3e4; --warn-rand:#eddcbb;

  --linie:#e4e1da;
  --rund:14px;
  --rund-klein:10px;
  --schatten:0 1px 2px rgba(20,29,46,.05), 0 8px 28px rgba(20,29,46,.06);
  --schatten-hoch:0 2px 6px rgba(20,29,46,.08), 0 20px 50px rgba(20,29,46,.10);

  --anzeige:"Fraunces","Iowan Old Style",Georgia,serif;
  --lauf:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root{
    --tinte:#0c1220; --tinte-hoch:#232e46;
    --papier:#0f1622; --karte:#18202f; --karte-rand:#2a3345;
    --text:#e9e7e1; --text-leise:#99a0ad;
    --text-auf-tinte:#e9e7e1; --text-auf-tinte-leise:#98a0b0;
    --rot:#e0644f; --rot-tief:#ee7962; --rot-weich:#2a1a18; --rot-rand:#4a2a25;
    --auf-rot:#2b100b;
    --rot-auf-tinte:#e0644f;
    --gut:#6cc08c; --gut-weich:#16241c;
    --warn:#d8ab5e; --warn-weich:#241d10; --warn-rand:#3d3120;
    --linie:#262e3d;
    --schatten:0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.28);
    --schatten-hoch:0 2px 6px rgba(0,0,0,.35), 0 20px 50px rgba(0,0,0,.4);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--text);
  font-family:var(--lauf); font-size:17px; line-height:1.6;
  font-feature-settings:"kern" 1; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto}

/* ---- Typografie -------------------------------------------------------- */
h1,h2,h3{font-family:var(--anzeige);font-weight:600;letter-spacing:-.02em;
  text-wrap:balance;margin:0;font-variation-settings:"SOFT" 0,"WONK" 0}
h1{font-size:clamp(2.4rem,5.6vw,4rem);line-height:1.06;letter-spacing:-.035em;font-weight:700}
h2{font-size:clamp(1.75rem,3.4vw,2.4rem);line-height:1.14;letter-spacing:-.028em}
h3{font-size:1.12rem;line-height:1.3;letter-spacing:-.015em;font-weight:600}
p{margin:0}
.leise{color:var(--text-leise)}
.vorspann{font-size:1.14rem;line-height:1.55;color:var(--text-leise);max-width:56ch}
.augenbraue{font-family:var(--lauf);font-size:.76rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--rot)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--rot-weich);border:1px solid var(--rot-rand);
  padding:.5px 5px;border-radius:5px}

/* ---- Geruest ----------------------------------------------------------- */
.huelle{max-width:1120px;margin:0 auto;padding:0 24px}
.eng{max-width:640px}
section{padding:76px 0}
@media (max-width:640px){ section{padding:52px 0} .huelle{padding:0 18px} }

/* ---- Kopfleiste -------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--papier) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--linie)}
.topbar.auf-tinte{background:color-mix(in srgb,var(--tinte) 88%,transparent);
  border-bottom-color:rgba(255,255,255,.09);color:var(--text-auf-tinte)}
.topbar-in{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:18px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;
  font-family:var(--anzeige);font-weight:700;font-size:1.14rem;letter-spacing:-.025em}
.marke svg{width:24px;height:24px;flex:none}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-size:.92rem;font-weight:500;text-decoration:none;padding:9px 15px;
  border-radius:9px;border:1px solid transparent;color:var(--text-leise);white-space:nowrap}
.topbar.auf-tinte .nav a{color:var(--text-auf-tinte-leise)}
.nav a:hover{color:var(--text)}
.topbar.auf-tinte .nav a:hover{color:var(--text-auf-tinte)}
.nav a.sec{border-color:var(--karte-rand);background:var(--karte);color:var(--text)}
.topbar.auf-tinte .nav a.sec{border-color:rgba(255,255,255,.22);background:transparent;color:var(--text-auf-tinte)}
.topbar.auf-tinte .nav a.sec:hover{background:rgba(255,255,255,.09)}
.nav a.pri{background:var(--rot);border-color:var(--rot);color:var(--auf-rot);font-weight:600}
.nav a.pri:hover{background:var(--rot-tief);border-color:var(--rot-tief);color:var(--auf-rot)}
/* Muss ausgeschrieben sein: `.topbar.auf-tinte .nav a` ist spezifischer als
   `.nav a.pri` und hat dem Knopf sonst die gedaempfte Leistenfarbe verpasst --
   gemessene 2,5:1 auf Rot statt der weissen Schrift, die dort hingehoert. */
.topbar.auf-tinte .nav a.pri{color:var(--auf-rot);background:var(--rot);border-color:var(--rot)}
.topbar.auf-tinte .nav a.pri:hover{color:var(--auf-rot);background:var(--rot-tief);border-color:var(--rot-tief)}
/* Die Kopfleiste war die Stelle, an der die Handy-Ansicht seitlich ausbrach:
   drei Knoepfe mit white-space:nowrap passen bei 390px nicht nebeneinander und
   erzwingen dann eine Mindestbreite fuer die ganze Seite -- wodurch auch der
   Fliesstext rechts aus dem Bild lief. Deshalb faellt schrittweise weg, was
   entbehrlich ist: erst der Markenname, dann die Sprungmarken. */
.nav a.nebensache{display:inline-block}
@media (max-width:720px){
  .marke span{display:none}
}
@media (max-width:600px){
  .topbar-in{padding:11px 16px;gap:8px}
  .nav{gap:6px}
  .nav a{padding:8px 12px;font-size:.88rem}
  .nav a.nebensache{display:none}
}
/* Angemeldet stehen in der Leiste drei Dinge (zurueck zur Werbeseite, Konto,
   Abmelden). Auf sehr schmalen Geraeten passen die nicht neben die Marke --
   gemessen liefen sie bei 320px 24px ueber. Dort rutscht die Leiste deshalb in
   eine zweite Zeile, statt die Seite seitlich zu verschieben. */
@media (max-width:400px){
  .topbar-in{flex-wrap:wrap;row-gap:8px;padding:10px 14px}
  .marke{margin-right:0}
  .nav{width:100%;justify-content:flex-start;gap:6px;flex-wrap:wrap}
  .nav a{padding:7px 11px;font-size:.84rem}
}

/* ---- Band aus Tinte ---------------------------------------------------- */
.band{background:var(--tinte);color:var(--text-auf-tinte)}
.band h1,.band h2,.band h3{color:var(--text-auf-tinte)}
.band .vorspann,.band .leise{color:var(--text-auf-tinte-leise)}
.band .augenbraue{color:var(--rot-auf-tinte)}
.band code{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}

/* ---- Knoepfe ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border:1px solid var(--rot);border-radius:var(--rund-klein);
  background:var(--rot);color:var(--auf-rot);font-family:var(--lauf);font-size:1rem;
  font-weight:600;cursor:pointer;text-decoration:none;text-align:center;
  transition:background .15s,border-color .15s,transform .06s}
.btn:hover{background:var(--rot-tief);border-color:var(--rot-tief);color:var(--auf-rot)}
.btn:active{transform:translateY(1px)}
.btn.stumm{background:transparent;color:var(--text);border-color:var(--karte-rand)}
.btn.stumm:hover{background:var(--karte);border-color:var(--text-leise);color:var(--text)}
.band .btn.stumm{color:var(--text-auf-tinte);border-color:rgba(255,255,255,.26);background:transparent}
.band .btn.stumm:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:var(--text-auf-tinte)}
.btn:disabled{opacity:.5;cursor:default}
.btn.breit{width:100%}

/* ---- Karten ------------------------------------------------------------ */
.karte{background:var(--karte);border:1px solid var(--karte-rand);
  border-radius:var(--rund);box-shadow:var(--schatten);padding:26px}
.karte.tinte{background:var(--tinte);border-color:transparent;color:var(--text-auf-tinte);
  box-shadow:var(--schatten-hoch)}
/* Im Dunkelmodus traegt die Tinte nicht mehr: sie waere dunkler als die Karten
   ringsum und die Plus-Stufe verlore genau die Auszeichnung, die sie im Hellen
   hat. Dort hebt sie sich stattdessen ab -- hellere Flaeche, roter Rand. */
@media (prefers-color-scheme: dark){
  .karte.tinte{background:var(--tinte-hoch);
    border-color:color-mix(in srgb,var(--rot) 38%,transparent)}
}
.karte.tinte h2,.karte.tinte h3{color:var(--text-auf-tinte)}
.karte.tinte .leise{color:var(--text-auf-tinte-leise)}

/* ---- Fuss -------------------------------------------------------------- */
.fuss{border-top:1px solid var(--linie);padding:30px 0 44px;color:var(--text-leise);
  font-size:.9rem;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
.fuss a{text-decoration:none;border-bottom:1px solid var(--linie);padding-bottom:1px}
.fuss a:hover{border-bottom-color:var(--rot);color:var(--text)}

.hide{display:none !important}
:focus-visible{outline:2px solid var(--rot);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}