/* Krisana Yoga – der ganze Look.
   Farben und Schriften stehen oben als Variablen, darunter kommen die Abschnitte
   in der Reihenfolge, in der sie auf der Seite erscheinen. Warum so: DESIGN.md */

@font-face {
  font-family: "Newsreader";
  src: url("schriften/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("schriften/newsreader-kursiv.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("schriften/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben „Sand & Beige“ (Yannis, 13.10.2026 – Krissi wünscht sich Pastell bzw. Braun-Beige) */
  --grund: #FBF7F0;              /* Seitengrund, cremeweiß – auch helle Schrift auf Fotos und Knöpfen */
  --flaeche: #EFE4D2;            /* Kopf, Termine, Stimmen, Fuß */
  --flaeche-tief: #DCC9AC;
  --haupt: #7E5536;              /* Braun: Überschriften und Knöpfe */
  --haupt-tief: #5E3D25;
  --akzent: #E8CFB4;             /* Karamell: „Zum ersten Mal“, „Lust bekommen?“, Knopf auf Fotos */
  --kasten: #F5ECE0;             /* Kontakt, Hinweiskästen */
  --logo-gruen: #43965F;         /* Linien des Lotus – bis Krissis eigenes Logo kommt */
  --logo-blau: #3F8ED3;          /* Welle unter dem Lotus */
  --logo-blau-schrift: #1D69AC;  /* „YOGA“ im Logo */
  --tinte: #2E2219;              /* Fließtext, warmes Dunkelbraun */
  --tinte-leise: #6E5A4B;

  /* Dieselben Farben als Zahlen, für durchsichtige Töne: rgb(var(--tinte-rgb) / 0.2) */
  --tinte-rgb: 46 34 25;         /* Linien, Schatten */
  --dunkel-rgb: 40 26 16;        /* Verlauf über Fotos, Schleier hinter Fenstern */
  --haupt-rgb: 126 85 54;        /* zarte Flächen beim Drüberfahren */
  --grund-rgb: 251 247 240;      /* heller Rand auf Fotos */
  --linie: rgb(var(--tinte-rgb) / 0.14);

  /* Die Farben für die Länge der Stunden stehen in termine.js (LAENGEN) */

  --schrift-titel: "Newsreader", Georgia, serif;
  --schrift-text: "Hanken Grotesk", system-ui, sans-serif;

  --rand: clamp(1rem, 4vw, 3.5rem);     /* Abstand links und rechts */
  --abschnitt: clamp(4.5rem, 10vw, 9rem); /* Abstand oben und unten */
  --breite: 84rem;
  --kopf-hoehe: 4.5rem;
  --band-hoehe: 1.5rem;                 /* farbiger Streifen ganz oben */
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Grundlagen ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }

h2 {
  font-family: var(--schrift-titel);
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 350;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--haupt);
}

h3 { font-size: 1.125rem; font-weight: 650; line-height: 1.3; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--haupt); outline-offset: 3px; border-radius: 4px; }

.sprunglink {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--haupt);
  color: var(--grund);
  border-radius: 999px;
}
.sprunglink:focus { top: 1rem; }

/* Unsichtbar, aber Vorlese-Programme lesen es vor (z. B. „Telefon:“ vor der Nummer im Fuß) */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gross {
  font-family: var(--schrift-titel);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  color: var(--haupt);
}

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1.5px solid var(--haupt);
  border-radius: 999px;
  background: var(--haupt);
  color: var(--grund);
  font: 600 1rem/1 var(--schrift-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--weich);
}
.knopf:hover { background: var(--haupt-tief); border-color: var(--haupt-tief); }
.knopf:active { transform: scale(0.97); }
.knopf[disabled] { opacity: 0.55; cursor: progress; }

.knopf-klein { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.9375rem; }
.knopf-breit { width: 100%; }
.knopf-hell { background: var(--akzent); border-color: var(--akzent); color: var(--haupt-tief); }
.knopf-hell:hover { background: var(--grund); border-color: var(--grund); }
.knopf-rand { background: transparent; border-color: rgb(var(--grund-rgb) / 0.7); color: var(--grund); }
.knopf-rand:hover { background: rgb(var(--grund-rgb) / 0.15); border-color: var(--grund); }
.knopf-leise { background: transparent; color: var(--haupt); }
.knopf-leise:hover { background: rgb(var(--haupt-rgb) / 0.08); border-color: var(--haupt); }

.rund {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1.5px solid var(--haupt);
  border-radius: 50%;
  background: transparent;
  color: var(--haupt);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.rund:hover { background: var(--haupt); color: var(--grund); }
.rund[disabled] { opacity: 0.3; pointer-events: none; }

/* ---------- Blauer Streifen ganz oben ---------- */

/* Yannis, 8.10.: der Balken ganz oben bleibt, aber ohne Text (seit 13.10. in Karamell) */
body::before {
  content: "";
  display: block;
  height: var(--band-hoehe);
  background: var(--akzent);
}

/* ---------- Kopf ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--kopf-hoehe);
  padding: 0 var(--rand);
  background: var(--flaeche);
  color: var(--haupt);
  box-shadow: 0 1px 0 rgb(var(--tinte-rgb) / 0.08), 0 10px 24px -18px rgb(var(--tinte-rgb) / 0.35);
}

/* Das Logo (Lotus + „Krisana / YOGA“). Alle Maße in em, so lässt es sich über die Schriftgröße
   einfach größer machen (im Fuß). Die Farben des Lotus stehen als Variablen dort, wo das Logo sitzt. */
.marke {
  /* Fassung für den hellen Grund von Kopf und Fuß; die Mitte ist weiß, damit sie sich vom Grund abhebt */
  --lotus-linie: var(--logo-gruen);
  --lotus-mitte: #fff;
  --lotus-flaeche: var(--flaeche);
  --lotus-welle: var(--logo-blau);
  display: flex;
  align-items: center;
  gap: 0.6em;
  text-decoration: none;
}
.marke-zeichen { flex: none; width: auto; height: 2.5em; }
.marke-schrift { display: grid; justify-items: start; line-height: 1; }
.marke-name {
  font-family: var(--schrift-titel);
  font-size: 1.7em;
  font-style: italic;
  font-weight: 380;
  letter-spacing: -0.015em;
}
.marke-zusatz {
  margin-top: 0.2em;
  padding-left: 0.12em;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--logo-blau-schrift);
}

