@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap');

/* =========================================================================
   AI Digital Consulting — Bremen
   Leitidee: "Neun bis siebzehn". Das Tagesband aus acht Stundenfeldern ist
   das einzige Schmuckstück dieser Seite. Alles andere bleibt ruhig:
   Papier, Tinte, Haarlinie, Fliesstext in einer Spalte.
   ========================================================================= */

/* --- 1. Reset ---------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
h1, h2, h3, h4, p, figure, blockquote,
dl, dd, ul, ol { margin: 0; }

ul, ol { padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

summary::-webkit-details-marker { display: none; }

/* --- 2. Tokens --------------------------------------------------------- */

:root {
  /* Palette */
  --papier:       #EFEDE4;   /* Grundfläche: Papier auf dem Besprechungstisch */
  --sand:         #E2DDCE;   /* zweite Fläche, unbelegte Stundenfelder */
  --tinte:        #22201B;   /* Text, dunkle Bänder, Rahmen des Tagesbands */
  --grau:         #5A564D;   /* Nebentext, Beschriftungen an der Skala */
  --bernstein:    #F2B01E;   /* Akzent: das belegte Stundenfeld */
  --bernstein-tief:#8A5A00;  /* Akzent als Textfarbe und Fokusring */
  --kante:        #D9D3C2;   /* abgeleitete Haarlinie aus Sand */

  /* Schrift */
  --schrift-display: 'Chivo', 'Helvetica Neue', Arial, sans-serif;
  --schrift-text: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* Typo-Skala */
  --t-display: clamp(2.15rem, 1.15rem + 4.4vw, 4.4rem);
  --t-h2:      clamp(1.55rem, 1.15rem + 1.8vw, 2.5rem);
  --t-h3:      clamp(1.12rem, 1.02rem + 0.5vw, 1.4rem);
  --t-h4:      1.0625rem;
  --t-lead:    clamp(1.06rem, 1rem + 0.45vw, 1.28rem);
  --t-body:    1.0625rem;
  --t-klein:   0.875rem;
  --t-mini:    0.75rem;

  /* Raum */
  --raum-2xs: 0.25rem;
  --raum-xs:  0.5rem;
  --raum-s:   0.85rem;
  --raum-m:   1.35rem;
  --raum-l:   2.2rem;
  --raum-xl:  3.4rem;
  --raum-sektion: clamp(3rem, 2rem + 4.8vw, 6rem);

  /* Formen: eckig = Maschine/Messung, rund = Handlung */
  --kante-stark: 2px solid var(--tinte);
  --kante-fein: 1px solid var(--kante);
  --radius-knopf: 999px;
  --radius-flaeche: 3px;

  --z-kopf: 30;
  --z-nav: 20;

  --spalte: 68rem;
  --lesebreite: 62ch;
}

/* --- 3. Grundtypografie ------------------------------------------------ */

body {
  background-color: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.72;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-display);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

h2 { font-size: var(--t-h2); }

h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h4 {
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

p { max-width: var(--lesebreite); }

a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--bernstein-tief);
}

a:hover { text-decoration-thickness: 3px; }

strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--bernstein-tief);
  outline-offset: 3px;
  border-radius: 1px;
}

.auf-tinte :focus-visible,
.tagesband :focus-visible { outline-color: var(--bernstein); }

::selection {
  background: var(--bernstein);
  color: var(--tinte);
}

/* --- 4. Hilfsklassen und Layout ---------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--raum-s);
  top: -6rem;
  z-index: 50;
  background: var(--tinte);
  color: var(--papier);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-flaeche);
  text-decoration: none;
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 700;
  transition: top 120ms ease-out;
}

.skip-link:focus { top: var(--raum-s); }

.huelle {
  width: min(100% - 2.2rem, var(--spalte));
  margin-inline: auto;
}

.huelle--weit { width: min(100% - 2.2rem, 78rem); }

/* Abstände zwischen Sektionen: genau hier, nirgends sonst. */
.abschnitt { padding-block: var(--raum-sektion); }
.abschnitt--kompakt { padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }

.abschnitt--sand { background: var(--sand); }
.abschnitt--tinte {
  background: var(--tinte);
  color: var(--papier);
}
.abschnitt--tinte h1,
.abschnitt--tinte h2,
.abschnitt--tinte h3,
.abschnitt--tinte h4 { color: var(--papier); }
.abschnitt--tinte a { color: var(--bernstein); text-decoration-color: var(--bernstein); }
.abschnitt--linie { border-top: var(--kante-fein); }

