@font-face{font-family:'Inter Variable';src:url('/karte-vorlagen/studio-elevated/v1/fonts/inter-var.woff2') format('woff2-variations'),url('/karte-vorlagen/studio-elevated/v1/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono Variable';src:url('/karte-vorlagen/studio-elevated/v1/fonts/jetbrains-mono-var.woff2') format('woff2-variations'),url('/karte-vorlagen/studio-elevated/v1/fonts/jetbrains-mono-var.woff2') format('woff2');font-weight:100 800;font-style:normal;font-display:swap}
:root{color-scheme:light dark;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--rail:16px;--r-s:8px;--r-m:12px;--r-l:16px;--r-xl:20px;--r-karte:24px;--schrift:'Inter Variable', 'Segoe UI', system-ui, sans-serif;--mono:'JetBrains Mono Variable', ui-monospace, monospace;--t-1:clamp(2.35rem,11.5vw,3.15rem);--t-2:1.3rem;--t-3:1.06rem;--t-4:.95rem;--t-5:.84rem;--t-6:.75rem;--w-1:400;--w-2:600;--w-3:800;--ease:cubic-bezier(.16,1,.3,1);--feder:cubic-bezier(.34,1.45,.56,1);--flip:cubic-bezier(.3,1.16,.32,1);--grund:#f2f4f7;--grund-tief:#dfe4ea;--flaeche:#ffffff;--flaeche-2:#e9edf2;--text:#0f1620;--sub:#4a5666;--sub-2:#48545f;--linie:#e5e5e6;--linie-2:#d4d5d7;--akzent:#2c7d16;--akzent-roh:#2c7d16;--akzent-text:#2c7d16;--akzent-vg:#ffffff;--akzent-2:#2c7d16;--akzent-soft:#e1edde;--akzent-schleier:#dee8e1;--akzent-schleier-2:#e2eae5;--amber:#a13c07;--geist:#f1f1f2;--qr-dunkel:#0d1420;--qr-hell:#ffffff;--schema:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="hell"]){--grund:#070b12;--grund-tief:#02040a;--flaeche:#0d1522;--flaeche-2:#131d2e;--text:#eaf1f9;--sub:#9db0c7;--sub-2:#8496ac;--linie:#252d3a;--linie-2:#353d49;--akzent:#2c7d16;--akzent-roh:#2c7d16;--akzent-text:#478e34;--akzent-vg:#ffffff;--akzent-2:#2c7d16;--akzent-soft:#112420;--akzent-schleier:#0b1612;--akzent-schleier-2:#0a1412;--amber:#ff7a3c;--geist:#1a222f;--qr-dunkel:#0d1420;--qr-hell:#ffffff;--schema:dark}}
:root[data-theme="dunkel"]{--grund:#070b12;--grund-tief:#02040a;--flaeche:#0d1522;--flaeche-2:#131d2e;--text:#eaf1f9;--sub:#9db0c7;--sub-2:#8496ac;--linie:#252d3a;--linie-2:#353d49;--akzent:#2c7d16;--akzent-roh:#2c7d16;--akzent-text:#478e34;--akzent-vg:#ffffff;--akzent-2:#2c7d16;--akzent-soft:#112420;--akzent-schleier:#0b1612;--akzent-schleier-2:#0a1412;--amber:#ff7a3c;--geist:#1a222f;--qr-dunkel:#0d1420;--qr-hell:#ffffff;--schema:dark}
:root[data-theme="hell"]{--grund:#f2f4f7;--grund-tief:#dfe4ea;--flaeche:#ffffff;--flaeche-2:#e9edf2;--text:#0f1620;--sub:#4a5666;--sub-2:#48545f;--linie:#e5e5e6;--linie-2:#d4d5d7;--akzent:#2c7d16;--akzent-roh:#2c7d16;--akzent-text:#2c7d16;--akzent-vg:#ffffff;--akzent-2:#2c7d16;--akzent-soft:#e1edde;--akzent-schleier:#dee8e1;--akzent-schleier-2:#e2eae5;--amber:#a13c07;--geist:#f1f1f2;--qr-dunkel:#0d1420;--qr-hell:#ffffff;--schema:light}
/* studio-elevated — Grundgeruest. Keine Farbliterale, nur Token. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:16px;line-height:1.45;min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
a{color:var(--akzent-text);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:var(--r-s)}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

/* --- Aurora: ein statischer Verlaufsstapel, eine sehr langsame Bahn --------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(58% 40% at 16% 4%,var(--akzent-schleier),transparent 70%),
             radial-gradient(52% 38% at 86% 94%,var(--akzent-schleier-2),transparent 72%),
             radial-gradient(125% 85% at 50% 46%,transparent 42%,var(--grund-tief) 100%),
             var(--grund)}
.aurora::before{content:'';position:absolute;inset:-8%;
  background:radial-gradient(34% 22% at 20% 12%,var(--akzent-schleier),transparent 72%),
             radial-gradient(40% 26% at 80% 30%,var(--akzent-schleier-2),transparent 74%);
  will-change:transform;animation:aurora-drift 40s ease-in-out infinite alternate}
@keyframes aurora-drift{to{transform:translate3d(-2.6%,1.4%,0)}}

/* --- Spalte ---------------------------------------------------------------- */
#app{display:flex;flex-direction:column;width:min(100%,560px);min-height:100vh;min-height:100dvh;margin-inline:auto;padding:0 var(--s4) calc(var(--s2) + env(safe-area-inset-bottom,0px))}

/* --- Kopf: Sprach-Pills + Themenschalter ----------------------------------- */
.kopf{display:flex;align-items:center;gap:var(--s2);padding-top:calc(var(--s3) + env(safe-area-inset-top,0px));padding-bottom:var(--s1)}
.sprachen{display:flex;gap:var(--s1);background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;padding:3px}
.sprachen button{font-size:var(--t-6);font-weight:var(--w-2);letter-spacing:.04em;color:var(--sub-2);padding:5px 10px;border-radius:999px;transition:color .18s var(--ease),background-color .18s var(--ease)}
.sprachen button[aria-pressed="true"]{color:var(--akzent-vg);background:var(--akzent)}
.kopf-rechts{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.themenschalter{display:flex;align-items:center;gap:6px;font-size:var(--t-6);font-weight:var(--w-2);color:var(--sub-2);background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;padding:6px 11px}
.themenschalter svg{width:15px;height:15px;flex:0 0 auto}

/* --- Buehne + Flip --------------------------------------------------------- */
.buehne{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--s4) 0;perspective:1400px}
.karte{position:relative;width:100%;transform-style:preserve-3d;transition:transform .76s var(--flip)}
.karte.gedreht{transform:rotateY(180deg)}
.seite{backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-karte);padding:var(--s6) var(--s5) var(--s5);box-shadow:0 24px 60px -30px var(--grund-tief)}
.seite.hinten{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);overflow:auto}

/* --- Rail + Marker (die linke Satzkante der Vorderseite) ------------------- */
.vorn{position:relative;padding-left:calc(var(--s5) + var(--rail))}
[data-ausrichtung="mitte"] .vorn{padding-left:var(--s5);text-align:center}
.karte-rail{position:absolute;left:var(--s5);top:var(--s6);bottom:var(--s6);width:1px;background:linear-gradient(to bottom,var(--linie-2),transparent)}
[data-ausrichtung="mitte"] .karte-rail{display:none}
[data-marker="keiner"] .karte-rail{display:none}
.marke{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.marke img{max-height:26px;width:auto}
.marke-name{font-size:var(--t-6);font-weight:var(--w-2);letter-spacing:.16em;text-transform:uppercase;color:var(--sub-2)}

/* --- Name, Rolle, Claim ---------------------------------------------------- */
.name{font-size:var(--t-1);font-weight:var(--w-3);line-height:1.02;letter-spacing:-.028em;margin-bottom:var(--s2)}
.name-punkt{color:var(--akzent-text)}
.rolle{position:relative;font-size:var(--t-6);font-weight:var(--w-2);letter-spacing:.14em;text-transform:uppercase;color:var(--sub);margin-bottom:var(--s5)}
[data-ausrichtung="links"][data-marker="punkt"] .rolle::before{content:'';position:absolute;left:calc(-1 * var(--rail) - 3px);top:.55em;width:7px;height:7px;border-radius:50%;background:var(--akzent)}
[data-ausrichtung="links"][data-marker="strich"] .rolle::before{content:'';position:absolute;left:calc(-1 * var(--rail) - 3px);top:.75em;width:11px;height:2px;background:var(--akzent)}
.claim{position:relative;margin-bottom:var(--s3)}
[data-ausrichtung="links"] .claim::before{content:'';position:absolute;left:calc(-1 * var(--rail) - 1px);top:.25em;bottom:.25em;width:3px;border-radius:2px;background:var(--akzent)}
.claim p{font-size:var(--t-2);font-weight:var(--w-3);line-height:1.2;letter-spacing:-.012em}
.sub{font-size:var(--t-5);color:var(--sub);margin-bottom:var(--s5)}

/* --- Hooks mit Ghost-Ziffern ----------------------------------------------
   Die Ziffer ist 1,9em gross und zweistellig; bei --s6 (24 px) Einzug lief sie
   am Rig sichtbar unter das erste Wort. Der Einzug muss deshalb die BREITE der
   Ziffer tragen, nicht bloss einen Rasterschritt: --geist-spalte. */
.hooks{display:grid;gap:var(--s4);margin-bottom:var(--s5);counter-reset:hook;--geist-spalte:46px}
.hooks li{position:relative;font-size:var(--t-5);line-height:1.5;counter-increment:hook;padding-left:var(--geist-spalte);min-height:1.9em}
[data-ausrichtung="mitte"] .hooks li{padding-left:0}
.hooks li::before{content:counter(hook,decimal-leading-zero);position:absolute;left:0;top:-.2em;width:var(--geist-spalte);font-family:var(--mono);font-size:1.9em;font-weight:var(--w-3);line-height:1;letter-spacing:-.04em;color:var(--geist);pointer-events:none}
[data-ausrichtung="mitte"] .hooks li::before{position:static;display:block;width:auto;margin-bottom:2px}
[data-marker="keiner"] .hooks li::before{display:none}
[data-marker="keiner"] .hooks li{padding-left:0}

/* --- Portrait -------------------------------------------------------------- */
.portrait{display:block;width:112px;height:112px;object-fit:cover;border-radius:var(--r-l);border:1px solid var(--linie);margin-bottom:var(--s4)}
[data-ausrichtung="mitte"] .portrait{margin-inline:auto}

/* --- Produktzeile + Links -------------------------------------------------- */
.produkt{font-size:var(--t-5);color:var(--sub);border-top:1px solid var(--linie);padding-top:var(--s3);margin-bottom:var(--s4)}
.produkt a{font-weight:var(--w-2)}
.linkreihe{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
[data-ausrichtung="mitte"] .linkreihe{justify-content:center}
.linkreihe a{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-6);font-weight:var(--w-2);color:var(--text);background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;padding:6px 12px;text-decoration:none}
.linkreihe a:hover{border-color:var(--akzent);text-decoration:none}
.linkreihe svg{width:14px;height:14px;flex:0 0 auto;color:var(--akzent-text)}

/* --- Kontaktzeilen --------------------------------------------------------- */
.kontakt{display:grid;gap:var(--s2);border-top:1px solid var(--linie);padding-top:var(--s4)}
.kontakt-zeile{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-5);word-break:break-word}
[data-ausrichtung="mitte"] .kontakt-zeile{justify-content:center}
.kontakt-ikon{width:18px;height:18px;flex:0 0 auto;color:var(--akzent-text)}
.kartenfuss{margin-top:var(--s4);font-size:var(--t-6);color:var(--sub-2)}

/* --- Rueckseite: QR -------------------------------------------------------- */
.rueck-kopf{text-align:center}
.rueck-name{font-size:var(--t-3);font-weight:var(--w-3)}
.rueck-rolle{font-size:var(--t-6);letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.qr-schalter{display:flex;gap:var(--s1);background:var(--flaeche-2);border:1px solid var(--linie);border-radius:999px;padding:3px}
.qr-schalter button{font-size:var(--t-6);font-weight:var(--w-2);color:var(--sub-2);padding:5px 12px;border-radius:999px}
.qr-schalter button[aria-pressed="true"]{color:var(--akzent-vg);background:var(--akzent)}
.qr-rahmen{position:relative;background:var(--qr-hell);border-radius:var(--r-m);padding:var(--s3);width:min(72%,238px)}
.qr-kachel svg{display:block;width:100%;height:auto}
.qr-kachel.qr-fallback{font-family:var(--mono);font-size:var(--t-6);color:var(--qr-dunkel);word-break:break-all}
.qr-hinweis{font-size:var(--t-6);color:var(--sub);text-align:center;max-width:32ch}
.rueck-url{font-family:var(--mono);font-size:var(--t-6);color:var(--sub-2);word-break:break-all;text-align:center}

/* --- Dock ------------------------------------------------------------------ */
.dock{position:sticky;bottom:0;display:grid;gap:var(--s2);padding:var(--s3) 0 calc(var(--s2) + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--grund) 62%,transparent)}
.flip-knopf{width:100%;font-size:var(--t-4);font-weight:var(--w-2);color:var(--akzent-vg);background:var(--akzent);border-radius:var(--r-l);padding:13px 16px}
.aktionen{display:flex;gap:var(--s2)}
/* Der vcf-Knopf ist ein <a download> und kein <button> — der Download muss in
   der Nutzergeste bleiben (Bestand karte.js:1056-1061). Die Regel muss ihn
   deshalb mitnehmen, sonst steht er als nackter Textlink im Dock (am Rig
   gesehen, 17.08.). */
.aktionen button,.aktionen .aktion-knopf{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:var(--t-6);font-weight:var(--w-2);color:var(--text);background:var(--flaeche-2);border:1px solid var(--linie);border-radius:var(--r-m);padding:9px 4px;text-align:center;text-decoration:none}
.aktionen .aktion-knopf:hover{text-decoration:none;border-color:var(--akzent)}
.aktionen svg{width:20px;height:20px}

/* --- Home-Bildschirm-Hinweis (Pflicht auf jeder Karte) --------------------- */
.hs-hinweis{display:flex;align-items:flex-start;gap:var(--s2);margin:var(--s3) 0 0;padding:var(--s3);background:var(--flaeche-2);border:1px solid var(--linie);border-radius:var(--r-m)}
.hs-ikon{width:20px;height:20px;flex:0 0 auto;color:var(--akzent-text);margin-top:2px}
.hs-text{flex:1;min-width:0}
.hs-titel{font-size:var(--t-6);font-weight:var(--w-2);color:var(--text)}
.hs-satz{font-size:var(--t-6);color:var(--sub);margin-top:2px}
.hs-knopf{margin-top:var(--s2);font-size:var(--t-6);font-weight:var(--w-2);color:var(--akzent-vg);background:var(--akzent);border-radius:var(--r-s);padding:7px 12px}
.hs-zu{flex:0 0 auto;font-size:var(--t-6);color:var(--sub-2);padding:2px 6px;border-radius:var(--r-s)}

/* --- Fuss ------------------------------------------------------------------ */
.fuss{display:grid;gap:var(--s2);justify-items:center;padding:var(--s5) 0 var(--s4);text-align:center}
.werkzeuge{display:flex;gap:var(--s2)}
.werkzeuge button{font-size:var(--t-6);font-weight:var(--w-2);color:var(--sub);border:1px solid var(--linie);border-radius:999px;padding:6px 12px}
.fuss p{font-size:var(--t-6);color:var(--sub-2)}
.hosted-by{font-size:var(--t-6);color:var(--sub-2)}
.motion-schalter{display:flex;align-items:center;gap:6px;font-size:var(--t-6);color:var(--sub-2)}
.motion-punkt{width:7px;height:7px;border-radius:50%;background:var(--akzent)}

/* --- Overlays: Poster, Sheets, Toast --------------------------------------- */
.poster,.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:var(--s4);background:var(--grund-tief)}
.poster-inhalt,.sheet-inhalt{position:relative;width:min(100%,420px);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-xl);padding:var(--s6);display:grid;gap:var(--s3);justify-items:center;text-align:center}
.poster-zu,.sheet-zu{position:absolute;top:var(--s3);right:var(--s3);color:var(--sub);padding:4px;border-radius:var(--r-s)}
.poster-scanme{font-size:var(--t-2);font-weight:var(--w-3);line-height:1.15}
.poster-qr{background:var(--qr-hell);border-radius:var(--r-m);padding:var(--s3);width:min(80%,260px)}
.poster-qr svg{display:block;width:100%;height:auto}
.poster-url{font-family:var(--mono);font-size:var(--t-6);color:var(--sub-2);word-break:break-all}
.poster-sub{font-size:var(--t-6);color:var(--sub)}
.poster-druck{font-size:var(--t-6);font-weight:var(--w-2);color:var(--akzent-vg);background:var(--akzent);border-radius:var(--r-s);padding:8px 14px}
.sheet-inhalt h2{font-size:var(--t-3);font-weight:var(--w-3)}
.sheet-inhalt p{font-size:var(--t-5);color:var(--sub)}
.nfc-status{font-family:var(--mono);font-size:var(--t-6);color:var(--akzent-text)}
.toast{position:fixed;left:50%;bottom:calc(var(--s8) + env(safe-area-inset-bottom,0px));z-index:30;transform:translate(-50%,12px);opacity:0;pointer-events:none;font-size:var(--t-6);font-weight:var(--w-2);color:var(--text);background:var(--flaeche-2);border:1px solid var(--linie-2);border-radius:999px;padding:9px 16px;transition:opacity .2s var(--ease),transform .2s var(--feder)}
.toast.zeigt{opacity:1;transform:translate(-50%,0)}

