/* Webseite 1234drums.de: Gestaltung für alle Seiten (Startseite, Impressum, Datenschutz, Kontakt, Feedback).
   Werte nach Landingpage-Gestaltung.md.
   Bewegt werden nur transform und opacity (Gestaltung, „Bewegung“). Umbruch Desktop/Handy bei 760 px, Menü-Symbol
   statt der Links bis 900 px, Querformat ab 761 px mit bildschirmfüllendem Kopfbereich. */

:root {
  --schwarz: #000000;
  --weiss: #FFFFFF;
  --grau-flaeche: #F0F0F0;   /* Bereich „Was die App kann“, wie die Bedienleiste der App */
  --grau-rand: #DADADA;      /* Kartenränder, Linien */
  --grau-kessel: #9D9D9D;    /* Rahmen der Screenshots, Griffmulde des Laptops */
  --grau-text: #808080;      /* Rand der Formularfelder; Nebentext im Feedbackbogen */
  --blau: #0056A4;
  --rot: #E72822;
  --gruen: #009D3E;
  --gelb: #FED81D;           /* Favoriten, das Gelb der App (nicht im Buch) */
  --magenta: #D4007E;        /* Lieder, das Magenta der App (nicht im Buch) */
  --breite: 1280px;
  --rand: clamp(20px, 5vw, 32px);
  --leicht: cubic-bezier(.2, .7, .3, 1);
  --klein-h: 47px;           /* Höhe der kleinen Kopfleiste mit Linie (ab 761 px 61 px, unten) */
}

/* ---------- Grundlagen ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--weiss); color: var(--schwarz); }
[hidden] { display: none !important; }
a { color: var(--schwarz); }
a:hover { color: var(--blau); }
/* Sprungziele und Tastatur-Fokus nie unter der festen Kopfleiste (WCAG 2.4.11): Rand oben so hoch wie die kleine Leiste.
   Weitere Abstände einzelner Ziele (scroll-margin) kommen dazu. */
html { scroll-padding-top: var(--klein-h); }
#top { scroll-margin-top: calc(var(--kopf-h, 89px) - var(--klein-h)); }   /* ganz oben ist die Leiste groß: Logo führt genau an den Anfang */
/* Tastatur: überall derselbe Fokusrahmen, 2 px blau mit 3 px Abstand (7,3 : 1 auf Weiß) */
a:focus-visible, button:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
main:focus { outline: none; }   /* Ziel des Sprunglinks, kein Rahmen um den ganzen Inhalt */
/* „Zum Inhalt springen“: erstes Element jeder Seite, nur bei Tastatur-Fokus sichtbar, über der Kopfleiste */
.sprung {
  position: absolute; left: var(--rand); top: 8px; z-index: 60; display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 20px; box-sizing: border-box; border-radius: 6px;
  background: var(--schwarz); color: var(--weiss); font-family: 'Source Sans 3', sans-serif; font-size: 18px; font-weight: 600;
  text-decoration: none; transform: translateY(-200%);
}
.sprung:focus { transform: none; }
.sprung:hover { color: var(--weiss); }
/* Links innerhalb der Seite scrollen weich (bei reduzierter Bewegung springen sie) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
img { display: block; }
h1, h2, h3, p { margin: 0; }

.huelle {   /* äußere Hülle: overflow-x hidden, nicht clip (Gestaltung, „Technik für die Scroll-Bewegung“) */
  font-family: 'Source Sans 3', sans-serif; min-height: 100vh; overflow-x: hidden;
}
/* Inhalt höchstens 1280 px, der seitliche Rand kommt dazu */
.innen { max-width: var(--breite); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }

/* ---------- Kopfleiste ---------- */
#kopfleiste { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid transparent; transition: box-shadow .25s ease, border-color .25s ease; }
.kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: clamp(14px, 3vw, 24px); padding-bottom: clamp(14px, 3vw, 24px);
  transition: padding .25s ease;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo:hover { color: var(--schwarz); }
