/* ESPHome-Galerie — warm, ruhig, mobil zuerst. Keine externen Schriften. */
:root {
  --grund: #faf7f2;
  --flaeche: #ffffff;
  --linie: #e6dfd4;
  --text: #2b2723;
  --text-leise: #6f675e;
  --akzent: #c2612a;
  --akzent-hell: #f6e6db;
  --akzent-2: #2f7f6f;
  --akzent-2-hell: #dff0ec;
  --gelb-hell: #fbf1d3;
  --radius: 14px;
  --schatten: 0 1px 2px rgba(60, 40, 20, .06), 0 6px 20px -12px rgba(60, 40, 20, .25);
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .4em; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: 1.35rem; margin-top: 2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
.gross { font-size: 1.15rem; color: var(--text-leise); }
.klein { font-size: .85rem; color: var(--text-leise); }
.innen { max-width: 1100px; margin: 0 auto; padding-inline: 18px; }
code { font-family: var(--mono); font-size: .9em; background: #f1ece4; padding: .1em .35em; border-radius: 5px; }
pre { background: #2b2723; color: #f4efe8; padding: 1rem 1.1rem; border-radius: var(--radius); overflow-x: auto; font-size: .88rem; line-height: 1.5; }
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
.icon.klein { width: .85em; height: .85em; }

/* Kopf */
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; }
.marke { display: flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 600; font-size: 1.1rem; }
.marke b { color: var(--akzent); font-weight: 700; }
.marke-icon { width: 1.5em; height: 1.5em; color: var(--akzent); }
.nav { display: flex; gap: .25rem; }
.nav a { color: var(--text); padding: .45rem .8rem; border-radius: 999px; font-weight: 500; }
.nav a:hover { background: var(--grund); text-decoration: none; }
.nav a[aria-current] { background: var(--akzent-hell); color: var(--akzent); }

main { padding-block: 1.5rem 3rem; }

/* Startseite */
.held { padding-block: 1.5rem 1rem; max-width: 780px; }
.einstiege { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1.5rem; }
.einstieg {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: .15rem .8rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem;
  color: var(--text); box-shadow: var(--schatten); transition: transform .12s, border-color .12s;
}
.einstieg:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--akzent); }
.einstieg .icon { grid-row: 1 / 3; width: 2rem; height: 2rem; color: var(--akzent); align-self: start; margin-top: .15rem; }
.einstieg b { font-size: 1.05rem; }
.einstieg span:last-child { color: var(--text-leise); font-size: .95rem; }
.abschnitt { margin-top: 2.5rem; }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.abschnitt-kopf h2 { margin: 0; }
.mehr { font-weight: 500; white-space: nowrap; }

/* Seitenkopf */
.seiten-kopf { max-width: 780px; margin-bottom: 1.2rem; }

/* Raster + Karten */
.raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.karte {
  display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; color: var(--text); box-shadow: var(--schatten);
  transition: transform .12s, border-color .12s;
}
.karte:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--akzent); }
.karte-bild { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--akzent-hell); color: var(--akzent); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.karte-icon { width: 2.6rem; height: 2.6rem; stroke-width: 1.6; }
.karte-text { padding: .9rem 1rem .4rem; flex: 1; }
.karte-text h3 { margin-bottom: .3rem; }
.karte-text p { margin: 0; color: var(--text-leise); font-size: .95rem; }
.karte-fuss { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem .9rem; flex-wrap: wrap; }
.kennz {
  font-size: .78rem; color: var(--text-leise); background: var(--grund); border: 1px solid var(--linie);
  padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem;
}
.kennz-kat { margin-left: auto; }
.kennz-preis { color: var(--akzent-2); border-color: var(--akzent-2-hell); background: var(--akzent-2-hell); }