.menue { position: relative; display: flex; align-items: center; gap: clamp(0.25rem, 1vw, 1rem); }
.menue a:not(.knopf) { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.45rem; }
.icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.menue a:not(.knopf) { font-weight: 550; text-decoration: none; padding: 0.5rem 0.9rem; border-radius: 999px; }
.menue .knopf { margin-left: clamp(0.25rem, 1vw, 1rem); }

/* Der weiße Block hinter einem Menüpunkt (Yannis, 8.10.). Er sitzt unter dem Abschnitt, in dem man
   gerade ist, wandert beim Scrollen mit und springt zum Menüpunkt unter der Maus.
   seite.js setzt Stelle und Größe; hier steht nur, wie er aussieht und wie weich er gleitet. */
.menue-zeiger {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(var(--tinte-rgb) / 0.08), 0 6px 16px -8px rgb(var(--tinte-rgb) / 0.25);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--weich), width 0.45s var(--weich), height 0.45s var(--weich), opacity 0.3s;
}
.menue-zeiger.ist-sichtbar { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .menue-zeiger { transition: none; } }

.menue-knopf { display: none; }

@media (max-width: 59.99em) {
  .menue-knopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 2.75rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font: 600 1rem var(--schrift-text);
    cursor: pointer;
    position: relative;
    z-index: 2;
  }
  .menue-knopf-striche,
  .menue-knopf-striche::before {
    display: block;
    width: 1.4rem;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.3s var(--weich);
  }
  .menue-knopf-striche { position: relative; transform: translateY(-3px); }
  .menue-knopf-striche::before { content: ""; position: absolute; top: 6px; }
  .menue-knopf[aria-expanded="true"] .menue-knopf-striche { transform: rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .menue-knopf-striche::before { transform: translateY(-6px) rotate(-90deg); }

  .menue {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    padding: var(--kopf-hoehe) var(--rand) 2rem;
    background: var(--flaeche);
    color: var(--haupt);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0s 0.3s;
  }
  .menue a:not(.knopf) {
    gap: 0.75rem;
    padding: 0.15rem 0.75rem;
    font-family: var(--schrift-titel);
    font-size: 2.6rem;
    font-weight: 350;
    line-height: 1.25;
  }
  .menue .icon { width: 0.8em; height: 0.8em; stroke-width: 1.5; }
  .menue .knopf { margin: 1.5rem 0 0; }
  .kopf.menue-offen .menue { visibility: visible; opacity: 1; transition: opacity 0.3s; }
  .marke { position: relative; z-index: 2; }
}

/* ---------- Start ---------- */

.start {
  position: relative;
  display: grid;
  align-items: end;
  min-height: max(34rem, calc(100svh - var(--kopf-hoehe) - var(--band-hoehe)));
  padding: 2rem var(--rand) clamp(2rem, 6vw, 4.5rem);
  color: var(--grund);
  isolation: isolate;
  overflow: hidden;
}

.start-bilder { position: absolute; inset: 0; z-index: -1; background: var(--haupt); }
.start-bilder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.8s ease, transform 9s linear;
}
/* Jedes Foto steckt in einem <picture> (am Handy ein Hochformat-Foto) */
.start-bilder > :nth-child(1) img { object-position: 72% 40%; }
.start-bilder > :nth-child(2) img { object-position: 55% 60%; }
.start-bilder > :nth-child(3) img { object-position: 50% 65%; }
.start-bilder img.ist-sichtbar { opacity: 1; transform: scale(1); }
.start-bilder > :first-child img { opacity: 1; }
.start-bilder.laeuft > :first-child img:not(.ist-sichtbar) { opacity: 0; }

/* Dunkler Verlauf unten und oben, damit Schrift und Menü lesbar bleiben */
.start::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(var(--dunkel-rgb) / 0.72), rgb(var(--dunkel-rgb) / 0.2) 48%, transparent 65%);
  pointer-events: none;
}

.start-text { max-width: 44rem; }

