/* Infoseite ditasi.de – ruhige Produktseite mit zwei Erscheinungen (hell/dunkel, Standard wie das System, siehe seite.js).
   Inter mit optischer Größe, Symbole aus Phosphor inline, Rot nur für Hauptaktion, Dachzeilen und Akzente. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(schrift/inter-latin-opsz-normal.woff2) format('woff2-variations'), url(schrift/inter-latin-opsz-normal.woff2) format('woff2'); }

/* ---------- Farbwerte je Erscheinung ---------- */
:root {
  --grund: #f5f5f7;
  --buehne: #fbfbfd;
  --flaeche: #ffffff;
  --text: #1d1d1f;
  --zweit: #6e6e73;
  --linie: #e3e3e8;
  --kopf: rgba(251, 251, 253, 0.72);
  --rot: #d9261e;
  --rot-hover: #c21f18;
  --rot-text: #d9261e;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -18px rgba(0, 0, 0, 0.18);
  --schatten-hoch: 0 2px 4px rgba(0, 0, 0, 0.05), 0 24px 48px -20px rgba(0, 0, 0, 0.3);
  --rahmen: rgba(0, 0, 0, 0.06);
  --schrift: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --breite: min(1200px, calc(100% - 48px));
  --rund: 22px;
  color-scheme: light;
}
:root[data-erscheinung="dunkel"] {
  --grund: #000000;
  --buehne: #0b0c0f;
  --flaeche: #17181c;
  --text: #f5f5f7;
  --zweit: #a1a1a6;
  --linie: rgba(255, 255, 255, 0.1);
  --kopf: rgba(14, 16, 21, 0.62);
  --rot-text: #ff5a4f;
  --schatten: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --schatten-hoch: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 48px -20px rgba(0, 0, 0, 0.8);
  --rahmen: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--grund); color: var(--text); font: 400 17px/1.55 var(--schrift); letter-spacing: -0.003em; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.1; letter-spacing: -0.025em; }
p { margin: 0; }
.innen { width: var(--breite); margin: 0 auto; }
.ph { width: 1em; height: 1em; flex: none; }
/* Logo und Ansichten der Anwendung je Erscheinung (verborgene Bilder mit loading=lazy lädt der Browser nicht) */
:root[data-erscheinung="dunkel"] .nur-hell, :root:not([data-erscheinung="dunkel"]) .nur-dunkel { display: none; }

.dachzeile { margin-bottom: 14px; font-size: 17px; font-weight: 600; color: var(--rot-text); }

