/* =================================================================
   EXTRAS: Outfit für heute, Meine Outfits, Bald/Beispiel-Hinweise,
   Design-Umschalter und das Design "Klar"
   ================================================================= */

/* ---------- Outfit für heute (Karte oben im Schrank) ---------- */
.heute-karte {
  background: var(--papier);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 16px 16px 14px;
  margin-bottom: 14px;
}
.heute-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.heute-kopf h2 { margin: 0; font-size: 1.2rem; }
.wetter-chip {
  border: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--senf-hell); color: var(--braun);
  font-size: .82rem; font-weight: 700; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.wetter-chip.leer { background: var(--creme); color: var(--braun-mittel); font-weight: 500; }
.heute-inhalt { display: flex; gap: 14px; align-items: center; }
.heute-inhalt .polaroid { width: 46%; flex-shrink: 0; padding: 6px 6px 0; cursor: default; transform: rotate(-2deg); }
.heute-inhalt .polaroid-notiz { min-height: 30px; font-size: 1.1rem; padding: 4px 2px 6px; }
.heute-text p { margin: 0 0 6px; font-size: .95rem; line-height: 1.4; }
.heute-text .klein { margin: 0; }
.heute-knoepfe { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 14px; }
.heute-knoepfe .knopf, .heute-knoepfe .knopf-zweit { min-height: 44px; padding: 8px 10px; font-size: .9rem; margin: 0; }
.herz-knopf { width: 48px; font-size: 1.2rem !important; }

/* ---------- Schlanke Leiste statt großer Karten ---------- */
.schnell-leiste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.schnell-leiste button {
  border: 0; font: inherit; color: var(--braun); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: 14px;
  background: var(--papier); box-shadow: var(--schatten-klein);
  font-size: .74rem; font-weight: 600; line-height: 1.15; text-align: center;
}
.schnell-leiste .symbol { font-size: 1.3rem; }

/* ---------- Outfits merken ---------- */
.merken-knopf { display: block; margin: 4px auto 0; color: var(--rost); }
.merken-vorschau { display: flex; justify-content: center; margin: 4px 0 14px; }
.merken-vorschau .polaroid { width: 52%; transform: rotate(-1.5deg); cursor: default; }

/* ---------- Hinweise "Bald" und "Beispiel" ---------- */
.bald-etikett {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--rost-hell); color: var(--rost);
  font: 700 .66rem/1.4 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle; white-space: nowrap;
}
.bald-etikett.gross { font-size: .8rem; padding: 4px 12px; }
.menue .bald-etikett { margin-left: auto; }
button.bald { position: relative; }
button.bald::after {
  content: "Bald"; position: absolute; top: -7px; right: -4px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--rost-hell); color: var(--rost);
  font: 700 .6rem/1.5 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase;
}
.beispiel-hinweis {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; margin: 0 0 12px;
  border-radius: 999px; border: 1px dashed var(--braun-hell);
  color: var(--braun-mittel); font-size: .78rem;
}

