/* Studio-Oberfläche, Gestaltung aus dem freigegebenen Entwurf (oberflaeche-neu/entwurf.html).
   Schriften liegen in /schrift/ und kommen vom Worker, nichts von Google. */
@font-face { font-family: "Oranienbaum"; src: url(/schrift/oranienbaum.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(/schrift/eb-garamond.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(/schrift/eb-garamond-kursiv.woff2) format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
/* Layout: Menü links ab 900 px, darunter Leiste unten wie in der App. Eine Marke, ein Look: Creme, Tinte, Bronze, Palmenschatten. */
:root {
  --creme: #EFE5DA; --karte: rgba(248, 243, 236, 0.86); --karte-voll: #F8F3EC;
  --tinte: #11100E; --text: #4A433B; --bronze: #7A5A36; --gold: #C9A46B; --gruen: #2F6B3F;
  --linie: rgba(17, 16, 14, 0.13);
  --titel: 'Oranienbaum', 'Bodoni 72', Georgia, serif;
  --schrift: 'EB Garamond', Garamond, Georgia, serif;
  color-scheme: light;
}
html, body { height: 100%; }
body {
  margin: 0; background: var(--creme) url("/img/licht.webp") center / cover fixed no-repeat;
  color: var(--tinte); font-family: var(--schrift); font-size: 18px; line-height: 1.4;
}
* { box-sizing: border-box; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.app { display: flex; min-height: 100%; }
.seitenleiste { width: 250px; flex: none; background: var(--tinte); color: var(--creme); display: flex; flex-direction: column; gap: 6px; padding: 28px 16px; }
.marke { font-family: var(--titel); letter-spacing: 0.3em; font-size: 16px; padding: 0 12px 24px; }
.menue { display: flex; flex-direction: column; gap: 6px; }
.menue button, .menue a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--creme); font-size: 19px; text-align: left; }
.menue button[aria-current="page"] { background: var(--creme); color: var(--tinte); }
.menue .zahl { margin-left: auto; min-width: 26px; height: 26px; border-radius: 999px; background: var(--gold); color: var(--tinte); display: grid; place-items: center; font-size: 15px; font-weight: 600; }
.leiste-unten-raum { flex: 1; }
.akademie-knopf { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 14px; border: 1px solid rgba(239, 229, 218, 0.35); border-radius: 12px; background: none; color: var(--creme); font-size: 18px; text-align: left; }
.assistentin { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 0; font-size: 15px; }
.assistentin-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.assistentin-name { flex: 1; min-width: 0; line-height: 1.2; font-weight: 600; }
.assistentin .punkt { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.assistentin-satz { margin: 0 0 0 18px; font-size: 14px; line-height: 1.35; color: #D9CFC2; }
.assistentin-satz strong { font-weight: 600; color: var(--creme); }
.seiten-unten { display: flex; flex-direction: column; gap: 6px; }
a.akademie-knopf { text-decoration: none; }
.profil-knopf { display: flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 8px; padding: 0 12px; border: 0; border-top: 1px solid rgba(239, 229, 218, 0.2); border-radius: 12px; background: none; color: var(--creme); font-size: 18px; text-align: left; }
.profil-knopf[aria-current="page"] { background: rgba(239, 229, 218, 0.12); }
.profil-kreis { width: 36px; height: 36px; border-radius: 999px; flex: none; display: grid; place-items: center; color: var(--tinte); font-weight: 600; }
.profil-kreis { overflow: hidden; }
.profil-kreis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil-kreis.gross { width: 72px; height: 72px; font-size: 28px; }
.profil-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assistentin button { flex: none; border: 0; background: none; color: #D9CFC2; text-decoration: underline; font-size: 15px; min-height: 36px; padding: 0 0 0 4px; white-space: nowrap; }
main { flex: 1; min-width: 0; padding-block: 32px 48px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.innen { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.kopf-handy { display: none; }
.hinweis-beispiel { align-self: flex-end; font-size: 14px; color: var(--text); border: 1px solid rgba(17, 16, 14, 0.25); background: var(--karte); padding: 3px 10px; border-radius: 999px; }
h1 { font-family: var(--titel); font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-size: 23px; font-weight: 600; margin: 0; }
.datum { margin: 0; color: var(--text); }
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 116px; padding: 20px; border-radius: 20px; border: 1px solid var(--linie); background: var(--karte); text-align: left; font-size: 20px; font-weight: 600; }
/* .kachel.dunkel: seit Look 17c keine feste Hauptkachel mehr, siehe Block am Ende. */
.zwei { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.zwei > .gross { flex: 3 1 420px; min-width: 0; }
.zwei > .klein { flex: 2 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.flaeche { background: var(--karte); border-radius: 20px; padding: 20px 22px; backdrop-filter: blur(2px); }
.flaeche-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.textknopf { border: 0; background: none; color: var(--bronze); min-height: 44px; font-size: 17px; }
.zeile { display: flex; gap: 16px; align-items: center; width: 100%; padding: 13px 4px; border: 0; border-top: 1px solid var(--linie); background: none; text-align: left; min-height: 58px; border-radius: 8px; }
.zeile.gewaehlt { background: rgba(239, 229, 218, 0.9); }
.zeit { font-weight: 600; width: 58px; flex: none; font-variant-numeric: tabular-nums; }
.name { flex: 1; min-width: 0; }
.leise { color: var(--text); font-size: 16px; }
.rund { width: 42px; height: 42px; border-radius: 999px; background: var(--creme); display: grid; place-items: center; font-weight: 600; flex: none; }
.neu-punkt { width: 10px; height: 10px; border-radius: 999px; background: var(--gold); flex: none; }
.erfolg { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 14px 0; color: var(--text); background: none; }
.erfolg strong { color: var(--tinte); }
.blase { max-width: 72%; padding: 12px 16px; font-size: 19px; }
.blase.kundin { align-self: flex-start; background: var(--creme); border-radius: 16px 16px 16px 4px; }
.blase.assist { align-self: flex-end; background: var(--tinte); color: var(--creme); border-radius: 16px 16px 4px 16px; }
.wer { align-self: flex-end; font-size: 14px; color: var(--text); margin-bottom: -8px; }
.chat { display: flex; flex-direction: column; gap: 14px; min-height: 440px; }
.eingabe { display: flex; gap: 10px; margin-top: auto; }
.eingabe input, .feld { flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid rgba(17, 16, 14, 0.3); border-radius: 999px; background: var(--creme); font-size: 19px; }
.feld { border-radius: 12px; width: 100%; }
select.feld { font-family: inherit; } /* Auswahlfelder standen in Systemschrift (Durchlauf 04.11.2026) */
.knopf { border: 0; background: var(--tinte); color: var(--creme); border-radius: 16px; min-height: 56px; padding: 0 22px; font-size: 19px; font-weight: 600; }
.knopf.rund-voll { border-radius: 999px; min-height: 48px; font-size: 18px; font-weight: 500; }
.knopf.hell { background: none; color: var(--tinte); border: 1px solid var(--tinte); font-weight: 500; }
.umschalter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--tinte); border-radius: 999px; overflow: hidden; width: 240px; max-width: 100%; background: var(--karte); }
.umschalter button { border: 0; min-height: 46px; background: transparent; font-size: 18px; }
.umschalter button[aria-pressed="true"] { background: var(--tinte); color: var(--creme); }
.titelzeile { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.titelzeile .rechts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.termin { display: flex; gap: 14px; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--linie); background: none; text-align: left; }
.termin .block { flex: 1; min-width: 0; background: color-mix(in srgb, var(--f, var(--gold)) 24%, #FBF7F2); border-left: 4px solid var(--f, var(--gold)); border-radius: 4px 14px 14px 4px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.termin .zeit { padding-top: 10px; color: var(--text); font-weight: 500; }
.punkt { width: 10px; height: 10px; border-radius: 999px; flex: none; display: inline-block; }
.wer-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; white-space: nowrap; }
/* Kalender: Woche, Team-Auswahl, Tagesraster mit einer Spalte pro Mitarbeiterin */
.woche { display: grid; grid-template-columns: repeat(var(--tage, 6), minmax(0, 1fr)); gap: 6px; max-width: 560px; }
.woche button { border: 1px solid var(--linie); background: var(--karte); border-radius: 14px; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.05; padding: 0; }
.woche button small { font-size: 14px; color: var(--text); }
.woche button b { font-size: 21px; font-weight: 600; }
.woche button[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--creme); }
.woche button[aria-pressed="true"] small { color: #D9CFC2; }
.woche .heute-markierung { width: 5px; height: 5px; border-radius: 999px; background: var(--bronze); }
.woche button[aria-pressed="true"] .heute-markierung { background: var(--gold); }
.team { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); font-size: 18px; }
.chip .leise { font-size: 15px; }
.chip[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--creme); }
.chip[aria-pressed="true"] .leise { color: #D9CFC2; }
.raster { --std: 72px; --achse: 56px; }
.raster-kopf, .raster-koerper { display: grid; grid-template-columns: var(--achse) repeat(var(--spalten), minmax(0, 1fr)); }
.raster-kopf { position: sticky; top: 0; z-index: 3; background: var(--karte-voll); border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--linie); }
.raster-kopf button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: 0; background: none; padding: 10px 12px; text-align: left; font-weight: 600; min-height: 56px; }
.raster-kopf button span:first-child { display: flex; align-items: center; gap: 8px; }
.raster-kopf .leise { font-weight: 400; font-size: 15px; }
.raster-koerper { position: relative; height: calc(var(--stunden, 12) * var(--std)); margin: 14px 0 10px; }
.achse { position: relative; }
.achse span { position: absolute; right: 10px; transform: translateY(-50%); font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.spalte { position: relative; border-left: 1px solid var(--linie); background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(rgba(17, 16, 14, 0.05) 1px, transparent 1px); background-size: 100% var(--std), 100% calc(var(--std) / 2); }
.spalte.frei { background: repeating-linear-gradient(135deg, rgba(17, 16, 14, 0.05) 0 8px, transparent 8px 16px); display: flex; justify-content: center; padding-top: 28px; color: var(--text); text-align: center; }
.slot { position: absolute; left: 0; right: 0; height: calc(var(--std) / 2); border: 0; background: none; padding: 0; }
.slot:hover, .slot:focus-visible { background: rgba(201, 164, 107, 0.18); }
.slot:hover::after { content: '+ frei'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--bronze); font-size: 15px; }
.raster .block { position: absolute; left: 4px; right: 6px; z-index: 1; display: flex; flex-direction: column; justify-content: center; border: 0; border-left: 4px solid var(--f); border-radius: 4px 12px 12px 4px; background: color-mix(in srgb, var(--f) 28%, #FBF7F2); padding: 4px 10px; text-align: left; overflow: hidden; font-size: 16px; line-height: 1.2; box-shadow: 0 1px 2px rgba(17, 16, 14, 0.08); }
.raster .block > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raster .block .leise { font-size: 15px; }
.raster .block.kurz { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding-block: 0; }
.raster .block.kurz strong { flex: none; max-width: 60%; }
.raster .block.pause { background: repeating-linear-gradient(135deg, rgba(17, 16, 14, 0.06) 0 6px, rgba(255, 255, 255, 0.35) 6px 12px); border-left-color: rgba(17, 16, 14, 0.3); color: var(--text); box-shadow: none; }
.jetzt { position: absolute; left: calc(var(--achse) - 4px); right: 0; height: 2px; background: #B4452F; z-index: 2; pointer-events: none; }
.demo { display: flex; gap: 8px; align-items: center; align-self: flex-end; }
button.hinweis-beispiel { min-height: 30px; }
.umschalter.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 300px; }
.blaetter { display: flex; align-items: center; gap: 8px; max-width: 680px; }
.blaetter .woche { flex: 1; }
.pfeil { flex: none; width: 46px; height: 46px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); font-size: 24px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px; }
.zeitraum { font-family: var(--titel); font-weight: 400; font-size: 28px; min-width: 210px; text-align: center; }
.wochenraster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.wtag { background: var(--karte); border-radius: 16px; padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wtag.ist-heute { box-shadow: inset 0 0 0 2px var(--tinte); }
.wtag-kopf { display: flex; align-items: baseline; gap: 6px; border: 0; border-bottom: 1px solid var(--linie); background: none; padding: 6px 2px 8px; text-align: left; min-height: 44px; }
.wtag-kopf small { font-size: 15px; color: var(--text); }
.wtag-kopf b { font-size: 22px; }
.wtag-kopf .leise { margin-left: auto; font-size: 14px; }
.wtermin { display: flex; gap: 6px; align-items: baseline; min-width: 0; border: 0; border-left: 3px solid var(--f); border-radius: 3px 8px 8px 3px; background: color-mix(in srgb, var(--f) 22%, #FBF7F2); padding: 6px 8px; text-align: left; font-size: 15px; line-height: 1.2; }
.zeit-k { flex: none; color: var(--text); font-variant-numeric: tabular-nums; }
.wname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.kopf-wt { text-align: center; font-size: 15px; font-weight: 600; color: var(--text); }
.mtag { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 92px; min-width: 0; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); text-align: left; }
.mtag b { font-size: 20px; font-weight: 600; }
.mtag .leise { font-size: 14px; }
.mtag .fuell { margin-top: auto; width: 100%; height: 5px; border-radius: 999px; background: rgba(17, 16, 14, 0.08); overflow: hidden; }
.mtag .fuell i { display: block; height: 100%; border-radius: 999px; }
.mtag.vorbei { background: rgba(239, 229, 218, 0.5); color: var(--text); }
.mtag.anders { opacity: 0.35; }
.mtag.zu { background: transparent; border-style: dashed; }
.mtag.ist-heute { border: 2px solid var(--tinte); }
.frei-block { position: absolute; left: 4px; right: 6px; z-index: 1; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; border: 1.5px dashed rgba(47, 107, 63, 0.5); border-radius: 10px; background: rgba(47, 107, 63, 0.08); color: var(--gruen); font-size: 15px; font-weight: 600; text-align: left; padding: 0 10px; }
.frei-block span { font-weight: 400; }
.frei-block:hover, .frei-block:focus-visible { background: rgba(47, 107, 63, 0.18); }
.jetzt.in-spalte { left: 0; }
.woche-raster { --std: 46px; }
.woche-raster .raster-kopf button { padding: 8px 8px; font-weight: 600; }
.woche-raster .raster-kopf button.ist-heute { color: var(--bronze); }
.woche-raster .block { left: 2px; right: 3px; padding: 1px 6px; font-size: 15px; }
.woche-raster .block .leise { font-size: 13px; }
.woche-raster .frei-block { left: 2px; right: 3px; padding: 0 6px; font-size: 14px; }
.woche-raster .frei-block span { display: none; }
.woche-raster.zeige-frei .frei-block { white-space: normal; line-height: 1.15; }
.woche-raster.zeige-frei .frei-block span { display: inline; }
.bahnen { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--bahnen, 4), minmax(0, 1fr)); gap: 2px; padding: 0 2px; }
.bahn { position: relative; }
.bahn.frei { background: repeating-linear-gradient(135deg, rgba(17, 16, 14, 0.08) 0 4px, transparent 4px 8px); }
.mit-bahnen .bahn .block { left: 0; right: 0; padding: 0; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--f) 80%, #FFFFFF); box-shadow: none; }
.mit-bahnen .bahn .block.pause { background: rgba(17, 16, 14, 0.12); }
.mit-bahnen .bahn .frei-block { left: 0; right: 0; padding: 0; border: 0; border-radius: 3px; }
.schalter { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: rgba(17, 16, 14, 0.22); }
.schalter::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: left 0.15s; }
.schalter.an { background: var(--gruen); }
.schalter.an::after { left: 21px; }
.filterzeile { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.frei-schalter { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 8px 0 16px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); font-size: 17px; }
.frei-schalter[aria-pressed="true"] { border-color: var(--gruen); color: var(--gruen); font-weight: 600; }
.frei-block.von-hand { border-color: rgba(17, 16, 14, 0.3); background: rgba(17, 16, 14, 0.04); color: var(--text); }
.frei-block.von-hand:hover, .frei-block.von-hand:focus-visible { background: rgba(17, 16, 14, 0.09); }
.zeige-frei.mit-bahnen .bahn .frei-block { background: rgba(47, 107, 63, 0.4); }
.zeige-frei.mit-bahnen .bahn .frei-block.von-hand { background: rgba(17, 16, 14, 0.1); }
.jetzt::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 999px; background: #B4452F; }
.aktionen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.aktionen .knopf { font-size: 17px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.daten div { display: flex; justify-content: space-between; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--linie); }
.betrag { font-family: var(--titel); font-size: 52px; text-align: center; margin: 0; font-variant-numeric: tabular-nums; }
.tasten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tasten button { border: 0; background: var(--creme); border-radius: 14px; min-height: 58px; font-size: 24px; }
.mitte { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 10px 0; }
.haken { width: 64px; height: 64px; border-radius: 999px; background: var(--gruen); color: #fff; display: grid; place-items: center; }
.umsatz { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--linie); padding: 13px 0; }
.umsatz .wert { font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.hell-text { color: var(--text); }
.ebene { position: fixed; inset: 0; background: rgba(17, 16, 14, 0.45); display: grid; place-items: center; padding: 24px; z-index: 30; }
.fenster { width: 100%; max-width: 520px; background: var(--creme); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.fenster h2 { font-family: var(--titel); font-weight: 400; font-size: 32px; }
.toast { position: fixed; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: 420px; background: var(--tinte); color: var(--creme); border-radius: 14px; padding: 15px 20px; z-index: 40; }
.nur-handy { display: none; }
/* Menü am Handy: Knopf im Kopf, Ebene von rechts (Fabian 03.11.2026). Am Rechner nie sichtbar. */
.handy-menue { display: none; }
.menue-knopf { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--tinte); display: grid; place-items: center; padding: 0; margin-right: -8px; }
.menue-striche, .menue-striche::before, .menue-striche::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.menue-striche { position: relative; }
.menue-striche::before, .menue-striche::after { content: ''; position: absolute; left: 0; }
.menue-striche::before { top: -7px; }
.menue-striche::after { top: 7px; }
@media (max-width: 899px) {
  body { font-size: 18px; }
  .app { flex-direction: column; }
  .seitenleiste { position: fixed; left: 0; right: 0; bottom: 0; width: auto; flex-direction: row; padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)); background: var(--karte-voll); color: var(--tinte); border-top: 1px solid var(--linie); z-index: 20; }
  .marke, .leiste-unten-raum, .seiten-unten { display: none; }
  .menue { flex-direction: row; width: 100%; gap: 0; }
  .menue button, .menue a { flex: 1; flex-direction: column; gap: 3px; min-height: 54px; padding: 0; font-size: 12.5px; color: #6B6157; background: none; border-radius: 0; justify-content: center; }
  .menue button[aria-current="page"] { background: none; color: var(--tinte); font-weight: 600; }
  /* Am Handy sitzt die Zahl als kleiner Kreis oben rechts am Symbol (Fabian 02.11.2026) */
  .menue button { position: relative; }
  .menue .zahl { position: absolute; top: 3px; left: calc(50% + 4px); margin: 0; min-width: 20px; height: 20px; padding: 0 5px; font-size: 12px; line-height: 1; box-shadow: 0 0 0 2px var(--karte-voll); }
  .menue button[data-tab="bewertungen"] { display: none; }
  main { padding-block: 0 110px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .kopf-handy { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 6px; }
  .kopf-handy .marke { display: block; padding: 0; font-size: 14px; }
  .demo.oben { display: none; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kachel { min-height: 100px; font-size: 18px; padding: 16px; }
  .aktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daten { grid-template-columns: minmax(0, 1fr); }
  .nur-handy { display: flex; }
  .handy-menue:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 32; justify-content: flex-end; }
  .hm-hintergrund { position: absolute; inset: 0; border: 0; background: rgba(17, 16, 14, 0.45); padding: 0; }
  .hm-tafel { position: relative; width: min(88vw, 380px); height: 100%; background: var(--creme); color: var(--tinte); display: flex; flex-direction: column; gap: 14px; padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px; overflow-y: auto; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18); }
  .hm-kopf { display: flex; justify-content: space-between; align-items: center; padding: calc(10px + env(safe-area-inset-top, 0px)) 0 0; }
  .hm-kopf .marke { display: block; padding: 0; font-size: 14px; }
  .hm-zu { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: inherit; font-size: 22px; margin-right: -10px; }
  .hm-liste { display: flex; flex-direction: column; gap: 18px; flex: 1; }
  .hm-wer { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--linie); }
  .hm-wer-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
  .hm-seiten { display: flex; flex-direction: column; gap: 4px; }
  .hm-eintrag { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: inherit; font-size: 19px; text-align: left; }
  .hm-eintrag[aria-current="page"] { background: rgba(17, 16, 14, 0.10); font-weight: 600; }
  .hm-eintrag .zahl { margin-left: auto; min-width: 26px; height: 26px; border-radius: 999px; background: var(--gold); color: var(--tinte); display: grid; place-items: center; font-size: 15px; font-weight: 600; }
  .hm-eintrag .krone { position: static; width: auto; height: auto; margin-left: auto; background: none; border: 0; box-shadow: none; }
  .hm-abmelden { align-self: stretch; }
  .nur-rechner { display: none; }
  .zwei.drill > .gross:not(.zeigen), .zwei.drill > .klein:not(.zeigen) { display: none; }
  .toast { left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-width: none; }
  .ebene { place-items: end center; padding: 0; }
  .fenster { border-radius: 24px 24px 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .blase { max-width: 86%; }
  .raster { --std: 76px; --achse: 48px; }
  .woche { gap: 5px; }
  .woche button { min-height: 58px; }
  .chip { padding: 0 13px; font-size: 17px; }
  .raster-kopf { top: 0; }
  .demo { gap: 6px; }
  .umschalter.drei { width: 100%; }
  .titelzeile .rechts { width: 100%; }
  .titelzeile .rechts .knopf { flex: 1; }
  .pfeil { width: 38px; height: 38px; }
  .zeitraum { font-size: 24px; min-width: 0; flex: 1; }
  .wochenraster { grid-template-columns: minmax(0, 1fr); }
  .monat { gap: 4px; }
  .mtag { min-height: 60px; padding: 6px; border-radius: 10px; }
  .mtag b { font-size: 17px; }
  .mtag .lang { display: none; }
  .woche-raster { --std: 44px; --achse: 40px; }
  .woche-raster .raster-kopf button { padding: 6px 2px; font-size: 14px; }
  .woche-raster .raster-kopf .leise { font-size: 11px; }
  .woche-raster .block { padding: 1px 3px; font-size: 12px; }
  .woche-raster .block .leise { display: none; }
  .woche-raster .frei-block { font-size: 0; }
  .bahnen { gap: 1px; padding: 0 1px; }
}
@media (prefers-reduced-motion: no-preference) { .toast { animation: rein 0.2s ease-out; } @keyframes rein { from { opacity: 0; transform: translateY(8px); } } }

/* Ergänzungen für die echte Seite: Links statt Knöpfe, Anmeldemaske, gedämpfte Blocker */
[hidden] { display: none !important; }
a { color: inherit; }
.menue a { text-decoration: none; }
a.kachel, a.zeile, a.textknopf { text-decoration: none; color: inherit; }
a.textknopf { display: inline-flex; align-items: center; color: var(--bronze); }
.zeile.gedaempft { opacity: 0.6; }
.zeile.gedaempft .name { font-style: italic; }
.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.anmelde-karte { width: 100%; max-width: 420px; background: var(--karte); border-radius: 24px; padding: 32px 28px; display: flex; flex-direction: column; gap: 10px; }
.anmelde-karte .marke { padding: 0 0 8px; }
.anmelde-karte h1 { margin-bottom: 8px; }
.anmelde-karte label { color: var(--text); font-size: 16px; margin-top: 8px; }
.anmelde-karte .knopf { margin-top: 14px; }
.anmelde-karte .knopf[disabled] { opacity: 0.5; }
.anmelde-karte { position: relative; }
/* Lade-Decke beim Anmelden (04.11.2026): Karte ausgegraut, Kreis und Text in der Mitte. */
.lade-decke { position: absolute; inset: 0; border-radius: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: color-mix(in srgb, var(--karte-voll) 94%, transparent); color: var(--text); font-size: 19px; text-align: center; padding: 24px; z-index: 2; }
.lade-kreis { width: 48px; height: 48px; border-radius: 50%; border: 4px solid color-mix(in srgb, var(--text) 18%, transparent); border-top-color: var(--text); animation: drehen 0.9s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lade-kreis { animation-duration: 2.4s; } }
/* Gesperrte Knöpfe sehen auch gesperrt aus (03.11.2026, Bestätigungsfenster „Aus dem Team entfernen“). */
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.fehlertext { margin: 4px 0 0; color: #8A2F22; font-style: italic; }
.einzeln { min-height: 100dvh; display: grid; place-items: center; padding: 24px; text-align: center; }
.anmelde-karte .feld { flex: none; }
.demo { flex-wrap: wrap; justify-content: flex-end; }
.kopf-handy { gap: 8px; }
.kopf-handy .marke { white-space: nowrap; }
a.knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
a.knopf.hell { color: var(--tinte); }
/* Planity-Blocker: eigene Farbe, schraffiert, damit sie sich von Terminen der Mitarbeiterinnen und von Pausen unterscheiden */
:root { --planity: #5F7A94; }
.block.planity, .raster .block.planity { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--planity) 24%, #FBF7F2) 0 8px, color-mix(in srgb, var(--planity) 12%, #FBF7F2) 8px 16px); border-left: 4px solid var(--planity); box-shadow: none; }
.mit-bahnen .bahn .block.planity { background: color-mix(in srgb, var(--planity) 70%, #FFFFFF); }
div.termin { cursor: default; }

/* Look „17c“ (Fabian 29.10.2026, Auswahl aus 22 Mockups in oberflaeche-neu/probe/): Wandbild der Website, alles aus demselben hellen Glas,
   Seitenleiste ebenfalls Glas, Kacheln ohne feste Hauptkachel (dunkel nur beim Überfahren), Titel in Versalien mit dem Namen in Bronze,
   Datum als Augenbraue in Bronze. Überschreibt die Grundregeln oben; der dunkle Look (20b) liegt in glas.css. Farben aus der Website. */
@font-face { font-family: "Bodoni Moda"; src: url(/schrift/bodoni-moda.woff2) format("woff2"); font-weight: 400; font-display: swap; }
:root { --karte: rgba(248, 243, 236, 0.62); --glas-rand: rgba(255, 255, 255, 0.7); --glas-blur: 16px; --bronze: #5E4429; --bronze-hell: #7A5A3A; --gold-hell: #E6CCA6; --wand: #E5D2C0; }
body { background: linear-gradient(180deg, rgba(229, 210, 192, 0), rgba(229, 210, 192, 0.12)), var(--wand) url("/img/wand.webp") center / cover fixed no-repeat; }
/* Glas: ein Material für Flächen, Kacheln, Wochentage, Anmeldung, Fenster. Kein Weichzeichner auf den Flächen, das Wandbild ist schon weich; nur die Seitenleiste bekommt 8 px (Codex). */
.flaeche, .kachel, .wtag, .anmelde-karte, .fenster { background: var(--karte); border: 1px solid var(--glas-rand); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.flaeche, .kachel { border-radius: 22px; }
.fenster { background: rgba(248, 243, 236, 0.9); }
.kachel, a.kachel.dunkel, .kachel.dunkel { color: var(--tinte); transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
/* Überfahren und Drücken wie in der Seitenleiste: ein leiser grauer Ton, kein Schwarz (Fabian 29.10.). Hover nur mit Maus, auf Touch der Druckzustand. */
@media (hover: hover) and (pointer: fine) { .kachel:hover { background: linear-gradient(rgba(17, 16, 14, 0.10), rgba(17, 16, 14, 0.10)), var(--karte); } }
.kachel:active, .kachel:focus-visible { background: linear-gradient(rgba(17, 16, 14, 0.14), rgba(17, 16, 14, 0.14)), var(--karte); outline: none; transition: none; }
.hinweis-beispiel { background: var(--karte); }
/* Seitenleiste aus hellem Glas, Goldstrich unter der Wortmarke, offene Seite als Tinte-Block */
.seitenleiste { background: var(--karte); color: var(--tinte); border-right: 1px solid var(--glas-rand); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.seitenleiste > .marke { position: relative; padding-bottom: 30px; }
.seitenleiste > .marke::after { content: ''; position: absolute; left: 12px; bottom: 16px; width: 28px; height: 1px; background: var(--gold); }
.marke { font-family: 'Bodoni Moda', var(--titel); font-size: 13px; letter-spacing: 0.28em; white-space: nowrap; }
.menue button, .menue a { color: var(--tinte); }
.menue button:hover, .menue a:hover { background: rgba(17, 16, 14, 0.06); }
/* Offene Seite: dasselbe Grau wie beim Überfahren, nur eine Stufe kräftiger (Fabian 29.10.: kein Schwarz in der Leiste) */
.menue button[aria-current="page"] { background: rgba(17, 16, 14, 0.10); color: var(--tinte); font-weight: 600; }
.menue .zahl { background: var(--gold-hell); }
/* Akademie: goldener Rahmen, leichter Goldschimmer und eine große Krone auf der Ecke (Fabian 29.10.: soll herausstechen) */
.akademie-knopf { position: relative; background: linear-gradient(180deg, rgba(201, 164, 107, 0.18), rgba(201, 164, 107, 0.08)), var(--karte); border: 1.5px solid var(--gold); box-shadow: 0 0 0 3px rgba(201, 164, 107, 0.16); color: var(--tinte); font-weight: 600; letter-spacing: 0.02em; overflow: visible; }
.akademie-knopf:hover { background: linear-gradient(180deg, rgba(201, 164, 107, 0.28), rgba(201, 164, 107, 0.14)), var(--karte); }
.krone { position: absolute; top: -13px; right: -6px; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--tinte); border: 1.5px solid var(--gold); box-shadow: 0 3px 8px rgba(17, 16, 14, 0.3); }
.krone svg { width: 22px; height: 18px; display: block; }
/* Assistentinnen: Name, Infoknopf, Schalter. Der Satz bleibt versteckt, bis das i angetippt wird. */
.assistentin { padding: 6px 12px 0; }
.assistentin-zeile { gap: 10px; }
.assistentin .info-knopf, .assistentin .schalter { min-height: 0; text-decoration: none; padding: 0; }
.assistentin .info-knopf { width: 24px; height: 24px; border-radius: 999px; border: 1px solid rgba(17, 16, 14, 0.3); color: var(--text); font: italic 600 14px/1 var(--titel); display: grid; place-items: center; }
.assistentin .info-knopf[aria-expanded="true"] { background: var(--tinte); color: var(--creme); border-color: var(--tinte); }
.assistentin .schalter { width: 40px; height: 24px; border: 0; cursor: pointer; background: rgba(17, 16, 14, 0.22); }
.assistentin .schalter::after { width: 18px; height: 18px; top: 3px; left: 3px; }
.assistentin .schalter.an { background: var(--gruen); }
.assistentin .schalter.an::after { left: 19px; }
.assistentin-satz { margin: 6px 0 2px; }
.profil-knopf .zahnrad { display: inline-flex; color: var(--text); }
/* Akademie-Ebene: liegt über der App, Rahmen bleibt geladen, auch wenn sie zu ist (vorladen = unsichtbar, aber da) */
.akademie-ebene { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: var(--creme); }
.akademie-ebene.vorladen { visibility: hidden; pointer-events: none; }
.akademie-kopf { flex: none; display: flex; align-items: center; gap: 14px; height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 14px 0; background: var(--creme); color: var(--tinte); border-bottom: 1px solid var(--linie); }
.akademie-kopf .marke { padding: 0; font-size: 12px; color: var(--tinte); }
.akademie-titel { margin-left: auto; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); }
.akademie-zurueck { border: 0; border-radius: 12px; background: var(--tinte); color: var(--creme); font: inherit; font-size: 17px; font-weight: 600; min-height: 46px; padding: 0 20px; cursor: pointer; white-space: nowrap; }
.gh-wechsel { margin-left: auto; min-height: 36px; padding: 0 14px; border: 1px solid var(--tinte); border-radius: 10px; background: none; color: var(--tinte); font: inherit; font-size: 15px; cursor: pointer; }
.akademie-rahmen { flex: 1; width: 100%; border: 0; background: var(--creme); }
.akademie-decke { position: absolute; left: 0; right: 0; bottom: 0; top: calc(64px + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--creme) url("/img/wand.webp") center / cover no-repeat; }
.akademie-decke .marke { padding: 0; font-size: 18px; }
.akademie-ebene.bereit .akademie-decke { display: none; }
.akademie-decke .ebene-nochmal { display: none; }
.akademie-ebene.haengt .akademie-decke .ebene-nochmal { display: inline-flex; align-items: center; justify-content: center; }
.gh-wechsel + .gh-wechsel { margin-left: 0; }
@media (max-width: 560px) {
  #kanal-ebene .akademie-kopf, #guthaben-ebene .akademie-kopf { gap: 8px; padding-left: 10px; padding-right: 10px; }
  #kanal-ebene .akademie-kopf > .marke, #guthaben-ebene .akademie-kopf > .marke { display: none; }
  #kanal-ebene .akademie-zurueck, #guthaben-ebene .akademie-zurueck { font-size: 14px; min-height: 42px; padding: 0 10px; white-space: normal; line-height: 1.15; }
  #kanal-ebene .gh-wechsel, #guthaben-ebene .gh-wechsel { font-size: 14px; min-height: 42px; padding: 0 10px; line-height: 1.15; }
}
body.akademie-offen { overflow: hidden; }
.profil-name { display: flex; flex-direction: column; line-height: 1.15; }
.profil-unter { font-size: 13px; }
/* Seite Einstellungen: Zeilen mit Punkt, Text und Schalter rechts */
.einstellung-zeile { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linie); }
.einstellung-zeile:first-of-type { border-top: 0; }
.einstellung-zeile .punkt { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.einstellung-text { flex: 1; min-width: 0; line-height: 1.3; }
.einstellung-zeile .schalter { border: 0; padding: 0; cursor: pointer; }
.assistentin-satz, .assistentin button { color: var(--text); }
.assistentin-satz strong { color: var(--tinte); }
.profil-knopf { border-top-color: rgba(17, 16, 14, 0.15); color: var(--tinte); }
.profil-knopf:hover, .profil-knopf[aria-current="page"] { background: rgba(17, 16, 14, 0.06); }
/* Typografie der Website: Versal-Titel, Name in Bronze, Augenbraue, gesperrte Knöpfe */
h1 { text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.0; font-size: clamp(36px, 4.2vw, 52px); }
h1 .web-name { display: block; color: var(--bronze); }
/* Datum: nach Codex 16 px, normale Schreibweise, leicht gesperrt; Bronze bleibt (6,1:1 auf der Wand) */
.datum { font-size: 16px; letter-spacing: 0.04em; color: var(--bronze); margin-bottom: 10px; }
.datum::after { content: ''; display: block; width: 44px; height: 1px; background: var(--bronze); margin-top: 12px; }
h2 { font-family: var(--titel); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 22px; }
.fenster h2 { font-size: 30px; }
/* Knöpfe und Textknöpfe bleiben in der Grundgröße (Codex: 18 px, normale Schreibweise, das sind Arbeitsfunktionen) */
.textknopf, a.textknopf { color: var(--bronze); text-decoration: underline; text-underline-offset: 6px; }
.zeit { font-family: var(--titel); font-weight: 400; font-size: 21px; }
.zeit.kd-datum { width: 92px; white-space: nowrap; line-height: 1.2; }
.zeit.kd-datum small { display: block; font-size: 15px; opacity: 0.7; }
.woche button b { font-family: var(--titel); font-weight: 400; }
@media (max-width: 899px) {
  .seitenleiste { background: rgba(248, 243, 236, 0.78); border-right: 0; border-top: 1px solid var(--glas-rand); }
  .menue button[aria-current="page"] { background: none; color: var(--tinte); }
  .kopf-handy .marke { font-size: 13px; }
  h1 { font-size: clamp(30px, 8vw, 40px); }
}

/* Anmeldung: Personen mit PIN, weitere Wege, Freischaltcode (30.10.2026) */
.personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 6px; }
.person-knopf { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1px solid rgba(17, 16, 14, 0.25); border-radius: 14px; background: var(--karte); font-size: 18px; text-align: left; }
.person-knopf[aria-pressed="true"] { border-color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); font-weight: 600; }
.anmelde-wege { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.anmelde-wege .textknopf { font-size: 15px; }
.anmelde-hilfe { margin: 8px 0 0; font-size: 14px; }
.zugang-block { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(17, 16, 14, 0.12); }
.zugang-block:first-of-type { border-top: 0; padding-top: 0; }
.pin-zeile { display: flex; gap: 10px; align-items: center; }
.pin-zeile .feld { max-width: 220px; }
.frei-karte { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--gold); border-radius: 14px; background: var(--karte); }
.frei-code { margin: 0; font-family: var(--titel); font-size: 40px; letter-spacing: 0.12em; }
.frei-karte .qr { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; }
.zugang-block > .textknopf, .zugang-block .einstellung-zeile .textknopf { align-self: flex-start; padding: 0; min-height: 36px; }

/* Einstellungen als Kacheln mit Unterseiten (30.10.2026) */
.ekacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ekachel { min-height: 104px; gap: 8px; justify-content: space-between; }
.ekachel-kopf { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.ekachel-stand { font-size: 15px; font-weight: 400; color: var(--text); opacity: .85; }
.zeiten-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.tag-knopf { min-height: 44px; border: 1px solid rgba(17, 16, 14, 0.3); border-radius: 10px; background: var(--creme); font-size: 16px; }
.tag-knopf[aria-pressed="true"] { background: var(--tinte); color: var(--creme); border-color: var(--tinte); }
.team-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(17, 16, 14, 0.12); }
.team-zeile.aus { opacity: .6; }
.team-name { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.team-name .feld { max-width: 260px; }
.team-aktionen { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; justify-content: flex-end; }
.team-aktionen .textknopf { padding: 0; min-height: 36px; }
.umsatz-schalter { display: inline-flex; align-items: center; gap: 8px; }
.team-zeit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; flex: 1 1 100%; padding: 10px 14px; border: 1px solid var(--linie); border-radius: 12px; }
.team-zeit-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.team-neu { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.team-neu .feld { flex: 1 1 210px; min-width: 0; }
/* Arbeitszeiten je Person unter der Teamzeile (30.10.2026) */
.zt-zeile { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; max-width: 560px; }
.zt-zeile .feld { margin: 0; padding-left: 12px; padding-right: 8px; }
.zt-zeile .feld:disabled { opacity: 0.4; }
.zt-zu { display: flex; align-items: center; gap: 8px; font-size: 16px; min-height: 44px; white-space: nowrap; }
.zt-zu input { width: 24px; height: 24px; margin: 0; accent-color: var(--tinte); }
.az-feld { padding: 12px 0 16px 52px; border-bottom: 1px solid rgba(17, 16, 14, 0.12); }
.az-zeile { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 8px; max-width: 420px; }
.az-zeile .feld { margin: 0; padding-left: 12px; padding-right: 8px; }
.spalte.nicht-da { background: repeating-linear-gradient(135deg, rgba(17, 16, 14, 0.05) 0 8px, transparent 8px 16px); }
.bahn.nicht-da { background: repeating-linear-gradient(135deg, rgba(17, 16, 14, 0.08) 0 4px, transparent 4px 8px); }
@media (max-width: 599px) { .zt-zeile { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); margin-top: 12px; } .zt-name { grid-column: 1 / 3; } .zt-zu { grid-column: 3; justify-self: end; grid-row: 1; } .team-zeile { flex-wrap: wrap; } .team-aktionen { width: 100%; justify-content: flex-start; padding-left: 52px; } .zeiten-paar { grid-template-columns: 1fr; } .az-feld { padding-left: 0; } .az-zeile { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); margin-top: 12px; } .az-zeile > span:first-child { grid-column: 1 / -1; margin-bottom: -4px; } }

/* Deine KI verbinden (03.11.2026): eine Kachel je KI mit Logo, Schritten und eigenem Knopf; schmal untereinander. */
.ki-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.ki-kachel { background: var(--karte); border: 1px solid var(--glas-rand, rgba(17, 16, 14, 0.12)); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ki-kopf { display: flex; align-items: center; gap: 12px; }
.ki-kopf h2 { margin: 0; font-size: 22px; }
.ki-logo { width: 32px; height: 32px; flex: none; color: var(--tinte); }
.ki-schritte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ki-knopf { align-self: flex-start; margin-top: auto; }
.ki-neu { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ki-neu .knopf { align-self: flex-start; }

/* Kanal-Kacheln in der Etappe Verbindungen (kanaele.js, 04.11.2026): je Kanal eine Kachel mit Logo, zwei nebeneinander, am Handy eine. */
.kanal-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kanal-kachel { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.kanal-kachel .knopf { align-self: flex-start; margin-top: auto; }
.kanal-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kanal-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--linie); }
.kanal-logo svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .kanal-kacheln { grid-template-columns: 1fr; } }