/* ==========================================================================
   Digitale Visitenkarte (/vcard) - eigenstaendige Seite, KEIN Anhang an
   scara.css.
   ==========================================================================

   Warum eine eigene Datei und ein eigenes Farbschema statt scara.css zu
   erweitern: Diese Karte ist fuer den schnellen Aufruf per NFC-Tag oder
   QR-Code gedacht - eine Seite fuer sich, ohne Kopfzeile, ohne Navigation,
   bewusst mit reinen Systemschriften (keine Web-Font-Ladezeit). Das
   Farbschema (warmes Gold auf Graphit) ist eigenstaendig und teilt sich
   keine Variablen mit --siegel/--siegel-hell aus scara.css.

   Regel wie im ganzen Projekt: keine style="..."-Attribute im HTML, die
   Content-Security-Policy verbietet sie (style-src-attr 'none'). Jeder
   Zustand (Sprachumschalter, Hover, Fokus) laeuft daher ueber Klassen bzw.
   Attribut-Selektoren wie [aria-pressed] und [hidden].
   ========================================================================== */

:root{
  --vk-bg-buehne:#141312;
  --vk-bg-karte:#1e1d1b;
  --vk-gold:#c2ab84;
  --vk-gold-hell:#d8c4a1;
  --vk-gold-tief:#a89170;
  --vk-schrift:#ece7de;
  --vk-schrift-hell:#f4f0e8;
  --vk-schrift-gedaempft:#d6d0c5;
  --vk-blei:#a9a294;
  --vk-blei-dunkel:#8c8578;
  --vk-linie:rgba(236,231,222,.17);
  --vk-linie-schwach:rgba(236,231,222,.09);
  --vk-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --vk-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--vk-bg-buehne);
  color:var(--vk-schrift);
  font-family:var(--vk-sans);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--vk-gold);text-underline-offset:3px}
a:hover{color:var(--vk-gold-hell)}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:1px solid var(--vk-gold);outline-offset:3px}
::selection{background:rgba(194,171,132,.28)}

/* --- Buehne und Karte ----------------------------------------------------- */
.vk-buehne{
  min-height:100vh;display:flex;justify-content:center;
  padding:26px 18px 56px;background:var(--vk-bg-buehne);
  background-image:radial-gradient(120% 60% at 50% 0%, rgba(194,171,132,.09), transparent 70%);
}
.vk-karte{
  position:relative;width:100%;max-width:412px;
  border:1px solid var(--vk-linie);background:var(--vk-bg-karte);
  padding:0 24px 26px;
}

/* Die vier Eckmarken - eine Anspielung auf den Beschnitt einer echten
   Visitenkarte. */
.vk-ecke{position:absolute;width:13px;height:13px}
.vk-ecke--ol{top:-1px;left:-1px;
  background:linear-gradient(var(--vk-gold),var(--vk-gold)) 0 0/1px 13px no-repeat,
             linear-gradient(var(--vk-gold),var(--vk-gold)) 0 0/13px 1px no-repeat;
}
.vk-ecke--or{top:-1px;right:-1px;
  background:linear-gradient(var(--vk-gold),var(--vk-gold)) 12px 0/1px 13px no-repeat,
             linear-gradient(var(--vk-gold),var(--vk-gold)) 0 0/13px 1px no-repeat;
}
.vk-ecke--ul{bottom:-1px;left:-1px;
  background:linear-gradient(var(--vk-gold),var(--vk-gold)) 0 0/1px 13px no-repeat,
             linear-gradient(var(--vk-gold),var(--vk-gold)) 0 12px/13px 1px no-repeat;
}
.vk-ecke--ur{bottom:-1px;right:-1px;
  background:linear-gradient(var(--vk-gold),var(--vk-gold)) 12px 0/1px 13px no-repeat,
             linear-gradient(var(--vk-gold),var(--vk-gold)) 0 12px/13px 1px no-repeat;
}

/* --- Kopf: Kennzeichnung + Sprachumschalter -------------------------------- */
.vk-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 -24px;padding:0 0 0 15px;border-bottom:1px solid var(--vk-linie);
}
.vk-kennzeichnung{
  font-family:var(--vk-mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--vk-blei-dunkel);
}
.vk-sprachwahl{display:flex;flex:0 0 auto}
.vk-sprachknopf{
  min-width:46px;min-height:44px;padding:0 10px;border:0;
  border-left:1px solid var(--vk-linie);border-radius:0;
  background:transparent;color:var(--vk-blei-dunkel);
  font-family:var(--vk-mono);font-size:10px;letter-spacing:.16em;cursor:pointer;
}
.vk-sprachknopf[aria-pressed="true"]{background:var(--vk-gold);color:var(--vk-bg-karte)}

