/* Schaltplan – Aussehen: Blaue Stunde, rund und freundlich */
@font-face { font-family: "Nunito"; src: url("schrift/nunito-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("schrift/nunito-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("schrift/nunito-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* ===== HIER STEHEN DIE FARBEN =====
   Hex-Codes einfach austauschen.
   Der Hintergrund-Verlauf steht weiter unten bei "body" (oben, Mitte, unten). */
:root {
    --hintergrund: #efe8ee;
    --flaeche: #fffaf5;
    --rand: #e4d8dc;
    --text: #2e2b4f;
    --leise: #7d7590;
    --licht: #d0744f;
    --licht-zart: #fbe7dc;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: /* Verlauf: oben, Mitte, unten */ linear-gradient(180deg, #f6d6bd 0%, #f2e4e2 45%, #dcdcef 100%) fixed;
    min-height: 100vh;
    color: var(--text);
    font-family: "Nunito", ui-rounded, system-ui, sans-serif;
    line-height: 1.5;
}
a { color: var(--licht); }
.rahmen { max-width: 960px; margin: 0 auto; padding: 28px 16px 48px; }

/* Kopf */
.kopf {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    border-bottom: 1px solid var(--rand); padding-bottom: 12px; margin-bottom: 24px;
}
.titel { font-size: 1.8rem; font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: 0.02em; }
.titel span { color: var(--licht); }
.datum { color: var(--leise); font-size: 0.9rem; }
.kopf nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.leise { color: var(--leise); font-size: 0.9rem; text-decoration: none; }
.leise:hover { color: var(--licht); }
.knopf {
    display: inline-block; background: var(--text); color: var(--flaeche);
    padding: 8px 16px; border-radius: 20px; text-decoration: none; font-size: 0.95rem;
    border: 0; font-family: inherit; cursor: pointer;
}
.knopf:hover { background: var(--licht); }

/* Warnungen */
.warnungen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px; }
.warnung { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 14px 16px; }
.warnung h2 { font-weight: 700; font-size: 1.05rem; margin: 0 0 8px; }
.warnung.heute { border-color: var(--licht); }
.warnung.heute h2 { color: var(--licht); }
.warnung .ruhe { color: var(--leise); font-size: 0.9rem; margin: 0; }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kachel {
    position: relative; display: flex; align-items: center; gap: 14px;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: 20px;
    padding: 18px; min-height: 96px; color: var(--text); text-decoration: none;
    transition: border-color .15s, transform .15s;
}
a.kachel:hover { border-color: var(--text); transform: translateY(-1px); }
.kachel .name { font-size: 1.15rem; font-weight: 600; }
.kachel .zahl {
    position: absolute; top: 10px; right: 12px;
    background: var(--licht-zart); color: var(--licht); border-radius: 14px;
    font-size: 0.8rem; padding: 0 8px; font-family: system-ui, sans-serif;
}
.kachel.frei { background: transparent; border: 1px dashed var(--rand); justify-content: center; color: var(--rand); font-size: 1.6rem; }
.kachel.enden { background: transparent; border: 1.5px dashed var(--licht); }
.kachel.enden { background: var(--licht-zart); }

.bild { width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover; }
.bild.platzhalter {
    display: flex; align-items: center; justify-content: center;
    background: var(--licht-zart); color: var(--licht); font-size: 1.4rem; font-weight: 700;
}
.kachel.enden .bild.platzhalter { background: var(--flaeche); }

/* Kachelseite */
.seitentitel { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.seitentitel h1 { font-weight: 700; font-size: 1.6rem; margin: 0; }
h2.abschnitt { font-weight: normal; font-size: 1.05rem; color: var(--leise); margin: 28px 0 10px; }

/* Eintragslisten */
ul.liste { list-style: none; margin: 0; padding: 0; }
.eintrag {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px;
    padding: 10px 14px; margin-bottom: 8px;
}
.warnung .eintrag { background: transparent; border: 0; border-top: 1px solid var(--rand); border-radius: 0; padding: 8px 0; margin: 0; }
.eintrag .inhalt { flex: 1; min-width: 0; }
.eintrag .mehr { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--leise); margin-top: 2px; }
.eintrag .kabel { border: 1px solid var(--rand); border-radius: 14px; padding: 0 8px; }
.eintrag .hinweis { color: var(--licht); text-decoration: none; }
.eintrag.erledigt .text { text-decoration: line-through; color: var(--leise); }
.haken button {
    width: 24px; height: 24px; border: 1.5px solid var(--text); border-radius: 6px;
    background: transparent; color: var(--licht); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0;
}
.haken button:hover { border-color: var(--licht); }

/* Formulare */
.feld { margin-bottom: 16px; }
.feld label.titel-feld { display: block; margin-bottom: 6px; color: var(--leise); font-size: 0.95rem; }
textarea, input[type=text], input[type=date], input[type=password] {
    width: 100%; padding: 10px 12px; font-size: 1rem; font-family: inherit;
    background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: 8px;
}
textarea { min-height: 110px; resize: vertical; }
.auswahl { display: flex; flex-wrap: wrap; gap: 8px; }
.auswahl label {
    border: 1px solid var(--rand); border-radius: 18px; padding: 5px 12px; cursor: pointer;
    background: var(--flaeche); font-size: 0.95rem; user-select: none;
}
.auswahl input { margin-right: 6px; }
.auswahl label:has(input:checked) { border-color: var(--text); background: var(--text); color: var(--flaeche); }
.klein { color: var(--leise); font-size: 0.85rem; margin-top: 4px; }
.meldung { background: var(--licht-zart); border-radius: 8px; padding: 8px 12px; margin-bottom: 16px; }
.zeile2 { display: grid; grid-template-columns: 200px 1fr; gap: 14px; }

/* Anmeldung */
.anmeldung {
    max-width: 360px; margin: 12vh auto 0; padding: 28px;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: 20px;
}
.anmeldung .titel { display: block; margin-bottom: 18px; }
.anmeldung button { margin-top: 12px; width: 100%; }
.fehler { color: var(--licht); font-size: 0.9rem; margin-top: 10px; }
.hinweistext { color: var(--leise); font-size: 0.95rem; }

@media (max-width: 720px) {
    .kacheln { grid-template-columns: repeat(2, 1fr); }
    .warnungen { grid-template-columns: 1fr; }
    .zeile2 { grid-template-columns: 1fr; }
}
@media (max-width: 440px) { .kacheln { grid-template-columns: 1fr; } }

/* Machen-Liste */
.knopf.hell { background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); }
.knopf.hell:hover { background: var(--licht); color: var(--flaeche); border-color: var(--licht); }
.eintrag .schild { background: var(--licht-zart); color: var(--licht); border-radius: 10px; padding: 0 8px; font-weight: 600; }
.eintrag .outlook {
    text-decoration: none; border: 1px solid var(--licht); border-radius: 10px; padding: 0 8px;
}
.eintrag .outlook:hover { background: var(--licht); color: var(--flaeche); }

/* Kabel zwischen Einträgen */
.eintrag .kabel-link { text-decoration: none; color: var(--text); }
.eintrag .kabel-link:hover { color: var(--licht); }
.eintrag:target { border-color: var(--licht); box-shadow: 0 0 0 3px var(--licht-zart); }
#kabel-liste { margin-bottom: 8px; }

/* Nachklang und Lichtblick */
.tag { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--rand); }
.rueckblick { margin-top: 28px; }
.rueckblick details {
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px;
    padding: 10px 16px; margin-bottom: 10px;
}
.rueckblick summary { cursor: pointer; font-weight: 600; }
.tageseintrag { border-top: 1px solid var(--rand); padding: 10px 0; margin-top: 10px; }
.tagesdatum { color: var(--leise); font-size: 0.9rem; margin-bottom: 4px; }
.marke {
    display: inline-block; font-size: 0.8rem; font-weight: 600; margin-right: 8px;
    border-radius: 10px; padding: 0 8px; background: var(--hintergrund); color: var(--text);
}
.marke.licht { background: var(--licht-zart); color: var(--licht); }

/* Serien */
select {
    width: 100%; padding: 10px 12px; font-size: 1rem; font-family: inherit;
    background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); border-radius: 8px;
}
.eintrag .serie { color: var(--licht); font-weight: 600; }

/* Wichtig und Löschen */
.stern { font-size: 0.95em; }
form.loeschen { margin-top: 28px; }
form.loeschen button {
    background: transparent; border: 1px solid var(--rand); color: var(--leise);
    border-radius: 20px; padding: 6px 14px; font-family: inherit; font-size: 0.9rem; cursor: pointer;
}
form.loeschen button:hover { border-color: var(--licht); color: var(--licht); }