/* Logo: groß das große App-Icon mit Ziffern, in der kleinen Leiste das kleine; beide liegen übereinander und blenden über */
.kopf-logo { position: relative; flex: none; width: 60px; height: 60px; transition: width .25s ease, height .25s ease; }
.kopf-logo img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .25s ease; }
.kopf-logo-klein { opacity: 0; }
.logo-text { display: flex; flex-direction: column; gap: 2px; }
.kopf-name { white-space: nowrap; font-size: 28px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; transition: font-size .25s ease; }
.kopf-claim { overflow: hidden; max-height: 3em; font-size: 16px; line-height: 1.2; font-weight: 400; transition: opacity .2s ease, max-height .25s ease; }
.kopf-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.nav-desktop { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.nav-desktop a {
  min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-size: 17px; font-weight: 600;
  transition: min-height .25s ease, font-size .25s ease;
}
/* „App öffnen“ als Symbol rechts der Links: grüner Kreis mit Play-Dreieck wie im Knopf, 32 px (kleine Leiste 28 px) */
.nav-desktop .nav-app { justify-content: center; min-width: 44px; }
.nav-app svg { width: 32px; height: 32px; transition: width .25s ease, height .25s ease; }
.nav-app circle { transition: fill .15s ease; }
.nav-app:hover circle { fill: var(--blau); }   /* Kreis blau wie ein Link beim Darüberfahren */
#kopfleiste.klein .nav-app svg { width: 28px; height: 28px; }
.burger {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center; margin-right: -12px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  transition: width .25s ease, height .25s ease;
}
.burger .icon-zu { display: none; }
.burger[aria-expanded="true"] .icon-zu { display: block; }
.burger[aria-expanded="true"] .icon-auf { display: none; }

#kopfleiste.klein { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); border-bottom-color: var(--grau-rand); }   /* kleine Leiste: Linie und leichter Schatten; die große ohne Linie */
#kopfleiste.klein .kopf { padding-top: 3px; padding-bottom: 3px; }
#kopfleiste.klein .kopf-logo { width: 26px; height: 26px; }
#kopfleiste.klein .kopf-logo-gross { opacity: 0; }
#kopfleiste.klein .kopf-logo-klein { opacity: 1; }
#kopfleiste.klein .kopf-name { font-size: 19px; }
#kopfleiste.klein .logo-text { gap: 0; }   /* ohne Abstand zum eingeklappten Untertitel: Schriftzug mittig zum Logo */
#kopfleiste.klein .kopf-claim { opacity: 0; max-height: 0; }
#kopfleiste.klein .nav-desktop a { min-height: 36px; font-size: 15px; }
#kopfleiste.klein .burger { width: 40px; height: 40px; }

/* Menü */
.menu-panel a:focus-visible { outline-offset: -2px; }   /* Rahmen innen: das Menü schneidet seitlich ab */
.menu-panel {
  display: flex; flex-direction: column; max-height: calc(100vh - 80px); overflow-x: hidden; overflow-y: auto; padding-bottom: 20px;
  box-sizing: border-box; overscroll-behavior: contain;
  /* liegt unter der Leiste, statt sie zu verlängern: Die Leiste bleibt gleich hoch, Menü und Abdunkeln blenden
     gemeinsam aus. overflow-x hidden, sonst zeigt iOS beim Hereingleiten der Einträge einen Rollbalken */
  position: absolute; top: 100%; left: 0; right: 0; background: var(--weiss);
}
.menu-panel a {
  min-height: 56px; display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--grau-rand);
  text-decoration: none; color: var(--schwarz); font-size: 20px; font-weight: 600;
}
.menu-panel a:last-child { border-bottom: 1px solid var(--grau-rand); }
/* „App öffnen“ als vierte Zeile wie die übrigen, rechts statt des Doppelbalkens der grüne Kreis mit Play-Dreieck
   (28 px, beim Darüberfahren blau wie das Symbol in der Kopfleiste) */
.mi-app svg { flex: none; width: 28px; height: 28px; margin-right: -2px; }
.mi-app circle { transition: fill .15s ease; }
.mi-app:hover circle { fill: var(--blau); }
.menu-panel a > span:first-child { flex: 1 1 auto; }
/* Doppelbalken auf ganzen Pixeln: 8 px hoch (2 + 3 + 2 und 1 frei), so liegt er mittig in der Zeile nicht auf halben Pixeln */
.mbalken { flex: none; display: flex; flex-direction: column; gap: 3px; height: 8px; }
.mbar1, .mbar2 { height: 2px; background: var(--schwarz); }
.mbar1 { width: 18px; } .mbar2 { width: 24px; }
@keyframes menuIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes barIn { from { transform: translateX(36px); } to { transform: none; } }
@keyframes panelOut { from { opacity: 1; } to { opacity: 0; } }
.mi { animation: menuIn .45s var(--leicht) both; }
.mi2 { animation-delay: .07s; } .mi3 { animation-delay: .14s; } .mi4 { animation-delay: .21s; }
.mi .mbar1 { animation: barIn .7s var(--leicht) .15s both; }
.mi .mbar2 { animation: barIn .7s var(--leicht) .22s both; }
.menu-panel.zu { animation: panelOut .18s ease both; }
.zu .mi, .zu .mbar1, .zu .mbar2 { animation: none; }

