/* ==========================================================================
   StartupVisit — Design-System v1 (in Code)
   Spezifikation: FAMILY AI/.../00-Marke/StartupVisit_Design-System_v1.md
   Regel: Doc beschreibt, dieser Code ist die Wahrheit — synchron halten.
   ========================================================================== */

/* --- Schriften: lokal eingebunden ---------------------------------------
   Bewusst NICHT von fonts.googleapis.com geladen: das uebertraegt die
   IP-Adresse jedes Besuchers an Google. Bei einer Seite fuer Minderjaehrige
   unnoetig. Dateien liegen in assets/fonts/ (nur latin + latin-ext, 176 KB).
   Beide sind Variable Fonts — 400/500 bzw. 500/700 teilen sich je eine Datei.
   ------------------------------------------------------------------------ */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inter-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;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/inter-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:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/inter-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;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/inter-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:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/space-grotesk-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;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/space-grotesk-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:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/space-grotesk-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;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/space-grotesk-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;
}

/* --- Tokens: hell ------------------------------------------------------- */
:root{
  --accent:#F2762B;
  --accent-deep:#D9611B;     /* nur fuer Hover, nicht im Doc als Token */
  --ink:#15181B;
  --text:#54504A;
  --muted:#8A857C;
  --paper:#FFFFFF;
  --surface:#F7F5F1;
  --line:#ECEBE6;

  /* Typo */
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* Layout */
  --maxw:1080px;
  --pad:20px;
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --sect:clamp(64px,8vw,80px);
}

/* --- Tokens: dunkel ----------------------------------------------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --accent:#F2762B;
    --ink:#F4F2EE;
    --text:#C9C5BD;
    --muted:#9A958C;
    --paper:#0F1113;
    --surface:#1A1D20;
    --line:#2A2D30;
  }
}
:root[data-theme="dark"]{
  --accent:#F2762B; --ink:#F4F2EE; --text:#C9C5BD; --muted:#9A958C;
  --paper:#0F1113; --surface:#1A1D20; --line:#2A2D30;
}

/* --- Reset / Basis ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); font-size:16px; line-height:1.7;
  background:var(--paper); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}

/* --- Typo -------------------------------------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--ink)}
h1{font-size:clamp(34px,5.2vw,56px);line-height:1.1;letter-spacing:-1px}
h2{font-size:clamp(26px,3.4vw,34px);line-height:1.15;letter-spacing:-.6px}
h3{font-size:clamp(18px,2vw,20px);line-height:1.2;letter-spacing:-.2px}
.lead{font-size:clamp(16px,1.6vw,18px);line-height:1.6}
.meta{font-size:13px;line-height:1.5;color:var(--muted)}
strong,b{font-weight:500;color:var(--ink)}

/* Akzentwort mit gerader Unterstreichung (Motiv 2, praezise) */
.mark{position:relative;color:var(--ink);white-space:nowrap}
.mark::after{
  content:""; position:absolute; left:0; right:0; bottom:-.12em;
  height:4px; border-radius:2px; background:var(--accent);
}

/* --- Layout ------------------------------------------------------------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--sect) 0}
section.alt{background:var(--surface)}
section.dark{background:var(--ink)}
section.dark h2,section.dark h3{color:var(--paper)}
section.dark{color:#C9C5BD}
.stack>*+*{margin-top:14px}

/* --- Eyebrow (orange Pille) -------------------------------------------- */
.eyebrow{
  display:inline-block; font-family:var(--display); font-weight:700;
  font-size:11px; letter-spacing:1.2px; text-transform:uppercase;
  color:#fff; background:var(--accent);
  padding:5px 12px; border-radius:var(--r-md);
}
.eyebrow.ghost{background:transparent;color:var(--accent);padding-left:0}