.start h1 {
  font-family: var(--schrift-titel);
  font-size: clamp(3.6rem, 10.5vw, 9.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: 0.3em;
}

.start-satz {
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  margin-bottom: 1.75rem;
}

.start-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Die eine Bewegung beim Laden: Name und Satz steigen aus dem Foto auf */
@media (prefers-reduced-motion: no-preference) {
  .start h1, .start-satz, .start-knoepfe, .naechste.ist-bereit {
    animation: aufsteigen 1.1s var(--weich) both;
  }
  .start-satz { animation-delay: 0.12s; }
  .start-knoepfe { animation-delay: 0.22s; }
  .naechste.ist-bereit { animation-delay: 0.3s; }
}
@keyframes aufsteigen {
  from { opacity: 0; transform: translateY(1.5rem); }
}

.naechste {
  position: absolute;
  right: var(--rand);
  bottom: clamp(2rem, 6vw, 4.5rem);
  width: 20rem;
}
.naechste:not(.ist-bereit) { visibility: hidden; } /* Platz ist reserviert, gezeigt wird erst mit Inhalt */
.naechste-titel { margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.naechste-karte {
  display: grid;
  gap: 0.15rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border-radius: 14px;
  background: var(--grund);
  color: var(--tinte);
  text-decoration: none;
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(var(--dunkel-rgb) / 0.6);
  transition: transform 0.35s var(--weich);
}
.naechste-karte:hover { transform: translateY(-3px); }
.naechste-wann { font-weight: 650; }
.naechste-dauer {
  font-family: var(--schrift-titel);
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1.2;
  color: var(--haupt);
}
.naechste-status { font-size: 0.9375rem; color: var(--tinte-leise); }
.naechste-los { margin-top: 0.5rem; font-weight: 650; color: var(--haupt); text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 59.99em) {
  .naechste { position: static; width: auto; margin-top: 2rem; max-width: 26rem; }
  .naechste-titel { color: var(--grund); }
  /* Etwas höher als der Bildschirm, damit Titel und Karte unter dem Gesicht landen */
  .start { min-height: calc(100svh - var(--kopf-hoehe) + 8rem); }
  .start-bilder > :nth-child(1) img { object-position: 50% 20%; }
  .start-bilder > :nth-child(2) img { object-position: 50% 40%; }
  .start-bilder > :nth-child(3) img { object-position: 50% 30%; }
}

/* ---------- Abschnitte allgemein ---------- */

main > section { padding: var(--abschnitt) var(--rand); }
main > section > * { max-width: var(--breite); margin-inline: auto; }
main > .start > * { max-width: none; margin: 0; }
.ohne-start main > section:first-child { padding-top: clamp(3rem, 7vw, 6rem); }

/* ---------- Reinfliegen beim Runterscrollen ----------
   Alles mit data-rein ist erst unsichtbar und kommt rein, sobald es ins Bild scrollt (seite.js).
   data-rein="links" oder "rechts" kommt von der Seite, ein leeres data-rein von unten.
   Die Klasse rein-an setzt seite.js nur, wenn Bewegung erlaubt ist – sonst ist alles sofort da. */

main { overflow-x: clip; } /* was von der Seite kommt, macht die Seite nicht breiter */

.rein-an [data-rein] {
  transition: opacity 0.9s ease, transform 1.1s var(--weich);
  transition-delay: var(--rein-pause, 0s);
}
.rein-an [data-rein]:not(.ist-da) { opacity: 0; transform: translateY(2.5rem); }
.rein-an [data-rein="links"]:not(.ist-da) { transform: translateX(-5rem); }
.rein-an [data-rein="rechts"]:not(.ist-da) { transform: translateX(5rem); }

/* ---------- Über mich ---------- */

.ueber {
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.ueber > * { margin: 0; }
.ueber-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: 4px; }
.ueber-text { max-width: 36rem; }
.ueber-text h2 { margin-bottom: 1.5rem; }

@media (min-width: 50em) {
  .ueber {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
  }
}

/* ---------- Fotoband: wandert endlos nach links ---------- */

.band { padding-inline: 0; overflow: hidden; }
.band > .band-reihe { max-width: none; margin: 0; }
.band-reihe {
  --abstand: clamp(0.6rem, 1.2vw, 1rem);
  display: flex;
  gap: var(--abstand);
  width: max-content;
  animation: wandern 70s linear infinite;
}
.band-reihe img {
  flex: none;
  height: clamp(20rem, 62vh, 38rem);
  width: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 4px;
}
/* Die Reihe besteht aus den Fotos und ihrer Kopie. Ist die erste Hälfte durchgelaufen,
   steht die Kopie genau dort, wo das Original anfing – so sieht man keinen Sprung. */
@keyframes wandern {
  to { transform: translateX(calc(-50% - var(--abstand) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
  .band { overflow-x: auto; }
  .band-reihe { animation: none; padding-inline: var(--rand); }
}

/* ---------- Stundenplan ---------- */

.plan { background: var(--flaeche); }
.plan-kopf { margin-bottom: 2rem; }
.plan-kopf h2 { margin-bottom: 1rem; }
.plan-kopf p { max-width: 50ch; }

.plan-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}
.plan-woche { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.plan-zeitraum {
  min-width: 11ch;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  text-align: center;
  color: var(--haupt);
}

.plan-datum { position: relative; }
.plan-datum-knopf {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font: 600 1rem var(--schrift-text);
  color: var(--haupt);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.plan-datum-knopf:hover { background: rgb(var(--haupt-rgb) / 0.08); }

/* Der kleine Kalender unter „Zu einem Tag springen“ (kalender.js) */
.kalender {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 10;
  width: 20.5rem;
  padding: 1rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1.25rem 3rem -1rem rgb(var(--dunkel-rgb) / 0.35);
}
.kalender[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .kalender:not([hidden]) { animation: kalender-auf 0.25s var(--weich); }
}
@keyframes kalender-auf { from { opacity: 0; transform: translateY(-0.5rem); } }
.kalender-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.kalender-monat { margin: 0; font-family: var(--schrift-titel); font-size: 1.3rem; color: var(--haupt); }
.kalender-pfeil {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--haupt);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.kalender-pfeil:hover { background: var(--flaeche); }
.kalender-pfeil[disabled] { opacity: 0.25; pointer-events: none; }
.kalender-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; }
.kalender-wochentag { padding: 0.25rem 0; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--tinte-leise); }
.kalender-tag {
  display: grid;
  justify-items: center;
  gap: 2px;
  height: 2.6rem;
  padding: 0.35rem 0 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--tinte);
  font: 500 0.9375rem var(--schrift-text);
  cursor: pointer;
}
.kalender-tag:hover { background: var(--flaeche); }
.kalender-tag[disabled] { color: rgb(var(--tinte-rgb) / 0.3); cursor: default; background: none; }
.kalender-tag.ist-heute { font-weight: 700; color: var(--haupt); }
.kalender-tag[aria-pressed="true"] { background: var(--haupt); color: var(--grund); }
.kalender-punkte { display: flex; gap: 2px; height: 5px; }
.kalender-punkte i { width: 5px; height: 5px; border-radius: 50%; }
@media (max-width: 37.5em) {
  .kalender { position: fixed; top: auto; bottom: 1rem; left: 1rem; right: 1rem; width: auto; }
}

.plan-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.legende { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; }
.legende::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--farbe); }

/* Tagesleiste – nur am Handy */
.plan-tage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.tag-knopf {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  padding: 0.55rem 0 0.5rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--tinte);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s;
}
.tag-knopf-name { font-size: 0.8125rem; font-weight: 600; color: var(--tinte-leise); }
.tag-knopf-zahl { font-family: var(--schrift-titel); font-size: 1.35rem; line-height: 1.1; }
.tag-knopf-punkte { display: flex; gap: 3px; height: 6px; }
.tag-knopf-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--farbe); }
.tag-knopf[aria-selected="true"] { background: var(--haupt); color: var(--grund); }
.tag-knopf[aria-selected="true"] .tag-knopf-name { color: var(--flaeche); }
.tag-knopf.ist-heute:not([aria-selected="true"]) { background: #fff; }
.tag-knopf.ist-heute:not([aria-selected="true"]) .tag-knopf-zahl { color: var(--haupt); font-weight: 600; }
.tag-knopf[disabled] { cursor: default; }
/* Leere Tage verblassen, vergangene Tage bleiben normal */
.tag-knopf[disabled]:not(.ist-vergangen) { opacity: 0.35; }

.plan-woche-raster {
  display: grid;
  gap: 0.75rem;
  /* Die ganze Woche liegt in einem hellen Bereich */
  padding: clamp(0.5rem, 1.5vw, 1rem);
  border-radius: 20px;
  background: rgb(255 255 255 / 0.4);
  transition: opacity 0.25s;
}
.plan-woche-raster[aria-busy="true"] { opacity: 0.5; }

.tag { display: none; }
.tag.ist-gewaehlt { display: grid; gap: 0.75rem; align-content: start; }
.tag-stunden {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 0.5rem;
  border-radius: 14px;
}
/* Heute: weißer Kasten hinter den Stunden */
.tag.ist-heute .tag-stunden { background: #fff; }
/* Tag ohne Stunde: kein Kasten (am Handy steht stattdessen der Hinweis unter der Leiste) */
.tag.ist-frei .tag-stunden { background: none; }
.tag-kopf { display: none; }

.stunde {
  display: grid;
  gap: 0.1rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--farbe) 34%, var(--grund));
  border: 1px solid color-mix(in srgb, var(--farbe) 60%, var(--grund)); /* hebt die helle Stunde vom gleichfarbigen Plan ab */
}