#kopf-abstand { height: 88px; }

/* Offenes Menü: Seite dahinter abgedunkelt und nicht scrollbar; die Kopfleiste (z-index 50) bleibt hell */
html.menue-offen, html.menue-offen body { overflow: hidden; }
.abdunkeln { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .4); animation: dunkelIn .2s ease both; }
.abdunkeln.zu { animation: panelOut .18s ease both; }
@keyframes dunkelIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Kopfbereich ---------- */
.kopfbereich {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(40px, 7vw, 64px);
  padding-top: clamp(20px, 5vw, 48px); padding-bottom: clamp(56px, 10vw, 96px);
}
/* „V“ unten mittig im bildschirmfüllenden Kopfbereich: führt zu „Was die App kann“ */
.weiter {
  display: none; position: absolute; left: 50%; bottom: 24px; width: 48px; height: 48px; margin-left: -24px;
  align-items: center; justify-content: center;
}
.kopftext { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.zeile-buch { font-size: 22px; font-weight: 600; font-variant-caps: small-caps; }
h1 { font-size: clamp(44px, 10vw, 72px); line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.kopftext p { max-width: 32em; font-size: clamp(18px, 4.6vw, 21px); line-height: 1.45; }
.knopf-zeile { padding-top: 8px; }

.knopf-app {
  display: inline-flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 30px 0 12px; box-sizing: border-box;
  background: var(--schwarz); color: var(--weiss); border-radius: 999px; text-decoration: none; font-size: 20px; font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.knopf-app svg { width: 40px; height: 40px; flex: none; }
/* Darüberfahren wie bei den Links: blau statt schwarz, ohne Bewegung. Tastatur: blauer Fokusrahmen */
.knopf-app:hover { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
/* Grün auf Blau beißt sich: beim Darüberfahren Kreis weiß, Dreieck blau */
.knopf-app svg circle, .knopf-app svg path { transition: fill .15s ease; }
.knopf-app:hover svg circle { fill: var(--weiss); }
.knopf-app:hover svg path { fill: var(--blau); }

.geraete-spalte { flex: 1 1 440px; min-width: 0; display: flex; justify-content: center; }
.geraete { position: relative; width: 100%; max-width: 640px; aspect-ratio: 5 / 4; container-type: inline-size; }
/* Rahmen und Rundungen wachsen mit der Fläche: Werte in px bei voller Breite (640 px), mal --g (1 px bei 640 px).
   Feste px machten kleine Geräte zu Pillen (Handy rund 45 px breit mit 20 px Radius). */
.geraete > * { --g: calc(100cqw / 640); }
/* Geräte: das Seitenverhältnis gilt für den Bildschirm (content-box), der Rahmen liegt außen; so passt der Screenshot
   genau hinein und nichts wird abgeschnitten. Innere Rundung = Radius − Rahmen, klein gehalten.
   Anordnung wie üblich: Laptop in der Mitte, Tablet links und Handy rechts davor, alle auf derselben Grundlinie
   (10 % über der Unterkante der Fläche). */
.geraet { position: absolute; box-sizing: content-box; background: var(--weiss); border: solid var(--schwarz); overflow: hidden; }
.geraet img { width: 100%; height: 100%; }
.geraet.computer {
  left: calc(14% - 6 * var(--g)); bottom: 12.4%; width: 72%; aspect-ratio: 16 / 10;
  border-width: calc(6 * var(--g)); border-radius: calc(10 * var(--g)) calc(10 * var(--g)) calc(4 * var(--g)) calc(4 * var(--g));
}
/* Unterschale des Laptops: unter dem Bildschirm auf der Grundlinie, je 5 % breiter als der Bildschirm, unten
   abgerundet, oben mittig die Griffmulde */
.laptop-fuss {
  position: absolute; left: calc(10.4% - 6 * var(--g)); bottom: 10%; width: calc(79.2% + 12 * var(--g)); height: 2.4%;
  background: var(--schwarz); border-radius: calc(2 * var(--g)) calc(2 * var(--g)) calc(12 * var(--g)) calc(12 * var(--g)) / calc(2 * var(--g)) calc(2 * var(--g)) 100% 100%;
}
.laptop-fuss::before {
  content: ""; position: absolute; left: 43%; top: 0; width: 14%; height: 45%;
  background: var(--grau-kessel); border-radius: 0 0 calc(6 * var(--g)) calc(6 * var(--g));
}
/* Tablet quer wie das iPad Air (1180 × 820), etwas höher als das Handy */
.geraet.tablet { left: 0; bottom: 10%; width: 46%; aspect-ratio: 1180 / 820; border-width: calc(8 * var(--g)); border-radius: calc(14 * var(--g)); }
/* Handy wie das iPhone (390 × 844) */
.geraet.handy { left: 80%; bottom: 10%; width: 14%; aspect-ratio: 390 / 844; border-width: calc(5 * var(--g)); border-radius: calc(20 * var(--g)); }
[data-par] { will-change: transform; }

/* Icon-Kreise im Hintergrund: Lage in % der Fläche der Geräte */
.hkreis { position: absolute; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hkreis img { width: 52%; height: 52%; }   /* Icon 52 % des Kreises */
.hkreis.fav { background: var(--gelb); }
.hkreis.fav img { width: 61%; height: 61%; }   /* Stern wie in der App größer als die übrigen Zeichen (26 statt 22 px) */
/* Lage so, dass beim Laden kein Gerät ein Icon verdeckt (die Kreise liegen hinter den Geräten) */
.geraete .hk-buch { left: 68%; top: -9%; width: 25%; }
.geraete .hk-metronom { left: 91%; top: 24%; width: 13%; }
.geraete .hk-baukasten { left: -5%; top: 21%; width: 14%; }
.geraete .hk-lieder { left: 83%; top: 95%; width: 16%; }
.geraete .hk-fav { left: 50%; top: 95%; width: 11%; }

/* ---------- Abschnittsüberschriften wie Kapitelüberschriften ---------- */
.kap {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0.75em; white-space: nowrap;
  font-size: clamp(20px, calc((100vw - 40px) / 15.2), 48px); line-height: 1.1; font-weight: 700; letter-spacing: 0;
}
.balken { flex: 0 1 4em; min-width: 1.4em; display: flex; flex-direction: column; gap: 0.1em; padding-top: 0.08em; }
.balken span { height: 0.0625em; min-height: 2px; background: currentColor; }
.balken span:first-child { width: 75%; }
.balken span:last-child { width: 100%; }

/* ---------- Karten ---------- */
.karte { display: flex; flex-direction: column; background: var(--weiss); color: var(--schwarz); border: 1.5px solid var(--grau-rand); }
.karte-kopf { display: flex; align-items: center; gap: 12px; }
.ikreis { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--schwarz); display: flex; align-items: center; justify-content: center; }
.ikreis img, .ikreis svg { width: 24px; height: 24px; }
.f-blau { background: var(--blau); } .f-rot { background: var(--rot); }
.f-gruen { background: var(--gruen); } .f-magenta { background: var(--magenta); }
h3 { font-size: 24px; font-weight: 600; }
.karte p { font-size: 17px; line-height: 1.5; }

/* Was die App kann */
#funktionen { position: relative; background: var(--grau-flaeche); }
.funktionen-innen {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 36px;
  padding-top: clamp(32px, 6vw, 48px); padding-bottom: clamp(56px, 10vw, 88px);
}
.karten { display: flex; flex-wrap: wrap; gap: 20px; }
.karte-buch {
  flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: clamp(24px, 5vw, 40px) 48px;
  padding: clamp(18px, 4.5vw, 40px); border-radius: 32px;
}
.karte-buch .bild { flex: 999 1 480px; min-width: 0; margin-bottom: 0; }
.karte-buch .text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.karte-buch .text p { font-size: 19px; }
.karte-klein { flex: 1 1 200px; gap: 14px; padding: clamp(18px, 4.5vw, 28px); border-radius: 28px; }
/* Seitenverhältnis für das Bild innen (content-box), der Rahmen liegt außen: der Screenshot passt genau */
.bild {
  position: relative; margin-bottom: 6px; box-sizing: content-box; aspect-ratio: 16 / 10; overflow: hidden; background: var(--weiss);
  border: 4px solid var(--grau-kessel); border-radius: 10px;
}
.bild img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* Was du brauchst */
#brauchst { position: relative; overflow: clip; background: var(--weiss); }
.brauchst-innen {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 36px;
  padding-top: clamp(56px, 10vw, 88px); padding-bottom: clamp(56px, 10vw, 88px);
}
/* Schlagzeug groß und mittig unter der Überschrift (Desktop höchstens 760 px), die Karten laufen beim Scrollen darüber */
.drum-m { position: relative; z-index: 0; width: min(100%, 760px); margin: 0 auto; }
#brauchst .kap { position: relative; z-index: 1; }   /* Überschrift vor dem Schlagzeug */
#drum-m { width: 100%; height: auto; aspect-ratio: 1759 / 1384; }
.brauchst-reihe { position: relative; z-index: 2; display: flex; }
/* Karten in drei Spalten: links die Browser-Karte über zwei Reihen, daneben die vier übrigen zu zweit */
.brauchst-karten { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.brauchst-karten .karte { gap: 12px; padding: clamp(20px, 5vw, 28px); border-radius: 28px; }
.brauchst-karten > .karte { grid-row: span 2; }
.brauchst-spalte { display: contents; }
.browser { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--grau-rand); }
.browser li {
  display: flex; justify-content: space-between; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--grau-rand); font-size: 17px;
}
.browser li > span:first-child { font-weight: 600; }

/* Auf den Startbildschirm */
#starten { position: relative; background: var(--blau); color: var(--weiss); }
.starten-innen {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px;
  padding-top: clamp(56px, 10vw, 88px); padding-bottom: clamp(56px, 10vw, 88px);
}
.starten-innen > p { margin-bottom: 20px; max-width: 40em; font-size: 18px; line-height: 1.5; }
#starten .karte { flex: 1 1 200px; gap: 12px; padding: clamp(20px, 5vw, 28px); border: none; border-radius: 28px; }

/* Schluss: nur „App öffnen“, mittig, ohne Bewegung */
#schluss { background: var(--weiss); }
.schluss-innen {
  display: flex; justify-content: center;
  padding-top: clamp(56px, 10vw, 88px); padding-bottom: clamp(56px, 10vw, 88px);
}

/* Footer */
.fusslinie { height: 1px; background: var(--schwarz); }
.fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  padding-top: 24px; padding-bottom: 40px;
}
.copyright { font-size: 14px; }   /* schwarz: Grau (#808080, 3,95 : 1) reicht bei 14 px nicht (WCAG 1.4.3) */
.fuss nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.fuss nav a {
  min-height: 44px; display: inline-flex; align-items: center; text-decoration: none;
  font-size: 16px; font-weight: 600; transition: color .15s ease;
}

/* ---------- Rechtliches (Impressum, Datenschutz) ---------- */
.rechtlich { padding-top: clamp(20px, 5vw, 48px); padding-bottom: clamp(56px, 10vw, 96px); }
.rechtlich h1 { font-size: clamp(36px, 8vw, 56px); margin-bottom: 32px; }
.rechtlich .text { max-width: 40em; font-size: 18px; line-height: 1.5; }
.rechtlich .text h2 { font-size: 22px; font-weight: 700; margin: 32px 0 8px; }
.rechtlich .text p { margin: 0 0 12px; }
.rechtlich .text p:has(> .knopf-text) { margin: 16px 0 24px; }   /* Absatz mit Knopf: Luft davor und danach */

/* Kontaktformular (kontakt.html): Felder 48 px hoch wie die Tippflächen, Rahmen Kesselgrau, Fokus blau */
.formular { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.formular label { font-size: 16px; font-weight: 600; margin-top: 12px; }
.formular input, .formular textarea {
  font: inherit; font-size: 18px; color: var(--schwarz); background: var(--weiss); box-sizing: border-box; width: 100%;
  padding: 10px 14px; border: 1.5px solid var(--grau-text); border-radius: 6px;   /* Rand #808080: 3,95 : 1, #9D9D9D hätte nur 2,71 (WCAG 1.4.11) */
}
.formular input { height: 48px; }
.formular textarea { min-height: 180px; resize: vertical; line-height: 1.4; }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
.formular .hinweis { font-size: 16px; margin: 16px 0 8px; }
.formular .hinweis a { color: inherit; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Schlichter Knopf ohne Kreis, so hoch und rund wie die Felder: Stufe 1 schwarz („Senden“), Stufe 2 nur mit Rand
   (.knopf-rand: „Nachricht schreiben“, „Zur Startseite“) */
.knopf-text { align-self: flex-start; min-height: 48px; padding: 0 28px; font-size: 18px; border: 1.5px solid var(--schwarz); border-radius: 6px; cursor: pointer; font-family: inherit; }
.knopf-rand { background: transparent; color: var(--schwarz); }
.knopf-rand:hover { background: transparent; border-color: var(--blau); color: var(--blau); }
/* Fehlermeldung nach dem Senden, nur wenn die Adresse auf #fehler zeigt */
.meldung { display: none; scroll-margin-top: calc(120px - var(--klein-h)); margin: 20px 0 0; padding: 14px 18px; border-radius: 12px; font-weight: 600; }
.meldung:target { display: block; }
.meldung.fehler { border: 2px solid var(--rot); }
.meldung.fehler a { color: inherit; }
/* Bestätigung nach dem Senden: statt Überschrift, Einleitung und Formular */
.danke { display: none; scroll-margin-top: calc(var(--kopf-h, 89px) - var(--klein-h)); }
.danke h1:focus, .meldung:focus { outline: none; }   /* bekommen nach dem Senden den Fokus (seite.js), ohne Rahmen */
.danke:target { display: block; }
#danke:target ~ .kontakt { display: none; }

/* ---------- Feedbackbogen (feedback.html) ----------
   Werte nach Feedbackbogen.md, „Gestaltung“. Bestätigung und Fehlerzeile wie im Kontaktformular (oben). */
#danke:target ~ .feedback-inhalt { display: none; }
.feedback .intro { max-width: 40em; font-size: 18px; line-height: 1.5; margin: 0 0 28px; }   /* links und so breit wie der Text im Impressum */
.start-zeile { margin: 0; }

/* Fenster über der Seite (nur mit Skript): Kopf mit Fortschritt und Schließen, Inhalt scrollt, Fuß mit den Knöpfen.
   Es ist selbst die Karte (weiß, Radius 28 px); die Schritte darin ohne eigenen Rahmen. Handy: ganzer Bildschirm. */
html.fenster-offen, html.fenster-offen body { overflow: hidden; }
.fenster {
  box-sizing: border-box; width: min(760px, calc(100% - 2 * var(--rand))); max-width: none;
  height: fit-content; max-height: min(820px, calc(100dvh - 48px));   /* so hoch wie der Schritt, höchstens 820 px (auto streckte das modale Fenster) */
  padding: 0; border: 0; border-radius: 28px; background: var(--weiss); color: var(--schwarz);
  font-family: 'Source Sans 3', sans-serif;
}
.fenster[open] { display: flex; flex-direction: column; }
.fenster::backdrop { background: rgba(0, 0, 0, .4); }
.fenster-kopf { flex: none; display: flex; align-items: center; gap: 16px; padding: 16px 16px 8px 28px; }
.fenster-kopf .fortschritt { flex: 1; margin: 0; }
.fenster-zu {
  flex: none; margin-left: auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; color: var(--schwarz); cursor: pointer;
}
.fenster-zu:hover { color: var(--blau); }
.fenster-zu:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 6px; }
.fenster-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 28px 28px; }
.fenster-fuss { flex: none; padding: 16px 28px 20px; border-top: 1.5px solid var(--grau-rand); }
.fenster .schritt { border: 0; border-radius: 0; padding: 0; margin: 0; }

/* Je Schritt eine Karte */
.schritt {
  background: var(--weiss); border: 1.5px solid var(--grau-rand); border-radius: 28px;
  padding: clamp(20px, 5vw, 28px); margin: 0 0 20px;
}
.schritt h2 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.schritt h2:focus { outline: none; }
.bogen .hinweis { font-size: 16px; color: var(--grau-text); margin: 4px 0 0; }

/* Jede Frage ein Block, abgegrenzt nur durch Abstand */
.q { padding: 20px 0 0; }
fieldset.q { border: 0; margin: 0; min-width: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.q legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }   /* float: Legende im Feld statt auf dessen Rahmenlinie */
.q legend + * { clear: both; }
.q > label, .q legend { display: block; font-size: 18px; line-height: 1.4; }
.q > label { margin-bottom: 8px; }
.vorfrage legend { font-weight: 600; }

/* Felder wie im Kontaktformular */
.bogen input[type=text], .bogen textarea, .bogen select {
  font: inherit; font-size: 18px; color: var(--schwarz); background: var(--weiss); box-sizing: border-box; width: 100%;
  padding: 10px 14px; border: 1.5px solid var(--grau-text); border-radius: 6px;
}
.bogen input[type=text], .bogen select { height: 48px; }
.bogen textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
.bogen input[type=text]:focus, .bogen textarea:focus, .bogen select:focus { outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
.bogen ::placeholder { color: var(--grau-text); opacity: 1; }

/* Mehrfachauswahl */
.gruppe label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 18px; cursor: pointer; }
.gruppe input { width: 22px; height: 22px; margin: 0; accent-color: var(--schwarz); }

/* Skala 1–5, Ja/Nein und Gesichter als Reihe gleich breiter Knöpfe; gewählt schwarz */
.punkte, .wahl { display: flex; gap: 8px; }
.punkte label, .wahl label { flex: 1; position: relative; }
.punkte input, .wahl input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.punkte span, .wahl span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box;
  border: 1.5px solid var(--grau-text); border-radius: 6px; font-size: 18px; cursor: pointer;
}
.punkte label:hover span, .wahl label:hover span { border-color: var(--blau); color: var(--blau); }
.punkte input:checked + span, .wahl input:checked + span { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); font-weight: 600; }
.punkte input:focus-visible + span, .wahl input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 2px; }
.gesichter span { flex-direction: column; gap: 2px; min-height: 64px; padding: 6px 4px; font-size: 16px; }
.legende { display: flex; justify-content: space-between; gap: 16px; margin-top: 6px; font-size: 15px; color: var(--grau-text); }