/* --- Buttons: schwarz = Hauptaktion, orange = sekundaer ----------------- */
.btn{
  display:inline-block; font-family:var(--display); font-weight:700; font-size:15px;
  text-decoration:none; cursor:pointer; border:0;
  padding:12px 22px; border-radius:var(--r-md);
  background:var(--ink); color:var(--paper);
  transition:transform .12s ease, background .15s ease;
}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn.secondary{background:var(--accent);color:#fff}
.btn.secondary:hover{background:var(--accent-deep)}
.btn.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.quiet:hover{background:var(--surface)}
section.dark .btn{background:var(--paper);color:var(--ink)}
section.dark .btn.secondary{background:var(--accent);color:#fff}

/* --- Karten ------------------------------------------------------------ */
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px;
}
.grid{display:grid;gap:16px}
@media(min-width:720px){ .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c2{grid-template-columns:1fr 1fr} }

/* --- Header ------------------------------------------------------------ */
header.site{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  border-top:4px solid var(--accent);          /* Top-Strich (Akzent) */
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.nav-links{display:none;gap:24px}
@media(min-width:860px){ .nav-links{display:flex} }
.nav-links a{
  font-family:var(--display); font-weight:500; font-size:15px;
  color:var(--ink); text-decoration:none; opacity:.85;
}
.nav-links a:hover{opacity:1;color:var(--accent)}

/* Wortmarke = Live-Text */
.wordmark{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:22px;
  letter-spacing:-1px; color:var(--ink); text-decoration:none;
}
.wordmark i{font-style:normal;color:var(--accent)}
.wordmark img{width:26px;height:26px;border-radius:7px}

/* --- Hero + Flugbahn-Pfeil (Motiv 1, praezise) -------------------------- */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1;max-width:760px;margin-inline:auto 0}
.hero .wrap{margin:0 auto}
.trajectory{
  position:absolute; right:-10px; top:8%;
  width:min(38vw,340px); height:auto; opacity:.9; pointer-events:none;
}
@media(max-width:860px){ .trajectory{width:52vw;top:auto;bottom:-6%;right:-8%;opacity:.5} }

/* Visit-Seiten haben einen inhaltsreichen Hero (Firmenlogo, Eckdaten-Kacheln,
   zwei Buttons). Der Pfeil laeuft dort quer ueber die Kacheln — also kleiner,
   oben rechts fixiert, und auf schmalen Schirmen ganz weg. */
.hero.rich .trajectory{top:0;bottom:auto;right:-16px;width:min(24vw,210px);opacity:.85}
@media(max-width:1040px){ .hero.rich .trajectory{display:none} }

/* --- Formulare --------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-family:var(--display);font-weight:500;font-size:14px;color:var(--ink)}
.field input[type=email],.field input[type=text]{
  font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md); padding:11px 13px;
}
.field input:focus{border-color:var(--accent);outline:none}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5}
.consent input{margin-top:4px;accent-color:var(--accent);width:17px;height:17px;flex:0 0 auto}
.form-note{font-size:13px;color:var(--muted);margin-top:10px}

/* Zustaende (Erfolg / Warten / Fehler) — per [hidden] gesteuert */
.state{border-radius:var(--r-md);padding:13px 15px;font-size:14px;margin-top:14px}
.state.ok{background:color-mix(in srgb,var(--accent) 10%,var(--paper));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));color:var(--ink)}
.state.wait{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.state.err{background:color-mix(in srgb,#C0392B 8%,var(--paper));border:1px solid color-mix(in srgb,#C0392B 30%,var(--line));color:var(--ink)}

/* --- Tito-Widget-Container --------------------------------------------- */
/* Das Widget bringt eigenes Styling mit — wir rahmen es nur ein. */
.tito-frame{margin-top:16px;min-height:120px}
.tito-frame tito-widget{display:block}

/* --- Bericht-Bausteine (wiederkehrend pro Visit) ------------------------ */

/* Fakten-Zeile unter der Bericht-Ueberschrift */
.factstrip{
  display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:18px;
  font-family:var(--display); font-weight:500; font-size:13px;
}
.factstrip span{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:6px 11px; color:var(--ink);
}

/* Lesetext im Bericht: schmalere Spalte, mehr Luft zwischen Abschnitten */
.prose{max-width:660px}
.prose h2{margin-top:calc(var(--sect) * .55)}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:14px}

/* Zitat mit Akzent-Balken */
.quote{
  margin-top:26px; padding:20px 22px;
  background:var(--surface); border-left:4px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.quote p{
  font-family:var(--display); font-weight:500;
  font-size:clamp(18px,2.2vw,22px); line-height:1.4; color:var(--ink);
  margin:0;
}
.quote cite{display:block;margin-top:12px;font-style:normal;font-size:14px;color:var(--muted)}

/* --- Visit-Seite: Firmenkopf -------------------------------------------
   Logo + Ein-Satz-Erklaerung nebeneinander. Das Logo gehoert HIERHIN und
   nicht nach Tito: Tito ist die Transaktion, die Website ist der Inhalt.
   Erlaubnis fuers Logo wird bei der Terminzusage eingeholt
   (Anschreiben-Vorlagen_v1, Vorlage 4).
   ------------------------------------------------------------------------ */
.orgbar{display:flex;flex-wrap:wrap;gap:18px 22px;align-items:center;margin-top:24px}
.orglogo{
  flex:0 0 auto; width:104px; height:104px; padding:14px;
  display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
}
.orglogo img{max-width:100%;max-height:100%;object-fit:contain}
.orgbar .who{flex:1 1 280px}

/* Eckdaten des Visits — Datum, Ort, Dauer, Plaetze */
.keyfacts{display:grid;gap:12px;margin-top:24px;grid-template-columns:repeat(2,1fr);padding:0}
@media(min-width:720px){ .keyfacts{grid-template-columns:repeat(4,1fr)} }
.keyfacts>div{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px 16px;
}
.keyfacts dt{
  font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:1.2px; text-transform:uppercase; color:var(--accent);
}
.keyfacts dd{
  margin:5px 0 0; font-family:var(--display); font-weight:700;
  font-size:17px; line-height:1.25; color:var(--ink);
}

/* Ablauf als nummerierte Schritte */
.steps{margin-top:24px;display:grid;gap:16px;padding:0}
.steps li{list-style:none;display:flex;gap:14px;align-items:flex-start}
.steps .no{
  flex:0 0 34px; height:34px; display:grid; place-items:center;
  border-radius:999px; background:var(--accent); color:#fff;
  font-family:var(--display); font-weight:700; font-size:14px;
}
.steps h3{margin-bottom:2px}

/* Statusband: „noch keine Anmeldung offen" o.ae. */
.notice{
  margin-top:20px; padding:16px 18px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--accent);
}
.notice p+p{margin-top:8px}

/* Foto IM Lesetext (Querformat) statt Galerie am Seitenende.
   Die Tethys-Bilder sind alle quer — quadratisch beschneiden hat zu viel
   weggeschnitten. Hoehe laeuft frei mit, kein object-fit-Crop. */
figure.shot{margin:28px 0 0}
figure.shot img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-lg); border:1px solid var(--line);
}
figure.shot figcaption{margin-top:9px;font-size:13px;line-height:1.5;color:var(--muted)}
/* Zwei Querformate nebeneinander, wenn sie zusammengehoeren */
.shotpair{display:grid;gap:12px;margin-top:28px}
@media(min-width:720px){ .shotpair{grid-template-columns:1fr 1fr} }
.shotpair figure.shot{margin:0}