.kopfzeile { margin-bottom: var(--raum-l); }
.kopfzeile > * + * { margin-top: var(--raum-s); }
.kopfzeile__lead {
  font-size: var(--t-lead);
  line-height: 1.58;
  color: var(--grau);
  max-width: 54ch;
}
.abschnitt--tinte .kopfzeile__lead { color: var(--sand); }

/* Die Skala: acht Teilstriche als Zierleiste über einer Überschrift. */
.skala {
  height: 10px;
  max-width: none;
  margin-bottom: var(--raum-m);
  background-image: repeating-linear-gradient(
    to right,
    var(--tinte) 0 2px,
    transparent 2px calc(100% / 8)
  );
  border-bottom: var(--kante-stark);
}
.abschnitt--tinte .skala {
  background-image: repeating-linear-gradient(
    to right,
    var(--bernstein) 0 2px,
    transparent 2px calc(100% / 8)
  );
  border-bottom-color: var(--bernstein);
}

/* --- 5. Kopf und Navigation -------------------------------------------- */

.kopf {
  position: relative;
  z-index: var(--z-kopf);
  background: var(--papier);
  border-bottom: var(--kante-stark);
}

.kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-s);
  padding-block: var(--raum-s);
}

.marke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--schrift-display);
  text-decoration: none;
  line-height: 1.05;
}

.marke__name {
  font-weight: 900;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.marke__ort {
  font-family: var(--schrift-text);
  font-size: var(--t-mini);
  color: var(--grau);
  letter-spacing: 0.02em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.8rem;
  background: var(--tinte);
  color: var(--papier);
  border: 0;
  border-radius: var(--radius-knopf);
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 700;
}

.nav-toggle svg { width: 18px; height: 18px; }

#site-nav[data-open="false"] { display: none; }

#site-nav[data-open="true"] {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-nav);
  background: var(--tinte);
  border-bottom: 4px solid var(--bernstein);
}

#site-nav ul {
  display: flex;
  flex-direction: column;
}

#site-nav a {
  display: block;
  padding: 0.95rem 1.1rem;
  color: var(--papier);
  font-family: var(--schrift-display);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(239, 237, 228, 0.16);
}

#site-nav a[aria-current="page"] { color: var(--bernstein); }
#site-nav a:hover { background: rgba(242, 176, 30, 0.14); }

/* --- 6. Knöpfe --------------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 2px solid var(--tinte);
  border-radius: var(--radius-knopf);
  background: var(--tinte);
  color: var(--papier);
  font-family: var(--schrift-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  text-align: center;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

.knopf:hover {
  background: var(--bernstein);
  color: var(--tinte);
  border-color: var(--tinte);
  text-decoration: none;
}

.knopf--zweit {
  background: transparent;
  color: var(--tinte);
}

.knopf--zweit:hover { background: var(--bernstein); }

.abschnitt--tinte .knopf {
  background: var(--bernstein);
  border-color: var(--bernstein);
  color: var(--tinte);
}
.abschnitt--tinte .knopf:hover {
  background: var(--papier);
  border-color: var(--papier);
}
.abschnitt--tinte .knopf--zweit {
  background: transparent;
  border-color: var(--papier);
  color: var(--papier);
}
.abschnitt--tinte .knopf--zweit:hover {
  background: var(--papier);
  color: var(--tinte);
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-s);
  max-width: none;
  margin-top: var(--raum-m);
}

/* --- 7. Hero und Tagesband --------------------------------------------- */

.hero { padding-block: clamp(2.4rem, 1.6rem + 4vw, 4.6rem) var(--raum-sektion); }

/* Enge Zeilen, damit "übernimmt" auf dem Telefon nicht getrennt wird. */
.hero__satz { max-width: 14ch; }

.hero__lead {
  margin-top: var(--raum-m);
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 56ch;
}

.hero__note {
  margin-top: var(--raum-m);
  font-size: var(--t-klein);
  color: var(--grau);
  max-width: 44ch;
}

.hero__note b {
  font-family: var(--schrift-display);
  font-weight: 800;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

/* Das Tagesband */
.tagesband { margin-top: var(--raum-xl); }

.tagesband__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--raum-xs);
  max-width: none;
  margin-bottom: var(--raum-xs);
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}

.tagesband__spur {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--kante-stark);
  background: var(--tinte);
  gap: 1px;
  overflow: hidden;
}