/* --- Druck: Schneidebogen + Profilblatt ------------------------------------ */
.schneidebogen,.druckblatt{display:none}
@media print{
  html{color-scheme:light}
  body{background:#fff;color:#000}
  .aurora,#app,.poster,.sheet,.toast{display:none!important}
  .schneidebogen,.druckblatt{display:block}
  .schneidebogen{page-break-after:always;break-after:page}
  @page{size:A4;margin:11mm 10mm}
  .bogen-raster{display:grid;grid-template-columns:85mm 85mm;grid-auto-rows:55mm;gap:0;width:170mm}
  .bogen-karte{position:relative;width:85mm;height:55mm;padding:6mm;overflow:hidden;outline:.1mm dashed #999}
  .bogen-name{font-size:11pt;font-weight:700;line-height:1.1}
  .bogen-rolle{font-size:6.5pt;letter-spacing:.12em;text-transform:uppercase;color:#444;margin-bottom:2mm}
  .bogen-kontakt li{font-size:7pt;line-height:1.5;color:#222}
  .bogen-mass{display:flex;width:50mm;margin-top:4mm}
  .bogen-mass i{flex:1;height:3mm;border-left:.2mm solid #000}
  .bogen-notiz{font-size:7pt;color:#555;margin-top:3mm}
  .druck-kopf{border-bottom:.3mm solid #000;padding-bottom:3mm;margin-bottom:6mm}
  .druck-name{font-size:22pt;font-weight:800;line-height:1.05}
  .druck-claim{font-size:11pt;font-weight:700;margin:2mm 0 3mm}
  .druck-sub{font-size:9pt;color:#333;margin-bottom:5mm}
  .druck-kontakt li{font-size:9pt;line-height:1.6}
  .druck-hooks li{font-size:9pt;line-height:1.5;margin-bottom:1.5mm}
  .druck-qr{width:32mm}
  .druck-qr svg{width:100%;height:auto}
}

/* --- Bewegung: OS gewinnt immer -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .aurora::before{animation:none}
  .karte{transition:none}
  .toast{transition:none}
}
[data-motion="reduziert"] .aurora::before{animation:none}
[data-motion="reduziert"] .karte{transition:none}
[data-motion="reduziert"] .toast{transition:none}

/* --- Schmale Geraete ------------------------------------------------------- */
@media (max-width:380px){
  .aktionen button{font-size:10px}
  .seite{padding:var(--s5) var(--s4) var(--s4)}
  .vorn{padding-left:calc(var(--s4) + var(--rail))}
  .karte-rail{left:var(--s4)}
}