/* ============================================================
   professionelle-videoproduktion-hamburg.de

   Keine fremden Ressourcen. Keine Webfonts, kein CDN, keine
   Bibliothek. Die Datenschutzerklaerung sagt, dass diese Seite
   nichts an Dritte uebertraegt, und das muss stimmen.

   Farben: die beiden Lichtfarben einer Videoproduktion.
   Tungsten warm (3200 K), Tageslicht kuehl (5600 K), auf dem
   bewusst neutralen Grau eines Schnittplatzes. Der Aufmacher
   ist immer dunkel, wie der Raum, in dem Material gesichtet wird.
   ============================================================ */

:root{
  --ground:#F2F4F7;
  --surface:#FFFFFF;
  --surface-2:#E7EAF0;
  --ink:#14171C;
  --muted:#59606E;
  --line:#D5D9E2;

  --tungsten:#C2540A;
  --tungsten-soft:#FFEBD8;
  --tungsten-voll:#FF7A18;
  --daylight:#0E6C93;
  --daylight-soft:#DAEDF7;
  --daylight-voll:#12A0D6;

  /* Der Aufmacher hat eigene Werte, in beiden Schemata gleich */
  --buehne:#101318;
  --buehne-2:#191E26;
  --buehne-ink:#EEF1F5;
  --buehne-muted:#9AA3B2;
  --buehne-warm:#FF8A2D;
  --buehne-kuehl:#4FC3E8;

  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --text:68ch;
  --shell:1120px;
}

@media (prefers-color-scheme:dark){
  :root{
    --ground:#111419;
    --surface:#191D24;
    --surface-2:#20252E;
    --ink:#E8EBF0;
    --muted:#98A1B0;
    --line:#2C323C;

    --tungsten:#FF9B45;
    --tungsten-soft:#33220F;
    --tungsten-voll:#FF8A2D;
    --daylight:#5AC3EF;
    --daylight-soft:#0E2733;
    --daylight-voll:#12A0D6;
  }
}

*{box-sizing:border-box;}

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

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--ui);font-size:18px;line-height:1.65;
  -webkit-text-size-adjust:100%;
}

.shell{max-width:var(--shell);margin:0 auto;padding:0 24px;}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--surface);
  color:var(--ink);padding:12px 18px;z-index:20;border:1px solid var(--line);
}
.skip:focus{left:12px;top:12px;}

a{color:var(--daylight);}
a:focus-visible{outline:2px solid var(--tungsten);outline-offset:2px;border-radius:2px;}

/* ================= Kopf ================= */
.top{border-bottom:1px solid var(--line);background:var(--surface);}
.top-inner{
  max-width:var(--shell);margin:0 auto;padding:13px 24px;
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;
}
.marke{
  font-weight:700;font-size:16px;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;line-height:1.25;
  display:flex;align-items:center;gap:9px;
}
.marke .logo{width:34px;height:34px;flex:none;display:block;}
.marke b{display:block;font-weight:700;}
.marke span{display:block;font-weight:400;font-size:12.5px;color:var(--muted);}
.top nav{display:flex;flex-wrap:wrap;gap:5px 20px;font-size:15.5px;}
.top nav a{color:var(--muted);text-decoration:none;}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink);text-decoration:underline;}

/* ================= Brotkrumen ================= */
.krumen{border-bottom:1px solid var(--line);font-size:14px;}
.krumen ol{
  max-width:var(--shell);margin:0 auto;padding:9px 24px;
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);
}
.krumen li + li::before{content:"›";margin-right:8px;color:var(--line);}
.krumen a{color:var(--muted);}

/* ================= Aufmacher ================= */
/* Immer dunkel, in beiden Schemata. Die schmalen Balken oben und
   unten zitieren das Kinoformat. */