/* ---------- Design-Auswahl im Profil ---------- */
.design-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.design-option {
  border: 2px solid transparent; font: inherit; color: var(--braun); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px; border-radius: var(--radius); background: var(--papier); box-shadow: var(--schatten-klein);
}
.design-option.aktiv { border-color: var(--rost); }
.design-option strong { font-family: var(--schrift-titel); font-synthesis: none; font-size: 1.05rem; }
.design-option > span:last-child { font-size: .78rem; color: var(--braun-mittel); }
.design-muster { display: flex; gap: 4px; margin-bottom: 4px; }
.design-muster i { width: 18px; height: 18px; border-radius: 50%; display: block; }
.design-warm .design-muster i:nth-child(1) { background: #F3EADB; border: 1px solid #E0D2BA; }
.design-warm .design-muster i:nth-child(2) { background: #D9A23B; }
.design-warm .design-muster i:nth-child(3) { background: #B4532A; }
.design-klar .design-muster i { border-radius: 4px; }
.design-klar .design-muster i:nth-child(1) { background: #F5F5F3; border: 1px solid #DDDDD8; }
.design-klar .design-muster i:nth-child(2) { background: #1F1F1F; }
.design-klar .design-muster i:nth-child(3) { background: #C2562A; }

/* ---------- Einführung Karte 2: Notizen nicht abschneiden ---------- */
.selfie-stapel .polaroid-notiz { font-size: .8rem !important; line-height: 1.05; min-height: 26px; white-space: normal; overflow: visible; text-align: center; }
.selfie-stapel { width: 32% !important; }
.onb-selfie .selfie-stapel .polaroid + .polaroid { margin-top: -6px !important; }


/* =================================================================
   DESIGN "KLAR" – schlicht und modern
   Gleiche App, andere Farben/Schriften. Aktiv, wenn auf <html>
   data-design="klar" steht (siehe js/design.js).
   ================================================================= */
html[data-design="klar"] {
  --creme: #F5F5F3;
  --creme-dunkel: #E9E9E6;
  --papier: #FFFFFF;
  --braun: #1F1F1F;
  --braun-mittel: #5F5F5C;
  --braun-hell: #B8B8B3;
  --senf: #1F1F1F;
  --senf-hell: #EDEDEA;
  --rost: #C2562A;
  --rost-hell: #F4E3DA;
  --gruen: #4E6B5C;
  --gruen-hell: #E2EAE5;
  --schrift-titel: "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --schrift-hand: "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --schatten: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .06);
  --schatten-klein: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .04);
  --radius: 10px;
}
/* Überschriften kräftig, ohne Kursiv-Akzent */
html[data-design="klar"] h1, html[data-design="klar"] h2, html[data-design="klar"] h3,
html[data-design="klar"] .marke, html[data-design="klar"] .tag-name { font-weight: 700; letter-spacing: -.02em; }
html[data-design="klar"] h1 em, html[data-design="klar"] h2 em { font-style: normal; }
/* Kein Filmkorn, keine Klebestreifen, keine schiefen Sofortbilder */
html[data-design="klar"] #app::after { display: none; }
html[data-design="klar"] .polaroid.mit-tape::before { display: none; }
html[data-design="klar"] .polaroid { transform: none !important; border-radius: 6px; }
html[data-design="klar"] .polaroid-bild { border-radius: 4px; }
/* "Handschrift" wird zu ruhiger Beschriftung */
html[data-design="klar"] .polaroid-notiz,
html[data-design="klar"] .hand,
html[data-design="klar"] .frag-ma {
  font-family: var(--schrift-text); font-size: .85rem !important; font-weight: 600; letter-spacing: .01em;
}
html[data-design="klar"] .slogan-hand { font-family: var(--schrift-text); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; }
html[data-design="klar"] #markenleiste { background: rgba(245, 245, 243, .94); }
/* Knöpfe: eckiger, Hauptknopf schwarz */
html[data-design="klar"] .knopf, html[data-design="klar"] .knopf-zweit { border-radius: 10px; box-shadow: none; }
html[data-design="klar"] .knopf.senf { background: #1F1F1F; color: #FFFFFF; }
html[data-design="klar"] .chip { border-radius: 8px; }
html[data-design="klar"] .schnell-leiste button, html[data-design="klar"] .heute-karte { border: 1px solid #E6E6E2; }
/* Kamera-Linse dezenter */
html[data-design="klar"] .linse { filter: grayscale(.85) contrast(1.05); }


/* ---------- Einführung Karte 4: Design wählen ---------- */
.onb-design { display: flex; align-items: center; justify-content: center; }
.onb-design-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.onb-design-option {
  border: 2px solid transparent; font: inherit; color: var(--braun); cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px; padding: 12px;
  border-radius: var(--radius); background: var(--papier); box-shadow: var(--schatten);
}
.onb-design-option.aktiv { border-color: var(--rost); }
.onb-design-option strong { font-size: 1.15rem; }
.onb-design-option > span:last-child { font-size: .8rem; color: var(--braun-mittel); line-height: 1.3; }
.onb-design-vorschau { display: block; padding: 7px 7px 0; margin-bottom: 8px; }
.onb-design-vorschau i { display: block; aspect-ratio: 1; }
.onb-design-vorschau b { display: block; text-align: center; padding: 4px 0 6px; font-weight: 400; }
.vorschau-warm { background: #FFFDF8; transform: rotate(-3deg); box-shadow: 0 2px 8px rgba(74,52,38,.18); }
.vorschau-warm i { background: linear-gradient(135deg, #D9A23B, #B4532A); }
.vorschau-warm b { font-family: "Caveat", cursive; font-size: 1.25rem; color: #4A3426; }
.vorschau-klar { background: #FFFFFF; border: 1px solid #E6E6E2; border-radius: 6px; }
.vorschau-klar i { background: #1F1F1F; border-radius: 4px; }
.vorschau-klar b { font: 700 .8rem/1.6 "DM Sans", sans-serif; color: #1F1F1F; }

/* ---------- Planer: Wetter-Quelle ---------- */
.wetter-quelle { margin: 0 0 12px; }
.wetter-quelle .knopf-text { padding: 0; min-height: 0; font-size: inherit; }
.tag-karte .wetter small { font-weight: 400; opacity: .75; }

/* ---------- Morgens / mittags ---------- */
.tageszeiten { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.tageszeiten span { font-size: .86rem; font-weight: 600; color: var(--braun); white-space: nowrap; }
.zwei-ansichten-karte .tageszeiten { margin: 14px 2px 0; }
.heute-text { min-width: 0; }
.heute-karte .tageszeiten { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--creme); }
.tageszeiten span { white-space: normal; }

/* ---------- Hinweis Beispiel-Teile im Schrank ---------- */
.beispiel-leiste { margin: 0 0 10px; }
.beispiel-leiste .knopf-text { padding: 0 0 0 4px; min-height: 0; font-size: inherit; }

/* ---------- Kamera: Modus-Leiste mit Symbol + Erklärung ---------- */
.modus-leiste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 18px; background: var(--creme-dunkel); margin-bottom: 20px; }
.modus-leiste button {
  border: 0; background: transparent; border-radius: 14px; padding: 8px 2px 7px; font: inherit; color: var(--braun-mittel);
  display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; min-height: 64px;
}
.modus-leiste .modus-symbol { font-size: 1.25rem; line-height: 1.2; }
.modus-leiste strong { font-size: .8rem; line-height: 1.15; }
.modus-leiste small { font-size: .66rem; opacity: .8; line-height: 1.2; }
.modus-leiste button.aktiv { background: var(--papier); color: var(--braun); box-shadow: var(--schatten-klein); }

/* ---------- Kamera: zwei Fotos als Knopf ("Was passt dazu?") ---------- */
.knopf-fotos { position: relative; display: block; width: 168px; height: 168px; margin: 10px auto 0; cursor: pointer; transition: transform .12s; }
.knopf-fotos:active { transform: translateY(4px); }
.kf-bild { position: absolute; width: 104px; padding: 7px 7px 22px; background: #FFFDF8; border-radius: 3px; box-shadow: 0 6px 0 #d9ccb5, 0 12px 22px rgba(74,52,38,.3); }
.kf-bild > span { height: 90px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kf-bild svg { width: 80%; height: 80%; }
.kf-hinten { left: 6px; top: 14px; transform: rotate(-9deg); }
.kf-hinten > span { background: #E9DCC6; }
.kf-vorne { right: 4px; top: 26px; transform: rotate(7deg); }
.kf-vorne > span { background: radial-gradient(circle at 30% 25%, #F6D58A, var(--senf) 55%, #B98428); }
.kf-plus { position: absolute; left: 66px; top: 66px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: var(--rost); color: #fff; font: 700 1.5rem/38px var(--schrift-text); text-align: center; box-shadow: 0 3px 0 #7d3519, 0 4px 10px rgba(0,0,0,.25); }

/* ---------- Kamera: Spiegel mit Torbogen ("Outfit-Selfie") ---------- */
.knopf-spiegel {
  position: relative; display: block; width: 132px; height: 184px; margin: 6px auto 0; cursor: pointer;
  border-radius: 66px 66px 8px 8px;
  background: linear-gradient(135deg, #F6D58A, #D9A23B 40%, #9E7120);
  box-shadow: 0 6px 0 #7f5a17, 0 12px 24px rgba(74,52,38,.35), inset 0 2px 3px rgba(255,255,255,.5);
  transition: transform .12s, box-shadow .12s;
}
.knopf-spiegel:active { transform: translateY(4px); box-shadow: 0 2px 0 #7f5a17, 0 6px 12px rgba(74,52,38,.3); }
.knopf-spiegel::before {
  content: ""; position: absolute; inset: 10px; border-radius: 56px 56px 3px 3px;
  background: linear-gradient(160deg, #EEF3F5 0%, #C9D7DE 45%, #A9BCC6 100%);
  box-shadow: inset 0 0 0 3px rgba(74,52,38,.55), inset 0 -10px 18px rgba(80,110,130,.25);
}
.knopf-spiegel::after {
  content: ""; position: absolute; left: 30px; top: 34px; width: 20px; height: 96px; transform: rotate(24deg); border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.15)); box-shadow: 24px 6px 0 -5px rgba(255,255,255,.4);
}
html[data-design="klar"] .modus-leiste { border-radius: 10px; }
html[data-design="klar"] .modus-leiste button { border-radius: 8px; }

/* ---------- Anlass: "Was steht heute an?" ---------- */
.anlass-chip {
  border: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  margin: -4px 0 12px; padding: 5px 12px; border-radius: 999px;
  background: var(--rost-hell); color: var(--rost); font-size: .85rem; font-weight: 700;
}
.anlass-chip span { font-weight: 500; text-decoration: underline; opacity: .8; }
.anlass-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.anlass-option {
  border: 2px solid transparent; font: inherit; color: var(--braun); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px;
  border-radius: var(--radius); background: var(--papier); box-shadow: var(--schatten-klein); font-weight: 600; font-size: .92rem;
}
.anlass-option .symbol { font-size: 1.6rem; }
.anlass-option.aktiv { border-color: var(--rost); }

/* ---------- Rückfrage: zu kalt / zu warm ---------- */
.waerme-frage { background: var(--creme); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; font-size: .88rem; font-weight: 600; }
.waerme-frage > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.waerme-frage button { border: 0; font: inherit; font-size: .8rem; font-weight: 600; color: var(--braun); cursor: pointer; padding: 8px 4px; border-radius: 10px; background: var(--papier); box-shadow: var(--schatten-klein); }

/* ---------- Profil: Wärmeempfinden ---------- */
.waerme-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.waerme-wahl button {
  border: 2px solid transparent; font: inherit; color: var(--braun); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px;
  border-radius: var(--radius); background: var(--papier); box-shadow: var(--schatten-klein); font-size: .78rem; font-weight: 600; text-align: center; line-height: 1.2;
}
.waerme-wahl .symbol { font-size: 1.4rem; }
.waerme-wahl button.aktiv { border-color: var(--rost); }

/* ---------- Tab-Leiste: Heute · Schrank · Kamera · Check · Profil ---------- */
#tableiste .tab:nth-child(1) { grid-column: 1; }
#tableiste .tab:nth-child(2) { grid-column: 2; }
#tableiste .tab:nth-child(3) { grid-column: 3; }
#tableiste .tab:nth-child(4) { grid-column: 4; }
#tableiste .tab:nth-child(5) { grid-column: 5; }

/* ---------- Heute-Karte: Wetter + Thermometer ---------- */
.heute-chips { display: flex; gap: 6px; align-items: center; min-width: 0; }
.thermo-chip { border: 0; cursor: pointer; width: 30px; height: 26px; border-radius: 999px; background: var(--creme); font-size: .9rem; line-height: 1; flex-shrink: 0; }
.anlass-raster + .waerme-frage, .sheet .waerme-frage, #sheet-inhalt .waerme-frage { margin-top: 16px; }

/* ---------- Schrank: Auswählen & löschen ---------- */
.auswahl-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .88rem; }
.auswahl-zeile .knopf-text { padding: 0; min-height: 0; font-weight: 700; }
#schrank-raster .polaroid { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.raster.im-auswahl .polaroid { transform: none; transition: transform .12s; }
.raster.im-auswahl .polaroid.waehlbar::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(74,52,38,.25); box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.raster.im-auswahl .polaroid.gewaehlt { transform: scale(.94); outline: 3px solid var(--rost); outline-offset: 2px; }
.raster.im-auswahl .polaroid.gewaehlt::after {
  content: "✓"; background: var(--rost); color: #fff; font: 700 .95rem/22px var(--schrift-text); text-align: center;
}
.auswahl-leiste {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom) + 10px);
  width: min(448px, calc(100% - 32px)); z-index: 550;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px; border-radius: 18px;
  background: var(--papier); box-shadow: 0 8px 28px rgba(74,52,38,.25);
}
.auswahl-leiste .knopf, .auswahl-leiste .knopf-zweit { margin: 0; min-height: 46px; }
.knopf.rot { background: #B23B2A; color: #fff; box-shadow: 0 4px 0 #7a2519; }
.knopf.rot:disabled { opacity: .45; }

/* ---------- Zahnrad oben rechts (Einstellungen) – sichtbar, aber dezent ---------- */
#markenleiste { position: fixed; }
#markenleiste .zahnrad {
  position: absolute; right: 12px; bottom: 8px;
  width: 34px; height: 34px; border: 0; padding: 6px; border-radius: 50%;
  background: transparent; color: var(--braun-hell); cursor: pointer;
}
#markenleiste .zahnrad svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#markenleiste .zahnrad.aktiv, #markenleiste .zahnrad:active { color: var(--braun); }

/* Heute: Leiste mit 3 Knöpfen */
.schnell-leiste.drei { grid-template-columns: repeat(3, 1fr); }

/* ---------- Schrank-Match: Antwort vorneweg ---------- */
.match-ergebnis { background: var(--papier); border-radius: var(--radius); box-shadow: var(--schatten); padding: 14px 16px; margin: 0 0 18px; }
.match-ergebnis p { margin: 6px 0 0; font-size: .92rem; line-height: 1.4; }
.match-urteil { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.02rem; }
.match-urteil span { font-size: 1.4rem; }
.match-aehnlich { color: var(--rost); }
.match-neu { color: var(--gruen); }

/* ---------- Accessoires nach Wetter (Heute-Karte) ---------- */
.accessoire-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.accessoire-zeile .klein { margin: 0 2px 0 0; font-weight: 700; }
.acc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--papier); box-shadow: var(--schatten-klein); font-size: .8rem; font-weight: 600; }
.acc-chip i { width: 24px; height: 24px; border-radius: 50%; background: var(--creme); display: inline-flex; overflow: hidden; }
.acc-chip i svg, .acc-chip i img { width: 100%; height: 100%; object-fit: contain; }
.acc-chip b { width: 24px; text-align: center; font-weight: 400; }

/* ---------- Logo: Faden-Herz mit Schlaufe (A2) ---------- */
.logo-a2 { height: 40px; width: auto; display: block; overflow: visible; }
.logo-a2-name { font-family: var(--schrift-titel); font-size: 62px; fill: var(--braun); }
#markenleiste .logo-a2 { height: 38px; }
.onb-oben .logo-a2 { height: 44px; }
html[data-design="klar"] .logo-a2-name { font-weight: 700; letter-spacing: -1px; }

/* ---------- Heute-Karte kompakter ---------- */
.heute-karte .heute-titel { margin: 0 0 8px; font-size: 1.2rem; }
.heute-karte .heute-chips { display: flex; gap: 6px; align-items: center; margin: 0 0 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.heute-karte .heute-chips::-webkit-scrollbar { display: none; }
.heute-karte .heute-chips > * { flex-shrink: 0; }
.heute-karte .anlass-chip { margin: 0; padding: 4px 10px; font-size: .82rem; }
.heute-karte .tageszeiten { margin: 10px 0 0; padding: 8px 12px; }
/* "Dazu" in einer Zeile zum Seitwärts-Wischen */
.accessoire-zeile { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin-right: -16px; }
.accessoire-zeile::-webkit-scrollbar { display: none; }
.accessoire-zeile > * { flex-shrink: 0; }
/* Heute-Seite: Gruß und Sofortbild etwas kleiner, damit die Leiste darunter sichtbar bleibt */
#screen-heute .kopf h1 { font-size: 1.7rem; }
#screen-heute .kopf { margin-bottom: 10px; }
#screen-heute .kopf .untertitel { margin-top: 2px; }
.heute-karte { padding: 14px 14px 12px; margin-bottom: 10px; }
.heute-inhalt .polaroid { width: 40%; }
.heute-inhalt .polaroid-notiz { min-height: 24px; font-size: 1rem; padding: 2px 2px 4px; }
.heute-text p { font-size: .9rem; margin-bottom: 4px; }
.heute-knoepfe { margin-top: 10px; }
.heute-knoepfe .knopf, .heute-knoepfe .knopf-zweit { min-height: 42px; }
#screen-heute .schnell-leiste button { padding: 8px 4px; }
.heute-text .klein { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; }
.heute-text p:first-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acc-chip.jacke-chip { background: var(--senf-hell); }

/* Heute: Chip "✨ 2 Looks" und Schalter in den Einstellungen */
.heute-karte .looks-chip { background: var(--senf-hell); color: var(--braun); }
.schalter { margin-left: auto; width: 42px; height: 24px; border-radius: 999px; background: var(--braun-hell); position: relative; flex-shrink: 0; transition: background .2s; }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.schalter.an { background: var(--gruen); }
.schalter.an::after { left: 21px; }

/* Schriftzug "Frag ma' Tilda": "Frag ma'" kleiner und in Rost */
.logo-a2-name { font-size: 56px; }
.logo-a2-frag { font-size: 40px; fill: var(--rost); font-style: italic; }
.onb-oben .logo-a2 { height: 32px; }

/* Einführung Karte 5: Ort fürs Wetter */
.onb-ort { display: flex; align-items: center; justify-content: center; }
.onb-ort-symbol { font-size: 6rem; filter: drop-shadow(0 8px 18px rgba(74,52,38,.2)); }
.onb-ort-knoepfe { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.onb-ort-knoepfe .knopf-zweit { margin: 0; }
.onb-ort-knoepfe input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--braun-hell); background: var(--papier); font: inherit; color: var(--braun); }
.onb-ort-knoepfe .klein { margin: 0; min-height: 1.2em; color: var(--gruen); font-weight: 600; }
.onb-karte .onb-bild.onb-ort { display: flex; justify-content: center; align-items: center; width: 100%; }

/* ---------- "Dazu" als Sticker am Sofortbild ---------- */
.heute-foto { position: relative; width: 44%; flex-shrink: 0; }
.heute-inhalt .heute-foto .polaroid { width: 100%; }
.sticker {
  position: absolute; z-index: 3; width: 38px; height: 38px; padding: 3px; border: 0; cursor: pointer;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(74,52,38,.3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sticker svg, .sticker img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: var(--creme); }
.sticker span { font-size: 1.2rem; line-height: 1; }
.sticker:active { transform: scale(1.15) !important; }
html[data-design="klar"] .sticker { transform: none !important; }

.tab { touch-action: manipulation; }

/* ---------- Wärme-Regler (3 Stufen) in der Heute-Karte ---------- */
.waerme-regler { position: relative; display: inline-grid; grid-template-columns: repeat(3, 30px); height: 28px; padding: 2px;
  border-radius: 999px; background: var(--creme); border: 1px solid var(--braun-hell); flex-shrink: 0; }
.waerme-regler button { position: relative; z-index: 1; border: 0; background: none; font-size: .9rem; cursor: pointer; padding: 0; line-height: 1; }
.waerme-knubbel { position: absolute; top: 2px; left: 2px; width: 30px; height: 24px; border-radius: 999px; background: var(--papier);
  box-shadow: 0 1px 4px rgba(74,52,38,.25); transform: translateX(calc(var(--stufe) * 30px)); transition: transform .2s ease; }

/* ---------- Hauptknöpfe: helles Senf, flach, mit feiner dunkler Kante (statt kräftigem Gelb mit harter Unterkante) ---------- */
.knopf, .knopf-zweit { border-radius: 14px; }
.knopf.senf { background: #E7C98E; color: var(--braun); box-shadow: none; border: 1.5px solid var(--braun); }
.knopf.senf:active { background: #DDBB78; }
.knopf-zweit { border-width: 1.5px; }
html[data-design="klar"] .knopf.senf { background: #1F1F1F; color: #fff; border-color: #1F1F1F; }

/* Accessoires als Sticker auch bei "Frag ma' Tilda" und "Was passt dazu?" */
.sticker-foto { position: relative; width: 78%; margin: 10px auto; }
.sticker-foto > .polaroid { width: 100%; margin: 0; }
.chat-knoepfe { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.chat-knoepfe .knopf-zweit { margin: 0; padding: 8px 14px; font-size: .9rem; width: auto; }
.chat-knoepfe .merken-knopf { margin: 0 0 0 auto; }