/* ===== Startseite: zwei Spalten ===== */
.rahmen { max-width: 1180px; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.zweispaltig .kacheln { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.zweispaltig .kachel { min-height: 64px; padding: 10px 14px; gap: 10px; border-radius: 16px; }
.zweispaltig .kachel .name { font-size: 1rem; }
.zweispaltig .bild { width: 52px; height: 52px; }
.zweispaltig .bild.platzhalter { font-size: 1rem; }
.zweispaltig .kachel .zahl { top: 6px; right: 8px; }
.zweispaltig .kachel.frei { min-height: 64px; font-size: 1.2rem; }

.heute, .woche { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.heute { border-color: var(--licht); }
.heute h2, .woche h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.heute h2 { color: var(--licht); }
.ruhe { color: var(--leise); font-size: 0.9rem; margin: 0; }
.heute .eintrag, .enden-leiste .eintrag { background: transparent; border: 0; border-top: 1px solid var(--rand); border-radius: 0; padding: 8px 0; margin: 0; }
.wt-zahl { background: var(--licht); color: var(--flaeche); border-radius: 10px; font-size: 0.75rem; padding: 0 7px; font-weight: 600; }

/* Tageszeilen */
.agenda { display: flex; flex-direction: column; }
.ag-tag { display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 6px 0; border-top: 1px solid var(--rand); }
.ag-tag:first-child { border-top: 0; }
.ag-datum { font-weight: 700; font-size: 0.9rem; padding-top: 1px; }
.ag-tag.leer { padding: 2px 0; }
.ag-tag.leer .ag-datum { color: var(--leise); font-weight: 400; }
.ag-nichts { color: var(--rand); }
.ag-eintrag { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0 2px 8px; border-left: 3px solid var(--rand); margin-bottom: 3px; font-size: 0.92rem; }
.ag-eintrag.machen { border-left-color: var(--licht); }
.ag-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-mehr { color: var(--leise); font-size: 0.8rem; white-space: nowrap; }
.ag-mehr a { color: var(--leise); }
.ag-mehr a:hover { color: var(--licht); }
details.danach { margin-top: 8px; border-top: 1px solid var(--rand); padding-top: 8px; }
details.danach summary, .enden-leiste summary { cursor: pointer; font-weight: 600; }
details.danach .agenda { margin-top: 6px; }

/* Offene Enden unten */
.enden-leiste { margin-top: 12px; background: transparent; border: 1.5px dashed var(--licht); border-radius: 16px; padding: 10px 14px; }
.enden-leiste summary { color: var(--licht); }
.enden-leiste .liste { margin-top: 8px; }

/* Blaue Stunde: Traum zum Auftakt */
.traum { background: var(--licht-zart); border-radius: 18px; padding: 14px 18px; margin-bottom: 22px; }
.traum-text { font-size: 1.1rem; margin-bottom: 4px; }
.traum-frage { color: var(--leise); font-size: 0.95rem; }
.traum-frage a { margin-left: 4px; }
textarea.links-feld { min-height: 64px; }

/* Einkaufsliste */
.einkauf { max-width: 560px; }
.ek-dazu { display: flex; gap: 8px; margin-bottom: 16px; }
.ek-dazu input { flex: 1; font-size: 1.1rem; padding: 12px 14px; }
.ek-dazu .knopf { font-size: 1.3rem; padding: 6px 18px; }
.ek-liste { list-style: none; margin: 0; padding: 0; }
.ek-liste li { margin-bottom: 8px; }
.ek-punkt {
    width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px;
    padding: 14px 16px; font-family: inherit; font-size: 1.1rem; color: var(--text); cursor: pointer;
}
.ek-kreis { width: 26px; height: 26px; flex: none; border: 2px solid var(--text); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--licht); font-size: 0.9rem; }
.ek-text { flex: 1; }
.ek-von { color: var(--leise); font-size: 0.8rem; }
.ek-punkt.erledigt { opacity: .55; }
.ek-punkt.erledigt .ek-text { text-decoration: line-through; }
.ek-punkt.erledigt .ek-kreis { border-color: var(--licht); }
.ek-weg button, .ek-klein {
    background: transparent; border: 1px solid var(--rand); color: var(--leise);
    border-radius: 20px; padding: 8px 16px; font-family: inherit; font-size: 0.95rem; cursor: pointer; margin-top: 6px;
}
.ek-teilen { margin-top: 28px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px; padding: 12px 16px; }
.ek-teilen summary { cursor: pointer; font-weight: 600; }
.ek-teilen input { font-size: 0.85rem; font-family: monospace; }

@media (max-width: 860px) { .zweispaltig { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ag-eintrag { flex-direction: column; gap: 0; } .ag-text { white-space: normal; } }

/* Orte */
.tour, .ort { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.tour h2, .ort h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }
.tour-zeile { display: flex; gap: 10px; margin-top: 10px; align-items: center; }
.tour-zeile input[type=date] { width: auto; }
.ort-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ort-termin { color: var(--leise); font-size: 0.85rem; }
.ort .eintrag { background: transparent; border: 0; border-top: 1px solid var(--rand); border-radius: 0; padding: 8px 0; margin: 0; }
.ort-dazu { display: flex; gap: 8px; margin-top: 10px; }
.ort-dazu input { flex: 1; }
.ort-weg { text-align: right; margin-top: 6px; }
.ort-weg button { background: none; border: 0; color: var(--leise); font-family: inherit; font-size: 0.8rem; cursor: pointer; }
.ort-weg button:hover { color: var(--licht); }
.ort.neu { background: transparent; border-style: dashed; }
.eintrag .ort-hinweis, .ag-mehr .ort-hinweis { text-decoration: none; color: var(--text); }
.ag-mehr .ort-hinweis { font-size: 0.8rem; margin-right: 6px; }
.ek-dort { margin-top: 24px; }
.ek-dort h2 { font-size: 1.05rem; margin: 0 0 10px; }

/* Wo liegt was (oben in jeder Kachel) */
.wo { background: var(--flaeche); border: 1px dashed var(--rand); border-radius: 18px; padding: 12px 16px; margin-bottom: 20px; }
.wo-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.wo-kopf h2 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: var(--leise); }
.wo-text { margin-bottom: 6px; }
.wo-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.wo-links a { text-decoration: none; }
.wo textarea { min-height: 80px; }

/* Erst aufbrauchen, In Outlook, Unverträglich */
.kasten-klein { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 12px 16px; margin-bottom: 16px; }
.kasten-klein h2 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.kasten-klein .eintrag { background: transparent; border: 0; border-top: 1px solid var(--rand); border-radius: 0; padding: 8px 0; margin: 0; }
.auf-dazu { display: flex; gap: 8px; margin-top: 10px; }
.auf-dazu input[type=text] { flex: 1; }
.auf-dazu input[type=date] { width: auto; }
.eintrag .ist-outlook { color: var(--leise); }
.ek-auf { background: var(--licht-zart); border-radius: 18px; padding: 12px 14px; margin-bottom: 18px; }
.ek-auf h2 { font-size: 1rem; margin: 0 0 8px; }
.ek-punkt.klein { padding: 10px 14px; font-size: 1rem; }
.ek-warn { color: var(--licht); font-size: 0.9rem; padding: 4px 16px 0; font-weight: 600; }
.ek-warn.noch { color: var(--text); }
.ek-zu-auf { display: flex; gap: 6px; justify-content: flex-end; padding: 4px 4px 0; }
.ek-zu-auf input[type=date] { width: auto; padding: 4px 8px; font-size: 0.85rem; }
.ek-zu-auf button { background: transparent; border: 1px solid var(--licht); color: var(--licht); border-radius: 16px; padding: 4px 12px; font-family: inherit; cursor: pointer; }
.ek-unv { margin-top: 22px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px; padding: 10px 14px; }
.ek-unv summary { cursor: pointer; font-weight: 600; }
.ek-unv-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ek-unv-wort { display: inline-flex; align-items: center; gap: 4px; background: var(--licht-zart); border-radius: 14px; padding: 2px 4px 2px 10px; }
.ek-unv-wort button { background: none; border: 0; color: var(--licht); font-size: 1rem; cursor: pointer; }
.auf-dazu { flex-wrap: wrap; }
.auf-dazu input[type=text] { min-width: 55%; }

/* Läden und Städte */
.stadt { margin-bottom: 18px; }
.stadt-name { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; }
.stadt .ort { margin-bottom: 10px; }
.ort h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.ort-einkauf { font-size: 0.9rem; margin-bottom: 6px; }
.ort-neu-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ort-neu-form input { flex: 1; min-width: 160px; }
.ek-dazu { flex-wrap: wrap; }
.ek-laden { flex-basis: 100%; }
.ek-gruppe { font-size: 0.95rem; font-weight: 700; color: var(--leise); margin: 14px 0 6px; }

/* Laufzettel */
.lz { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px; }
.lz h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.lz-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.stationen { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.stationen li { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rand); flex-wrap: wrap; }
.stationen li.spaeter { opacity: .5; }
.stationen li.jetzt .st-text { font-weight: 700; }
.stationen li.erledigt .st-text { text-decoration: line-through; color: var(--leise); }
.st-wo { color: var(--leise); font-size: 0.85rem; }
.lz.neu { border-style: dashed; background: transparent; }
.station-zeile { display: flex; gap: 10px; margin-bottom: 10px; }
.st-nr { padding-top: 10px; color: var(--leise); width: 20px; }
.st-felder { flex: 1; }
.st-orte { margin-top: 4px; }
.st-orte summary { cursor: pointer; color: var(--leise); font-size: 0.85rem; }
.st-stadt { margin-top: 6px; }
.st-stadt > span { font-size: 0.8rem; color: var(--leise); display: block; margin-bottom: 4px; }
.eintrag .lz-hinweis { text-decoration: none; color: var(--text); }

/* Touren */
.plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: var(--flaeche); border: 1px solid var(--licht); border-radius: 18px; padding: 14px 16px; margin-bottom: 18px; position: sticky; top: 8px; z-index: 2; max-height: 60vh; overflow: auto; }
.plan h2 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.plan-spalte .m-name { font-weight: 700; margin-top: 6px; font-size: 0.9rem; }
.p-zeile, .m-zeile { font-size: 0.88rem; padding: 2px 0; }
.p-zeile em { color: var(--licht); font-style: normal; }
.plan-speichern { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--rand); padding-top: 10px; }
.plan-speichern input { width: auto; }
.kandidaten h2 { font-size: 1.05rem; font-weight: 700; }
.kandidat { display: grid; grid-template-columns: 22px 24px 1fr auto; gap: 4px 10px; align-items: center; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; }
.kandidat.gewaehlt { border-color: var(--licht); background: var(--licht-zart); }
.k-wo { grid-column: 3; color: var(--leise); font-size: 0.85rem; }
.k-dringend { grid-column: 4; grid-row: 1 / span 2; color: var(--leise); font-size: 0.85rem; text-align: right; }
.tour-geplant { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-top: 1px solid var(--rand); }
.leise-knopf { background: none; border: 0; color: var(--leise); cursor: pointer; font-family: inherit; }

/* Orte: gerne */
.gerne { font-size: 0.92rem; margin: 4px 0 6px; }
.gerne-edit summary { cursor: pointer; color: var(--leise); font-size: 0.85rem; }
.gerne-edit textarea { min-height: 60px; margin: 6px 0; }