.stunde-zeit {
  font-family: var(--schrift-titel);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--haupt-tief);
}
.stunde-dauer { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--tinte-leise); }
.stunde-status { margin: 0.35rem 0 0.7rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.stunde-status.findet-statt::before { content: "✓ "; }
.stunde-aktion { justify-self: start; }
.stunde .knopf { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.9375rem; }
.stunde-dabei {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--grund);
  color: var(--haupt);
  font-weight: 650;
  font-size: 0.9375rem;
}
.stunde.faellt-aus { opacity: 0.55; }
.stunde.faellt-aus .stunde-zeit { text-decoration: line-through; text-decoration-thickness: 1px; }

.plan-leer { padding: 2rem 0; font-size: 1.125rem; }

/* Am Computer: sieben Spalten, eine pro Tag */
@media (min-width: 60em) {
  .plan-tage { display: none; }
  .plan-woche-raster { grid-template-columns: var(--spalten, repeat(7, minmax(0, 1fr))); gap: 0.6rem; }
  .tag, .tag.ist-gewaehlt { display: grid; grid-template-rows: auto 1fr; gap: 0.6rem; align-content: stretch; }
  .tag-stunden { gap: 0.6rem; padding: 0.45rem; }
  .tag-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0 0.25rem 0.6rem;
    border-bottom: 1.5px solid var(--flaeche-tief);
  }
  .tag-kopf-name { font-weight: 650; }
  .tag-kopf-zahl { color: var(--tinte-leise); font-size: 0.9375rem; }
  .tag-kopf { flex-wrap: nowrap; white-space: nowrap; }
  /* Heute: grüne Linie und das Datum als grünes Schildchen – passt auch in die schmale Spalte */
  .tag.ist-heute .tag-kopf { border-color: var(--haupt); color: var(--haupt); }
  .tag.ist-heute .tag-kopf-zahl {
    margin: -0.15rem 0;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--haupt);
    color: var(--grund);
    font-weight: 600;
  }
  /* Tag ohne Stunde: schmal, ruhig, ohne Kasten – auch wenn es heute ist */
  .tag.ist-frei .tag-stunden { padding-inline: 0; }
  .plan-leer { display: none; }
  .stunde { padding: 0.9rem 0.9rem 1rem; }
  .stunde-zeit { font-size: 1.4rem; }
}