/* Fotostrecke — Altbestand. Wird durch figure.shot abgeloest, solange
   visit-01-tethys.html noch die quadratische Galerie nutzt. */
.photos{
  display:grid; gap:10px; max-width:640px;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:720px){ .photos{grid-template-columns:repeat(4,1fr);max-width:100%} }
.photos img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--r-md); border:1px solid var(--line);
}
/* Ein Aufmacher darf groesser sein, wenn gewuenscht */
.photos img.lead{grid-column:span 2;aspect-ratio:4/3}

/* --- Footer ------------------------------------------------------------ */
footer.site{border-top:1px solid var(--line);background:var(--surface);padding:44px 0}
.foot{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;font-size:14px}
.foot a{color:var(--text);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot .sp{margin-left:auto;color:var(--muted);font-size:13px}

/* --- Bewegung reduzieren ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .btn:hover{transform:none}
}

/* ==========================================================================
   Tito-Widget im Marken-Design (inline, ohne iframe)
   Voraussetzung: <script src="https://js.tito.io/v2/with/inline" async>
   -> Ohne "with/inline" laeuft das Widget in einem iframe und ignoriert
      dieses CSS komplett (Tito-Blau #0067E1 bleibt dann sichtbar).
   Klassennamen live ermittelt am 27.07.2026.
   ========================================================================== */
.tito-widget{ font-family:var(--sans); color:var(--text); }

/* Rahmen wie eine Karte */
.tito-widget-form{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px;
}

/* Ticket-Zeile */
.tito-release{
  display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center;
  padding:4px 0;
}
.tito-release--title{
  font-family:var(--display); font-weight:700; font-size:18px;
  color:var(--ink); letter-spacing:-.2px;
}
.tito-release-description--description{ font-size:14px; color:var(--muted); }
.tito-price,.tito-price-details-regular{
  font-family:var(--display); font-weight:700; color:var(--ink);
}

/* Mengen-Auswahl: orange Akzent statt Tito-Blau */
.tito-release--decrement-quantity--link,
.tito-release--increment-quantity--link{
  color:var(--accent)!important; text-decoration:none; font-weight:700;
}
.tito-release--decrement-quantity--link:hover,
.tito-release--increment-quantity--link:hover{ color:var(--accent-deep)!important; }
.tito-quantity-input{
  font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:8px 10px; text-align:center; max-width:64px;
}
.tito-quantity-input:focus{ border-color:var(--accent); outline:none; }

/* Hauptaktion: SCHWARZ (Design-System) — ersetzt Tito-Blau #0067E1 */
.tito-submit{
  font-family:var(--display)!important; font-weight:700!important; font-size:15px!important;
  background:var(--ink)!important; color:var(--paper)!important;
  border:0!important; border-radius:var(--r-md)!important;
  padding:12px 22px!important; cursor:pointer;
}
.tito-submit:hover{ background:#000!important; }
.tito-form-actions{ margin-top:14px; }

/* Formularfelder im Checkout */
.tito-widget input[type=text],
.tito-widget input[type=email],
.tito-widget select,
.tito-widget textarea{
  font:inherit; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-md); padding:11px 13px;
}
.tito-widget input:focus,.tito-widget select:focus,.tito-widget textarea:focus{
  border-color:var(--accent); outline:none;
}
.tito-widget a{ color:var(--accent); }

/* --- Sprachumschalter DE/EN ------------------------------------------- */
.lang{ display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--paper); }
.lang button{
  font-family:var(--display); font-weight:700; font-size:12px;
  border:0; background:transparent; color:var(--muted);
  padding:4px 9px; border-radius:999px; cursor:pointer;
}
.lang button.active{ background:var(--ink); color:var(--paper); }
.lang button:hover:not(.active){ color:var(--ink); }