/* KI tun – ki-tun.de · Colores del logo del canal (azul petróleo #032533, blanco, naranja #FB7903).
   Sin cookies, sin terceros: fuentes servidas desde /fonts (licencia OFL, ver fonts/OFL-*.txt).
   CSP estricta: nada de estilos ni scripts en línea; todo aquí y en uhr.js / frueh.js. */

@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-display: swap; src: url("fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 900; font-display: swap; src: url("fonts/schibsted-grotesk-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root {
  --petrol: #032533;      /* fondo del logo */
  --petrol-tief: #021B26; /* secciones más oscuras */
  --petrol-hell: #073544; /* paneles (tono del banner) */
  --linie: #1A4A5C;
  --weiss: #FFFFFF;
  --grau: #B9CAD3;        /* texto secundario sobre petróleo (contraste > 7:1) */
  --alt: #557584;         /* la hora vieja */
  --orange: #FB7903;      /* el check del logo */
  --orange-hell: #FFA24D;
  --orange-zart: #FDE3C8;
  --eis: #EAF2F4;         /* sección clara: blanco con un toque petróleo */
  --tinte: #032533;
  --tinte-2: #4A6470;
  --display: "Schibsted Grotesk", "Arial Black", system-ui, sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--petrol); color: var(--weiss); font-family: var(--text); font-size: 18px; line-height: 1.6; }
img, svg { display: block; }
a { color: var(--weiss); text-underline-offset: 3px; }
a:hover { color: var(--orange-hell); }
:focus-visible { outline: 3px solid var(--orange-hell); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--rand); }

/* --- Cabecera ------------------------------------------------------------------ */
.kopf { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; padding-block: 20px; position: relative; z-index: 2; }
.logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
/* El logo es un círculo petróleo sobre fondo petróleo: un aro lo separa del fondo */
.logo img { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 0 2px #2B6278, 0 8px 24px -8px rgba(0,0,0,0.6); }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text b { font-family: var(--display); font-weight: 900; font-size: 22px; }
.logo-text small { font-size: 13px; color: var(--grau); }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; font-weight: 500; font-size: 16px; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.menu .menu-knopf { padding: 0 18px; border: 2px solid var(--linie); border-radius: 12px; }
.menu .menu-knopf:hover { border-color: var(--orange); color: var(--weiss); }

/* --- Inicio ------------------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; isolation: isolate; }
/* Luz de atardecer: aparece cuando el reloj llega a las 17:30 (clase .feierabend en <html>) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 75% at 80% 120%, rgba(251,121,3,0.45) 0%, rgba(251,121,3,0.14) 38%, rgba(251,121,3,0) 64%),
    linear-gradient(180deg, rgba(3,37,51,0) 45%, rgba(48,46,60,0.6) 100%);
}
/* El check del logo, enorme y muy tenue, como marca de agua */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; right: -140px; top: -120px; width: 620px; height: 620px;
  background: url("haken.svg") center / contain no-repeat; opacity: 0.05;
}
.js:not(.feierabend) .hero::before { opacity: 0; }
.js .hero::before { transition: opacity 2.4s cubic-bezier(.3,.6,.2,1); }

.hero-inhalt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; padding-block: 64px 104px; }
.hero h1 { font-size: clamp(46px, 6.6vw, 84px); line-height: 0.98; letter-spacing: -0.035em; }
.hero-text > p { margin: 26px 0 0; font-size: 21px; color: var(--grau); max-width: 34em; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 12px; font-weight: 700; font-size: 17px; text-decoration: none; }
.knopf-voll { background: var(--orange); color: var(--petrol); }
.knopf-voll:hover { background: var(--orange-hell); color: var(--petrol); }
.knopf-rand { border: 2px solid var(--weiss); color: var(--weiss); }
.knopf-rand:hover { border-color: var(--orange-hell); }
.knopf svg { flex: none; }
.vorteile { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 34px 0 0; padding: 0; font-size: 16px; color: var(--grau); }
.vorteile li { display: flex; align-items: center; gap: 8px; }

