/* =========================================================================
   Digitale Visitenkarte, Mike Henneberg
   Designsystem "Schwarz und Weiß" wie die Landingpage henneberg-webdesign.de:
   Abschnitte wechseln zwischen Schwarz und Weiß, Kacheln sind invertiert,
   Orange ist nur Akzent (Buttons mit dunkler Schrift, Haken, Fokus). Keine Verläufe, keine Glows.
   Tokens und 3D Icon Töne sind aus src/styles/global.css der Landingpage übernommen, synchron halten.
   ========================================================================= */

@font-face {
  font-family: "Inter Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-variable-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 Tight Variable"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-tight-variable-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;
}

:root {
  --black: #0a0a0b;
  --orange: #ff4d00;
  --orange-2: #ff6a2b;
  --orange-deep: #c93b00;
  --on-accent: #0a0a0b;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --ink: #0a0a0b;
  --ink-70: rgba(10, 10, 11, 0.74);
  --ink-50: rgba(10, 10, 11, 0.64);
  --border: rgba(10, 10, 11, 0.1);
  --border-strong: rgba(10, 10, 11, 0.18);
  --accent: #ff4d00;
  --accent-ink: #c93b00;

  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter Tight Variable", "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 1.5rem;
  --radius-s: 1rem;

  /* 3D Icons: b = Korpus, p = Papier, a = Akzent; t/l/r = oben, links, rechts */
  --i-b-t: #4b4b53; --i-b-l: #2d2d33; --i-b-r: #121214;
  --i-p-t: #ffffff; --i-p-l: #dedee2; --i-p-r: #b8b8c1;
  --i-a-t: #ff8a4d; --i-a-l: #ff4d00; --i-a-r: #c93b00;
  --i-ink: #0a0a0b; --i-onb: #ffffff; --i-shadow: rgba(10, 10, 11, 0.09);
}

.on-dark {
  --bg: var(--black);
  --surface: #17171a;
  --surface-2: #1e1e22;
  --ink: #ffffff;
  --ink-70: rgba(255, 255, 255, 0.84);
  --ink-50: rgba(255, 255, 255, 0.74);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --accent: #ff6a2b;
  --accent-ink: #ff7d42;
  --i-b-t: #fafafa; --i-b-l: #d0d0d7; --i-b-r: #8e8e99;
  --i-p-t: #2e2e35; --i-p-l: #222227; --i-p-r: #141417;
  --i-a-t: #ff8a4d; --i-a-l: #ff6a2b; --i-a-r: #d94a00;
  --i-ink: #ffffff; --i-onb: #0a0a0b; --i-shadow: rgba(255, 255, 255, 0.05);
}
.on-light {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --ink: #0a0a0b;
  --ink-70: rgba(10, 10, 11, 0.74);
  --ink-50: rgba(10, 10, 11, 0.64);
  --border: rgba(10, 10, 11, 0.1);
  --border-strong: rgba(10, 10, 11, 0.18);
  --accent: #ff4d00;
  --accent-ink: #c93b00;
  --i-b-t: #4b4b53; --i-b-l: #2d2d33; --i-b-r: #121214;
  --i-p-t: #ffffff; --i-p-l: #dedee2; --i-p-r: #b8b8c1;
  --i-a-t: #ff8a4d; --i-a-l: #ff4d00; --i-a-r: #c93b00;
  --i-ink: #0a0a0b; --i-onb: #ffffff; --i-shadow: rgba(10, 10, 11, 0.09);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--black); }
body {
  margin: 0; min-height: 100svh;
  background: var(--black); color: #fff;
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img[width][height] { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink); line-height: 1.08; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0.35rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite polygon, .sprite path, .sprite ellipse { stroke-width: 0.5px; stroke-linejoin: round; }

.i3 { display: block; flex: none; overflow: visible; transition: transform 0.45s var(--ease); }

/* Abschnitte: Fläche voll breit, Inhalt in einer Spalte */
.sek { background: var(--bg); color: var(--ink); padding-block: clamp(2.5rem, 8vw, 4rem); }
.sek__in { width: min(100% - 2rem, 32rem); margin-inline: auto; display: grid; gap: 1.5rem; }
.sek--oben { padding-top: 0; padding-bottom: 2rem; }
.sek h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.6rem); }
.sek__lede { color: var(--ink-70); font-size: 1.0625rem; margin-top: -0.5rem; }
.key { font-style: normal; color: var(--accent); }