.meine {
  margin-top: 3rem;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  border-radius: 14px;
  background: var(--grund);
}
.meine h3 { margin-bottom: 0.75rem; }
.meine-liste { list-style: none; margin: 0; padding: 0; }
.meine-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--linie);
}
.meine-liste button {
  border: 0;
  background: none;
  padding: 0.5rem 0;
  color: var(--haupt);
  font: 600 0.9375rem var(--schrift-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* ---------- Zum ersten Mal ---------- */

.erstes { background: var(--akzent); }
.erstes h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); color: var(--haupt-tief); }

.erstes-schritte {
  list-style: none;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding: 0;
  display: grid;
  gap: 2rem clamp(2rem, 4vw, 4rem);
  counter-reset: schritt;
}
.erstes-schritte li { counter-increment: schritt; max-width: 34ch; }
.erstes-schritte li::before {
  content: counter(schritt);
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--schrift-titel);
  font-size: 3.5rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--haupt);
}
.erstes-schritte h3 { margin-bottom: 0.4rem; }

.erstes-regel {
  display: grid;
  border-radius: 14px;
  overflow: hidden;
  background: var(--kasten);
}
.erstes-regel-text { padding: clamp(1.5rem, 3vw, 2.5rem); }
.erstes-regel-text > * { max-width: 58ch; }
.erstes-regel h3 { margin-bottom: 0.8rem; font-family: var(--schrift-titel); font-size: 1.9rem; font-weight: 350; line-height: 1.15; color: var(--haupt-tief); }
.erstes-regel-bild img { width: 100%; height: 100%; min-height: 18rem; max-height: 24rem; object-fit: cover; object-position: 50% 35%; }

@media (min-width: 50em) {
  .erstes-schritte { grid-template-columns: repeat(3, 1fr); }
  .erstes-regel { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; }
  .erstes-regel-text { align-self: center; }
  /* Das Foto richtet sich nach der Höhe des Textes, nicht umgekehrt */
  .erstes-regel-bild { position: relative; min-height: 22rem; }
  .erstes-regel-bild img { position: absolute; inset: 0; min-height: 0; max-height: none; }
}

/* ---------- Ausgedachte Texte: gestreifter Streifen, damit man sie sofort erkennt ---------- */

.erfunden {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--akzent) 0 10px, var(--kasten) 10px 20px);
  color: var(--haupt-tief);
  font-size: 0.875rem;
  font-weight: 650;
}

/* ---------- So ist eine Stunde ---------- */

.stunde-so { display: grid; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.stunde-so > * { margin: 0; }
.stunde-so-text { max-width: 36rem; }
.stunde-so-text h2 { margin-bottom: 1.5rem; }
.stunde-so-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 10%; border-radius: 4px; }
@media (min-width: 50em) {
  .stunde-so {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
  }
}

/* ---------- Stimmen ---------- */