/* Handy: Tour heute */
.ek-tour { background: var(--licht-zart); border-radius: 18px; padding: 12px 14px; margin-bottom: 18px; }
.ek-tour h2 { font-size: 1.05rem; margin: 0 0 6px; }
.ek-tour-stadt { font-weight: 700; margin: 10px 0 6px; }
.ek-moeglich { font-size: 0.9rem; padding: 2px 4px; }

@media (max-width: 720px) {
    .plan { grid-template-columns: 1fr; position: static; max-height: none; }
    .kandidat { grid-template-columns: 22px 24px 1fr; }
    .k-dringend { grid-column: 3; grid-row: auto; text-align: left; }
}

/* Mitbringen: Stufen, Augen auf, für */
.ek-optionen { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 0.95rem; }
.ek-optionen .ek-laden { flex: 1; min-width: 180px; }
.ek-augen .ek-punkt { opacity: .85; background: transparent; }
.ek-fuer { display: block; font-size: 0.8rem; color: var(--leise); }

/* Dafür brauche ich */
.bedarf { margin-top: 6px; font-size: 0.88rem; }
.bedarf-dinge { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
.bedarf-dinge .fertig { color: var(--leise); text-decoration: line-through; }
.bedarf summary { cursor: pointer; color: var(--leise); }
.bedarf summary:hover { color: var(--licht); }
.bedarf-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 520px; }
.bedarf-form .knopf { align-self: flex-start; }
.datum-hinweis { color: var(--licht); font-size: 0.9rem; font-weight: 600; }

/* Kalender */
.kal-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.kal-kopf h1 { font-size: 1.6rem; font-weight: 700; margin: 0; min-width: 220px; text-align: center; }
.kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.kal-wt { text-align: center; font-weight: 700; color: var(--leise); font-size: 0.85rem; }
.kal-tag { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 6px; min-height: 104px; display: flex; flex-direction: column; gap: 4px; }
.kal-tag.wochenende { background: var(--licht-zart); }
.kal-tag.fremd { opacity: .45; }
.kal-tag.heute { border: 2px solid var(--licht); }
.kal-nr { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--text); text-decoration: none; font-size: 0.9rem; }
.kal-wt-klein { display: none; }
.kal-plus { color: var(--rand); font-weight: 400; }
.kal-nr:hover .kal-plus { color: var(--licht); }
.kal-eintrag { font-size: 0.78rem; line-height: 1.25; border-left: 3px solid var(--rand); padding-left: 5px; }
.kal-eintrag.machen { border-left-color: var(--licht); }
.kal-eintrag a { color: var(--text); text-decoration: none; }
.kal-eintrag a:hover { color: var(--licht); }
.kal-zu-outlook { display: block; color: var(--leise) !important; font-size: 0.72rem; }
.kal-outlook { font-size: 0.75rem; }
@media (max-width: 720px) {
    .kalender { grid-template-columns: 1fr; }
    .kal-wt, .kal-tag.leer.fremd, .kal-tag.fremd { display: none; }
    .kal-tag { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: baseline; }
    .kal-tag.leer { padding: 4px 8px; opacity: .6; }
    .kal-nr { width: 60px; justify-content: flex-start; gap: 6px; }
    .kal-wt-klein { display: inline; font-weight: 400; color: var(--leise); }
    .kal-eintrag { flex-basis: calc(100% - 70px); margin-left: auto; font-size: 0.9rem; }
    .kal-kopf h1 { min-width: 0; font-size: 1.3rem; }
}

/* Handy-Links */
.handy-links { margin-top: 22px; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px; padding: 10px 14px; }
.handy-links summary { cursor: pointer; font-weight: 600; }
.hl-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--rand); }
.hl-knoepfe { display: flex; gap: 8px; align-items: center; }
.hl-knoepfe .knopf { padding: 5px 12px; font-size: 0.85rem; }
.hl-neu { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hl-neu input { flex: 1; min-width: 180px; }
.hl-neu select { width: auto; }

/* Mitbringen am Rechner: normale Breite, zwei Spalten */
.ek-zweispaltig { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ek-zweispaltig .ek-unv { margin-top: 14px; }
@media (max-width: 860px) { .ek-zweispaltig { grid-template-columns: 1fr; } }

/* Kachelbilder: immer ganz zeigen, nichts abschneiden (Format 256 x 256) */
img.bild { border-radius: 10px; object-fit: contain; background: transparent; }

/* Orte kompakt: ein Standort pro Zeile */
.stadt { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px; padding: 10px 16px; margin-bottom: 12px; }
.stadt .stadt-name { font-size: 1.1rem; margin: 0 0 4px; }
.st-reihe { display: grid; grid-template-columns: 180px 1fr auto auto; gap: 4px 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--rand); font-size: 0.95rem; }
.st-name { font-weight: 700; }
.st-weg { margin: 0; }
.st-dinge, .st-edit { grid-column: 1 / -1; }
.st-dinge { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 0.85rem; color: var(--leise); padding-left: 192px; }
.st-edit { display: flex; gap: 8px; align-items: center; padding: 4px 0 2px 192px; }
.st-edit input { flex: 1; }
@media (max-width: 720px) {
    .st-reihe { grid-template-columns: 1fr auto auto; }
    .st-gerne { grid-column: 1 / -1; grid-row: 2; }
    .st-dinge, .st-edit { padding-left: 0; }
}

/* Kachelseite: eigenes Bild groß (250 x 250), Platzhalter bleibt klein */
.seitentitel { flex-wrap: wrap; }
.seitentitel img.bild { width: 250px; height: 250px; }
.enden-leiste summary .bild { display: inline-flex; vertical-align: middle; width: 52px; height: 52px; margin-right: 10px; }

/* Zettel für mich: zwischen Heute dran und Bald drum kümmern */
.zettel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.zettel h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; }
.zettel h2 .leise { font-size: 0.85rem; font-weight: 400; }
.zettel p { margin: 0; }
/* Zettel für mich und Knopf Blaue Stunde: Pastellblau mit dunkler Schrift */
:root { --pastellblau: #cdd9f2; }
.zettel { background: var(--pastellblau); border-color: var(--pastellblau); color: var(--text); }
.zettel h2 { color: var(--text); }
.zettel h2 .leise { color: var(--text); }
.knopf.blau { background: var(--pastellblau); color: var(--text); }
.knopf.blau:hover { background: var(--licht); color: var(--flaeche); }
.unten-link { margin-top: 18px; }

/* Routinen: Zeile unter der Menüleiste, gleich groß wie die Knöpfe */
.routinen { flex-basis: 100%; display: flex; justify-content: flex-end; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.routinen form { margin: 0; }
.knopf.routine { background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); line-height: 1.3; }
.knopf.routine:hover { background: var(--licht); color: var(--flaeche); border-color: var(--licht); }
.knopf.routine.fertig { background: var(--pastellblau); border-color: var(--pastellblau); color: var(--text); }
.routine-schoen { position: relative; }
.routine-schoen summary { list-style: none; }
.routine-schoen summary::-webkit-details-marker { display: none; }
.routine-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 320px; max-width: 90vw;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px; padding: 12px 14px;
    box-shadow: 0 6px 24px rgba(46, 43, 79, 0.12);
}
.rp-titel { font-size: 0.85rem; color: var(--leise); margin: 6px 0 4px; }
.rp-wahl {
    display: block; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--rand);
    padding: 8px 2px; font-family: inherit; font-size: 0.95rem; color: var(--text); cursor: pointer;
}
.rp-wahl:hover { color: var(--licht); }
.rp-wahl.vorschlag { border-top: 0; background: var(--licht-zart); border-radius: 10px; padding: 8px 10px; }
.rp-anderes { display: flex; gap: 8px; margin-top: 10px; }
.rp-anderes input { flex: 1; min-width: 0; }
@media (max-width: 720px) {
    .routinen { justify-content: flex-start; }
    .routine-panel { left: 0; right: auto; }
}

/* Blaue Stunde als Durchgang */
.bs-schritt { margin-bottom: 30px; }
.bs-unter { font-size: 0.9rem; color: var(--leise); margin: 8px 0 4px; }
.bs-routinen { list-style: none; padding: 0; margin: 0; }
.bs-routinen li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--rand); }
.bs-r-form { display: flex; gap: 8px; margin: 0; }
.bs-ende { padding-top: 6px; }

/* Touren: Wohin geht's? */
.wohin { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 14px 16px; margin-bottom: 18px; }
.wohin h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; }
.ziel-neu { display: flex; gap: 8px; margin-top: 10px; max-width: 420px; }
.ziel-neu input { flex: 1; min-width: 0; }

/* ===== Routinen-Knöpfe in eigenen Farben (05.10.2026) =====
   Farben hier austauschen. Die Zeichen vor den Namen stehen in functions.php
   und lassen sich in config.php pro Routine mit 'zeichen' => '…' ändern. */
:root {
    --blau-hell: #e3eafc;
    --blau-mitte: #c3d3f4;
    --blau-tief: #a9bfee;
    --blau-schatten: rgba(72, 98, 170, 0.38);
    --sattgruen: #2e7d32;
    --sattgruen-dunkel: #1b5e20;
    --bewegt: #f6e3c6;
    --bewegt-rand: #e9cfa5;
    --bewegt-hover: #efd3a6;
}

/* Blaue Stunde: immer blau, mit Schatten und funkelndem Stern */
.knopf.routine.r-blaue, .knopf.routine.r-blaue.fertig {
    background: linear-gradient(135deg, var(--blau-hell) 0%, var(--blau-mitte) 55%, var(--blau-tief) 100%);
    border: 1px solid var(--blau-tief); color: var(--text); font-weight: 600;
    box-shadow: 0 4px 14px var(--blau-schatten), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform .15s, box-shadow .15s;
}
.knopf.routine.r-blaue:hover {
    background: linear-gradient(135deg, var(--blau-mitte) 0%, var(--blau-tief) 100%);
    border-color: var(--blau-tief); color: var(--text);
    box-shadow: 0 7px 20px var(--blau-schatten), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
}
.r-blaue .r-zeichen { display: inline-block; animation: funkeln 2.8s ease-in-out infinite; }
@keyframes funkeln {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.2) rotate(12deg); opacity: .75; }
}

