/* ==========================================================================
   DIGITALE VISITENKARTE  —  /karte

   Diese Seite wird fast immer per QR-Code auf dem Telefon geöffnet.
   Deshalb: mobil zuerst, große Tippflächen, kurze Wege. Kein Kopfmenü-Ballast
   und keine langen Texte — wer hier landet, will eine Nummer speichern.
   ========================================================================== */

.karte{
  /* Gleiche Rechnung wie .page-hero: Die Kopfzeile ist fixiert, ohne den
     Zuschlag rutscht die Karte darunter. */
  padding:calc(var(--header-h) + clamp(1.5rem, 5vw, 3rem)) 0 clamp(3rem, 8vw, 6rem);
}
.karte__shell{
  width:min(100% - 2rem, 620px);
  margin-inline:auto;
}

/* --------------------------------------------------------------------------
   DIE KARTE
   -------------------------------------------------------------------------- */
.vk{
  position:relative; overflow:hidden;
  padding:clamp(1.7rem, 5vw, 2.6rem) clamp(1.3rem, 4vw, 2.2rem);
  border:1px solid var(--line-strong);
  clip-path:var(--chamfer);
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255,232,61,.10) 0%, transparent 55%),
    linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
}
/* Feiner Lichtstreifen — lässt die Fläche nach Karte aussehen, nicht nach Kasten */
.vk__glanz{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.045) 47%, transparent 56%);
}

.vk__logo{ display:block; height:auto; max-width:150px; margin-bottom:1.4rem; }

.vk__name{
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 6vw, 2.3rem); font-weight:700; line-height:1.1;
  color:var(--text); margin:0 0 .45rem;
}
.vk__rolle{
  font-size:.82rem; letter-spacing:.04em;
  color:var(--accent-2); margin:0;
}

.vk__trenner{
  height:1px; margin:1.5rem 0;
  background:linear-gradient(90deg, var(--accent) 0%, transparent 70%);
}

.vk__daten{ margin:0; display:grid; gap:1rem; }
.vk__daten > div{
  display:grid; grid-template-columns:5.5rem 1fr; gap:.9rem; align-items:baseline;
}
.vk__daten dt{
  font-family:var(--font-display); font-size:.64rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-mute);
}
.vk__daten dd{
  margin:0; font-size:.92rem; color:var(--text); line-height:1.5;
  overflow-wrap:anywhere;
}
.vk__daten dd a{ color:var(--text); text-decoration:none; }
.vk__daten dd a:hover, .vk__daten dd a:focus-visible{
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
}

@media (max-width:420px){
  .vk__daten > div{ grid-template-columns:1fr; gap:.15rem; }
}

/* --------------------------------------------------------------------------
   AKTIONSFLÄCHEN
   Mindestens 48 px hoch — alles darunter trifft man am Telefon nicht sicher.
   -------------------------------------------------------------------------- */
.karte__aktionen{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:.7rem; margin-top:1.2rem;
}
.vk-btn{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.8rem 1rem;
  border:1px solid var(--line-strong);
  background:var(--panel);
  font-family:var(--font-display); font-size:.82rem; font-weight:600;
  color:var(--text); text-decoration:none;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.vk-btn:hover, .vk-btn:focus-visible{
  border-color:var(--accent-2); background:var(--bg-2); transform:translateY(-2px);
}
.vk-btn svg{
  width:19px; height:19px; flex:0 0 19px;
  fill:none; stroke:var(--accent-2); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Der wichtigste Knopf der Seite — der Rest ist Beiwerk */
.vk-btn--haupt{
  grid-column:1 / -1;
  border-color:var(--accent);
  background:linear-gradient(160deg, rgba(255,232,61,.14) 0%, var(--bg-2) 75%);
  font-size:.9rem;
}
.vk-btn--haupt:hover, .vk-btn--haupt:focus-visible{
  border-color:var(--accent); background:rgba(255,232,61,.2);
}
.vk-btn--haupt svg{ stroke:var(--accent); width:21px; height:21px; flex-basis:21px; }

/* Der letzte Knopf steht sonst allein in einer Zweierreihe — über die volle
   Breite sieht die Gruppe absichtlich aus statt übriggeblieben. */
.karte__aktionen > .vk-btn:last-child{ grid-column:1 / -1; }

/* --------------------------------------------------------------------------
   QR-CODE
   Helle Kachel: Scanner erwarten dunkle Module auf hellem Grund. Invertiert
   lesen viele Kameras schlechter oder gar nicht.
   -------------------------------------------------------------------------- */
.karte__qr{
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
  margin-top:2.4rem; padding:1.5rem;
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  background:var(--panel);
}
.qr-kachel{
  flex:0 0 auto;
  padding:.75rem; background:#fff; border-radius:6px;
  line-height:0;
}
.qr-kachel img{ display:block; width:150px; height:150px; }

.karte__qr-text{ flex:1 1 240px; }
.karte__qr-text h2{
  font-family:var(--font-display); font-size:1.05rem; font-weight:600;
  color:var(--text); margin:0 0 .5rem;
}
.karte__qr-text p{
  font-size:.8rem; color:var(--text-mute); line-height:1.65; margin:0;
}
.karte__adresse{
  margin-top:.7rem !important;
  font-family:var(--font-display); font-size:.82rem; font-weight:600;
  color:var(--accent-2) !important; letter-spacing:.02em;
}

/* --------------------------------------------------------------------------
   LEISTUNGEN — nur ein Fingerzeig, die Tiefe liegt auf der Website
   -------------------------------------------------------------------------- */
.karte__leistungen{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:.7rem; margin-top:2.4rem;
}
.vk-leistung{
  display:block; padding:.95rem 1.05rem;
  border-left:2px solid var(--accent-3);
  background:rgba(139,255,107,.045);
  text-decoration:none;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.vk-leistung:hover, .vk-leistung:focus-visible{
  background:rgba(139,255,107,.1); transform:translateX(3px);
}
.vk-leistung b{
  display:block; font-family:var(--font-display); font-size:.85rem;
  font-weight:600; color:var(--text); margin-bottom:.2rem;
}
.vk-leistung span{ display:block; font-size:.72rem; color:var(--text-mute); line-height:1.55; }

/* --------------------------------------------------------------------------
   FUSSZEILEN
   -------------------------------------------------------------------------- */
.karte__fuss{
  margin-top:2.2rem;
  font-size:.7rem; color:var(--text-mute); line-height:1.7;
}
.karte__fuss a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; }
.karte__fuss a:hover{ color:var(--accent); }

.karte__zurueck{ margin-top:1.4rem; font-size:.82rem; }
.karte__zurueck a{
  color:var(--accent-2); text-decoration:none;
  font-family:var(--font-display); font-weight:600;
}
.karte__zurueck a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* --------------------------------------------------------------------------
   DRUCK — wer die Seite ausdruckt, bekommt eine brauchbare Karte statt
   vier Seiten Farbfläche.
   -------------------------------------------------------------------------- */
@media print{
  .karte__aktionen, .karte__leistungen, .karte__zurueck{ display:none; }
  .vk{ border:1px solid #000; background:none; }
  .vk__name, .vk__daten dd, .vk__daten dd a{ color:#000; }
  .vk__rolle, .karte__adresse{ color:#333 !important; }
  .karte__qr{ border:0; background:none; }
}