.feld {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
  padding: 0.5rem 0.55rem 0.6rem;
  background: var(--sand);
}

.feld[data-belegt="ja"] { background: var(--bernstein); }

.feld__zeit {
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 700;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}

.feld[data-belegt="ja"] .feld__zeit { color: var(--tinte); }

.feld__wort {
  font-family: var(--schrift-display);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.tagesband__fuss {
  margin-top: var(--raum-s);
  font-size: var(--t-klein);
  color: var(--grau);
  max-width: 50ch;
}

/* --- 8. Aufgaben: Maschine | Mensch ------------------------------------ */

.aufgaben { border-top: var(--kante-stark); }

.aufgabe {
  display: grid;
  gap: var(--raum-s);
  padding-block: var(--raum-m);
  border-bottom: var(--kante-fein);
}

/* Die letzte Aufgabe schliesst ohne Trennlinie — sonst hängt eine Kante im Leeren. */
.aufgabe:last-child { border-bottom: 0; }

.aufgabe__name {
  font-size: var(--t-h3);
  font-family: var(--schrift-display);
}

.aufgabe__teil {
  padding: var(--raum-s) var(--raum-m);
  border-radius: var(--radius-flaeche);
}

.aufgabe__teil p { max-width: 46ch; }

.aufgabe__teil--maschine {
  background: var(--bernstein);
  border-left: 6px solid var(--tinte);
}

.aufgabe__teil--mensch {
  background: transparent;
  border-left: 6px solid var(--kante);
}

.aufgabe__rolle {
  display: block;
  margin-bottom: var(--raum-2xs);
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aufgabe__teil--mensch .aufgabe__rolle { color: var(--grau); }

/* --- 9. Tabelle -------------------------------------------------------- */

.tabelle-rahmen {
  overflow-x: auto;
  border: var(--kante-stark);
  background: var(--papier);
}

.tabelle {
  min-width: 34rem;
  font-size: var(--t-klein);
}

.tabelle caption {
  padding: var(--raum-s) var(--raum-m);
  text-align: left;
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grau);
  border-bottom: var(--kante-fein);
}

.tabelle th,
.tabelle td {
  padding: var(--raum-s) var(--raum-m);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--kante-fein);
}

.tabelle thead th {
  background: var(--tinte);
  color: var(--papier);
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 0;
}

.tabelle tbody tr:last-child th,
.tabelle tbody tr:last-child td { border-bottom: 0; }

.tabelle tbody th {
  font-family: var(--schrift-display);
  font-weight: 800;
  font-size: 1rem;
  width: 30%;
}

.tabelle td p { max-width: 42ch; }

/* --- 10. Split --------------------------------------------------------- */

.split { display: grid; gap: var(--raum-l); }

.split__text > * + * { margin-top: var(--raum-m); }

.split__beiblatt {
  align-self: start;
  padding: var(--raum-m);
  background: var(--papier);
  border: var(--kante-stark);
  border-radius: var(--radius-flaeche);
}

.abschnitt--sand .split__beiblatt { background: var(--papier); }

.split__beiblatt h3 { margin-bottom: var(--raum-s); }

.beiblatt-liste { display: grid; gap: var(--raum-s); }

.beiblatt-liste div { display: grid; gap: 2px; }

.beiblatt-liste dt {
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grau);
}

.beiblatt-liste dd {
  margin: 0;
  font-size: var(--t-klein);
  line-height: 1.5;
}

/* --- 11. Listen und Checkliste ----------------------------------------- */

.liste { display: grid; gap: var(--raum-s); max-width: var(--lesebreite); }

.liste li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.6;
}

.liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.85rem;
  height: 0.3rem;
  background: var(--bernstein);
  border-bottom: 2px solid var(--tinte);
}

.liste--nummern { counter-reset: schritt; }

.liste--nummern li { padding-left: 2.4rem; }

.liste--nummern li::before {
  counter-increment: schritt;
  content: counter(schritt);
  top: 0.15em;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  background: var(--tinte);
  color: var(--papier);
  border: 0;
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 800;
}

.checkliste { display: grid; gap: var(--raum-m); }

.check {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--raum-s);
  align-items: start;
  padding-bottom: var(--raum-m);
  border-bottom: var(--kante-fein);
}

.check:last-child { border-bottom: 0; padding-bottom: 0; }