.buehne{
  background:var(--buehne);color:var(--buehne-ink);
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.buehne::before,.buehne::after{
  content:"";position:absolute;left:0;right:0;height:9px;
  background:linear-gradient(90deg,var(--buehne-warm) 0%,var(--buehne-warm) 26%,
             var(--buehne-2) 26%,var(--buehne-2) 74%,var(--buehne-kuehl) 74%);
}
/* Ein Schimmer der beiden Lichtfarben, wie zwei Lampen von den Seiten */
.buehne .buehne-inner::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(50% 120% at 0% 0%,rgba(255,138,45,.16),transparent 62%),
    radial-gradient(50% 120% at 100% 100%,rgba(79,195,232,.14),transparent 62%);
}
.buehne-inner > *{position:relative;z-index:1;}
.buehne::before{top:0;}
.buehne::after{bottom:0;}
.buehne-inner{
  max-width:var(--shell);margin:0 auto;padding:52px 24px 46px;
}
.buehne h1{color:var(--buehne-ink);margin-bottom:18px;}
.buehne .lead{
  font-size:20px;line-height:1.55;color:var(--buehne-ink);
  max-width:62ch;margin:0 0 8px;
}
.buehne .lead b{font-weight:600;}
.buehne .unter{
  font-size:16px;color:var(--buehne-muted);max-width:62ch;margin:14px 0 0;
}
.buehne .unter a{color:var(--buehne-kuehl);}

/* ================= Inhalt ================= */
main{padding:38px 0 76px;}
.buehne + main{padding-top:34px;}
h1{
  font-size:clamp(29px,5vw,44px);line-height:1.1;letter-spacing:-.022em;
  margin:0 0 20px;max-width:21ch;text-wrap:balance;
}
h2{
  font-size:clamp(21px,3.2vw,27px);line-height:1.24;letter-spacing:-.014em;
  margin:56px 0 12px;max-width:30ch;text-wrap:balance;
  padding-top:20px;position:relative;
}
/* Dasselbe zweifarbige Zeichen wie im Favicon, als Gliederungsmarke */
h2::before{
  content:"";position:absolute;top:0;left:0;width:22px;height:11px;
  border-radius:11px 11px 0 0;
  background:linear-gradient(90deg,var(--tungsten-voll) 0 50%,var(--daylight-voll) 50% 100%);
}
.recht h2{padding-top:16px;}
.buehne h2::before,.ent-halter h2::before{display:none;}
h3{font-size:18.5px;margin:32px 0 6px;max-width:36ch;text-wrap:balance;}
p,ul,ol{max-width:var(--text);}
p{margin:0 0 17px;}
ul,ol{margin:0 0 19px;padding-left:1.2em;}
li{margin-bottom:7px;}
li::marker{color:var(--muted);}
strong{font-weight:600;}

.antwort{
  font-size:19.5px;line-height:1.55;
  border-left:4px solid var(--tungsten-voll);padding-left:18px;margin-bottom:24px;
}
.antwort b{font-weight:600;}

/* ================= Kaesten ================= */
.tipp{
  margin:34px 0;padding:22px 24px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--daylight);
  border-radius:5px;max-width:var(--text);
}
.tipp p{margin:0;}
.tipp p + p{margin-top:12px;}
.tipp .kopf{
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--daylight);margin-bottom:10px;font-weight:600;
}

.warnung{
  margin:34px 0;padding:22px 24px;background:var(--tungsten-soft);
  border:1px solid var(--tungsten);border-radius:5px;max-width:var(--text);
}
.warnung p{margin:0;}
.warnung p + p{margin-top:12px;}
.warnung .kopf{
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tungsten);margin-bottom:10px;font-weight:600;
}

.hinweis{
  margin:44px 0 0;padding:18px 22px;border:1px solid var(--line);
  border-radius:5px;background:var(--surface);max-width:var(--text);
}
.hinweis p{margin:0;font-size:15.5px;color:var(--muted);}
.hinweis p + p{margin-top:10px;}