/* ---------- Schaltflächen ---------- */
.knopf { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--rot); color: #fff; text-decoration: none; font: 600 16px var(--schrift); white-space: nowrap; }
.knopf:hover { background: var(--rot-hover); }
.knopf .ph { font-size: 17px; }
.knopf.klein { height: 32px; padding: 0 16px; font-size: 13.5px; gap: 6px; }
.knopf.klein .ph { font-size: 14px; }
.knopf.zweit { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.knopf.zweit:hover { background: color-mix(in srgb, var(--text) 14%, transparent); }
.knopf:focus-visible, .menue a:focus-visible, .erscheinung button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ---------- Kopfleiste aus Glas, mit Erscheinungs-Schalter ---------- */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--kopf); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 24px; height: 56px; }
.marke img { height: 26px; width: auto; }
.menue { display: flex; gap: 30px; margin-left: auto; }
.menue a { color: var(--text); opacity: .82; text-decoration: none; font-size: 13.5px; font-weight: 500; }
.menue a:hover { opacity: 1; }
.kopf .knopf .kurz { display: none; }
/* Schalter erst zeigen, wenn seite.js läuft */
.erscheinung { display: none; gap: 2px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); }
:root[data-erscheinung] .erscheinung { display: flex; }
.erscheinung button { width: 30px; height: 26px; border: 0; border-radius: 999px; background: none; color: var(--zweit); font: 600 11px var(--schrift); display: grid; place-items: center; cursor: pointer; }
.erscheinung button .ph { font-size: 15px; }
.erscheinung button[aria-checked="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }

/* ---------- Einstieg: zentrierte Überschrift, die Anwendung groß darunter ---------- */
.held { position: relative; background: var(--buehne); }
.held::after { content: ''; position: absolute; inset: 0 0 120px; background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--rot) 7%, transparent), transparent 70%); pointer-events: none; }
/* Dunkel: eigenes Luftbild der Anwendung, weich und abgedunkelt im Hintergrund */
:root[data-erscheinung="dunkel"] .held::before { content: ''; position: absolute; inset: 0 0 120px; background: url(bilder/uebersicht-dunkel.jpg) center / cover; filter: blur(14px) saturate(.9) brightness(.7); opacity: .5; transform: scale(1.1);
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 45%, transparent 92%); }
:root[data-erscheinung="dunkel"] .held::after { background: linear-gradient(0deg, var(--buehne) 0%, transparent 30%), radial-gradient(120% 70% at 50% 0%, rgba(11, 12, 15, 0.5) 0%, rgba(11, 12, 15, 0.86) 55%, var(--buehne) 85%); }
.held .innen { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 56px; padding: 112px 0 0; }
.held .dachzeile { color: var(--zweit); font-weight: 500; }
.held h1 { font-size: clamp(38px, 7.4vw, 84px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; white-space: nowrap; }
.held h1 em { font-style: normal; margin-left: .22em; color: var(--rot-text); }
.held .einleitung { margin: 22px auto 34px; max-width: 34em; font-size: 21px; line-height: 1.5; color: var(--zweit); }
.knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.held .hinweis { margin-top: 22px; color: var(--zweit); font-size: 14px; }
.rahmen { margin: 0; padding: 8px; border-radius: 24px; background: color-mix(in srgb, var(--flaeche) 70%, transparent); border: 1px solid var(--rahmen); box-shadow: var(--schatten), 0 40px 80px -40px rgba(0, 0, 0, 0.45); }
.rahmen img { border-radius: 17px; }
.held .rahmen { width: min(1120px, 100%); padding: 10px; border-radius: 28px; margin-bottom: -120px; background: color-mix(in srgb, var(--flaeche) 60%, transparent); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 60px 120px -40px rgba(0, 0, 0, 0.55); }
.held .rahmen img { border-radius: 19px; }

/* ---------- Kernpunkte: Kacheln mit großem Symbol ---------- */
.kern { background: var(--grund); padding-top: 150px; }
.kern .innen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 40px 0 24px; }
.kern-kopf { grid-column: 1 / -1; max-width: 46em; margin-bottom: 10px; }
.kern-kopf h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 14px; }
.kern-kopf p { color: var(--zweit); font-size: 17px; }
.kern article, .raster article, .schritte li, .zahlen div { border-radius: var(--rund); background: var(--flaeche); box-shadow: var(--schatten); }
.kern article { padding: 34px 32px; }
.kern .symbol { display: block; font-size: 40px; line-height: 1; margin-bottom: 18px; color: var(--text); }
/* Duotone: Füllfläche zart im Akzentrot, Linie in Schriftfarbe */
.kern .symbol .flaeche { fill: var(--rot); opacity: .3; }
.kern h3 { font-size: 22px; margin-bottom: 12px; }
.kern p { color: var(--zweit); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 96px 0; background: var(--grund); }
.abschnitt h2 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.035em; max-width: 24ch; }
.abschnitt .vorspann { margin-top: 16px; max-width: 46em; color: var(--zweit); font-size: 18px; }
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.raster article { padding: 30px 30px 32px; }
.raster h3 { display: flex; align-items: center; gap: 12px; font-size: 18px; margin-bottom: 10px; }
.raster h3 .ph { font-size: 24px; color: var(--rot-text); }
.raster p { color: var(--zweit); font-size: 15.5px; line-height: 1.55; }
.raster.zwei { grid-template-columns: repeat(2, 1fr); }
.sicher-fuss + .sicher-fuss { margin-top: 12px; }
.sicher-fuss { margin-top: 28px; max-width: 60em; color: var(--zweit); font-size: 14.5px; }
.sicher-fuss a { color: var(--text); }