.check svg {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.15em;
  fill: none;
  stroke: var(--tinte);
  stroke-width: 2.4;
  stroke-linecap: square;
}

.check__text h3 { margin-bottom: var(--raum-2xs); }
.check__text p { max-width: 52ch; }

/* --- 12. Kacheln ------------------------------------------------------- */

.kacheln {
  display: grid;
  gap: var(--raum-m);
}

.kachel {
  padding: var(--raum-m);
  background: var(--papier);
  border: var(--kante-fein);
  border-top: var(--kante-stark);
  border-radius: 0 0 var(--radius-flaeche) var(--radius-flaeche);
}

.kachel h3 { margin-bottom: var(--raum-xs); }
.kachel p { max-width: 44ch; font-size: var(--t-klein); line-height: 1.6; }

.kachel--belegt { border-top-color: var(--bernstein); }

/* --- 13. FAQ ----------------------------------------------------------- */

.faq { border-top: var(--kante-stark); max-width: 54rem; }

.faq__punkt { border-bottom: var(--kante-fein); }

.faq__frage {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-s);
  padding: var(--raum-m) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--schrift-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  hyphens: auto;
}

.faq__frage::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--bernstein-tief);
}

.faq__punkt[open] .faq__frage::after { content: "–"; }

.faq__antwort { padding-bottom: var(--raum-m); }

.faq__antwort p + p { margin-top: var(--raum-s); }

/* --- 14. Hinweis / Callout --------------------------------------------- */

.hinweis {
  padding: var(--raum-m) var(--raum-l);
  background: var(--tinte);
  color: var(--papier);
  border-left: 10px solid var(--bernstein);
  border-radius: 0 var(--radius-flaeche) var(--radius-flaeche) 0;
}

.hinweis h2,
.hinweis h3 { color: var(--papier); margin-bottom: var(--raum-xs); }

.hinweis p { max-width: 58ch; }

.hinweis a { color: var(--bernstein); text-decoration-color: var(--bernstein); }

.hinweis--hell {
  background: var(--bernstein);
  color: var(--tinte);
  border-left-color: var(--tinte);
}

.hinweis--hell h2,
.hinweis--hell h3 { color: var(--tinte); }
.hinweis--hell a { color: var(--tinte); text-decoration-color: var(--tinte); }

/* --- 15. Öffnungszeiten als Wochenband --------------------------------- */

/* Das Wochenband läuft auf die volle Spaltenbreite — dieselbe Achtelteilung
   wie die Skala über der Überschrift und wie das Tagesband im Hero. */
.woche { display: grid; gap: var(--raum-xs); max-width: none; }

.tag {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum-2xs);
  align-items: center;
}

.tag__name {
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 700;
}

.tag__spur {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  height: 26px;
  background: var(--tinte);
  border: 2px solid var(--tinte);
}

.tag__feld { background: var(--bernstein); }

.tag[data-offen="nein"] .tag__feld {
  background: var(--sand);
  background-image: repeating-linear-gradient(
    45deg,
    var(--kante) 0 3px,
    var(--sand) 3px 7px
  );
}

.tag__zeit {
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 600;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}

.abschnitt--tinte .tag__name { color: var(--papier); }
.abschnitt--tinte .tag__zeit { color: var(--sand); }
.abschnitt--tinte .tag__spur { background: var(--papier); border-color: var(--papier); }
.abschnitt--tinte .tag[data-offen="nein"] .tag__feld {
  background: var(--tinte);
  background-image: repeating-linear-gradient(
    45deg,
    var(--grau) 0 3px,
    var(--tinte) 3px 7px
  );
}

.woche__skala {
  display: flex;
  justify-content: space-between;
  max-width: none;
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}

.abschnitt--tinte .woche__skala { color: var(--sand); }

/* --- 16. Kontaktfakten und CTA ----------------------------------------- */

.fakten {
  display: grid;
  gap: var(--raum-m);
  border-top: var(--kante-stark);
  padding-top: var(--raum-m);
}

.fakt { display: grid; gap: var(--raum-2xs); align-content: start; }

.fakt dt {
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
}

.fakt dd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
}

.fakt dd a { font-variant-numeric: tabular-nums; }

.abschnitt--tinte .fakt dt { color: var(--bernstein); }
.abschnitt--tinte .fakten { border-top-color: var(--papier); }

.cta {
  display: grid;
  gap: var(--raum-m);
  padding: var(--raum-l);
  background: var(--tinte);
  color: var(--papier);
  border-radius: var(--radius-flaeche);
}