.stimmen { background: var(--flaeche); }
.stimmen h2 { margin-bottom: clamp(2rem, 4vw, 3rem); }
.stimmen-liste { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 2rem clamp(2rem, 4vw, 4rem); }
.stimmen blockquote {
  margin: 0 0 1rem;
  font-family: var(--schrift-titel);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--haupt-tief);
}
.stimmen blockquote::before { content: "„"; }
.stimmen blockquote::after { content: "“"; }
.stimmen-liste p { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--tinte-leise); }
@media (min-width: 50em) {
  .stimmen-liste { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Zum Schluss: noch einmal buchen ---------- */

.abschluss { background: var(--akzent); text-align: center; }
.abschluss > * { max-width: 40rem; }
.abschluss h2 { margin-bottom: 1rem; color: var(--haupt-tief); }
.abschluss p { margin-bottom: 2rem; }
.abschluss-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* ---------- Seite nicht gefunden (404) ---------- */

.fehlt {
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  min-height: calc(100svh - var(--kopf-hoehe) - var(--band-hoehe));
  background: var(--flaeche);
}
.fehlt > * { margin: 0; }
.fehlt-bild img { width: 100%; max-height: 70svh; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 88%; border-radius: 4px; }
.fehlt-nummer { margin-bottom: 0.75rem; font-weight: 650; color: var(--tinte-leise); }
.fehlt h1 {
  margin-bottom: 1.25rem;
  font-family: var(--schrift-titel);
  font-size: clamp(3rem, 7vw, 6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--haupt);
}
.fehlt-text .gross { max-width: 30ch; margin-bottom: 2rem; }
.fehlt-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (min-width: 50em) {
  .fehlt { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .fehlt > * { max-width: none; }
}
@media (max-width: 49.99em) {
  .fehlt-bild { order: 2; }
  .fehlt-bild img { aspect-ratio: 4 / 3; }
}

/* ---------- Kontakt und Orte ---------- */

.kontakt { background: var(--kasten); }
.kontakt-oben { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.kontakt-bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 30% 50%; border-radius: 4px; }
.kontakt-text h2 { margin-bottom: 1rem; }
.kontakt-text > p { max-width: 40ch; }
.kontakt-wege { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.kontakt-wege li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1rem; row-gap: 0.1rem; }
.kontakt-zeichen {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #fff;
  color: var(--haupt);
  box-shadow: 0 6px 16px -10px rgb(var(--tinte-rgb) / 0.35);
}
.kontakt-zeichen .icon { width: 1.35rem; height: 1.35rem; opacity: 1; }
.kontakt-art { align-self: end; font-size: 0.875rem; font-weight: 600; color: var(--tinte-leise); }
.kontakt-art + * { align-self: start; }
.kontakt-wege a, .kontakt-wege .adresse, .kontakt-wege .kommt-noch {
  font-family: var(--schrift-titel);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  color: var(--haupt);
}
.kontakt-wege .kommt-noch { color: var(--tinte-leise); }

@media (min-width: 50em) {
  .kontakt-oben { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------- Fuß ---------- */

.fuss {
  padding: clamp(3rem, 6vw, 5rem) var(--rand) 2rem;
  background: var(--flaeche);
  color: var(--tinte-leise);
  border-top: 1px solid rgb(var(--tinte-rgb) / 0.08); /* trennt den Fuß, wenn der Abschnitt davor dieselbe Farbe hat (404-Seite) */
}
.fuss-innen {
  max-width: var(--breite);
  margin: 0 auto;
  display: grid;
  gap: 2.5rem 3rem;
}
.fuss-marke { margin: 0 0 1.25rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--haupt); }
.fuss-satz { max-width: 26ch; }
.fuss-spalte h2 { margin-bottom: 0.9rem; font-family: var(--schrift-text); font-size: 0.9375rem; font-weight: 650; letter-spacing: 0; color: var(--haupt); }
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fuss-kontakt li { display: flex; align-items: flex-start; gap: 0.6rem; }
.fuss-kontakt .icon { width: 1.1rem; height: 1.1rem; margin-top: 0.2em; color: var(--haupt); }
.fuss a { color: var(--haupt); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .kommt-noch { color: var(--tinte-leise); opacity: 0.8; }
.fuss :focus-visible { outline-color: var(--haupt); }
.fuss-unten {
  max-width: var(--breite);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}
.fuss-unten p { margin: 0; }
.fuss-recht { display: flex; gap: 1.5rem; }

/* ---------- Impressum und Datenschutz ---------- */

.recht-text { max-width: 44rem; }
.recht h1 {
  margin-bottom: 2rem;
  font-family: var(--schrift-titel);
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 350;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--haupt);
}
.recht h2 { margin: 2.25rem 0 0.6rem; font-family: var(--schrift-text); font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; color: var(--haupt); }
.recht p { max-width: 60ch; }

@media (min-width: 50em) {
  .fuss-innen { grid-template-columns: 1.6fr 1fr 0.8fr; }
}

/* ---------- Blätter (Buchen, Absagen, Fertig) ---------- */

.blatt {
  width: min(32rem, 100% - 2rem);
  max-height: calc(100svh - 2rem);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--grund);
  color: var(--tinte);
  box-shadow: 0 2rem 4rem -1rem rgb(var(--dunkel-rgb) / 0.45);
}
.blatt::backdrop { background: rgb(var(--dunkel-rgb) / 0.45); backdrop-filter: blur(3px); }
.blatt[open] { animation: blatt-auf 0.4s var(--weich); }
.blatt[open]::backdrop { animation: schleier-auf 0.4s ease; }
@keyframes blatt-auf { from { opacity: 0; transform: translateY(1.5rem) scale(0.98); } }
@keyframes schleier-auf { from { opacity: 0; } }

@media (max-width: 37.5em) {
  .blatt {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
    max-height: 92svh;
  }
  @keyframes blatt-auf { from { transform: translateY(100%); } }
}

.blatt-innen { position: relative; display: grid; gap: 1rem; padding: 1.75rem clamp(1.25rem, 4vw, 2rem) 2rem; }
.blatt-zu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinte-leise);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.blatt-zu:hover { background: rgb(var(--tinte-rgb) / 0.07); }

.blatt-stunde {
  display: grid;
  gap: 0.1rem;
  margin-right: 2.5rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--farbe) 34%, var(--grund));
  border: 1px solid color-mix(in srgb, var(--farbe) 60%, var(--grund)); /* hebt die helle Stunde vom gleichfarbigen Plan ab */
}
.blatt-stunde strong { font-family: var(--schrift-titel); font-size: 1.4rem; font-style: italic; font-weight: 400; color: var(--haupt-tief); }
.blatt-stunde span { font-size: 0.9375rem; }

.blatt-titel { font-family: var(--schrift-titel); font-size: 2rem; font-weight: 350; line-height: 1.1; color: var(--haupt); }
.blatt-hinweis { margin: 0; }
.blatt-hinweis.kostet {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: var(--kasten);
  font-size: 0.9375rem;
  line-height: 1.45;
}
/* Buchen-Fenster „Foto und Leiste“ (Yannis, 8.10.): Foto mit Tag und Uhrzeit, Felder, unten
   eine helle Leiste mit Preis, Storno-Frist und Knopf. */