/* ================= Karten ================= */
.karten{
  list-style:none;padding:0;margin:30px 0 10px;max-width:none;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
}
.karten li{margin:0;}
.karte{
  display:flex;flex-direction:column;gap:6px;height:100%;position:relative;
  padding:22px 22px 20px;background:var(--surface);border:1px solid var(--line);
  border-radius:5px;text-decoration:none;color:inherit;overflow:hidden;
}
.karte::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--tungsten-voll),var(--daylight-voll));
  opacity:.55;transition:opacity .15s ease;
}
.karte:hover{border-color:var(--daylight);}
.karte:hover::before{opacity:1;}
.karte .k-titel{font-weight:600;font-size:17.5px;color:var(--ink);}
.karte .k-sub{font-size:15px;color:var(--muted);}

/* ================= Werkzeugliste ================= */
.werkzeuge{list-style:none;padding:0;margin:22px 0 30px;max-width:none;}
.werkzeuge li{
  margin:0 0 -1px;padding:16px 20px;background:var(--surface);
  border:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr auto;gap:3px 16px;
  align-items:start;
}
.werkzeuge li:first-child{border-radius:5px 5px 0 0;}
.werkzeuge li:last-child{border-radius:0 0 5px 5px;margin-bottom:0;}

/* Jedes Teil bekommt seinen Platz ausdruecklich. Ohne das schnappt sich
   das Element mit fester Zeile die erste Spalte. */
.wz-logo{
  grid-column:1;grid-row:1 / span 2;align-self:center;
  width:44px;height:44px;padding:6px;border-radius:7px;
  background:var(--surface-2);border:1px solid var(--line);
  object-fit:contain;display:block;
}
.wz-name{grid-column:2;grid-row:1;font-weight:600;font-size:17px;}
.wz-was{grid-column:2;grid-row:2;font-size:15.5px;color:var(--muted);}
.wz-score{
  grid-column:3;grid-row:1 / span 2;align-self:center;
  font-size:13px;font-variant-numeric:tabular-nums;
  color:var(--daylight);background:var(--daylight-soft);
  padding:4px 9px;border-radius:4px;white-space:nowrap;font-weight:600;
}

/* ================= Grafik ================= */
figure.grafik{margin:36px 0;max-width:660px;}
figure.grafik svg{
  width:100%;height:auto;display:block;background:var(--surface);
  border:1px solid var(--line);border-radius:5px;
}
figcaption{font-size:14.5px;color:var(--muted);margin-top:9px;max-width:var(--text);}
.s-t{font-size:13px;fill:var(--ink);font-weight:500;}
.s-k{font-size:11px;fill:var(--muted);}
.s-l{font-size:9.5px;fill:var(--muted);letter-spacing:.09em;font-weight:600;}
.s-w{fill:var(--tungsten);}
.s-d{fill:var(--daylight);}
.f-k{fill:var(--surface-2);stroke:var(--line);stroke-width:1;}
.f-w{fill:var(--tungsten-soft);stroke:var(--tungsten);stroke-width:1;}
.f-d{fill:var(--daylight-soft);stroke:var(--daylight);stroke-width:1;}
.f-p{stroke:var(--muted);stroke-width:1;fill:none;}
.f-linie{stroke:var(--line);stroke-width:1;}