/* Fehlerliste: Seite und Stelle nebeneinander, Text darunter; zwischen den Einträgen nur Abstand, keine Linie */
.fehler-zeile { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 16px 0 0; }
.fehler-zeile + .fehler-zeile { padding-top: 32px; }
.fehler-zeile textarea { grid-column: 1 / -1; min-height: 72px; }
.tempo-zeile { grid-template-columns: 1fr 1fr; }   /* Titel | Interpret, darunter angezeigt | richtig */
.plus {
  width: 100%; min-height: 48px; margin-top: 16px; background: none; font: inherit; font-size: 18px; color: var(--grau-text);
  border: 1.5px dashed var(--grau-kessel); border-radius: 6px; cursor: pointer;
}
.plus:hover { color: var(--blau); border-color: var(--blau); }

/* Knöpfe am Ende */
.bogen .knopf-text:disabled { opacity: .35; cursor: not-allowed; }
.bogen .knopf-text:disabled:hover { background: var(--schwarz); border-color: var(--schwarz); }

/* Meldung im Fenster (leerer Bogen, Senden fehlgeschlagen), gesteuert über hidden */
.bogen-fehler a { color: inherit; }
.bogen-fehler { margin: 0 0 20px; padding: 14px 18px; border: 2px solid var(--rot); border-radius: 12px; font-size: 18px; font-weight: 600; }

