/* Diktat – Seite im Stil eines Aufnahmepults: dunkles Pult, Tonspur, roter Aufnahmepunkt, Notizpapier. */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(schrift/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(schrift/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(schrift/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(schrift/barlow-latin-600-normal.woff2) format("woff2"); }

:root {
  --pflaume: #3A2340;
  --tief: #24152A;
  --signal: #D93A2E;
  --signal-dunkel: #A9271D;
  --papier: #F7F4EF;
  --weiss: #FFFFFF;
  --text: #241C27;
  --leise: #5F5664;
  --linie: #E0D8D2;
  --zeile: #E9E2DA;
  --hell: #E6DCEA;
  --schmal: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --normal: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--text); font: 18px/1.55 var(--normal); }
img { max-width: 100%; }
a { color: var(--pflaume); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.breite { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
code { font-size: .88em; background: #EDE6EF; padding: 1px 5px; border-radius: 4px; }
kbd { font: 600 .82em/1 var(--normal); background: var(--weiss); border: 1px solid #CFC5D3; border-bottom-width: 3px; border-radius: 5px; padding: 3px 6px 2px; }

/* ---------- Pult (Kopf) mit Tonspur ---------- */
.pult { background: var(--pflaume); color: var(--weiss); padding: 36px 0 0; position: relative; }
.pult.klein { padding: 24px 0 20px; border-bottom: 8px solid var(--tief); }
.marke { display: inline-flex; align-items: center; gap: 12px; color: var(--weiss); text-decoration: none; font: 700 28px/1 var(--schmal); letter-spacing: .01em; }
.marke img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.oben { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.oben nav { margin-left: auto; }
.oben nav a { color: var(--hell); text-decoration: none; margin-left: 22px; font-size: 16px; }
.oben nav a:hover { color: var(--weiss); text-decoration: underline; }

.aufnahme { display: inline-flex; align-items: center; gap: 10px; margin: 34px 0 0; padding: 6px 14px 5px 10px; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; font: 600 15px/1 var(--normal); letter-spacing: .06em; text-transform: uppercase; color: var(--hell); }
.rec { width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(217, 58, 46, .28); animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .35; } }
.pult h1 { font: 700 clamp(46px, 8vw, 92px)/.92 var(--schmal); margin: 18px 0 16px; max-width: 15ch; letter-spacing: -.005em; }
.pult .zusage { font-size: clamp(19px, 2.2vw, 23px); max-width: 34em; margin: 0; color: var(--hell); }
/* Tonspur: Balken wie eine laufende Aufnahme, unten in die dunkle Kante übergehend */
.welle { height: 56px; margin-top: 34px; border-bottom: 8px solid var(--tief);
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='440' height='56' fill='%2324152A'><rect x='0' y='20' width='6' height='36' rx='3'/><rect x='11' y='13' width='6' height='43' rx='3'/><rect x='22' y='27' width='6' height='29' rx='3'/><rect x='33' y='22' width='6' height='34' rx='3'/><rect x='44' y='16' width='6' height='40' rx='3'/><rect x='55' y='21' width='6' height='35' rx='3'/><rect x='66' y='16' width='6' height='40' rx='3'/><rect x='77' y='24' width='6' height='32' rx='3'/><rect x='88' y='50' width='6' height='6' rx='3'/><rect x='99' y='50' width='6' height='6' rx='3'/><rect x='110' y='44' width='6' height='12' rx='3'/><rect x='121' y='43' width='6' height='13' rx='3'/><rect x='132' y='33' width='6' height='23' rx='3'/><rect x='143' y='26' width='6' height='30' rx='3'/><rect x='154' y='37' width='6' height='19' rx='3'/><rect x='165' y='30' width='6' height='26' rx='3'/><rect x='176' y='9' width='6' height='47' rx='3'/><rect x='187' y='10' width='6' height='46' rx='3'/><rect x='198' y='14' width='6' height='42' rx='3'/><rect x='209' y='19' width='6' height='37' rx='3'/><rect x='220' y='42' width='6' height='14' rx='3'/><rect x='231' y='48' width='6' height='8' rx='3'/><rect x='242' y='35' width='6' height='21' rx='3'/><rect x='253' y='39' width='6' height='17' rx='3'/><rect x='264' y='46' width='6' height='10' rx='3'/><rect x='275' y='41' width='6' height='15' rx='3'/><rect x='286' y='45' width='6' height='11' rx='3'/><rect x='297' y='37' width='6' height='19' rx='3'/><rect x='308' y='10' width='6' height='46' rx='3'/><rect x='319' y='7' width='6' height='49' rx='3'/><rect x='330' y='18' width='6' height='38' rx='3'/><rect x='341' y='18' width='6' height='38' rx='3'/><rect x='352' y='28' width='6' height='28' rx='3'/><rect x='363' y='35' width='6' height='21' rx='3'/><rect x='374' y='24' width='6' height='32' rx='3'/><rect x='385' y='32' width='6' height='24' rx='3'/><rect x='396' y='50' width='6' height='6' rx='3'/><rect x='407' y='50' width='6' height='6' rx='3'/><rect x='418' y='48' width='6' height='8' rx='3'/><rect x='429' y='42' width='6' height='14' rx='3'/></svg>") 0 100% / auto 100% repeat-x; }

.sprachwahl { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.flagge { display: inline-flex; padding: 2px; border-radius: 4px; line-height: 0; border: 1px solid transparent; }
.flagge svg { display: block; width: 22px; height: 13px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
a.flagge { opacity: .75; transition: opacity .15s, border-color .15s; }
a.flagge:hover, a.flagge:focus-visible { opacity: 1; border-color: rgba(255, 255, 255, .6); }
.flagge.aktiv { border-color: var(--weiss); background: rgba(255, 255, 255, .15); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Tresen: Download und Handy ---------- */
.tresen { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; align-items: start; padding: 44px 24px 24px; }
.knopf { display: inline-flex; align-items: center; gap: 10px; background: var(--signal); color: var(--weiss); text-decoration: none;
  font: 700 24px/1 var(--schmal); padding: 17px 26px 16px; border-radius: 10px; box-shadow: 0 4px 0 var(--signal-dunkel); }
.knopf:hover { background: #E5483B; }
.knopf:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--signal-dunkel); }
.knopf svg { width: 24px; height: 24px; flex: none; }
.knopf.aus { background: #A79CAB; box-shadow: 0 4px 0 #8A7F8E; pointer-events: none; }
.dateiinfo { font-size: 15px; color: var(--leise); margin: 14px 0 0; }
.kurz { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; max-width: 36em; }
.kurz li { padding-left: 32px; position: relative; }
.kurz li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 14px; height: 14px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 4px rgba(217, 58, 46, .15); }
.klein { font-size: 15px; color: var(--leise); }

/* Handy mit dem Aufnahme-Bildschirm der App (nachgebaut wie in der echten App) */
.handy { background: #17101A; border-radius: 38px; padding: 12px; box-shadow: 0 24px 50px -18px rgba(36, 21, 42, .6); margin-top: -128px; position: relative; z-index: 3; }
.schirm { background: #FAFAFA; border-radius: 28px; overflow: hidden; font-size: 13px; line-height: 1.3; }
.leiste { background: #212121; color: var(--weiss); padding: 26px 16px 13px; font: 600 18px/1.1 var(--normal); }
.app { padding: 12px 16px 18px; }
.app .titel { font-size: 12px; color: #444; margin: 2px 0 6px; }
.wahl { display: flex; gap: 14px; margin-bottom: 4px; }
.wahl span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wahl span::before { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #757575; }
.wahl .an::before { border-color: #009688; background: radial-gradient(#009688 0 3px, transparent 3.5px); }
.feld { border-bottom: 2px solid #009688; padding: 8px 2px 5px; font-size: 15px; margin-bottom: 14px; }
.gross { background: #C42B1C; color: #fff; border-radius: 16px; height: 118px; display: grid; place-items: center; font: 700 21px/1 var(--normal); }
.pause { background: #606060; color: #fff; border-radius: 16px; height: 54px; display: grid; place-items: center; font: 700 17px/1 var(--normal); margin-top: 8px; }
.pegel { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pegel b { font-size: 15px; min-width: 40px; }
.pegel span { flex: 1; height: 4px; background: #D6E9E7; border-radius: 2px; overflow: hidden; }
.pegel i { display: block; height: 100%; width: 64%; background: #009688; animation: pegel 1.1s ease-in-out infinite alternate; }
@keyframes pegel { from { width: 38%; } to { width: 78%; } }
.app .hinweis { font-size: 12.5px; color: #5A5A5A; margin-top: 8px; }
.app .hinweis.leise { color: #8A8A8A; margin-top: 10px; }

/* ---------- Abschnitte ---------- */
section { padding: 64px 0 8px; }
h2 { font: 700 clamp(34px, 4.5vw, 50px)/1 var(--schmal); margin: 0 0 22px; color: var(--pflaume); }
h3 { font: 600 24px/1.15 var(--schmal); margin: 0 0 6px; }
.lead { max-width: 38em; margin: 0 0 30px; color: var(--leise); }

/* Strecke: Handy → Rechner → PC, echte Reihenfolge */
.strecke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.strecke li { position: relative; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: 22px 22px 20px; }
.strecke li + li::before { content: ""; position: absolute; left: -36px; top: 42px; width: 32px; height: 4px; background: var(--signal); border-radius: 2px; }
.strecke li + li::after { content: ""; position: absolute; left: -12px; top: 36px; border: 8px solid transparent; border-left: 10px solid var(--signal); border-right: 0; }
.strecke .nr { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--pflaume); color: var(--weiss);
  font: 700 24px/1 var(--schmal); margin-bottom: 12px; }
.strecke p { margin: 0; font-size: 16.5px; color: var(--leise); }

/* Funktionen: liniert wie ein Notizblock */
.funktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 0; }
.funktionen div { padding: 20px 0; border-top: 1px solid var(--zeile); }
.funktionen dt { font: 600 24px/1.15 var(--schmal); margin-bottom: 6px; }
.funktionen dd { margin: 0; font-size: 17px; color: var(--leise); }

/* Privat */
.privat { margin-top: 56px; padding: 56px 0; background: var(--weiss); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.privat .breite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.privat .lead { margin: 0; }
.privat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.privat li { padding-left: 34px; position: relative; }
.privat li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 6px; background: var(--pflaume); }
.privat li::after { content: ""; position: absolute; left: 5px; top: calc(.3em + 5px); width: 9px; height: 5px; border-left: 2.6px solid #fff; border-bottom: 2.6px solid #fff; transform: rotate(-45deg); }

/* Einrichten */
.schritte { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: schritt;
  border-top: 4px solid var(--pflaume); }
.schritte li { counter-increment: schritt; padding: 22px 22px 6px 0; }
.schritte li + li { padding-left: 22px; border-left: 1px solid var(--linie); }
.schritte li::before { content: counter(schritt); display: block; font: 700 54px/1 var(--schmal); color: var(--signal); margin-bottom: 10px; }
.schritte p { margin: 0; font-size: 16.5px; color: var(--leise); }

/* Bildschirmfotos (optional, aus bilder/) */
.galerie { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.galerie figure { margin: 0; flex: 0 0 230px; scroll-snap-align: start; }
.galerie img { width: 230px; border-radius: 18px; border: 6px solid #17101A; display: block; }
.galerie figcaption { font-size: 15px; color: var(--leise); margin-top: 8px; }

/* Download-Pakete */
.pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 48px; }
.paket { background: var(--weiss); border: 1px solid var(--linie); border-top: 6px solid var(--pflaume); border-radius: 12px; padding: 22px 22px 22px;
  display: flex; flex-direction: column; }
.paket-app { border-top-color: var(--signal); }
.paket h3 { font-size: 28px; color: var(--pflaume); }
.paket p { margin: 0 0 10px; font-size: 16.5px; color: var(--leise); }
.paket .voraus { font-size: 15px; color: var(--text); margin-bottom: 18px; flex: 1; }
.paket .knopf { align-self: flex-start; font-size: 21px; padding: 14px 20px 13px; }
.paket .dateiinfo { margin-top: 12px; font-size: 14px; word-break: break-word; }

/* Installation */
.installieren { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.installieren ol { margin: 0; padding-left: 1.3em; }
.installieren li { margin-bottom: 10px; }
.installieren li::marker { font-family: var(--schmal); font-weight: 700; color: var(--signal); }
.installieren .hinweis { background: var(--weiss); border-left: 5px solid var(--pflaume); padding: 18px 22px; border-radius: 0 10px 10px 0; font-size: 17px; }
.installieren .hinweis p { margin: 0 0 10px; }
.installieren .hinweis p:last-child { margin: 0; }

.schluss { margin: 72px 0 0; background: var(--pflaume); color: var(--weiss); border-top: 10px solid var(--tief); padding: 44px 0; }
.schluss .breite { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.schluss h2 { color: var(--weiss); margin: 0; }
.schluss p { margin: 6px 0 0; color: var(--hell); }
.fuss { background: var(--tief); color: #BFAFC6; font-size: 15px; padding: 22px 0; }
.fuss .breite { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fuss a { color: var(--hell); margin-left: 20px; }
.fuss span a { margin-left: 0; }
.fuss nav { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.fuss nav a:first-child { margin-left: 0; }
.fuss .sprachwahl { margin-left: 20px; }
.fuss .sprachwahl a { margin-left: 0; }

/* Unterseiten */
.unterseite .text { max-width: 760px; padding-top: 36px; padding-bottom: 60px; }
.unterseite h1 { font: 700 44px/1 var(--schmal); color: var(--pflaume); margin: 0 0 20px; }
.unterseite h2 { font-size: 28px; margin: 30px 0 8px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .tresen { grid-template-columns: 1fr; }
  .handy { margin: 8px auto 0; max-width: 330px; width: 100%; }
  .strecke { grid-template-columns: 1fr; gap: 30px; max-width: 560px; }
  .strecke li + li::before { left: 40px; top: -28px; width: 4px; height: 24px; }
  .strecke li + li::after { left: 34px; top: -12px; border: 8px solid transparent; border-top: 10px solid var(--signal); border-bottom: 0; }
  .privat .breite, .installieren { grid-template-columns: 1fr; }
  .pakete { grid-template-columns: 1fr; max-width: 560px; }
  .schritte { grid-template-columns: 1fr; }
  .schritte li, .schritte li + li { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--linie); padding-bottom: 18px; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .breite, .tresen { padding-left: 16px; padding-right: 16px; }
  .oben nav { display: none; }
  .pult { padding-top: 26px; }
  .welle { height: 40px; margin-top: 26px; }
  .funktionen { grid-template-columns: 1fr; }
  .fuss a { margin-left: 0; margin-right: 18px; }
  .fuss .sprachwahl { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rec, .pegel i { animation: none; }
}