/* Was Schönes: sattgrün mit Glühbirne */
.knopf.routine.r-schoen, .knopf.routine.r-schoen.fertig {
    background: var(--sattgruen); border-color: var(--sattgruen); color: #fff;
}
.knopf.routine.r-schoen:hover { background: var(--sattgruen-dunkel); border-color: var(--sattgruen-dunkel); color: #fff; }

/* Genug bewegt: warmer Sandton, ganz ohne Mahnfinger */
.knopf.routine.r-bewegt, .knopf.routine.r-bewegt.fertig {
    background: var(--bewegt); border-color: var(--bewegt-rand); color: var(--text);
}
.knopf.routine.r-bewegt:hover { background: var(--bewegt-hover); border-color: var(--bewegt-rand); color: var(--text); }

@media (prefers-reduced-motion: reduce) {
    .r-blaue .r-zeichen { animation: none; }
    .knopf.routine.r-blaue:hover { transform: none; }
}

/* Bearbeiten: Knopf "in Outlook" unter dem Formular */
.bearbeiten-outlook { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; }
.bearbeiten-outlook .klein { margin-top: 0; }
.bearbeiten-outlook .ist-outlook { color: var(--leise); }

/* Bald drum kümmern: nichts mehr abschneiden, lange Zeilen brechen um */
.ag-tag { grid-template-columns: 82px minmax(0, 1fr); }
.ag-eintrag { flex-wrap: wrap; }
.ag-mehr { white-space: normal; }

/* Abhaken auf der Startseite */
.ag-eintrag.mit-haken { align-items: flex-start; }
.ag-eintrag.mit-haken .ag-text { flex: 1 1 auto; }
.ag-haken { margin: 0; flex: none; }
.ag-haken button { width: 18px; height: 18px; border-radius: 5px; margin-top: 2px; font-size: 0.8rem; }
.ag-haken button:hover::after, .heute .haken button:hover::after { content: "✓"; color: var(--licht); }
.ag-haken-platz { flex: none; width: 18px; font-size: 0.8rem; line-height: 1.6; text-align: center; }
.heute .eintrag .haken { margin-top: 2px; }
.geschafft {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    background: #e3f1e1; color: #1b5e20; border-radius: 10px; padding: 6px 12px; margin-bottom: 8px; font-weight: 600;
}
.geschafft form { margin: 0; }
.geschafft .leise-knopf { font-size: 0.85rem; font-weight: 400; }

/* Orte: "+ Eintrag hier" neben "ändern" */
.st-aktionen { display: inline-flex; gap: 12px; align-items: baseline; white-space: nowrap; }
.st-neu { font-size: 0.85rem; text-decoration: none; font-weight: 600; }
.st-neu:hover { text-decoration: underline; }

/* Bearbeiten: Wo liegt was zum Aufklappen */
.wo-nachschauen { background: var(--flaeche); border: 1px dashed var(--rand); border-radius: 14px; padding: 8px 14px; margin-bottom: 16px; }
.wo-nachschauen summary { cursor: pointer; font-weight: 600; color: var(--leise); }
.wo-nachschauen[open] summary { margin-bottom: 8px; }
.wo-block + .wo-block { border-top: 1px solid var(--rand); margin-top: 8px; padding-top: 8px; }
.wo-kachel { font-size: 0.85rem; font-weight: 700; color: var(--leise); margin-bottom: 4px; }

/* Wo liegt was: Rückmeldung nach dem Speichern */
.wo-meldung { border-radius: 10px; padding: 6px 12px; margin-bottom: 8px; font-weight: 600; }
.wo-meldung.gut { background: #e3f1e1; color: #1b5e20; }
.wo-meldung.schlecht { background: #fbe1dc; color: #8a2a12; }

/* Bearbeiten: kurz, alles zum Aufklappen (auch fürs Handy) */
form.bearbeiten { max-width: 760px; }
textarea.text-kurz { min-height: 70px; }
.schalter { display: flex; gap: 8px; margin: -6px 0 12px; }
.schalter label { border: 1px solid var(--rand); border-radius: 18px; padding: 4px 12px; background: var(--flaeche); cursor: pointer; font-size: 0.95rem; }
.schalter label:has(input:checked) { border-color: var(--text); background: var(--text); color: var(--flaeche); }
.schalter input { margin-right: 6px; }
details.zeile { border-top: 1px solid var(--rand); }
details.zeile:last-of-type { border-bottom: 1px solid var(--rand); }
details.zeile summary { list-style: none; display: flex; gap: 12px; align-items: baseline; padding: 10px 2px; cursor: pointer; }
details.zeile summary::-webkit-details-marker { display: none; }
details.zeile summary::after { content: "▸"; margin-left: auto; color: var(--leise); }
details.zeile[open] summary::after { content: "▾"; }
.z-name { flex: none; width: 96px; font-weight: 600; }
.z-wert { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.z-wert .leer { color: var(--leise); }
.z-inhalt { padding: 2px 2px 14px; }
.z-inhalt .auswahl { margin-bottom: 8px; }
.z-inhalt .auswahl a { text-decoration: none; margin-left: 2px; }
.termin { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.termin label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--leise); }
.termin input, .termin select { width: auto; min-width: 140px; }
input.suche { max-width: 360px; }
.auswahl.gewaehlt:empty { display: none; }
.knopf.speichern { margin-top: 16px; padding: 10px 26px; font-size: 1rem; }
@media (max-width: 520px) { .z-name { width: 78px; } }

/* Wichtig, aber nicht dringend */
.sterne { background: var(--flaeche); border: 1px solid #e8c766; border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.sterne h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sterne h2 .leise { font-size: 0.85rem; font-weight: 400; }
.sterne .eintrag { background: transparent; border: 0; border-top: 1px solid var(--rand); border-radius: 0; padding: 8px 0; margin: 0; }
.wichtig-zeile { align-items: center; }
.woche-form { margin: 0; flex: none; }
.woche-knopf { border: 1px solid var(--rand); background: var(--flaeche); color: var(--leise); border-radius: 16px; padding: 4px 12px; font-family: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.woche-knopf.jetzt { background: #fbeec2; border-color: #e8c766; color: var(--text); font-weight: 600; }
.woche-knopf.bald { color: var(--text); }
.bs-wichtig { margin: -10px 0 26px; }
.bs-wichtig a { text-decoration: none; font-weight: 600; }

/* Blaue Stunde: leise Routinen und Rückblick */
.bs-leise .bs-r-name { color: var(--leise); }
.marke.gut { background: #e3f1e1; color: #1b5e20; }
.bs-tag-routinen { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }

/* Wichtig: Woche und "später" nebeneinander */
.wann { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
select.monat-wahl { width: auto; padding: 4px 8px; font-size: 0.85rem; border-radius: 16px; color: var(--leise); }
@media (max-width: 520px) { .wichtig-zeile { flex-wrap: wrap; } .wann { width: 100%; justify-content: flex-start; padding-left: 36px; } }

/* Kachelreihe unter der Menüleiste (alle Seiten außer Startseite) */
.kachel-reihe { flex-basis: 100%; display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: thin; }
.kachel-reihe a { flex: none; border-radius: 12px; padding: 2px; border: 2px solid transparent; line-height: 0; }
.kachel-reihe a.hier { border-color: var(--licht); }
.kachel-reihe a:hover { border-color: var(--rand); }
.kachel-reihe .bild { width: 38px; height: 38px; font-size: 0.95rem; }
.z-name.z-breit { width: auto; }
.z-plus { color: var(--licht); font-weight: 600; }

/* Touren: geplante Touren oben, zum Öffnen */
.tour-oeffnen { text-decoration: none; color: var(--text); flex: 1; min-width: 0; }
.tour-oeffnen:hover .z-plus { text-decoration: underline; }
.tour-geplant.offen { background: var(--licht-zart); border-radius: 8px; padding-left: 6px; }
.tour-hinweis a { margin-left: 4px; }

/* Touren: ausgeblendete Zeilen wirklich ausblenden */
.kandidat[hidden] { display: none; }

/* Nicht vergessen: Traum und In Outlook unter dem Formular */
.nach-formular { margin-top: 28px; }

/* Tour am Handy: Hinweis auf Mitbringen */
.ek-schau { margin: -8px 0 18px; }
.ek-schau a { text-decoration: none; font-weight: 600; }
/* Touren: ⭐ auf dem Weg? */
.sterne-tour summary { cursor: pointer; font-weight: 600; }
.stern-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rand); margin: 0; }
/* Was Schönes: was heute schon war */
.rp-heute { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 2px 2px; font-size: 0.95rem; }

/* Mitbringen: ändern */
.ek-aendern { padding: 0 16px; margin-top: -2px; }
.ek-aendern summary { cursor: pointer; color: var(--leise); font-size: 0.8rem; list-style: none; text-align: right; }
.ek-aendern summary::-webkit-details-marker { display: none; }
.ek-aendern[open] summary { color: var(--licht); }
.ek-aendern-form { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; }

/* "Pass auf, das ist die Idee" */
.idee { background: rgba(255,255,255,0.45); border: 1px dashed rgba(120,100,140,0.25); border-radius: 14px; padding: 8px 14px; margin: 0 0 16px; font-size: 0.85rem; color: var(--leise); line-height: 1.45; }
.idee-titel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; margin-bottom: 2px; }
.idee-zeile strong { color: var(--text, inherit); font-weight: 600; }

/* Was Schönes: Idee und "als kleine Freude merken" */
.rp-idee { font-size: 0.8rem; color: var(--leise); line-height: 1.4; margin-bottom: 8px; }
.rp-anderes { flex-wrap: wrap; }
.rp-merken { flex-basis: 100%; font-size: 0.82rem; color: var(--leise); display: flex; align-items: center; gap: 6px; }
.rp-merken input { width: auto; flex: none; }

/* Mitbringen: Knopf Einkaufstour */
.ek-tourknopf { margin: 4px 0 14px; }

/* Touren: Arten, Boxen, Name, Abschließen, alte Touren */
.tour-arten { margin-bottom: 4px; }
.box-wahl { display: flex; align-items: center; gap: 8px; flex: 1; cursor: pointer; }
.box-wahl input { width: auto; flex: none; }
.freude-neu { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--rand); }
.freude-neu input { flex: 1; min-width: 0; }
.tour-umschalten { margin: 0 0 16px; }
.nur-voll[hidden], .nur-einkauf[hidden] { display: none; }
.plan-speichern { flex-wrap: wrap; }
.plan-speichern .tour-name { flex: 1; min-width: 200px; width: auto; }
.tour-geplant { gap: 8px; }
.tour-geplant .tour-oeffnen { flex: 1; }
.tour-abschluss-knopf { padding: 4px 12px; font-size: 0.85rem; }
.tour-abschluss { border-color: var(--licht); }
.abschluss-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--rand); cursor: pointer; }
.abschluss-zeile input { width: auto; flex: none; }
.alte-touren > summary, .alte-tour > summary { cursor: pointer; }
.alte-tour { border-top: 1px solid var(--rand); padding: 6px 0; }
.alte-zeile { font-size: 0.88rem; color: var(--leise); padding: 2px 0 2px 18px; }
.alte-zeile.ok { color: var(--text); }
.alte-zeile.entdeckt { color: var(--text); }

/* Kopfbild im Hinweis (bilder/kopf-<seite>.jpg oder kopf-alle.jpg) */
.idee.mit-bild { padding-top: 0; overflow: hidden; }
.idee-bild { display: block; width: calc(100% + 28px); margin: 0 -14px 8px; height: 160px; object-fit: cover; }
@media (max-width: 700px) { .idee-bild { height: 110px; } }

/* Mitbringen kompakt: schmale Zeilen wie auf einem Zettel, "ändern" rechts in der Zeile */
.ek-liste { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; margin-bottom: 6px; }
.ek-liste li { display: flex; flex-wrap: wrap; align-items: center; margin: 0; border-top: 1px solid var(--rand); }
.ek-liste li:first-child { border-top: 0; }
.ek-liste li > form:first-child { flex: 1 1 200px; min-width: 0; }
.ek-liste > form + form .ek-punkt { border-top: 1px solid var(--rand); }
.ek-punkt, .ek-punkt.klein { border: 0; border-radius: 0; background: transparent; padding: 8px 12px; font-size: 1rem; gap: 10px; }
.ek-kreis { width: 20px; height: 20px; border-width: 1.5px; font-size: 0.75rem; }
.ek-aendern { padding: 0 12px 0 0; margin: 0; }
.ek-aendern[open] { flex-basis: 100%; padding: 0 12px 8px; }
.ek-warn { flex-basis: 100%; padding: 0 12px 6px 42px; font-size: 0.85rem; }
.ek-zu-auf { flex-basis: 100%; padding: 0 12px 6px; }

/* Mitbringen schlicht: keine Kästen, 12 px, feine Linien */
.einkauf-breit .ek-liste, .einkauf .ek-liste { background: transparent; border: 0; border-radius: 0; margin: 0 0 4px; }
.einkauf-breit .ek-liste li, .einkauf .ek-liste li { border-top: 0; border-bottom: 1px solid var(--rand); }
.einkauf-breit .ek-punkt, .einkauf .ek-punkt { font-size: 12px; padding: 4px 2px; gap: 8px; }
.einkauf-breit .ek-kreis, .einkauf .ek-kreis { width: 14px; height: 14px; border-width: 1.5px; font-size: 10px; }
.einkauf-breit .ek-von, .einkauf .ek-von, .einkauf-breit .ek-aendern summary, .einkauf .ek-aendern summary { font-size: 11px; }
.einkauf-breit .ek-fuer, .einkauf .ek-fuer { font-size: 10px; }
.einkauf-breit .ek-aendern, .einkauf .ek-aendern { padding: 0 2px 0 0; }
.einkauf-breit .ek-aendern[open], .einkauf .ek-aendern[open] { padding: 0 2px 6px; }
.einkauf-breit .ek-warn, .einkauf .ek-warn { font-size: 11px; padding: 0 2px 4px 24px; }
.einkauf-breit .ek-zu-auf, .einkauf .ek-zu-auf { padding: 0 2px 6px; }
.einkauf-breit .ek-zu-auf input, .einkauf-breit .ek-zu-auf button { font-size: 11px; padding: 2px 8px; }
.einkauf-breit .ek-gruppe, .einkauf .ek-gruppe { font-size: 12px; margin: 10px 0 2px; }
.einkauf-breit .ek-auf, .einkauf .ek-auf, .einkauf-breit .ek-unv, .einkauf .ek-unv { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 14px; }
.einkauf-breit .ek-auf h2 { font-size: 13px; }
.einkauf-breit .ek-unv summary, .ek-erledigt summary { font-size: 12px; font-weight: 700; color: var(--leise); cursor: pointer; }
.ek-erledigt { margin: 0 0 14px; }
.ek-erledigt .ek-weg { margin-top: 6px; }
.ek-erledigt .ek-weg button { font-size: 11px; }
.einkauf-breit .ek-augen .ek-punkt { opacity: 1; }
.einkauf-breit .ek-aendern summary, .einkauf .ek-aendern summary { margin-left: 8px; }

/* Mitbringen: auch die Eingabe klein und leise */
.einkauf-breit .ek-komma { font-size: 11px; margin: 0 0 4px; }
.einkauf-breit .ek-dazu { gap: 6px; margin-bottom: 8px; align-items: center; }
.einkauf-breit .ek-dazu input[type=text] { font-size: 12px; padding: 5px 8px; border-radius: 8px; }
.einkauf-breit .ek-dazu .knopf { font-size: 13px; padding: 3px 10px; background: transparent; color: var(--text); border: 1px solid var(--rand); }
.einkauf-breit .ek-optionen { font-size: 12px; gap: 4px 12px; }
.einkauf-breit .ek-optionen .ek-laden, .einkauf-breit .ek-aendern-form select, .einkauf-breit .ek-aendern-form input[type=text] { font-size: 12px; padding: 3px 6px; border-radius: 8px; min-width: 140px; }
.einkauf-breit .ek-aendern-form .knopf { font-size: 12px; padding: 3px 10px; }
.einkauf-breit .ek-tourknopf { margin: 0 0 8px; }
.einkauf-breit .ek-tourknopf .knopf { font-size: 12px; padding: 2px 10px; background: transparent; border: 0; color: var(--leise); text-decoration: underline; }
.einkauf-breit .auf-dazu { gap: 6px; }
.einkauf-breit .auf-dazu input { font-size: 12px; padding: 4px 8px; border-radius: 8px; }
.einkauf-breit .auf-dazu .knopf { font-size: 12px; padding: 2px 10px; }
.einkauf-breit .ek-auf .ruhe { font-size: 12px; }

/* Nicht vergessen / Bearbeiten: links groß der Text, rechts ein kleiner, leiser Kasten */
form.bearbeiten.zweiteilig { max-width: none; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.zweiteilig textarea.text-kurz { min-height: 220px; }
.zweiteilig .knopf.speichern { margin-top: 10px; }
.b-rechts { font-size: 12px; background: rgba(255,255,255,0.35); border: 1px dashed var(--rand); border-radius: 12px; padding: 8px 10px; }
.b-rechts .schalter { margin: 0 0 6px; gap: 6px; }
.b-rechts .schalter label { font-size: 12px; padding: 2px 10px; }
.b-rechts details.zeile summary { padding: 5px 2px; gap: 8px; }
.b-rechts details.zeile:first-of-type { border-top: 0; }
.b-rechts details.zeile:last-of-type { border-bottom: 0; }
.b-rechts .z-name { width: 72px; font-weight: 600; }
.b-rechts .z-name.z-breit { width: auto; }
.b-rechts .z-inhalt { padding: 2px 2px 10px; }
.b-rechts .auswahl label { font-size: 12px; padding: 2px 8px; }
.b-rechts input, .b-rechts select, .b-rechts textarea { font-size: 12px; padding: 4px 8px; }
.b-rechts .klein { font-size: 11px; }
.b-rechts .termin label { font-size: 12px; }
@media (max-width: 760px) { form.bearbeiten.zweiteilig { grid-template-columns: 1fr; } .zweiteilig textarea.text-kurz { min-height: 110px; } }

/* Mitbringen: mehrere Läden ankreuzen */
.ek-laeden { position: relative; flex: 1; min-width: 140px; }
.ek-laeden summary { list-style: none; cursor: pointer; font-size: 12px; border: 1px solid var(--rand); border-radius: 8px; padding: 4px 8px; background: var(--flaeche); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-laeden summary::-webkit-details-marker { display: none; }
.ek-laeden-liste { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; margin-top: 4px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); max-height: 220px; overflow-y: auto; }
.ek-laeden-liste label { font-size: 12px; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.ek-laeden-liste input { width: auto; }
.ek-laeden-liste { position: absolute; left: 0; right: 0; z-index: 20; box-shadow: 0 6px 18px rgba(40,30,60,0.12); }
.ek-laeden-liste label { justify-content: flex-start; text-align: left; padding: 2px 0; }
.ek-laeden-liste input { flex: none; margin: 0; width: auto; }

/* Kachelseiten: "+ dafür brauche ich" klein und leise */
.bedarf { font-size: 12px; }
.bedarf-form { gap: 4px; max-width: 420px; }
.bedarf-form input[type=text] { font-size: 12px; padding: 4px 8px; border-radius: 8px; }
.bedarf-form .auswahl { gap: 2px 12px; }
.bedarf-form .auswahl label { font-size: 12px; padding: 0; border: 0; background: transparent; color: var(--text); }
.bedarf-form .auswahl label:has(input:checked) { background: transparent; color: var(--text); font-weight: 600; }
.bedarf-form .auswahl input { margin-right: 4px; }
.bedarf-form .knopf { font-size: 12px; padding: 2px 10px; }

/* ===================== Bausteine (Musterseite muster.php) =====================
   Klein und leise: Grundschrift der Bausteine 12 px. */
.mod-nummer { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--licht); margin: 22px 0 6px; }
.mod-zweispaltig { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 760px) { .mod-zweispaltig { grid-template-columns: 1fr; } }
.mod-erklaerung { font-size: 11px; color: var(--leise); margin: 4px 0 8px; }

/* 2 · Liste */
.mod-gruppe { font-size: 11px; font-weight: 700; color: var(--leise); margin: 10px 0 2px; }
.mod-liste { list-style: none; margin: 0 0 6px; padding: 0; }
.mod-zeile { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 2px; border-bottom: 1px solid var(--rand); }
.mod-haken { width: 13px; height: 13px; flex: none; border: 1.5px solid var(--text); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; color: var(--licht); cursor: pointer; }
.mod-text { flex: 1; min-width: 0; }
.mod-zusatz { display: block; font-size: 10px; color: var(--leise); }
.mod-meta { font-size: 10px; color: var(--leise); }
.mod-aktion { font-size: 10px; color: var(--leise); text-decoration: none; }
.mod-aktion:hover { color: var(--licht); }
.mod-zeile.erledigt { opacity: .5; }
.mod-zeile.erledigt .mod-text { text-decoration: line-through; }
.mod-zeile.erledigt .mod-haken { border-color: var(--licht); }

/* 3 · Eingabe */
.mod-eingabe { display: flex; gap: 6px; align-items: center; }
.mod-eingabe input { flex: 1; font-size: 12px; padding: 4px 8px; border-radius: 8px; }
.mod-plus { font-size: 12px; line-height: 1; padding: 4px 9px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); color: var(--text); cursor: pointer; }
.mod-optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11px; margin-top: 4px; }
.mod-optionen input { width: auto; margin: 0 3px 0 0; }
.mod-auswahl { font-size: 11px; border: 1px solid var(--rand); border-radius: 8px; padding: 2px 8px; background: var(--flaeche); cursor: pointer; }

/* 4 · Leiser Kasten */
.mod-leise { font-size: 12px; background: rgba(255,255,255,0.35); border: 1px dashed var(--rand); border-radius: 10px; padding: 6px 10px; }
.mod-schalter { display: flex; gap: 6px; margin-bottom: 4px; }
.mod-schalter label { font-size: 11px; border: 1px solid var(--rand); border-radius: 12px; padding: 1px 8px; background: var(--flaeche); cursor: pointer; }
.mod-schalter input { width: auto; margin: 0 3px 0 0; }
.mod-reihe { border-top: 1px solid var(--rand); }
.mod-reihe summary { list-style: none; display: flex; gap: 8px; padding: 4px 0; cursor: pointer; }
.mod-reihe summary::-webkit-details-marker { display: none; }
.mod-reihe summary::after { content: "▸"; margin-left: auto; color: var(--leise); }
.mod-reihe[open] summary::after { content: "▾"; }
.mod-name { width: 70px; flex: none; font-weight: 600; }
.mod-wert { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-wert.leer { color: var(--leise); }
.mod-inhalt { padding: 2px 0 8px; color: var(--leise); }

/* 5 · Aufklapp-Box */
.mod-box { font-size: 12px; background: rgba(255,255,255,0.55); border: 1px solid var(--rand); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.mod-box summary { cursor: pointer; font-weight: 600; }
.mod-boxzeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; border-top: 1px solid var(--rand); }
.mod-boxzeile label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.mod-boxzeile input { width: auto; margin: 0; }

/* 6 · Knöpfe */
.mod-knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mod-knopf-haupt { font-size: 13px; padding: 5px 16px; border: 0; border-radius: 16px; background: var(--text); color: var(--flaeche); cursor: pointer; font-family: inherit; }
.mod-knopf { font-size: 11px; padding: 2px 9px; border: 1px solid var(--rand); border-radius: 12px; background: var(--flaeche); color: var(--text); cursor: pointer; font-family: inherit; }
.mod-link { font-size: 11px; color: var(--leise); }
.mod-tag { width: 62px; flex: none; font-size: 11px; font-weight: 600; color: var(--leise); }
.mod-wahl { font-size: 10px; border: 1px solid var(--rand); border-radius: 10px; padding: 1px 7px; background: var(--flaeche); color: var(--leise); cursor: pointer; white-space: nowrap; }
.mod-wahl.an { background: #fbefc2; border-color: #ecd98f; color: var(--text); }

/* =====================================================================
   BAUSTEINE ÜBERALL (08.10.)
   Klein und leise wie auf der Musterseite. Die Startseite (seite-index)
   bleibt, wie sie ist; nur Menü, Titel und Meldungen gelten auch dort.
   ===================================================================== */
:root { --s: 12px; --xs: 10.5px; --m: 13px; }
@media (max-width: 700px) { :root { --s: 14px; --xs: 12px; --m: 15px; } }

/* Menü etwas kleiner, Blaue Stunde und Was Schönes behalten ihre Farben */
.kopf nav { gap: 10px; }
.kopf nav .knopf { font-size: 13px; padding: 5px 12px; }
.kopf nav .leise { font-size: 13px; }
.knopf.routine { font-size: 13px; padding: 5px 13px; }
.titel { font-size: 1.6rem; }

/* Seitentitel nur ein wenig kleiner */
.seitentitel h1, .kal-kopf h1 { font-size: 1.4rem; }

/* Meldungen: eine kleine Zeile statt Kasten */
.meldung { background: transparent; padding: 0; border-radius: 0; color: var(--licht); font-size: var(--s); font-weight: 600; margin: 0 0 10px; }
.meldung.tour-hinweis { color: var(--text); font-weight: 400; }

/* ---------- ab hier: alle Seiten außer der Startseite ---------- */

/* Abschnittsüberschriften */
body:not(.seite-index) h2.abschnitt { font-size: var(--s); font-weight: 700; color: var(--leise); margin: 16px 0 2px; }
body:not(.seite-index) .hinweistext, body:not(.seite-index) .ruhe { font-size: var(--s); }

/* Liste (Baustein 2/2b): eine Zeile pro Ding, keine Kästen */
body:not(.seite-index) ul.liste { margin: 0 0 6px; }
body:not(.seite-index) .eintrag {
    background: transparent; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0;
    padding: 4px 2px; margin: 0; gap: 8px; align-items: center; font-size: var(--s);
}
body:not(.seite-index) .eintrag .inhalt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
body:not(.seite-index) .eintrag .text { font-size: var(--s); }
body:not(.seite-index) .eintrag .mehr { margin: 0; font-size: var(--xs); gap: 2px 8px; }
body:not(.seite-index) .eintrag .mehr a { font-size: var(--xs); }
body:not(.seite-index) .eintrag .kabel { border: 0; padding: 0; }
body:not(.seite-index) .eintrag .kabel::before { content: "· "; }
body:not(.seite-index) .eintrag .schild { font-size: var(--xs); padding: 0 6px; }
body:not(.seite-index) .eintrag .ort-hinweis { font-size: var(--xs); }
body:not(.seite-index) .eintrag .haken button { width: 13px; height: 13px; border-radius: 50%; font-size: 9px; border-width: 1.5px; }
body:not(.seite-index) .eintrag .bedarf { flex-basis: 100%; }
body:not(.seite-index) .wann { gap: 4px; }
body:not(.seite-index) .woche-knopf { font-size: var(--xs); padding: 1px 8px; border-radius: 10px; }
body:not(.seite-index) .monat-wahl { font-size: var(--xs); padding: 1px 6px; border-radius: 10px; width: auto; }
body:not(.seite-index) .eintrag .stern { font-size: var(--xs); }

/* Knöpfe (Baustein 6): ein großer für die Hauptsache, sonst klein */
body:not(.seite-index) .knopf { font-size: var(--m); padding: 5px 16px; }
body:not(.seite-index) .knopf.hell:not(.routine) { font-size: var(--xs); padding: 2px 10px; }
body:not(.seite-index) .kopf nav .knopf.hell { font-size: 13px; padding: 5px 12px; }
body:not(.seite-index) .leise-knopf { font-size: var(--xs); }

/* Aufklapp-Box und kleine Kästen (Baustein 5) */
body:not(.seite-index) .kasten-klein { font-size: var(--s); background: rgba(255,255,255,0.55); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
body:not(.seite-index) .kasten-klein h2 { font-size: var(--s); margin: 0 0 4px; }
body:not(.seite-index) .kasten-klein summary { font-weight: 600; cursor: pointer; }
body:not(.seite-index) .kasten-klein .klein { font-size: var(--xs); }
body:not(.seite-index) .stern-zeile { padding: 3px 0; font-size: var(--s); }

/* Auswahl-Knöpfe (Orte ankreuzen, Kacheln, Arten) */
body:not(.seite-index) .auswahl { gap: 4px; }
body:not(.seite-index) .auswahl label { font-size: var(--s); padding: 2px 10px; }

/* Eingaben allgemein kleiner */
body:not(.seite-index) input[type=text], body:not(.seite-index) input[type=date], body:not(.seite-index) input[type=time], body:not(.seite-index) select {
    font-size: var(--s); padding: 4px 8px; border-radius: 8px;
}
body:not(.seite-index) .zweiteilig textarea.text-kurz { font-size: 14px; }

/* Touren */
.seite-touren .wohin { font-size: var(--s); background: rgba(255,255,255,0.55); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.seite-touren .wohin h2 { font-size: var(--s); margin: 0 0 4px; }
.seite-touren .wohin h2[style] { margin-top: 8px !important; }
.seite-touren .ziel-neu { margin-top: 6px; display: flex; gap: 6px; }
.seite-touren .kandidaten h2 { font-size: var(--s); color: var(--leise); margin: 12px 0 2px; }
.seite-touren .kandidat {
    background: transparent; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0;
    padding: 3px 2px; margin: 0; font-size: var(--s); grid-template-columns: 16px 18px 1fr auto auto; gap: 2px 8px;
}
.seite-touren .kandidat .k-wo, .seite-touren .kandidat .k-dringend { font-size: var(--xs); color: var(--leise); }
.seite-touren .kandidat.gewaehlt { background: var(--licht-zart); }
.seite-touren .plan { font-size: var(--s); border-radius: 10px; padding: 8px 12px; margin-top: 10px; gap: 8px; }
.seite-touren .plan h2 { font-size: var(--s); }
.seite-touren .p-zeile, .seite-touren .m-zeile, .seite-touren .plan-spalte .m-name { font-size: var(--xs); }
.seite-touren .tour-geplant { font-size: var(--s); padding: 3px 0; }
.seite-touren .alte-zeile { font-size: var(--xs); }

/* Orte */
.seite-orte .st-reihe { font-size: var(--s); padding: 3px 0; grid-template-columns: 160px 1fr auto auto; }
.seite-orte .st-neu, .seite-orte .st-aktionen .leise { font-size: var(--xs); }
.seite-orte h2 { font-size: var(--s); }
.seite-orte .kasten-klein, .seite-orte section { font-size: var(--s); }

/* Kachelseite: Wo liegt was */
.seite-kachel .wo { font-size: var(--s); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.seite-kachel .wo-kopf h2 { font-size: var(--s); }

/* Kalender: gleiche Schrift und Linien, sonst wie gehabt */
.seite-kalender .kal-wt { font-size: var(--xs); }
.seite-kalender .kal-tag { border-radius: 8px; padding: 4px; min-height: 90px; }
.seite-kalender .kal-nr { font-size: var(--s); }
.seite-kalender .kal-eintrag { font-size: var(--xs); }
.seite-kalender .klein { font-size: var(--xs); }

/* Blaue Stunde */
.seite-blaue-stunde .bs-unter, .seite-blaue-stunde .bs-routinen li { font-size: var(--s); }
.seite-blaue-stunde .bs-routinen li { padding: 5px 0; }
.seite-blaue-stunde h2.abschnitt { font-size: var(--m); color: var(--text); }

/* Nicht vergessen: Liste "In Outlook" */
.seite-notieren .nach-formular { margin-top: 16px; }

/* Mitbringen auf dem Handy und der Einkaufszettel der Familie: 14 px */
@media (max-width: 700px) {
    .einkauf-breit .ek-punkt, .einkauf-breit .ek-dazu input[type=text], .einkauf-breit .auf-dazu input, .einkauf-breit .ek-gruppe { font-size: 14px; }
    .einkauf-breit .ek-kreis { width: 16px; height: 16px; }
    .einkauf-breit .ek-von, .einkauf-breit .ek-aendern summary, .einkauf-breit .ek-optionen { font-size: 12px; }
}
.einkauf .ek-punkt, .einkauf .ek-dazu input[type=text], .einkauf .ek-gruppe { font-size: 14px; }
.einkauf .ek-kreis { width: 16px; height: 16px; }
.einkauf .ek-von, .einkauf .ek-aendern summary { font-size: 12px; }
.einkauf .ek-dazu input[type=text] { padding: 6px 10px; }
body:not(.seite-index) textarea { font-size: 13px; }
body:not(.seite-index) .feld label.titel-feld { font-size: var(--s); }
.seite-blaue-stunde .bs-wichtig a { font-size: var(--m); }
.seite-blaue-stunde details { font-size: var(--s); }
.seite-blaue-stunde details summary { font-size: var(--m); }

/* ===== Kopf neu (08.10.): Bild, Schaltplan, Kacheln, Menü + Routinen ===== */
.kopf { display: block; padding-bottom: 10px; margin-bottom: 18px; }
.kopf-bild { display: block; width: 100%; height: 160px; object-fit: cover; border-radius: 14px; margin: 0 0 12px; }
@media (max-width: 700px) { .kopf-bild { height: 110px; } }
.kopf-titel { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.kopf .kachel-reihe { margin: 0 0 8px; padding: 2px 0 6px; overflow: visible; flex-wrap: wrap; }
.kopf .kachel-reihe .bild { width: 46px; height: 46px; font-size: 1.1rem; }
.kopf .kachel-reihe a { position: relative; }
.kopf .kachel-reihe a::after {
    content: attr(data-name); position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%);
    background: var(--text); color: var(--flaeche); font-size: 11px; line-height: 1.3; white-space: nowrap;
    padding: 3px 8px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 30;
}
.kopf .kachel-reihe a:hover::after, .kopf .kachel-reihe a:focus::after { opacity: 1; }
.kopf-leiste { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.kopf-leiste .menue { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kopf-leiste .routinen { flex-basis: auto; margin: 0; }
/* Startseite: rechts die Sterne */
.seite-index .rechts .sterne { margin-top: 0; }
.kopf .kachel-reihe .k-zahl { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--licht); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-family: system-ui, sans-serif; }

/* ===== Listen größer: 14 px (08.10. abends) =====
   Grundgröße hier an einer Stelle: --s (Listen), --xs (kleine Zusätze), --m (Hauptknopf) */
:root { --s: 14px; --xs: 12px; --m: 15px; }
@media (max-width: 700px) { :root { --s: 15px; --xs: 13px; --m: 16px; } }
.einkauf-breit .ek-punkt, .einkauf .ek-punkt, .einkauf-breit .ek-gruppe, .einkauf .ek-gruppe,
.einkauf-breit .ek-dazu input[type=text], .einkauf-breit .auf-dazu input, .einkauf-breit .ek-auf .ruhe,
.einkauf-breit .ek-auf h2, .einkauf-breit .ek-unv summary, .ek-erledigt summary, .einkauf-breit .ek-optionen,
.ek-laeden summary, .ek-laeden-liste label, .einkauf-breit .ek-aendern-form select, .einkauf-breit .ek-aendern-form input[type=text] { font-size: var(--s); }
.einkauf-breit .ek-von, .einkauf .ek-von, .einkauf-breit .ek-aendern summary, .einkauf .ek-aendern summary,
.einkauf-breit .ek-fuer, .einkauf-breit .ek-warn, .einkauf-breit .ek-komma, .einkauf-breit .ek-tourknopf .knopf,
.ek-erledigt .ek-weg button, .einkauf-breit .ek-zu-auf input, .einkauf-breit .ek-zu-auf button { font-size: var(--xs); }
.einkauf-breit .ek-kreis, .einkauf .ek-kreis { width: 16px; height: 16px; }
body:not(.seite-index) .eintrag .haken button { width: 16px; height: 16px; font-size: 11px; }
.b-rechts, .b-rechts .schalter label, .b-rechts .auswahl label, .b-rechts input, .b-rechts select, .b-rechts textarea, .b-rechts .termin label { font-size: var(--s); }
.b-rechts .klein { font-size: var(--xs); }
.b-rechts .z-name { width: 90px; }
.bedarf, .bedarf-form input[type=text], .bedarf-form .auswahl label { font-size: var(--s); }
.bedarf-form .knopf { font-size: var(--xs); }
.rp-idee, .rp-merken { font-size: var(--xs); }
/* Musterseite folgt derselben Größe */
.mod-zeile, .mod-eingabe input, .mod-plus, .mod-leise, .mod-box { font-size: var(--s); }
.mod-zusatz, .mod-meta, .mod-aktion, .mod-optionen, .mod-auswahl, .mod-schalter label, .mod-knopf, .mod-link, .mod-erklaerung, .mod-wahl, .mod-tag, .mod-gruppe { font-size: var(--xs); }
.mod-haken { width: 16px; height: 16px; }
.kopf-leiste .routinen { margin-left: auto; }

/* ===== 15 px für alle Listen, auch auf der Startseite ===== */
:root { --s: 15px; --xs: 13px; --m: 15px; }
@media (max-width: 700px) { :root { --s: 16px; --xs: 14px; --m: 16px; } }
.seite-index .eintrag .text, .seite-index .ag-text { font-size: var(--s); }
.seite-index .eintrag .mehr, .seite-index .ag-mehr, .seite-index .ag-mehr .ort-hinweis { font-size: var(--xs); }
.seite-index .zettel p { font-size: var(--s); }

/* Musterseite: Schrift-Umschalter */
.schrift-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; font-size: var(--xs); }
.schrift-wahl button { font: inherit; font-size: var(--s); padding: 3px 12px; border: 1px solid var(--rand); border-radius: 14px; background: var(--flaeche); color: var(--text); cursor: pointer; }
.schrift-wahl button.an { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.seite-muster button, .seite-muster input, .seite-muster select, .seite-muster textarea { font-family: inherit; }

/* Startseite: Heute kochen */
.kochen { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.kochen h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.kochen .eintrag { background: transparent; border: 0; border-top: 1px solid var(--rand); border-radius: 0; padding: 6px 0; margin: 0; align-items: center; }
.kochen .eintrag .text { font-size: var(--s); }
.kochen .faellig .text strong { color: var(--licht); }
.kochen .faellig { background: var(--licht-zart); border-radius: 6px; padding-left: 4px; padding-right: 4px; }
.kochen .rezepte { margin-top: 10px; font-size: var(--s); }
.kochen .rezepte summary { cursor: pointer; color: var(--leise); font-weight: 600; }
.rezept-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; border-top: 1px solid var(--rand); margin: 0; }
.rezept-zeile a { text-decoration: none; }
.rezept-dazu { display: flex; gap: 6px; margin-top: 8px; }
.rezept-dazu input { font-size: var(--xs); padding: 4px 8px; border-radius: 8px; }
.rezept-dazu .knopf { font-size: var(--xs); padding: 2px 10px; }

/* =====================================================================
   RUHIG (09.10.): einfarbiger Hintergrund, Menü als Wörter, gleiche Kästen
   mit farbiger Linie links, Überschriften mit feiner Linie, Aufklappen.
   ===================================================================== */
:root { --linie: #ead6ca; --kasten-schatten: 0 1px 2px rgba(46, 43, 79, 0.05); }
body { background: #f6f2f0; }

/* Kopf: Bild, darunter Titel + Menü, darunter Kacheln + Routinen */
.kopf { border-bottom: 0; padding-bottom: 0; margin-bottom: 20px; }
.kopf-zeile { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px; padding: 4px 0 10px; border-bottom: 1px solid var(--rand); }
.kopf-titel { margin: 0; }
.kopf .menue { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.kopf .menue a { color: var(--text); text-decoration: none; font-size: 14px; padding: 2px 0; border-bottom: 2px solid transparent; }
.kopf .menue a:hover { border-bottom-color: var(--rand); }
.kopf .menue a.hier { border-bottom-color: var(--licht); }
.kopf .menue a.zurueck, .kopf .menue a.abmelden { color: var(--leise); }
.kopf-leiste { padding: 10px 0; border-bottom: 1px solid var(--rand); align-items: center; }
.kopf .kachel-reihe { margin: 0; padding: 0; }

/* "Das ist die Idee": kleine graue Zeile ohne Kasten */
.idee { background: transparent; border: 0; border-radius: 0; padding: 0; margin: -6px 0 16px; }
.idee-titel { display: inline; font-size: 11px; margin-right: 6px; }
.idee-zeile { display: inline; font-size: 13px; }
.idee-zeile + .idee-zeile::before { content: " · "; }

/* Alle Kästen gleich: weiß, feiner Rand, gleiche Rundung */
.zettel, .heute, .woche, .sterne, .kochen, .kasten-klein, .wo, .wohin, .plan, .mod-box, .mod-leise, .b-rechts, .ek-tour {
    background: var(--flaeche) !important; border: 1px solid var(--rand) !important; border-radius: 12px !important;
    box-shadow: var(--kasten-schatten);
}
/* Farbe nur als Linie links */
.heute { border-left: 4px solid var(--licht) !important; }
.sterne { border-left: 4px solid #e8c766 !important; }
.zettel { border-left: 4px solid #a9bfee !important; color: var(--text); }
.kochen { border-left: 4px solid #c9b6a6 !important; }
.plan { border-left: 4px solid var(--licht) !important; }

/* Überschriften mit feiner Linie darunter */
.zettel h2, .heute h2, .woche h2, .sterne h2, .kochen h2, .kasten-klein h2, .wohin h2, .wo-kopf h2 {
    color: var(--text); padding-bottom: 6px; border-bottom: 1px solid var(--linie); margin-bottom: 8px;
}
.heute h2 { color: var(--licht); }

/* Aufklappen: Überschrift mit Zahl, ▸ / ▾ davor */
details.aufklapp > summary { list-style: none; cursor: pointer; }
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp > summary h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 0; border-bottom-color: transparent; }
details.aufklapp > summary h2::before { content: "▸"; color: var(--leise); font-size: 0.8em; }
details.aufklapp[open] > summary h2 { margin-bottom: 8px; border-bottom-color: var(--linie); }
details.aufklapp[open] > summary h2::before { content: "▾"; }
details.aufklapp > summary h2 .leise { margin-left: auto; }
.zahl-leise { font-weight: 400; color: var(--leise); font-size: 0.9em; }
.heute-weg { font-size: 13px; font-weight: 600; color: var(--licht); }
details.aufklapp.wo > summary { display: flex; justify-content: space-between; align-items: baseline; }
details.aufklapp.wo > summary h2 { border-bottom: 0; margin: 0; }
body:not(.seite-index) details.aufklapp > summary h2.abschnitt { border-bottom: 1px solid var(--linie); padding-bottom: 4px; }

/* Etiketten ohne Rahmen, Links ohne Unterstreichung */
.eintrag .kabel { border: 0 !important; padding: 0 !important; }
.eintrag .kabel::before { content: "· "; }
.ag-mehr a, .wo-links a { text-decoration: none; }

/* Nur zwei Knopfarten: gefüllt (Hauptsache) und umrandet */
.knopf.hell, .woche-knopf, .leise-knopf.umrandet { background: transparent !important; border: 1px solid var(--rand); color: var(--text); }
.knopf.hell:hover, .woche-knopf:hover { border-color: var(--text); background: transparent !important; color: var(--text); }
.woche-knopf.jetzt { background: #fbeec2 !important; }
.kopf-leiste { flex-wrap: nowrap; } .kopf-leiste .kachel-reihe { flex: 1 1 auto; flex-basis: auto; min-width: 0; } @media (max-width: 700px) { .kopf-leiste { flex-wrap: wrap; } }
.seite-einkauf .idee-zeile, .seite-touren .idee-zeile { display: block; } .seite-einkauf .idee-zeile + .idee-zeile::before, .seite-touren .idee-zeile + .idee-zeile::before { content: ""; }

/* ===== Kopf ruhiger (09.10. mittags): Lebensbereiche im Kasten, leise Routinen ===== */
.kopf-leiste { border-bottom: 0; padding: 12px 0 0; align-items: stretch; gap: 14px; }
.lebensbereiche { flex: 1 1 auto; min-width: 0; background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; box-shadow: var(--kasten-schatten); padding: 8px 12px 6px; }
.lb-titel { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-bottom: 6px; }
.kopf .lebensbereiche .kachel-reihe { gap: 10px; }
.kopf .lebensbereiche .kachel-reihe a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px; border-width: 2px; line-height: 1; }
.kopf .lebensbereiche .kachel-reihe .bild { width: 42px; height: 42px; }
.kopf .lebensbereiche .k-zahl {
    position: static; min-width: 0; height: auto; padding: 0; border-radius: 0; background: transparent;
    color: var(--leise); font-size: 11px; line-height: 14px; min-height: 14px; font-family: inherit;
}
.kopf .lebensbereiche .kachel-reihe a::after { top: auto; bottom: calc(100% + 4px); }
.kopf-leiste .routinen { align-self: center; gap: 8px; }

/* Blaue Stunde und Was Schönes: schmal, ohne Leuchten, farbiger Rand; erledigt = gefüllt */
.knopf.routine, .knopf.routine.r-blaue, .knopf.routine.r-schoen, .knopf.routine.r-bewegt {
    background: var(--flaeche) !important; color: var(--text) !important; box-shadow: none !important;
    font-size: 13px; padding: 4px 12px; border: 1.5px solid var(--rand); animation: none !important; transform: none !important;
}
.knopf.routine.r-blaue { border-color: #a9bfee !important; }
.knopf.routine.r-schoen { border-color: #2e7d32 !important; }
.knopf.routine.r-bewegt { border-color: #e9cfa5 !important; }
.knopf.routine.r-blaue.fertig { background: #cdd9f2 !important; }
.knopf.routine.r-schoen.fertig { background: #2e7d32 !important; color: #fff !important; }
.knopf.routine.r-bewegt.fertig { background: #f6e3c6 !important; }
.knopf.routine:hover { border-color: var(--text) !important; }
@media (max-width: 700px) { .lebensbereiche { flex-basis: 100%; } .kopf-leiste .routinen { margin-left: 0; } }
.kopf .lebensbereiche .kachel-reihe a { text-decoration: none; }

/* ===== Routinen als eckige, farbige Kacheln (09.10.) ===== */
.kopf-leiste .routinen { align-self: stretch; align-items: stretch; gap: 10px; }
.knopf.routine, .knopf.routine.r-blaue, .knopf.routine.r-schoen, .knopf.routine.r-bewegt {
    display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
    background: transparent !important; border: 0 !important; border-radius: 0; padding: 0 !important; box-shadow: none !important;
    color: var(--text) !important; font-size: 12px; text-decoration: none; cursor: pointer; width: 76px;
}
.r-kachel {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 10px; font-size: 26px; color: #fff;
    background-size: cover; background-position: center; box-shadow: var(--kasten-schatten);
}
.r-blaue .r-kachel { background-color: #3f63c9; }
.r-schoen .r-kachel { background-color: #2e7d32; }
.r-bewegt .r-kachel { background-color: #c89a4f; }
.r-kachel .r-zeichen { animation: none; }
.r-name { font-size: 12px; line-height: 1.2; text-align: center; color: var(--text); }
.r-haken {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; color: var(--text); font-size: 12px; line-height: 20px; text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.knopf.routine:hover .r-kachel { outline: 2px solid var(--text); outline-offset: 2px; }
.routine-schoen summary.knopf.routine { list-style: none; }

/* ===== Routinen im Kasten Lebensbereiche, rechts (09.10.) ===== */
.lebensbereiche { flex-basis: 100%; }
.lb-reihe { display: flex; align-items: flex-start; gap: 12px; }
.lb-reihe .kachel-reihe { flex: 1 1 auto; min-width: 0; }
.lb-reihe .routinen { flex: none; margin: 0 0 0 auto !important; align-self: flex-start; gap: 8px; display: flex; }
.knopf.routine, .knopf.routine.r-blaue, .knopf.routine.r-schoen, .knopf.routine.r-bewegt { width: auto; }
.lb-reihe .r-kachel {
    width: 92px; height: 46px; border-radius: 10px; font-size: 13px; color: var(--text);
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 0 8px;
    box-shadow: none; line-height: 1.15;
}
.lb-reihe .r-blaue .r-kachel { background-color: #cdd9f2; border: 1px solid #a9bfee; }
.lb-reihe .r-schoen .r-kachel { background-color: #fbefc2; border: 1px solid #ecd98f; }
.lb-reihe .r-bewegt .r-kachel { background-color: #f6e3c6; border: 1px solid #e9cfa5; }
.lb-reihe .r-kachel .r-zeichen { font-size: 16px; }
.lb-reihe .r-kachel .r-text { font-size: 12px; font-weight: 600; text-align: left; }
.lb-reihe .r-name { display: none; }
@media (max-width: 700px) { .lb-reihe { flex-wrap: wrap; } .lb-reihe .routinen { margin-left: 0 !important; } }