.cta h2 { color: var(--papier); max-width: 18ch; }
.cta p { color: var(--sand); max-width: 48ch; }
.cta .knopf {
  background: var(--bernstein);
  border-color: var(--bernstein);
  color: var(--tinte);
}
.cta .knopf:hover { background: var(--papier); border-color: var(--papier); }
.cta .knopf--zweit {
  background: transparent;
  border-color: var(--papier);
  color: var(--papier);
}
.cta .knopf--zweit:hover { background: var(--papier); color: var(--tinte); }
.cta .knopfreihe { margin-top: 0; }

/* --- 17. Karte (iframe) ------------------------------------------------ */

.karten-rahmen {
  border: var(--kante-stark);
  background: var(--sand);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.karten-rahmen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- 18. Formular ------------------------------------------------------ */

.form {
  display: grid;
  gap: var(--raum-m);
  max-width: 38rem;
  padding: var(--raum-m);
  background: var(--papier);
  border: var(--kante-stark);
  border-radius: var(--radius-flaeche);
}

.form__field { display: grid; gap: var(--raum-2xs); }

.form__field label {
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
  font-weight: 700;
}

.form__hint {
  font-size: var(--t-mini);
  color: var(--grau);
  line-height: 1.4;
}

.form__input {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.8rem;
  background: var(--papier);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-flaeche);
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.4;
}

textarea.form__input { min-height: 8.5rem; resize: vertical; }

select.form__input { appearance: none; background-image: none; }

.form__input::placeholder { color: var(--grau); opacity: 1; }

.form__input:focus-visible {
  outline: 3px solid var(--bernstein-tief);
  outline-offset: 2px;
}

.form__input[aria-invalid="true"] {
  border-color: var(--bernstein-tief);
  background: #F7EDDB;
}

.form__error {
  min-height: 0;
  font-size: var(--t-mini);
  font-weight: 600;
  line-height: 1.4;
  color: var(--bernstein-tief);
}

.form__error:empty { display: none; }

.form__status {
  padding: var(--raum-s) var(--raum-m);
  border-left: 6px solid var(--kante);
  background: var(--sand);
  font-size: var(--t-klein);
  line-height: 1.5;
}

.form__status:empty { display: none; }

.form__status[data-state="pending"] { border-left-color: var(--grau); }

.form__status[data-state="success"] {
  border-left-color: var(--tinte);
  background: var(--bernstein);
}

.form__status[data-state="error"] {
  border-left-color: var(--bernstein-tief);
  background: #F7EDDB;
}

/* --- 19. Prosa (Unterseiten, Impressum, Datenschutz) ------------------- */

.prosa { max-width: var(--lesebreite); }

.prosa > * + * { margin-top: var(--raum-m); }

.prosa h2 {
  margin-top: var(--raum-l);
  padding-top: var(--raum-s);
  border-top: var(--kante-stark);
}

.prosa h3 { margin-top: var(--raum-m); }

.prosa ul,
.prosa ol { display: grid; gap: var(--raum-xs); }

.prosa ul li {
  position: relative;
  padding-left: 1.4rem;
}

.prosa ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.7rem;
  height: 2px;
  background: var(--tinte);
}

.prosa ol { counter-reset: p; }

.prosa ol li {
  position: relative;
  padding-left: 1.9rem;
  counter-increment: p;
}

.prosa ol li::before {
  content: counter(p) ".";
  position: absolute;
  left: 0;
  font-family: var(--schrift-display);
  font-weight: 800;
}

.luecke {
  padding: 0.1em 0.4em;
  background: var(--bernstein);
  border-bottom: 2px solid var(--tinte);
  font-family: var(--schrift-display);
  font-size: 0.9em;
  font-weight: 700;
}

/* --- 20. Fuss ---------------------------------------------------------- */

.fuss {
  background: var(--tinte);
  color: var(--sand);
  padding-block: var(--raum-xl) var(--raum-l);
  font-size: var(--t-klein);
}

.fuss a { color: var(--papier); text-decoration-color: var(--bernstein); }

.fuss__raster {
  display: grid;
  gap: var(--raum-l);
  padding-bottom: var(--raum-m);
  border-bottom: 1px solid rgba(239, 237, 228, 0.22);
}

.fuss h2 {
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bernstein);
  margin-bottom: var(--raum-xs);
}

.fuss p { max-width: 36ch; }

