/* 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; }