:root { --card-navy:#001b34; --card-navy-deep:#000f1e; --card-blue:#176dc2; --card-gold:#f5b900; --card-text:#f8fbff; --card-muted:#c1d1e1; }
.card-page { min-height:100vh; color:var(--card-text); background:var(--card-navy-deep); }
.card-page .site-header,.card-page .legal-strip,.card-page .site-footer,.card-page .breadcrumb { display:none; }
.card-page main { min-height:100vh; overflow:visible; }
.card-page .content-section { min-height:100vh; padding:0; background:var(--card-navy-deep); }
.card-page .section-inner { width:100%; min-height:100vh; }
.card-page .contact-card { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); min-height:100vh; overflow:hidden; background:linear-gradient(90deg,rgba(0,15,30,.06),rgba(0,15,30,.72)); }
.card-page .card-portrait { position:absolute; inset:0; z-index:0; overflow:hidden; background:#061b30; }
.card-page .card-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,15,30,.02) 17%,rgba(0,15,30,.22) 45%,rgba(0,15,30,.93) 78%),linear-gradient(0deg,#000f1e 1%,transparent 42%); }
.card-page .card-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 14%; filter:saturate(.94) contrast(1.04); }
.card-page .card-info,.card-page .card-actions { position:relative; z-index:1; align-self:end; padding:clamp(28px,4vw,68px); background:transparent; }
.card-page .card-info { grid-column:1; max-width:680px; padding-bottom:clamp(48px,8vh,110px); }
.card-page .card-actions { grid-column:2; display:grid; gap:9px; padding-bottom:clamp(48px,8vh,110px); }
.card-page .card-kicker { margin:0 0 18px; color:var(--card-muted); font-size:.74rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.card-page .card-name { margin:0 0 14px; color:var(--card-gold); font-family:"Segoe Script","Brush Script MT",cursive; font-size:clamp(3.8rem,8vw,8rem); font-weight:500; line-height:.72; letter-spacing:-.07em; text-wrap:balance; }
.card-page .card-role { margin:0 0 34px; color:var(--card-text); font-size:clamp(1rem,1.8vw,1.25rem); font-weight:650; }
.card-page .card-details { display:grid; gap:19px; margin:0; }
.card-page .card-details div { display:grid; gap:3px; }
.card-page .card-details dt { color:var(--card-muted); font-size:.76rem; }
.card-page .card-details dd { margin:0; color:var(--card-text); font-size:.98rem; font-weight:750; }
.card-page .card-details a { text-decoration:none; }
.card-page .card-action { display:flex; min-height:48px; align-items:center; justify-content:center; border:1px solid rgba(177,209,239,.58); border-radius:7px; color:var(--card-text); background:rgba(0,27,52,.48); font-size:.92rem; font-weight:850; text-align:center; }
.card-page .card-action.primary { border-color:#2891ef; background:linear-gradient(180deg,#1585e8,#0870cb); box-shadow:0 12px 28px rgba(0,77,151,.28); }
.card-page .card-action:hover { border-color:var(--card-gold); color:#fff; }
.card-page .card-note { margin:2px 0 12px; color:var(--card-muted); font-size:.76rem; }
.card-page .card-home { justify-self:center; margin-top:12px; color:var(--card-muted); text-decoration:underline; text-underline-offset:4px; font-size:.85rem; }
.card-page .card-close { position:absolute; top:18px; right:20px; z-index:2; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:#f8fbff; color:#001b34; font-size:1.7rem; font-weight:400; line-height:1; }
@media (max-width:800px){.card-page .contact-card{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:end;min-height:100svh}.card-page .card-portrait::after{background:linear-gradient(0deg,#000f1e 0%,rgba(0,15,30,.95) 48%,rgba(0,15,30,.08) 80%)}.card-page .card-portrait img{object-position:50% 6%}.card-page .card-info,.card-page .card-actions{grid-column:1;position:relative;z-index:2;padding-left:25px;padding-right:25px}.card-page .card-info{grid-row:1;padding-top:min(45svh,500px);padding-bottom:18px}.card-page .card-actions{grid-row:2;padding-top:0;padding-bottom:34px}.card-page .card-name{font-size:clamp(3.5rem,16vw,5.7rem)}.card-page .card-role{margin-bottom:22px}.card-page .card-details{gap:12px}.card-page .card-details dd{font-size:.9rem}.card-page .card-close{top:14px;right:14px}}
/* Das vorhandene SABOSOL-Profilmotiv enthält unten eine Wortmarke. Für die Karte
   wird ausschließlich der Porträtbereich gezeigt. */
.card-page .card-portrait img { transform:scale(1.45); transform-origin:50% 0%; }
@media (max-width:800px){ .card-page .card-portrait img { transform:scale(1.28); transform-origin:50% 0%; } }
/* Veit: freigegebenes Ganzkörperporträt, Tattoo und SABOSOL-Shirt bleiben sichtbar. */
.card-page .veit-card .card-portrait img { width:100%; height:100%; object-fit:contain; object-position:center bottom; transform:none; filter:saturate(.96) contrast(1.02); }
.card-page .veit-card .card-portrait { background:#071627; }
/* Sicherstellen, dass Veits Ganzkörperporträt oberhalb des Kartenhintergrunds liegt. */
.card-page .veit-card .card-portrait { z-index:0; overflow:hidden; }
.card-page .veit-card .card-portrait img { display:block !important; position:absolute; inset:0; z-index:0; width:100% !important; height:100% !important; max-width:none; opacity:1 !important; visibility:visible !important; object-fit:cover !important; object-position:center top; transform:none !important; }
.card-page .veit-card .card-portrait::after { z-index:1; pointer-events:none; }
.card-page .veit-card .card-info,.card-page .veit-card .card-actions,.card-page .veit-card .card-close { z-index:2; }

/* Freisteller von Patrick und Yves: vollständig sichtbar hinter den Kontaktangaben. */
.card-page .yves-card .card-portrait img { object-fit:contain; object-position:center bottom; transform:none; }
.card-page .patrick-card .card-portrait img { object-fit:cover; object-position:50% 14%; transform:none; }
.card-page .patrick-card .card-name { font-size:clamp(3.2rem,5vw,5.6rem); line-height:.78; }

/* QR-Code zum Weitergeben der digitalen Visitenkarte. */
.card-page .card-qr { justify-self:center; display:grid; grid-template-columns:108px auto; align-items:center; gap:12px; margin-top:18px; color:var(--card-muted); font-size:.78rem; line-height:1.4; }
.card-page .card-qr img { display:block; width:108px; height:108px; padding:6px; border-radius:7px; background:#fff; }
@media (max-width:800px){.card-page .card-qr{grid-template-columns:92px auto;margin-top:15px}.card-page .card-qr img{width:92px;height:92px}}

/* Handy: Das gesamte Hochformat bleibt sichtbar, ohne ins Gesicht hineinzuzoomen. */
@media (max-width:800px){
  .card-page .card-portrait img,
  .card-page .veit-card .card-portrait img,
  .card-page .patrick-card .card-portrait img,
  .card-page .yves-card .card-portrait img {
    object-fit:contain !important;
    object-position:center top !important;
    transform:none !important;
  }
}

/* iPad-Hochformat: ein zentriertes Porträt als vollständiger Kartenhintergrund. */
@media (min-width:801px) and (max-width:1024px){
  .card-page .contact-card{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:end;
    min-height:100svh;
  }
  .card-page .card-portrait img,
  .card-page .veit-card .card-portrait img,
  .card-page .patrick-card .card-portrait img,
  .card-page .yves-card .card-portrait img{
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
  }
  .card-page .card-portrait::after{
    background:linear-gradient(0deg,#000f1e 0%,rgba(0,15,30,.92) 44%,rgba(0,15,30,.08) 82%);
  }
  .card-page .card-info,.card-page .card-actions{
    grid-column:1;
    position:relative;
    z-index:2;
    padding-left:clamp(38px,6vw,64px);
    padding-right:clamp(38px,6vw,64px);
  }
  .card-page .card-info{grid-row:1;padding-top:48svh;padding-bottom:18px;}
  .card-page .card-actions{grid-row:2;padding-top:0;padding-bottom:42px;}
}

/* Desktop: HiQ-inspirierter Kartenaufbau mit vollständigem, links zentriertem Porträt. */
@media (min-width:1025px){
  .card-page .card-portrait img,
  .card-page .veit-card .card-portrait img,
  .card-page .patrick-card .card-portrait img,
  .card-page .yves-card .card-portrait img{
    object-fit:contain !important;
    object-position:35% bottom !important;
    transform:none !important;
  }
  .card-page .card-portrait::after{
    background:linear-gradient(90deg,rgba(0,15,30,.1) 12%,rgba(0,15,30,.24) 45%,rgba(0,15,30,.95) 76%),linear-gradient(0deg,#000f1e 1%,transparent 48%);
  }
}