.fuss ul { display: grid; gap: var(--raum-xs); }

.fuss__schluss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-s) var(--raum-m);
  padding-top: var(--raum-m);
  font-size: var(--t-mini);
  color: var(--sand);
}

.fuss__schluss p { max-width: none; }

/* --- 21. Styleguide-Bausteine ------------------------------------------ */

.sg-palette {
  display: grid;
  gap: var(--raum-m);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.sg-farbe {
  border: var(--kante-fein);
  background: var(--papier);
  border-radius: var(--radius-flaeche);
  overflow: hidden;
}

.sg-farbe__flaeche { height: 5.5rem; border-bottom: var(--kante-fein); }
.sg-farbe__papier { background: var(--papier); }
.sg-farbe__sand { background: var(--sand); }
.sg-farbe__tinte { background: var(--tinte); }
.sg-farbe__grau { background: var(--grau); }
.sg-farbe__bernstein { background: var(--bernstein); }
.sg-farbe__bernstein-tief { background: var(--bernstein-tief); }

.sg-farbe__text { padding: var(--raum-xs) var(--raum-s) var(--raum-s); }
.sg-farbe__text b {
  display: block;
  font-family: var(--schrift-display);
  font-size: var(--t-klein);
}
.sg-farbe__text span {
  display: block;
  font-size: var(--t-mini);
  color: var(--grau);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.sg-block {
  padding: var(--raum-m);
  border: var(--kante-fein);
  border-radius: var(--radius-flaeche);
  background: var(--papier);
}

.sg-block + .sg-block { margin-top: var(--raum-m); }

.sg-label {
  display: block;
  margin-bottom: var(--raum-xs);
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
}

.sg-zeile + .sg-zeile { margin-top: var(--raum-m); }

/* --- 22. Bewegung: ein Moment, sonst nichts ---------------------------- */

.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 420ms ease-out, transform 420ms ease-out;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .tagesband .feld {
    animation: feld-an 520ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }

  /* Die Felder setzen sich nacheinander, ohne durchsichtig zu werden. */
  @keyframes feld-an {
    from { transform: translateY(12px); }
    to { transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 23. Breakpoints --------------------------------------------------- */

@media (min-width: 34rem) {
  .hero__satz { max-width: 18ch; }

  /* Die Uhrzeiten stehen über dem Band, nicht über den Wochentagen. */
  .woche__skala {
    display: grid;
    grid-template-columns: 7.5rem 1fr 8.5rem;
    gap: var(--raum-s);
  }

  .woche__skala span { grid-row: 1; grid-column: 2; }
  .woche__skala span:first-child { justify-self: start; }
  .woche__skala span:nth-child(2) { justify-self: center; }
  .woche__skala span:last-child { justify-self: end; }

  .feld { min-height: 108px; }
  .feld__wort { font-size: 0.9rem; }

  .tag {
    grid-template-columns: 7.5rem 1fr 8.5rem;
    gap: var(--raum-s);
  }

  .aufgabe {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .aufgabe__name { grid-column: 1 / -1; }

  .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 52rem) {
  .tagesband__spur { grid-template-columns: repeat(8, 1fr); }

  .feld { min-height: 132px; }

  .split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--raum-xl); }

  .cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: var(--raum-xl);
  }

  .cta__text > * + * { margin-top: var(--raum-s); }

  .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr; }

  /* Breitere Spur, also auch höhere Felder — das Band bleibt ein Band. */
  .tag__spur { height: 32px; }

  /* Breit genug, dass "übernimmt" nicht getrennt werden muss. */
  .hero__satz { max-width: 24ch; }
}

@media (min-width: 62rem) {
  .nav-toggle { display: none; }

  #site-nav[data-open="false"],
  #site-nav[data-open="true"] {
    display: block;
    position: static;
    background: transparent;
    border-bottom: 0;
  }

  #site-nav ul {
    flex-direction: row;
    gap: var(--raum-m);
  }

  #site-nav a {
    padding: 0.35rem 0;
    color: var(--tinte);
    font-size: var(--t-klein);
    border-bottom: 3px solid transparent;
  }

  #site-nav a:hover {
    background: transparent;
    border-bottom-color: var(--bernstein);
  }

  #site-nav a[aria-current="page"] {
    color: var(--tinte);
    border-bottom-color: var(--tinte);
  }

  .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 80rem) {
  .hero__lead { font-size: 1.35rem; }
  .feld { min-height: 148px; }
}