/* --- Marke ------------------------------------------------------------- */
.vk-marke{padding-top:34px}
.vk-marke__wort{
  font-size:clamp(46px,13vw,64px);font-weight:700;line-height:.9;
  letter-spacing:.14em;text-transform:uppercase;color:var(--vk-schrift-hell);
  margin-right:-.14em;
}
.vk-marke__zeile{
  font-size:14px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--vk-gold);margin-top:14px;
}

/* --- Zitat --------------------------------------------------------------- */
.vk-zitat{
  font-size:16.5px;line-height:1.48;color:var(--vk-schrift-gedaempft);
  margin:20px 0 0;text-wrap:pretty;
}

/* --- Sparten --------------------------------------------------------------- */
.vk-sparten{margin-top:26px;border-top:1px solid var(--vk-linie)}
.vk-sparte{
  display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;
  align-items:baseline;padding:13px 0;border-bottom:1px solid var(--vk-linie-schwach);
}
.vk-sparte:last-child{border-bottom:0}
.vk-sparte__code{font-family:var(--vk-mono);font-size:10.5px;letter-spacing:.1em;color:var(--vk-gold)}
.vk-sparte__text{font-size:14.5px;line-height:1.35;color:var(--vk-schrift-gedaempft)}

/* --- Notfallbox -------------------------------------------------------- */
.vk-notfall{
  margin-top:20px;border:1px solid rgba(194,171,132,.42);
  background:rgba(194,171,132,.07);padding:15px 16px 16px;
}
.vk-notfall__label{
  font-family:var(--vk-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vk-gold);margin-bottom:9px;
}
.vk-notfall__nr{
  display:block;font-size:25px;font-weight:600;letter-spacing:.005em;
  line-height:1.15;color:var(--vk-schrift-hell);text-decoration:none;
}
.vk-notfall__nr:hover{color:var(--vk-gold-hell)}
.vk-notfall__text{font-size:13px;line-height:1.45;color:var(--vk-blei);margin-top:8px}

/* --- Kontaktzeilen --------------------------------------------------------- */
.vk-kontakte{margin-top:6px;display:grid}
.vk-kontakt{
  display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:14px;
  align-items:start;padding:15px 0;border-top:1px solid var(--vk-linie);
}
.vk-icon{stroke:var(--vk-gold)}
.vk-kontakt__label{
  font-family:var(--vk-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vk-blei-dunkel);margin-bottom:4px;
}
.vk-kontakt__wert{
  font-size:16px;font-weight:500;color:var(--vk-schrift);
  text-decoration:none;overflow-wrap:anywhere;
}
.vk-kontakt__wert:hover{color:var(--vk-gold-hell)}
.vk-kontakt__adresse{display:block;line-height:1.4}
.vk-kontakt__land{font-size:13.5px;font-weight:400;color:var(--vk-blei)}

/* --- Aktionen: Knoepfe --------------------------------------------------- */
.vk-aktionen{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.vk-knopf{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;border:0;border-radius:0;cursor:pointer;text-decoration:none;
  text-align:center;
}
.vk-knopf--primaer{
  min-height:58px;padding:0 18px;background:var(--vk-gold);color:var(--vk-bg-karte);
  font-size:15px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.vk-knopf--primaer:hover{background:var(--vk-gold-hell)}
.vk-knopf--primaer:active{background:var(--vk-gold-tief)}

.vk-hinweis{
  font-family:var(--vk-mono);font-size:10px;line-height:1.6;
  letter-spacing:.08em;color:var(--vk-gold);margin:0;
}

.vk-zeile-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vk-knopf--sekundaer{
  min-height:52px;padding:0 8px;border:1px solid rgba(236,231,222,.28);
  background:transparent;color:var(--vk-schrift);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.vk-knopf--sekundaer:hover{background:rgba(194,171,132,.12);border-color:var(--vk-gold);color:var(--vk-schrift-hell)}

.vk-knopf--geist{
  min-height:46px;padding:0 18px;background:transparent;color:var(--vk-blei);
  font-family:var(--vk-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
}
.vk-knopf--geist:hover{color:var(--vk-gold-hell)}

/* --- Fuss -------------------------------------------------------------- */
.vk-fuss{
  margin-top:24px;padding-top:16px;border-top:1px solid var(--vk-linie);
  display:grid;gap:11px;
}
.vk-fuss__zeile1{
  font-family:var(--vk-mono);font-size:10px;line-height:1.7;letter-spacing:.13em;
  text-transform:uppercase;color:var(--vk-blei-dunkel);
}
.vk-fuss__zeile2{font-size:12.5px;line-height:1.5;color:var(--vk-blei-dunkel);text-wrap:pretty}
.vk-fuss__zeile3{
  font-family:var(--vk-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vk-blei);
}