.buchen form { position: relative; display: grid; }
.buchen .blatt-zu { z-index: 2; color: var(--grund); background: rgb(0 0 0 / 0.2); }
.buchen .blatt-zu:hover { background: rgb(0 0 0 / 0.35); }
.buchen-foto {
  position: relative;
  aspect-ratio: 16 / 8;
  background: var(--haupt) url("bilder/augen-zu-klein.webp") center 30% / cover;
}
.buchen-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--dunkel-rgb) / 0.72), transparent 60%); }
.buchen-foto h2 { position: absolute; left: clamp(1.25rem, 4vw, 1.75rem); right: 1.25rem; bottom: 0.9rem; z-index: 1; margin: 0; color: var(--grund); }
.buchen-foto strong { display: block; font-family: var(--schrift-titel); font-size: 1.85rem; font-style: italic; font-weight: 400; line-height: 1.1; }
.buchen-foto span { font-family: var(--schrift-text); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; }
/* Punkt in der Farbe der Länge, wie im Stundenplan */
.buchen-foto span::before {
  content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.45rem;
  border: 1.5px solid var(--grund); border-radius: 50%; background: var(--farbe); vertical-align: 0.02em;
}
.buchen-felder { display: grid; gap: 0.9rem; padding: 1.4rem clamp(1.25rem, 4vw, 1.75rem) 1.25rem; }
.buchen-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
  padding: 1rem clamp(1.25rem, 4vw, 1.75rem) calc(1.25rem + env(safe-area-inset-bottom, 0px));
  background: var(--kasten);
  border-top: 1px solid rgb(var(--haupt-rgb) / 0.15);
}
.buchen-leiste p { margin: 0; font-size: 0.8125rem; line-height: 1.4; color: var(--tinte-leise); }
.buchen-leiste b { display: block; font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 400; line-height: 1.15; color: var(--haupt-tief); }
.blatt-fehler { margin: 0; color: #A3321B; font-weight: 600; }
.blatt-fehler:empty { display: none; }
.blatt-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.blatt-knoepfe:empty { display: none; }

.feld { display: grid; gap: 0.35rem; }
.feld > span { font-weight: 600; font-size: 0.9375rem; }
.feld em { font-style: normal; font-weight: 400; color: var(--tinte-leise); }
.feld small { color: var(--tinte-leise); font-size: 0.875rem; }
.feld input, .feld select {
  width: 100%;
  min-height: 3rem;
  padding: 0 0.9rem;
  border: 1.5px solid rgb(var(--tinte-rgb) / 0.25);
  border-radius: 10px;
  background: #fff;
  color: var(--tinte);
  font: 1rem var(--schrift-text);
  transition: border-color 0.2s;
}
.feld input:focus-visible, .feld select:focus-visible { outline-offset: 0; border-color: var(--haupt); }
.feld input[aria-invalid="true"] { border-color: #A3321B; }

.haken { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.haken input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0.05rem 0 0; accent-color: var(--haupt); }

.falle { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

.fertig-zeichen {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0;
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--haupt);
  font-size: 1.5rem;
}
.fertig-zeichen::before { content: "✓"; }
@media (prefers-reduced-motion: no-preference) {
  .blatt[open] .fertig-zeichen { animation: ploppen 0.5s 0.15s var(--weich) both; }
}
@keyframes ploppen { from { transform: scale(0.4); opacity: 0; } }

.mail { border-top: 1px solid var(--linie); padding-top: 0.75rem; }
.mail summary { cursor: pointer; font-weight: 600; color: var(--haupt); padding: 0.4rem 0; }
.mail-betreff { margin: 0.75rem 0 0.5rem; font-weight: 650; }
.mail-text {
  margin: 0;
  padding: 1rem;
  border-radius: 10px;
  background: #fff;
  font: 0.9375rem/1.55 var(--schrift-text);
  white-space: pre-wrap;
}

/* ---------- Weniger Bewegung, wenn im System so eingestellt ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .start-bilder img { transform: none; }
}

/* ---------- Bearbeiten-Modus für Krissi (bearbeiten.js) ----------
   Erscheint nur auf der Test-Adresse hinter der Passwort-Tür. Das Werkzeug hat eigene, feste
   Farben, damit es sich klar von der Seite abhebt. */

.werkzeug-stift, .werkzeug-leiste {
  --wz-grund: #FFFFFF;
  --wz-tinte: #2E2219;
  --wz-leise: #6E5A4B;
  --wz-haupt: #4A3020;
  position: fixed;
  z-index: 100;
  font-family: var(--schrift-text);
  color: var(--wz-tinte);
}
.werkzeug-stift[hidden], .werkzeug-leiste[hidden], .werkzeug-knoepfe[hidden], .werkzeug-frage[hidden] { display: none; }

.werkzeug-stift {
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.3rem 0 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--wz-haupt);
  color: #fff;
  font: 600 1rem var(--schrift-text);
  box-shadow: 0 0.75rem 2rem -0.5rem rgb(var(--dunkel-rgb) / 0.5);
  cursor: pointer;
  transition: transform 0.2s var(--weich);
}
.werkzeug-stift:hover { transform: translateY(-2px); }
.werkzeug-stift:active { transform: scale(0.97); }
.werkzeug-stift svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

.werkzeug-leiste {
  left: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  gap: 0.6rem;
  width: min(40rem, 100% - 1.5rem);
  padding: 0.85rem 1rem 1rem;
  border-radius: 18px;
  background: var(--wz-grund);
  box-shadow: 0 1rem 3rem -0.75rem rgb(var(--dunkel-rgb) / 0.45), 0 0 0 1px rgb(var(--tinte-rgb) / 0.08);
  animation: leiste-auf 0.35s var(--weich);
}
@keyframes leiste-auf { from { opacity: 0; transform: translate(-50%, 1rem); } }
.werkzeug-status { margin: 0; font-size: 0.9375rem; color: var(--wz-leise); }
.werkzeug-knoepfe, .werkzeug-frage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.werkzeug-frage { padding-top: 0.6rem; border-top: 1px solid rgb(var(--tinte-rgb) / 0.1); font-weight: 600; }
.werkzeug-frage span { margin-right: auto; }
.werkzeug-leiste button {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1.5px solid rgb(var(--tinte-rgb) / 0.15);
  border-radius: 999px;
  background: var(--wz-grund);
  color: var(--wz-tinte);
  font: 600 0.9375rem var(--schrift-text);
  cursor: pointer;
}
.werkzeug-leiste button:hover { border-color: var(--wz-haupt); }
.werkzeug-leiste .werkzeug-haupt { margin-left: auto; background: var(--wz-haupt); border-color: var(--wz-haupt); color: #fff; }
.werkzeug-frage .werkzeug-haupt { margin-left: 0; }
.werkzeug-leiste button:disabled { opacity: 0.45; cursor: default; }
.werkzeug-leiste.speichert .werkzeug-haupt { cursor: progress; opacity: 0.7; }

/* Änderbare Texte: gestrichelt umrandet, beim Tippen fest; geänderte orange */
.bearbeiten-an [contenteditable] {
  outline: 2px dashed rgb(var(--haupt-rgb) / 0.5);
  outline-offset: 4px;
  border-radius: 4px;
  cursor: text;
  transition: outline-color 0.15s, background-color 0.15s;
}
.bearbeiten-an [contenteditable]:hover { background-color: rgb(var(--haupt-rgb) / 0.06); }
.bearbeiten-an [contenteditable]:focus { outline: 2px solid var(--haupt); background-color: rgb(255 255 255 / 0.55); }
.bearbeiten-an [contenteditable][data-geaendert] { outline-color: #E07A2E; outline-style: solid; }
/* Ganz oben liegt der Text auf dem Foto – dort helle Rahmen */
.bearbeiten-an .start [contenteditable] { outline-color: rgb(255 255 255 / 0.6); }
.bearbeiten-an .start [contenteditable]:focus { outline-color: #fff; background-color: rgb(0 0 0 / 0.25); }

/* Fotos zum Antippen; das Fotoband bleibt stehen */
.bearbeiten-an main img { cursor: pointer; transition: filter 0.15s; }
.bearbeiten-an main img:hover { filter: brightness(1.08); outline: 3px solid var(--akzent); outline-offset: -3px; }
.bearbeiten-an .start { cursor: pointer; }
.bearbeiten-an .band-reihe { animation-play-state: paused; }

/* Notiz: Stelle antippen – nur die Stelle unter der Maus leuchtet (setzt bearbeiten.js) */
.notiz-zielen { cursor: crosshair; }
.notiz-ziel { outline: 2px solid #E07A2E !important; outline-offset: 3px; border-radius: 4px; }

/* Platz unten, damit die Leiste nichts verdeckt */
.bearbeiten-an { padding-bottom: 9rem; }
/* Im Bearbeiten-Modus alles sofort zeigen, nichts fliegt mehr rein */
.bearbeiten-an [data-rein]:not(.ist-da) { opacity: 1; transform: none; }

/* Fenster: Notiz, Foto ändern, Fotos tauschen, vorhandenes Foto */
.werkzeug-blatt { width: min(36rem, 100% - 2rem); overflow-y: auto; }
.werkzeug-inhalt { display: grid; gap: 1rem; }
.werkzeug-inhalt > p { margin: 0; color: var(--tinte-leise); }
.werkzeug-wo { font-weight: 600; color: var(--tinte) !important; }
.werkzeug-inhalt textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: #fff;
  color: var(--tinte);
  font: inherit;
  resize: vertical;
}
.werkzeug-inhalt textarea:focus-visible { outline: 2px solid var(--haupt); outline-offset: 0; }

.werkzeug-foto-gross { position: relative; margin: 0; }
.werkzeug-foto-gross img { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; object-fit: cover; }
.werkzeug-foto-gross figcaption {
  position: absolute; left: 0.75rem; bottom: 0.75rem;
  padding: 0.3rem 0.75rem; border-radius: 999px;
  background: rgb(255 255 255 / 0.92); font-size: 0.875rem; font-weight: 600;
}

.werkzeug-wahl { display: grid; gap: 0.5rem; }
.werkzeug-wahl > * {
  display: grid;
  gap: 0.1rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: #fff;
  color: var(--tinte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s var(--weich);
}
.werkzeug-wahl > *:hover { border-color: var(--haupt); }
.werkzeug-wahl > *:active { transform: scale(0.99); }
.werkzeug-wahl > *:focus-within { outline: 2px solid var(--haupt); outline-offset: 2px; }
.werkzeug-wahl b { font-weight: 650; }
.werkzeug-wahl small { color: var(--tinte-leise); font-size: 0.875rem; }

.werkzeug-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.werkzeug-raster button {
  display: grid;
  gap: 0.3rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinte);
  font: 600 0.8125rem var(--schrift-text);
  text-align: left;
  cursor: pointer;
}
.werkzeug-raster img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover; transition: transform 0.2s var(--weich); }
.werkzeug-raster button:hover img { transform: scale(1.03); }
.werkzeug-raster button:focus-visible img { outline: 3px solid var(--haupt); outline-offset: 2px; }
.werkzeug-raster span:empty { display: none; }

@media (max-width: 37.5em) {
  .werkzeug-leiste { bottom: 0; width: 100%; border-radius: 18px 18px 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .werkzeug-leiste button { flex: 1 1 auto; padding: 0 0.75rem; }
  .werkzeug-leiste .werkzeug-haupt { margin-left: 0; }
  .werkzeug-blatt { width: 100%; }
  .werkzeug-raster { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .werkzeug-leiste { animation: none; }
  .werkzeug-stift, .werkzeug-raster img, .werkzeug-wahl > * { transition: none; }
}