/* El reloj: panel con 20:47 tachado, rodillos hasta 17:30 y el check del logo al llegar */
.uhr-panel { position: relative; padding: 36px 36px 40px; border-radius: 28px; background: linear-gradient(160deg, rgba(7,53,68,0.95), rgba(2,27,38,0.95)); border: 1px solid var(--linie); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06); }
.uhr { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-family: var(--display); font-variant-numeric: tabular-nums; user-select: none; }
.uhr-alt { position: relative; font-weight: 800; font-size: clamp(48px, 5.4vw, 80px); line-height: 1; color: var(--alt); }
.uhr-strich { position: absolute; left: -5%; right: -5%; top: 52%; height: 0.075em; background: var(--orange); border-radius: 99px; transform: rotate(-4deg) scaleX(1); transform-origin: left center; }
.uhr-zeile { display: flex; align-items: center; gap: 0.1em; font-size: clamp(70px, 7vw, 112px); }
.uhr-neu { display: flex; font-weight: 900; line-height: 1; color: var(--weiss); letter-spacing: -0.02em; }
/* Cada cifra es un rodillo: una tira vertical vista por una ventana de una cifra, bordes difuminados */
.rolle { display: inline-block; height: 1.04em; overflow: hidden; width: 0.66em; text-align: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.rolle-band { display: flex; flex-direction: column; }
.rolle-band span { height: 1.04em; line-height: 1.04; }
/* Los dos puntos, dibujados (el carácter „:“ de la fuente no queda centrado entre rodillos) */
.doppelpunkt { position: relative; width: 0.32em; height: 1.04em; }
.doppelpunkt::before, .doppelpunkt::after { content: ""; position: absolute; left: 50%; width: 0.14em; height: 0.14em; margin-left: -0.07em; border-radius: 50%; background: var(--weiss); }
.doppelpunkt::before { top: 0.3em; }
.doppelpunkt::after { top: 0.66em; }
.uhr-haken { width: 0.5em; height: 0.5em; flex: none; }
.uhr-haken path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.uhr-fuss { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--linie); font-size: 15px; color: var(--grau); }

/* Estado inicial de la animación (solo con JS y sin „reducir movimiento“) */
.js:not(.feierabend) .uhr-alt { color: transparent; }
.js:not(.feierabend) .uhr-strich { transform: rotate(-4deg) scaleX(0); }
.js:not(.feierabend) .uhr-haken path { stroke-dashoffset: 1; }
.js:not(.feierabend) .uhr-fuss { opacity: 0; }
.js .uhr-alt { transition: color 0.9s ease 0.5s; }
.js .uhr-strich { transition: transform 0.45s cubic-bezier(.6,0,.2,1) 0.2s; }
.js .uhr-haken path { transition: stroke-dashoffset 0.55s cubic-bezier(.6,0,.2,1) 0.75s; }
.js .uhr-fuss { transition: opacity 0.8s ease 1.2s; }

/* --- Für wen ------------------------------------------------------------------------ */
.fuer-wen { background: var(--petrol-tief); border-block: 1px solid var(--linie); }
.fuer-wen .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; padding-block: 34px; }
.fuer-wen p { margin: 0; font-weight: 600; font-size: 18px; }
.branchen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.branchen li { padding: 8px 16px; border-radius: 999px; background: var(--petrol-hell); color: var(--grau); font-size: 15px; font-weight: 500; }

/* --- Secciones genéricas ------------------------------------------------------------ */
.abschnitt { padding-block: 104px; }
.abschnitt.ohne-oben { padding-top: 0; }
.abschnitt h2 { font-size: clamp(36px, 4.6vw, 54px); line-height: 1.04; }
.einleitung { margin: 18px 0 0; font-size: 20px; color: var(--grau); max-width: 38em; }

/* So geht's: tres pasos (secuencia real → numerados) */
.schritte { list-style: none; counter-reset: schritt; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 52px 0 0; padding: 0; }
.schritte li { counter-increment: schritt; position: relative; padding: 32px 28px 30px; border-radius: 20px; background: var(--petrol-hell); border: 1px solid var(--linie); }
.schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--orange); color: var(--petrol); font-family: var(--display); font-weight: 900; font-size: 24px; margin-bottom: 22px; }
.schritte h3 { font-size: 26px; line-height: 1.15; }
.schritte p { margin: 10px 0 0; color: var(--grau); font-size: 17px; }

/* --- Vídeos (sección clara) --------------------------------------------------------- */
.videos { background: var(--eis); color: var(--tinte); }
.videos .einleitung { color: var(--tinte-2); }
.karten { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 20px; }
.karte { display: flex; flex-direction: column; height: 100%; padding: 26px; border-radius: 20px; background: var(--weiss); color: var(--tinte); text-decoration: none; border: 2px solid transparent; box-shadow: 0 1px 0 rgba(3,37,51,0.06), 0 18px 40px -26px rgba(3,37,51,0.45); transition: border-color .15s, transform .15s; }
.karte:hover { color: var(--tinte); border-color: var(--orange); transform: translateY(-3px); }
.karte-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--orange-zart); display: grid; place-items: center; color: #B4500A; }
.karte-titel { margin-top: 20px; font-size: 20px; line-height: 1.3; font-weight: 700; }
/* Comparación antes / con KI: dos barras proporcionales */
.vergleich { margin: auto 0 0; padding-top: 24px; display: grid; grid-template-columns: auto 1fr auto; gap: 8px 10px; align-items: center; font-size: 14px; }
.vergleich dt { color: var(--tinte-2); }
.vergleich dd { margin: 0; }
.balken { height: 10px; border-radius: 99px; background: #C7D6DC; }
.balken-ki { background: var(--orange); min-width: 6px; }
.anteil-3 { width: 3%; } .anteil-10 { width: 10%; } .anteil-13 { width: 13%; } .anteil-17 { width: 17%; }
.vergleich .zeit { text-align: right; font-weight: 600; color: var(--tinte-2); white-space: nowrap; }
.vergleich .zeit-ki { font-family: var(--display); font-weight: 900; font-size: 18px; color: var(--tinte); }
.beispiel-hinweis { margin: 22px 0 0; font-size: 14px; color: var(--tinte-2); }
.alle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 18px; font-weight: 700; color: var(--tinte); }
.alle:hover { color: var(--tinte); text-decoration-color: var(--orange); }