/* ================= Entscheider ================= */
.ent-halter{
  margin:30px 0 34px;padding:26px 26px 24px;max-width:var(--text);
  background:var(--surface);border:1px solid var(--line);
  border-top:4px solid transparent;border-radius:5px;
  background-image:linear-gradient(var(--surface),var(--surface)),
                   linear-gradient(90deg,var(--tungsten-voll),var(--daylight-voll));
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
.ent-halter:focus{outline:none;}
.ent-kopf{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.ent-zaehler{
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;font-weight:600;
}
.ent-bahn{flex:1;height:3px;background:var(--surface-2);border-radius:2px;overflow:hidden;}
.ent-fuell{
  height:100%;transition:width .18s ease;
  background:linear-gradient(90deg,var(--tungsten-voll),var(--daylight-voll));
}
.ent-frage{font-size:21px;line-height:1.35;font-weight:600;margin:0 0 6px;text-wrap:balance;}
.ent-hilfe{font-size:15.5px;color:var(--muted);margin:0 0 20px;}
.ent-knoepfe{display:flex;flex-wrap:wrap;gap:10px;}
.ent-knopf{
  font:inherit;font-weight:600;font-size:16.5px;cursor:pointer;
  padding:11px 30px;border-radius:5px;
  border:1px solid var(--ink);background:var(--ink);color:var(--ground);
}
.ent-knopf:hover{background:var(--tungsten-voll);border-color:var(--tungsten-voll);color:#fff;}
.ent-knopf:focus-visible{outline:2px solid var(--tungsten);outline-offset:2px;}
.ent-zurueck{
  font:inherit;font-size:15px;cursor:pointer;color:var(--muted);
  background:none;border:0;padding:10px 4px;margin-top:6px;text-decoration:underline;
}
.ent-zurueck:hover{color:var(--ink);}

.ent-ergebnis{padding:2px 0 4px;}
.ent-marke{
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;margin:0 0 8px;
}
.ent-produktion .ent-marke{color:var(--tungsten);}
.ent-werkzeug .ent-marke{color:var(--daylight);}
.ent-gemischt .ent-marke{color:var(--muted);}
.ent-titel{font-size:23px;margin:0 0 10px;max-width:none;}
.ent-satz{font-size:17.5px;margin:0 0 18px;}
.ent-warum{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;font-weight:600;
}
.ent-liste{margin:0 0 18px;font-size:16px;}
.ent-rat{
  font-size:16px;padding:14px 18px;border-radius:5px;margin:0 0 18px;
  background:var(--surface-2);color:var(--ink);
}
.ent-weiter{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:22px;}
.ent-link{font-size:16px;font-weight:600;}

/* ================= Rechtstexte ================= */
.recht h2{font-size:20px;margin:38px 0 8px;}
.recht p,.recht ul{font-size:16.5px;}
.recht address{font-style:normal;margin:0 0 18px;}
.recht a,.recht address,address a{overflow-wrap:anywhere;}

/* ================= Fuss ================= */
footer{border-top:1px solid var(--line);background:var(--surface);padding:26px 0 36px;}
.fuss-inner{
  max-width:var(--shell);margin:0 auto;padding:0 24px;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:14.5px;color:var(--muted);
}
.fuss-inner nav{display:flex;flex-wrap:wrap;gap:6px 20px;}
.fuss-inner a{color:var(--muted);}

@media (max-width:600px){
  body{font-size:17px;}
  main{padding:28px 0 58px;}
  .buehne-inner{padding:38px 24px 34px;}
  .buehne .lead{font-size:18.5px;}
  .antwort{font-size:18px;padding-left:14px;}
  .ent-halter{padding:20px 18px;}
  .ent-frage{font-size:19px;}
  .ent-knopf{flex:1;padding:11px 20px;}
  .werkzeuge li{grid-template-columns:auto 1fr;gap:3px 14px;}
  .wz-logo{grid-row:1 / span 3;width:38px;height:38px;}
  .wz-name{grid-column:2;grid-row:1;}
  .wz-was{grid-column:2;grid-row:3;}
  .wz-score{grid-column:2;grid-row:2;justify-self:start;margin:3px 0 4px;}
}

@media print{
  .top,.krumen,footer,.skip,.ent-knoepfe,.ent-zurueck{display:none;}
  body{background:#fff;color:#000;font-size:11pt;}
  .buehne{background:#fff;color:#000;}
  .buehne::before,.buehne::after{display:none;}
  .buehne h1,.buehne .lead{color:#000;}
  a{color:#000;}
}

/* ================= Haeufige Fragen ================= */
.fragen h3{
  font-size:18px;margin:26px 0 4px;
}
.fragen h3::before{
  content:"";display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:9px;vertical-align:2px;
  background:linear-gradient(90deg,var(--tungsten-voll) 0 50%,var(--daylight-voll) 50% 100%);
}
.fragen p{color:var(--muted);}

/* ================= Fotos ================= */
figure.foto{margin:34px 0;max-width:720px;}
figure.foto img{
  width:100%;height:auto;display:block;border-radius:5px;
  background:var(--surface-2);
}
figure.foto figcaption{margin-top:9px;}

/* Das Band ueber dem Entscheider: sehr breit, sehr flach */
figure.band{max-width:none;margin:0 0 30px;}
figure.band img{border-radius:5px;}

/* Aufmacher mit Bild: Text links, Bild rechts */
.buehne-bild{margin:0;}
.buehne-bild img{
  width:100%;height:auto;display:block;border-radius:6px;
  border:1px solid rgba(255,255,255,.10);
}
@media (min-width:900px){
  .buehne-inner{
    display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
    gap:20px 46px;align-items:center;
  }
  .buehne-text{grid-column:1;}
  .buehne-bild{grid-column:2;grid-row:1;}
}
@media (max-width:899px){
  .buehne-bild{margin-top:26px;}
}

/* Portrait im Autorenkasten */
.hinweis.mit-bild{display:grid;grid-template-columns:78px 1fr;gap:8px 18px;}
.hinweis.mit-bild img{
  width:78px;height:78px;border-radius:50%;display:block;
  grid-row:1 / span 3;background:var(--surface-2);
}
@media (max-width:520px){
  .hinweis.mit-bild{grid-template-columns:1fr;}
  .hinweis.mit-bild img{grid-row:auto;}
}

/* ================= Kennzeichnung erzeugter Bilder ================= */
.bildrahmen{position:relative;display:block;line-height:0;}
.ki-marke{
  position:absolute;right:9px;bottom:9px;
  font-size:11px;letter-spacing:.06em;line-height:1;
  padding:5px 9px;border-radius:4px;
  background:rgba(16,19,24,.82);color:#EEF1F5;
  font-family:var(--ui);font-weight:600;
  backdrop-filter:blur(2px);
  pointer-events:none;
}
.ki-marke::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:6px;vertical-align:-1px;
  background:linear-gradient(90deg,var(--tungsten-voll) 0 50%,var(--daylight-voll) 50% 100%);
}
.buehne-bild .ki-marke{right:12px;bottom:12px;}

@media print{
  .ki-marke{background:none;color:#000;border:1px solid #000;}
}

/* ================= Bewegtbild ================= */
.bildrahmen video{
  width:100%;height:auto;display:block;border-radius:5px;
  background:var(--buehne);
}
.bildrahmen .ruhig{display:none;}

/* Wer Bewegung abgeschaltet hat, bekommt das Standbild */
@media (prefers-reduced-motion:reduce){
  .bildrahmen video{display:none;}
  .bildrahmen .ruhig{display:block;}
}
@media print{
  .bildrahmen video{display:none;}
  .bildrahmen .ruhig{display:block;}
}

/* ================= Kopfband ueber der Ueberschrift ================= */
.kopfband{margin:0 0 26px;max-width:none;}
.kopfband .bildrahmen{display:block;line-height:0;}
.kopfband img,.kopfband video{
  width:100%;height:auto;display:block;border-radius:6px;
  background:var(--buehne);
}
.kopfband .ruhig{display:none;}
@media (prefers-reduced-motion:reduce){
  .kopfband video{display:none;}
  .kopfband .ruhig{display:block;}
}
@media print{
  .kopfband video{display:none;}
  .kopfband .ruhig{display:block;}
}
main > .shell > .kopfband:first-child + h1{margin-top:0;}