/* Ohne Skript: Ein- und Ausblenden je nach Vorfrage über :has() */
.nein, .nur-ja, .nur-nein, .nach-wahl { display: none; }
.bogen:has(#erprobt-ja:checked) .nur-ja { display: block; }
.bogen:has(#erprobt-nein:checked) .nur-nein { display: block; }
.bogen:has(#erprobt-ja:checked) .nach-wahl, .bogen:has(#erprobt-nein:checked) .nach-wahl { display: block; }
.bogen:has(#erprobt-nein:checked) .ja { display: none; }
.bogen:has(#erprobt-nein:checked) .nein { display: inline; }
.bogen:not(:has(#rolle-lehrkraft:checked)) section[data-wenn~="rolle=lehrkraft"],
.bogen:not(:has(#rolle-schueler:checked)) section[data-wenn~="rolle=schueler"],
.bogen:not(:has(#app-ja:checked)) section[data-wenn~="app=ja"],
.bogen:not(:has(#s_app-ja:checked)) section[data-wenn~="s_app=ja"] { display: none; }

/* Schritt für Schritt (nur mit Skript) */
.fortschritt { display: grid; gap: 6px; margin: 0 0 16px; }
.fs-zahl { font-size: 16px; color: var(--grau-text); }
.fs-balken { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.fs-balken button { height: 24px; padding: 0; border: 0; background: none; display: flex; align-items: center; cursor: pointer; }
.fs-balken button::before { content: ""; display: block; width: 100%; height: 8px; border-radius: 4px; background: var(--grau-rand); }
.fs-balken button.erledigt::before { background: var(--grau-kessel); }
.fs-balken button.aktiv::before { background: var(--schwarz); }
.fs-balken button:hover::before { background: var(--blau); }
.fs-balken button:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 4px; }
.schritt-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.schritt-nav .knopf-text { align-self: auto; }
.schritt-nav .unsichtbar { visibility: hidden; }

@media (max-width: 760px) {
  .schritt h2 { font-size: 21px; }
  .fenster { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  .fenster-kopf { padding: 8px 8px 4px 20px; }
  .fenster-inhalt { padding: 8px 20px 24px; }
  .fenster-fuss { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .punkte, .wahl { gap: 6px; }
  .gesichter span { font-size: 15px; }
}

/* ---------- Einblenden ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .8s var(--leicht) both; }
.r2 { animation-delay: .12s; } .r3 { animation-delay: .24s; } .r4 { animation-delay: .36s; }
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}

/* ---------- Desktop und Handy ---------- */
/* Mittlere Breiten: Browser-Karte über die ganze Breite, darunter zwei Spalten */
@media (max-width: 1000px) {
  .brauchst-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brauchst-karten > .karte { grid-row: auto; grid-column: 1 / -1; }
  /* Browser-Karte so hoch wie ihr Inhalt: unter der Liste kein Weiß mehr, also keine Linie unter dem letzten Browser */
  .browser li:last-child { border-bottom: none; padding-bottom: 0; }
}
@media (max-width: 760px) {
  .browser li { flex-direction: column; }
  .kap { font-size: clamp(22px, calc((100vw - 40px) / 13.4), 30px); gap: 0.5em; }
  .balken { flex-basis: 2.4em; }
  h3 { font-size: 21px; }
  .karte-buch .text p { font-size: 17px; }   /* Buch-Karte am Handy nicht größer als die übrigen: Text 17 statt 19 px */
  .brauchst-karten { grid-template-columns: minmax(0, 1fr); }
  /* Footer: Links oben, darunter das Copyright, beides mittig */
  .fuss { flex-direction: column; }
  .fuss nav { justify-content: center; }
  .copyright { order: 2; }
}
/* Bis 900 px das Menü-Symbol (Logo, Schriftzug, Links und App-Symbol brauchen rund 860 px), darüber immer die Links */
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .burger { display: inline-flex; }
}
@media (min-width: 901px) {
  .menu-panel { display: none; }
}
/* Kleine Leiste ab 761 px (Tablet, Computer) größer als am Handy: 61 px statt 47 px */
@media (min-width: 761px) {
  :root { --klein-h: 61px; }
  #kopfleiste.klein .kopf { padding-top: 10px; padding-bottom: 10px; }
  #kopfleiste.klein .kopf-logo { width: 40px; height: 40px; }
  #kopfleiste.klein .kopf-name { font-size: 23px; }
  #kopfleiste.klein .nav-desktop a { min-height: 40px; font-size: 16px; }
}
/* Größere Querformate */
@media (min-width: 761px) and (orientation: landscape) {
  /* Kopfbereich füllt das Fenster unter der Kopfleiste, Inhalt senkrecht in der Mitte */
  .kopfbereich {
    position: relative; box-sizing: border-box; align-content: center;
    min-height: calc(100vh - var(--kopf-h, 89px)); min-height: calc(100svh - var(--kopf-h, 89px));
    column-gap: 112px;   /* der Baukasten-Kreis steht 8 % der Gerätebreite nach links über */
    /* Geräte so groß, wie neben dem Text (460 px) und in der Höhe Platz ist, 300 bis 640 px. In der Höhe: Fenster
       minus Kopfleiste minus 220 px (Innenabstände 144 px und die überstehenden Kreise), mal 5/4 (Seitenverhältnis) */
    --geraete-max: min(640px, calc((100vh - var(--kopf-h, 89px) - 220px) * 1.25));
  }
  .kopfbereich .geraete-spalte { flex-basis: clamp(300px, min(calc(100% - 580px), var(--geraete-max)), 640px); }
  .kopfbereich .geraete { max-width: max(300px, var(--geraete-max)); }
  .kopfbereich .weiter { display: flex; }
  /* Menü nicht über die volle Breite, sondern rechts unter der Leiste, bündig mit dem Inhalt */
  #mobilmenue.menu-panel {
    left: auto; right: max(var(--rand), calc((100% - var(--breite)) / 2)); width: 380px; max-width: none;
    margin: 0; padding: 4px 24px 12px; max-height: calc(100vh - 120px);
    border: 1px solid var(--grau-rand); border-top: none; border-radius: 0 0 20px 20px;
  }
  #mobilmenue a:first-child { border-top: none; }
  #mobilmenue a:last-child { border-bottom: none; }
}

/* Reduzierte Bewegung: keine Animationen */
@media (prefers-reduced-motion: reduce) {
  .rise, .reveal, .mi, .mbar1, .mbar2, .menu-panel.zu, .abdunkeln { animation: none !important; }
  #kopfleiste, .knopf-app, .knopf-app svg *, .nav-app circle, .mi-app circle, .kopf, .kopf-logo, .kopf-logo img, .kopf-name, .kopf-claim, .nav-desktop a, .burger { transition: none; }
}