/* Kategoriefarben fuer Bildflaechen (leise Toene) */
.kat-klima, .kat-sensor { background: #dfeef2; color: #2a6f86; }
.kat-praesenz { background: #e9e2f4; color: #5b4a8a; }
.kat-licht, .kat-anzeige { background: var(--gelb-hell); color: #8a6a12; }
.kat-energie, .kat-aktor { background: var(--akzent-hell); color: var(--akzent); }
.kat-garten { background: #e2efdc; color: #3f6f2c; }
.kat-fenster-tueren, .kat-board { background: #ece7e0; color: #5b4f42; }
.kat-audio, .kat-bedienung { background: #f6e1e4; color: #8f3a49; }

/* Schwierigkeit */
.stufe { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--text-leise); }
.punkte { display: inline-flex; gap: 3px; }
.punkte i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--akzent); display: inline-block; }
.punkte i.voll { background: var(--akzent); }
.stufe sup { font-size: .7em; color: var(--akzent); margin-left: .1em; cursor: help; }

/* Filter */
.filter { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: flex-start; }
.filter fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.filter legend { float: left; font-size: .8rem; color: var(--text-leise); margin-right: .4rem; padding: 0; }
.suche { flex: 1 1 100%; display: flex; align-items: center; gap: .5rem; background: var(--grund); border: 1px solid var(--linie); border-radius: 999px; padding: .45rem .9rem; color: var(--text-leise); }
.suche input { flex: 1; border: 0; background: none; font: inherit; color: var(--text); outline: none; min-width: 0; }
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--grund); cursor: pointer; user-select: none; color: var(--text); font-family: inherit; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip:has(input:checked) { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.chip:hover { border-color: var(--akzent); }
.chip-reset { color: var(--akzent); }
.treffer { flex: 1 1 100%; margin: 0; font-size: .85rem; color: var(--text-leise); }
.treffer:empty { display: none; }
.leer { text-align: center; color: var(--text-leise); padding: 3rem 0; }

/* Detailseite */
.krumen { margin-bottom: 1rem; font-size: .92rem; }
.krumen a { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-leise); }
.detail-kopf { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .detail-kopf { grid-template-columns: 280px minmax(0, 1fr); } }
.detail-bild { aspect-ratio: 4 / 3; border-radius: var(--radius); display: grid; place-items: center; overflow: hidden; }
.detail-bild img { width: 100%; height: 100%; object-fit: cover; }
.detail-bild .karte-icon { width: 4rem; height: 4rem; }
.ueberzeile { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; color: var(--text-leise); margin-bottom: .4rem; font-weight: 600; }
.kennzeichen { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin: .4rem 0 1rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.knopf { display: inline-flex; align-items: center; gap: .4rem; background: var(--akzent); color: #fff; padding: .55rem 1rem; border-radius: 999px; font-weight: 500; }
.knopf:hover { text-decoration: none; filter: brightness(.95); }
.knopf-leise { background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); }
.detail-spalten { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
@media (min-width: 880px) { .detail-spalten { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); } }
.detail-text h2:first-child { margin-top: 0; }
.merksatz { display: flex; gap: .6rem; align-items: flex-start; background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--akzent-2); padding: .8rem 1rem; border-radius: 10px; }
.merksatz .icon { color: var(--akzent-2); margin-top: .2em; }
.zwei { display: grid; gap: .8rem; }
.minis { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.mini { display: flex; gap: .7rem; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .8rem; color: var(--text); }
.mini:hover { border-color: var(--akzent); text-decoration: none; }
.mini-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 8px; background: var(--akzent-hell); color: var(--akzent); flex: none; }
.mini small { color: var(--text-leise); display: block; line-height: 1.35; }
.komponenten, .teile, .fallen { padding-left: 1.2rem; }
.komponenten li, .teile li, .fallen li { margin-bottom: .35rem; }
.komponenten a { display: inline-flex; align-items: center; gap: .3rem; }
.kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.kasten h4 { margin: 0 0 .5rem; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.kasten ul { margin: 0; padding-left: 1.1rem; }
.kasten p:last-child { margin-bottom: 0; }
.kasten-kurs { background: var(--gelb-hell); border-color: #efdca3; }
.kasten-luecke { background: var(--grund); }
.kasten-luecke h4 { color: var(--text-leise); }
.fakten { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; font-size: .9rem; margin: 0 0 1rem; }
.fakten dt { color: var(--text-leise); }
.fakten dd { margin: 0; }
.quellen { list-style: none; padding: 0 !important; }
.quellen li { margin-bottom: .3rem; }

/* Grundlagen */
.lektionen { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; max-width: 780px; }
.lektionen a { display: flex; gap: 1rem; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1.1rem; color: var(--text); box-shadow: var(--schatten); }
.lektionen a:hover { border-color: var(--akzent); text-decoration: none; }
.nummer { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); font-weight: 700; flex: none; }
.kurz { color: var(--text-leise); font-size: .95rem; }
.prosa { max-width: 760px; }
.prosa p, .prosa li { font-size: 1.02rem; }
.prosa img, .prosa svg { display: block; max-width: 100%; margin: 1.2rem auto; }
.prosa table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1rem 0; display: block; overflow-x: auto; }
.prosa th, .prosa td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.prosa blockquote { margin: 1rem 0; padding: .6rem 1rem; border-left: 4px solid var(--akzent-2); background: var(--flaeche); border-radius: 0 10px 10px 0; color: var(--text-leise); }
.prosa .hinweis { background: var(--gelb-hell); border: 1px solid #efdca3; border-radius: 10px; padding: .7rem 1rem; }
.quellen-liste { font-size: .88rem; word-break: break-all; }
.blaettern { display: flex; justify-content: space-between; gap: 1rem; max-width: 760px; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linie); }

/* Fuss */
.fuss { border-top: 1px solid var(--linie); padding-block: 1.5rem; color: var(--text-leise); font-size: .9rem; }
.fuss p { margin-bottom: .4rem; }

@media (max-width: 560px) {
  .nav a { padding: .4rem .6rem; font-size: .95rem; }
  .marke span { display: none; }
  .kennz-kat { margin-left: 0; }
}