/* --- Vertrauen ---------------------------------------------------------------------- */
.punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 52px; }
.punkt h3 { display: flex; align-items: center; gap: 12px; font-size: 24px; line-height: 1.2; }
.punkt p { margin: 12px 0 0; color: var(--grau); font-size: 17px; }

/* --- Für Betriebe ------------------------------------------------------------------- */
.betriebe-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: center; padding: 56px; border-radius: 28px; background: linear-gradient(140deg, var(--petrol-hell), var(--petrol-tief)); border: 1px solid var(--linie); position: relative; overflow: hidden; }
.betriebe-panel::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 320px; height: 320px; background: url("haken.svg") center / contain no-repeat; opacity: 0.08; pointer-events: none; }
.bald { display: inline-block; margin: 0 0 16px; padding: 6px 14px; border-radius: 999px; background: rgba(251,121,3,0.16); color: var(--orange-hell); font-size: 15px; font-weight: 600; }
.betriebe-panel h2 { font-size: clamp(34px, 4.2vw, 50px); line-height: 1.05; }
.betriebe-panel p:not(.bald) { margin: 22px 0 0; font-size: 19px; color: var(--grau); }
.betriebe-panel .knopf { margin-top: 30px; }
.angebot { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; z-index: 1; }
.angebot li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 16px; background: rgba(3,37,51,0.6); border: 1px solid var(--linie); font-weight: 600; font-size: 18px; }

/* --- Franja YouTube --------------------------------------------------------------- */
.abo { background: var(--orange); color: var(--petrol); }
.abo .wrap { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; padding-block: 48px; }
.abo h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.05; }
.abo p { margin: 8px 0 0; font-size: 18px; font-weight: 500; }
.knopf-dunkel { background: var(--petrol); color: var(--weiss); }
.knopf-dunkel:hover { background: var(--petrol-hell); color: var(--weiss); }

/* --- Pie ------------------------------------------------------------------------------ */
.fuss { background: var(--petrol-tief); color: var(--grau); font-size: 15px; }
.fuss .wrap { padding-block: 44px 40px; }
.fuss-zeile { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; }
.fuss .logo img { width: 48px; height: 48px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 26px; }
.fuss-links a, .fuss-mail { display: inline-flex; align-items: center; min-height: 44px; }
.fuss-hinweis { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 14px; color: #93AAB5; }

/* --- Páginas legales y 404 ----------------------------------------------------------- */
.recht .wrap { padding-block: 48px 104px; }
.recht article { max-width: 46em; padding: 48px; border-radius: 24px; background: var(--petrol-hell); border: 1px solid var(--linie); }
.recht h1 { font-size: clamp(38px, 5.6vw, 58px); line-height: 1.02; margin: 0 0 28px; }
.recht h2 { font-weight: 800; font-size: 22px; margin: 34px 0 8px; letter-spacing: -0.01em; }
.recht p, .recht address { margin: 0 0 14px; color: var(--grau); font-style: normal; }
.platzhalter { color: var(--orange-hell); }
.weg { padding-block: 56px 120px; }
.weg .uhr-alt { font-family: var(--display); font-size: clamp(72px, 12vw, 140px); }
.weg h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.05; margin: 32px 0 0; }
.weg p { color: var(--grau); margin: 16px 0 28px; }

/* --- Tablet y móvil --------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-inhalt, .betriebe-panel { grid-template-columns: 1fr; }
  .schritte, .punkte { grid-template-columns: 1fr; }
  .punkte { gap: 28px; }
  .uhr-panel { max-width: 520px; }
}
@media (max-width: 640px) {
  :root { --rand: 16px; }
  body { font-size: 17px; }
  .logo-text small { display: none; }
  .menu { gap: 0 16px; font-size: 15px; }
  .menu .menu-knopf { display: none; }
  .hero-inhalt { padding-block: 32px 72px; gap: 40px; }
  .hero-text > p { font-size: 19px; }
  .uhr-panel { padding: 26px 22px 28px; }
  .abschnitt { padding-block: 72px; }
  .betriebe-panel { padding: 32px 22px; }
  .recht article { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}