/* === leistungen: Rollenteilung Wir/Sie === */

/* Dieselbe zweigeteilte Form wie auf der Startseite, nur ohne Bernstein:
   hier trennt sie nicht Maschine und Mensch, sondern uns und Sie. Bernstein
   bleibt dem Maschinenanteil vorbehalten. */
.aufgabe__teil--wir {
  background: var(--sand);
  border-left: 6px solid var(--tinte);
}

.abschnitt--sand .aufgabe__teil--wir { background: var(--papier); }

.aufgabe__teil--sie {
  background: transparent;
  border-left: 6px solid var(--kante);
}

.aufgabe__teil--sie .aufgabe__rolle { color: var(--grau); }

/* === leistungen: Ergebniszeile === */

/* Was nach einem Format in Ihrer Hand liegt, steht unter beiden Hälften und
   läuft über die volle Breite — es gehört keiner der beiden Rollen allein. */
.aufgabe__ergebnis {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--raum-2xs);
  padding-top: var(--raum-s);
  border-top: var(--kante-fein);
}

.aufgabe__ergebnis .aufgabe__rolle { color: var(--grau); }
.aufgabe__ergebnis p { max-width: var(--lesebreite); }

/* === arbeitstag: Sprungband === */

/* Im Tagesband der Arbeitstagseite ist jedes der acht Felder ein Sprungziel.
   Die Fläche bleibt dieselbe Messfläche, der Link füllt sie vollständig aus. */
.feld--sprung { padding: 0; }

.feld__sprung {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--raum-xs);
  height: 100%;
  padding: 0.5rem 0.55rem 0.6rem;
  color: var(--tinte);
  text-decoration: none;
}

.feld--sprung .feld__zeit { color: var(--grau); }
.feld--sprung[data-belegt="ja"] .feld__zeit { color: var(--tinte); }

.feld__sprung:hover .feld__wort {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--tinte);
}

/* === arbeitstag: Stundenmarke === */

/* Ein Stundenfeld im Kleinformat vor der Überschrift: bernsteinfarben, wenn
   in dieser Stunde etwas an eine Software übergeht, sonst sandfarben. */
.stunde-marke {
  display: inline-block;
  min-width: 2.5rem;
  margin-right: 0.55rem;
  padding: 0.05em 0.45rem;
  background: var(--bernstein);
  border-bottom: 2px solid var(--tinte);
  color: var(--tinte);
  font-family: var(--schrift-display);
  font-size: var(--t-mini);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.2em;
}

.stunde-marke--frei { background: var(--sand); }

/* === arbeitstag: volle Hälfte === */

/* Stunden ohne Maschinenanteil haben nur eine Hälfte — sie nimmt dann die
   ganze Breite ein, statt eine leere Spalte daneben stehen zu lassen. */
.aufgabe__teil--voll { grid-column: 1 / -1; }

.aufgabe[id] { scroll-margin-top: var(--raum-m); }

/* === kontakt: Karte === */

/* Bildunterschrift unter dem Kartenrahmen, in derselben Schriftgrösse wie
   die Bildunterschrift des Tagesbands. */
.karten-figur { margin-top: var(--raum-m); }

.karten-figur figcaption {
  margin-top: var(--raum-s);
  font-size: var(--t-klein);
  color: var(--grau);
  max-width: 54ch;
}

/* === prosa: Beiblattzeile === */

/* Impressum und Datenschutz brauchen an zwei Stellen eine Angabe mit
   Beschriftung — dieselbe Form wie im Beiblatt der Startseite. */
.prosa .beiblatt-liste {
  padding: var(--raum-m);
  background: var(--papier);
  border: var(--kante-stark);
  border-radius: var(--radius-flaeche);
}

.abschnitt--sand .prosa .beiblatt-liste { background: var(--papier); }

/* === unterseiten: Abstand nach dem Einstieg === */

/* Auf den Unterseiten folgt auf den Lead ein Prosablock, und auf die Prosa
   folgen Formular, Liste oder Hinweis. Der Abstand steht hier an einer
   Stelle — die Sektionsabstände bleiben davon unberührt. */
.hero__lead + .prosa,
.prosa + .form,
.form + .prosa,
.liste + .prosa,
.liste + .hinweis,
.woche + .prosa,
.tagesband + .aufgaben { margin-top: var(--raum-l); }

.tagesband + .aufgaben { margin-top: var(--raum-xl); }