/* ---------- Anwendung: echte Ansichten, groß ---------- */
.dunkel { background: var(--buehne); }
.ansicht { display: grid; grid-template-columns: 1.45fr 1fr; gap: 56px; align-items: center; margin-top: 72px; }
.ansicht.umgekehrt .rahmen { order: 2; }
.ansicht h3 { font-size: 26px; margin-bottom: 14px; }
.ansicht p { color: var(--zweit); }
.punkte { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.punkte li { position: relative; padding-left: 22px; font-size: 15.5px; }
.punkte li::before { content: ''; position: absolute; left: 0; top: 11px; width: 10px; height: 2px; border-radius: 1px; background: var(--rot); }

/* ---------- Für Ausbilder ---------- */
.schritte { list-style: none; counter-reset: schritt; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.schritte li { counter-increment: schritt; padding: 28px; }
.schritte li::before { content: counter(schritt, decimal-leading-zero); display: block; margin-bottom: 14px; color: var(--rot-text); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.schritte b { display: block; font-size: 19px; margin-bottom: 8px; }
.schritte span { color: var(--zweit); font-size: 15.5px; }

/* ---------- Über DITASI ---------- */
.ueber { background: var(--buehne); }
.ueber .innen { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.ueber .text .erster { margin-top: 20px; }
.ueber .text p + p { margin-top: 14px; }
.ueber .text p { color: var(--zweit); }
.zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zahlen div { padding: 26px 24px; border-radius: 18px; }
.zahlen b { display: block; font-size: 38px; line-height: 1; margin-bottom: 8px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.zahlen span { color: var(--zweit); font-size: 15px; }

/* ---------- Abschluss und Fuß ---------- */
.schluss { background: var(--grund); text-align: center; padding: 96px 0; }
.schluss h2 { font-size: clamp(30px, 3.4vw, 42px); }
.schluss p { margin: 14px auto 32px; max-width: 34em; color: var(--zweit); }
.fuss { background: var(--buehne); color: var(--zweit); font-size: 14.5px; border-top: 1px solid var(--linie); }
.fuss .innen { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; padding: 56px 0 40px; }
.fuss img { height: 30px; width: auto; margin-bottom: 16px; }
.fuss h4 { margin: 0 0 12px; color: var(--text); font-size: 14px; font-weight: 600; }
.fuss nav { display: grid; gap: 8px; }
.fuss a { color: var(--zweit); text-decoration: none; }
.fuss a:hover { color: var(--text); }
.fuss .quellen { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 13px; }

/* ---------- Bewegung (bei „Bewegung reduzieren“ aus; .anim setzt erst seite.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .anim { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--verzug, 0ms); }
  .anim.sichtbar { opacity: 1; transform: none; }
  .held .rahmen.anim { transform: translateY(48px) scale(.96); transition-duration: 1.1s; }
  .held .rahmen.anim.sichtbar { transform: none; }
  .kern article.sichtbar, .raster article.sichtbar { transition: transform .25s ease, box-shadow .25s ease, opacity .7s cubic-bezier(.2, .7, .2, 1); transition-delay: 0ms; }
  .kern article:hover, .raster article:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
  .knopf { transition: background .2s, transform .15s; }
  .knopf:active { transform: scale(.97); }
  .knopf .ph { transition: transform .2s; }
  .knopf:hover .ph { transform: translateX(3px); }
  body { transition: background-color .3s, color .3s; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 960px) {
  .menue { display: none; }
  .kopf .erscheinung { margin-left: auto; }
  .held .innen { gap: 40px; padding: 72px 0 0; }
  .held h1 { white-space: normal; }
  .held .einleitung { font-size: 18px; }
  .held .rahmen { padding: 6px; border-radius: 18px; margin-bottom: -64px; }
  .held .rahmen img { border-radius: 13px; }
  .kern { padding-top: 88px; }
  .kern .innen { grid-template-columns: 1fr; gap: 16px; }
  .raster, .raster.zwei, .schritte { grid-template-columns: 1fr; gap: 16px; }
  .ansicht { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
  .ansicht.umgekehrt .rahmen { order: 0; }
  .ueber .innen { grid-template-columns: 1fr; gap: 40px; }
  .abschnitt { padding: 72px 0; }
  .fuss .innen { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 520px) {
  :root { --breite: calc(100% - 32px); }
  .kopf .innen { gap: 12px; }
  .marke img { height: 22px; }
  .kopf .knopf { padding: 0 12px; }
  .kopf .knopf .lang { display: none; }
  .kopf .knopf .kurz { display: inline; }
  .held .innen { padding-top: 56px; }
  .held h1 em { display: block; margin-left: 0; }
  .zahlen { grid-template-columns: 1fr; }
}