/* Kopf und Hero */
.kopf { width: min(100% - 2rem, 32rem); margin-inline: auto; padding-block: 0; }
.marke { display: inline-flex; min-height: 40px; align-items: center; }
.sek--oben .sek__in { gap: 1rem; }
.marke img[width] { height: 1.75rem; width: auto; opacity: 0.8; }
.portrait { position: relative; border-radius: 1.75rem; overflow: hidden; aspect-ratio: 1000 / 730; max-height: 40svh; width: 100%; background: #141416; }
.portrait picture { display: block; width: 100%; height: 100%; }
.portrait picture img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__text { display: grid; gap: 0.2rem; }
.hero__name { font-size: clamp(2.1rem, 1.4rem + 4vw, 3rem); }
.hero__rolle { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); }
.hero__rolle span { color: var(--accent); }
.hero__firma { color: var(--ink-70); }

/* Buttons */
.knopf {
  --_bg: #fff; --_fg: var(--black); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 52px; padding: 0.9rem 1.7rem; border: 1px solid var(--_bd); border-radius: 999px;
  background: var(--_bg); color: var(--_fg); text-decoration: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.2;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.knopf svg { width: 1.2em; height: 1.2em; flex: none; }
.knopf:hover { transform: translateY(-2px); }
.knopf:active { transform: scale(0.98); }
.knopf--haupt { --_bg: var(--orange); --_fg: var(--on-accent); width: 100%; }
.knopf--haupt:hover { --_bg: var(--orange-2); }
.knopf--hell { --_bg: #fff; --_fg: var(--black); width: 100%; }
.knopf--rand { --_bg: transparent; --_fg: var(--ink); --_bd: var(--border-strong); width: 100%; }

/* Kacheln mit 3D Icon */
.kachel { position: relative; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.aktionen { display: grid; gap: 0.75rem; }
.aktionen__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.aktion { display: grid; justify-items: center; gap: 0.25rem; padding: 0.9rem 0.5rem 0.8rem; text-decoration: none; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; transition: transform 0.25s var(--ease); }
.aktion:hover { transform: translateY(-3px); }
.aktion:hover .i3, .zeile:hover .i3, .projekt:hover .i3 { transform: translateY(-4px) scale(1.05); }

/* Projekte */
.projekte { display: grid; gap: 1rem; }
.projekt { padding: 0.75rem 0.75rem 1.1rem; display: grid; gap: 0.9rem; }
.projekt__fenster { position: relative; border-radius: 1rem; overflow: hidden; background: #1a1a1d; border: 1px solid var(--border); }
.projekt__leiste { display: flex; gap: 0.3rem; padding: 0.45rem 0.65rem; background: #232327; }
.projekt__leiste i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.projekt__schirm { aspect-ratio: 8 / 5; background: #0a0a0b; }
.projekt__video { width: 100%; height: 100%; object-fit: cover; }
.projekt__link { display: flex; white-space: nowrap; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; min-height: 48px; margin-top: 0.7rem; padding: 0.6rem 1rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--ink); font-size: 0.875rem; font-weight: 600; text-decoration: none; text-align: center; transition: background 0.25s var(--ease); }
.projekt__link:hover { background: var(--surface-2); }
.projekt__link svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--accent); transition: transform 0.25s var(--ease); }
.projekt__link:hover svg { transform: translate(2px, -2px); }
.projekt__text { display: grid; gap: 0.15rem; padding: 0.25rem 0.5rem 0; }
.projekt__kicker { color: var(--accent); font-size: 0.875rem; font-weight: 600; }
.projekt__name { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); }
.projekt__info { color: var(--ink-70); font-size: 0.9375rem; }

/* Call to Action */
.cta { text-align: center; justify-items: center; }
.cta .i3 { margin-bottom: -0.25rem; }
.cta__note { color: var(--ink-50); font-size: 0.9375rem; margin-top: -0.75rem; }
.cta .sek__lede { margin-top: 0; max-width: 26rem; }

/* Kontakt */
.zeilen { display: grid; gap: 0.75rem; }
.zeile-gruppe { display: flex; align-items: center; gap: 0.5rem; }
.zeile { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1.1rem 0.7rem 0.8rem; text-decoration: none; transition: transform 0.25s var(--ease); }
.zeile:hover { transform: translateX(3px); }
.zeile .i3 { width: 3.6rem; height: 3.6rem; }
.zeile__inhalt { display: grid; min-width: 0; }
.zeile__label { color: var(--ink-50); font-size: 0.875rem; }
.zeile__wert { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.kopieren { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background 0.25s var(--ease); }
.kopieren:hover { background: var(--surface-2); }
.kopieren svg { width: 1.2rem; height: 1.2rem; }
.kopieren[hidden] { display: none; }

/* Bewertung, Speichern, Teilen */
.bewertung { text-align: center; justify-items: center; padding: 2rem 1.25rem; }
.bewertung h2 { font-size: 1.7rem; }
.bewertung p { color: var(--ink-70); }
.knopf--google svg { width: 1.3rem; height: 1.3rem; }
.teilen__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.teilen__reihe .aktion { cursor: pointer; border: 1px solid var(--border); font-size: 1rem; }
button.aktion { font: inherit; font-family: var(--font-display); font-weight: 600; background: var(--surface); color: var(--ink); }
button.aktion[hidden] { display: none; }
.titel-klein { font-size: 1.4rem; }

/* Fuß */
.fuss { display: grid; gap: 0.5rem; justify-items: start; color: var(--ink-50); font-size: 0.9375rem; padding-top: 1rem; }
.fuss strong { color: var(--ink); font-weight: 600; }
.fuss a { text-decoration: none; display: inline-block; padding-block: 0.4rem; }
.fuss a:hover { color: var(--ink); }

/* Rückmeldung */
.meldung {
  position: fixed; inset-inline: 0; bottom: 1rem; margin-inline: auto; width: max-content; max-width: calc(100% - 2rem);
  padding: 0.6rem 1.1rem; background: var(--orange); color: var(--on-accent); font-weight: 600; font-size: 0.9375rem;
  border-radius: 999px; opacity: 0; transform: translateY(0.5rem); pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}
.meldung[data-sichtbar] { opacity: 1; transform: translateY(0); }

/* Einblendung beim Laden, nur mit Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .js .sek__in > *, .js .kopf { animation: ein 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes ein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (min-width: 40rem) {
  .sek__in, .kopf { width: min(100% - 3rem, 34rem); }
}

@media print {
  body, .sek, .on-dark { background: #fff; color: #000; --ink: #000; --ink-70: #333; --ink-50: #555; --bg: #fff; --surface: #fff; }
  .aktionen, .kopieren, .projekt__video, .cta, .teilen, .bewertung { display: none; }
}

@media (max-height: 720px) { .portrait { max-height: 30svh; } .hero__rolle { font-size: 1.1rem; } }

/* Bewertung: Sterne poppen nacheinander auf, Tippen spielt erneut ab */
.sterne { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; width: min(100%, 15rem); -webkit-tap-highlight-color: transparent; }
.sterne__bild { width: 100%; height: auto; }
.stern__an { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js .stern__an { opacity: 0; transform: scale(0); }
  .js .sterne.an .stern__an { animation: stern-pop 0.55s var(--ease) both; animation-delay: calc(var(--n, 0) * 0.3s + 0.15s); }
  @keyframes stern-pop { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.45); } 100% { opacity: 1; transform: scale(1); } }
}