/* Raeder-Hausstil nach raeder-bau.de: hellgrauer Grund, Raeder-Grün #009136, Anthrazit #1B2020,
   Überschriften Fjalla One, Text Roboto, große Rundungen. */
:root {
    --gruen: #009136;
    --gruen-dunkel: #007a2d;
    --gruen-hell: #e5f4ea;
    --text: #1b2020;
    --text-2: #3c4646;
    --leise: #6b7473;
    --rand: #dfe3e2;
    --flaeche: #ffffff;
    --grund: #f2f2f2;
    --rot: #d32f2f;
    --rot-hell: #fdecea;
    --gelb-hell: #fff7d6;
    --radius: 10px;
    --radius-gross: 22px;
    --schatten: 0 1px 2px rgba(27, 32, 32, .06), 0 4px 16px rgba(27, 32, 32, .05);
    --titel: "Fjalla One", "Arial Narrow", Arial, sans-serif;
    --schrift: Roboto, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 var(--schrift); color: var(--text); background: var(--grund); }
a { color: var(--gruen-dunkel); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--titel); font-weight: 400; letter-spacing: .01em; color: var(--text); }
h1 { font-size: 2rem; line-height: 1.15; margin: .25rem 0 1.25rem; }
h2 { font-size: 1.35rem; margin: 1.75rem 0 .7rem; }
code { background: var(--flaeche); padding: .05rem .3rem; border-radius: 4px; border: 1px solid var(--rand); }

/* Kopf wie auf raeder-bau.de: Logo frei auf Grau, Navigation in Anthrazit */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem 2rem .5rem; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; }
.kopf .marke { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--text); }
.kopf .marke img { height: 58px; width: auto; display: block; }
.kopf .marke span { font-family: var(--titel); font-size: 1.25rem; line-height: 1.1; color: var(--text); }
.kopf .marke small { display: block; font-family: var(--schrift); font-size: .78rem; color: var(--leise); letter-spacing: .02em; }
.kopf nav.haupt { order: 3; flex: 1 0 100%; display: flex; gap: .2rem; flex-wrap: wrap; background: var(--flaeche); border-radius: 999px; padding: .3rem; box-shadow: var(--schatten); }
.kopf nav.haupt a { color: var(--text); text-decoration: none; padding: .45rem .75rem; border-radius: 999px; font-family: var(--titel); font-size: 1.02rem; letter-spacing: .02em; }
.kopf nav.haupt a:hover { background: var(--grund); }
.kopf nav.haupt a.aktiv { background: var(--gruen); color: #fff; }
.kopf .abmelden { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--text-2); }
.kopf .abmelden::before { content: "///"; font-family: var(--schrift); font-weight: 700; font-style: italic; color: var(--gruen); letter-spacing: .02em; margin-right: .4rem; font-size: 1.35rem; }

.inhalt { max-width: 1400px; margin: 0 auto; padding: .5rem 2rem 3rem; }
.karte { background: var(--flaeche); border-radius: var(--radius-gross); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--schatten); }
.karte.schmal { max-width: 420px; margin: 4rem auto; text-align: left; }
.karte.schmal .logo-gross { display: block; height: 96px; margin: 0 0 1rem; }
.leise { color: var(--leise); }

label { display: block; margin: .6rem 0; font-weight: 500; font-size: .88rem; color: var(--text-2); }
input, select, textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; font: inherit; color: var(--text); border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gruen); outline-offset: 0; border-color: var(--gruen); }
input[type=checkbox] { display: inline; width: auto; accent-color: var(--gruen); }
.zeile { display: flex; gap: .85rem; flex-wrap: wrap; align-items: flex-end; }
.zeile > label { flex: 1 1 170px; }

.knopf { display: inline-block; background: var(--gruen); color: #fff; border: 1px solid var(--gruen); border-radius: 999px; padding: .5rem 1.15rem; font: 500 .95rem var(--schrift); cursor: pointer; text-decoration: none; }
.knopf:hover { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
.knopf.leise { background: var(--flaeche); color: var(--text); border-color: var(--rand); }
.knopf.leise:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }
.knopf.gefahr { background: var(--rot); border-color: var(--rot); }
.knopf.klein { padding: .22rem .65rem; font-size: .85rem; }
.knopf[disabled] { opacity: .45; cursor: default; }

/* Tabellen als weiße, runde Fläche */
.tabelle-rahmen { overflow-x: auto; background: var(--flaeche); border-radius: var(--radius-gross); box-shadow: var(--schatten); margin-bottom: 1.25rem; }
table { width: 100%; border-collapse: collapse; background: var(--flaeche); }
th, td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { background: var(--text); color: #fff; font-family: var(--titel); font-weight: 400; font-size: .95rem; letter-spacing: .03em; }
.tabelle-rahmen > table > thead th:first-child { border-top-left-radius: var(--radius-gross); }
.tabelle-rahmen > table > thead th:last-child { border-top-right-radius: var(--radius-gross); }
tbody tr:hover td { background: #fafbfa; }
td table th, td table td { background: transparent; color: var(--text); border-bottom-color: var(--grund); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.summe td { font-weight: 700; border-top: 2px solid var(--text); background: var(--gruen-hell); }
tr.storniert td { text-decoration: line-through; color: var(--leise); }
tr.rot td { background: var(--rot-hell); }

.meldung { padding: .75rem 1.1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.meldung.ok { background: var(--gruen-hell); border-left: 4px solid var(--gruen); }
.meldung.fehler { background: var(--rot-hell); border-left: 4px solid var(--rot); }
.etikett { display: inline-block; padding: .08rem .55rem; border-radius: 999px; font: 500 .78rem var(--schrift); background: var(--grund); border: 1px solid var(--rand); color: var(--text-2); vertical-align: middle; text-decoration: none; }
.etikett.ok { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen-dunkel); }
.etikett.rot { background: var(--rot-hell); border-color: var(--rot); color: var(--rot); }
.etikett.gelb { background: var(--gelb-hell); border-color: #e0b400; color: #6b5300; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.kachel { background: var(--flaeche); border-radius: var(--radius-gross); padding: 1.1rem 1.3rem; text-decoration: none; color: inherit; box-shadow: var(--schatten); border: 2px solid transparent; transition: border-color .15s; }
a.kachel:hover { border-color: var(--gruen); }
.kachel .wert { font-family: var(--titel); font-size: 2.1rem; line-height: 1.2; color: var(--gruen); }
.kacheln > .karte { margin-bottom: 0; }
.filter { display: flex; gap: .85rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.25rem; }
.filter label { margin: 0; }
.filter label.haken { display: flex; align-items: center; gap: .4rem; padding-bottom: .55rem; }
nav.filter { gap: .5rem; }
.karte-geo { height: 380px; border-radius: var(--radius-gross); overflow: hidden; box-shadow: var(--schatten); }
.unterschrift { display: block; width: 100%; max-width: 280px; height: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; }
.fotos img { display: block; width: 100%; max-width: 320px; height: auto; border-radius: var(--radius); }
details summary { cursor: pointer; }

@media (max-width: 720px) {
    .kopf, .inhalt { padding-left: 1rem; padding-right: 1rem; }
    .kopf nav.haupt { justify-content: flex-start; }
    h1 { font-size: 1.6rem; }
}