/* TANKORAKEL — Unterseiten (Ortsseiten, Hub, Daten, Widget-Doku). Baut auf style.css auf. v1 */

.seite { max-width: 52rem; margin: 0 auto; padding: clamp(1.4rem, 4vw, 2.6rem) var(--rand) 4rem; }
.seite h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; margin: .2em 0 .5em; }
.seite h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 2.2em 0 .5em; }
.seite h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; color: var(--asphalt-60); margin: 1.4em 0 .5em; }
.seite p, .seite li { line-height: 1.6; }
.seite p + p { margin-top: .7rem; }
.seite a { color: var(--blau); }
.seite .verdikt-titel { margin: .1em 0 .5em; font-size: clamp(2.4rem, 6vw, 3.6rem); }
.seite .lead { font-size: 1.08rem; max-width: 62ch; }
.seite .klein { font-size: .88rem; color: var(--asphalt-60); max-width: 70ch; margin-top: .8rem; }
.seite .leer { color: var(--asphalt-60); }
.brotkrumen { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--asphalt-60); margin-bottom: 1.2rem; }
.brotkrumen a { color: var(--asphalt-60); text-decoration: none; }
.brotkrumen a:hover { color: var(--blau); }
.stand { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--asphalt-60); }

/* LED-Tafel (drei Kacheln) */
.led-tafel { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.2rem 0; }
.led-kachel { background: var(--panel); border: 3px solid var(--blau); border-radius: 12px; padding: .6rem .8rem .55rem; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.lk-sorte { font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--beton); }
.lk-preis { font-family: var(--led); color: var(--amber); font-size: clamp(1.4rem, 4vw, 1.9rem); line-height: 1; position: relative; z-index: 0; }
.lk-preis .digits { position: relative; text-shadow: 0 0 12px rgba(255, 179, 0, .5); }
.lk-preis .digits::before { content: '8.88'; position: absolute; right: 0; top: 0; color: var(--segment-aus); z-index: -1; text-shadow: none; }
.lk-preis sup { font-size: .55em; margin-left: .15em; }
.lk-bezug { font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: #8A97A6; }
.cta-leiste { margin: 1rem 0 0; }
.cta-leiste .cta { margin-top: 0; }
.seite a.cta { color: var(--weiss); text-decoration: none; }

/* 14-Tage-Streifen */
.streifen { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; margin: .4rem 0 .6rem; }
.chip { border: 1px solid var(--beton-tief); border-radius: 8px; background: var(--weiss); padding: .4rem .1rem .45rem; text-align: center; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.chip-wt { font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: var(--asphalt-60); }
.chip-tag { font-family: var(--display); font-weight: 700; font-size: .95rem; line-height: 1.1; }
.chip-preis { font-family: var(--mono); font-weight: 600; font-size: .74rem; letter-spacing: -.02em; }
.chip-preis sup { font-size: .6em; }
.chip.v-guenstig { background: var(--gruen-flaeche); border-color: #B5DFC6; }
.chip.v-guenstig .chip-preis { color: var(--gruen); }
.chip.v-teuer { background: var(--rot-flaeche); border-color: #EBC4C4; }
.chip.v-teuer .chip-preis { color: var(--rot); }
.chip.heute .chip-wt { color: var(--blau); font-weight: 700; }
.chip.bester { box-shadow: inset 0 0 0 2px var(--blau); }

/* Tabellen */
.stationen-tabelle, .hub-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--weiss); border: 1px solid var(--beton-tief); border-radius: 12px; overflow: hidden; }
.stationen-tabelle th, .hub-tabelle th { text-align: left; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--asphalt-60); padding: .55rem .75rem; border-bottom: 1px solid var(--beton-tief); background: var(--beton); }
.stationen-tabelle td, .hub-tabelle td { padding: .55rem .75rem; border-bottom: 1px solid var(--beton-tief); vertical-align: top; }
.stationen-tabelle tr:last-child td, .hub-tabelle tr:last-child td { border-bottom: 0; }
.stationen-tabelle td.preis, .hub-tabelle td.preis, .stationen-tabelle th:last-child { font-family: var(--mono); font-weight: 600; text-align: right; white-space: nowrap; }
.hub-tabelle th:not(:first-child), .hub-tabelle td:not(:first-child) { text-align: right; }
.stationen-tabelle tr.best td { background: var(--gruen-flaeche); }
.stationen-tabelle tr.best td.preis { color: var(--gruen); }
.hub-tabelle a { text-decoration: none; font-weight: 600; color: var(--asphalt); }
.hub-tabelle a:hover { color: var(--blau); }

/* Verlauf */
.verlauf { display: block; width: 100%; height: auto; background: var(--weiss); border: 1px solid var(--beton-tief); border-radius: 12px; margin: .6rem 0; }
.vs-grid { stroke: var(--beton-tief); stroke-width: 1; }
.vs-achse { fill: var(--asphalt-60); font-family: var(--mono); font-size: 11px; }
.vs-linie { fill: none; stroke: var(--blau); stroke-width: 2.2; stroke-linejoin: round; }
.vs-punkt { fill: var(--amber); stroke: var(--panel); stroke-width: 1.5; }

/* FAQ auf Unterseiten */
.seite details { border-bottom: 1px solid var(--beton-tief); }
.seite summary { font-family: var(--display); font-weight: 600; font-size: 1.15rem; padding: .8rem 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.seite summary::-webkit-details-marker { display: none; }
.seite summary::after { content: '+'; font-family: var(--mono); color: var(--blau); }
.seite details[open] summary::after { content: '–'; }
.seite details p { padding: 0 0 1rem; color: #3A4450; max-width: 64ch; }
.seite .staedte-links a strong { color: var(--gruen); margin-left: .3rem; }

/* Daten-Seite */
.code { font-family: var(--mono); font-size: .86rem; background: var(--panel); color: var(--beton); border-radius: 10px; padding: .9rem 1rem; overflow-x: auto; white-space: pre; margin: .6rem 0 1rem; max-width: 100%; }
.seite code { font-family: var(--mono); font-size: .9em; background: var(--beton-tief); border-radius: 4px; padding: .05em .3em; overflow-wrap: anywhere; }
.seite { overflow-wrap: anywhere; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: 1rem 0; }
.kz { background: var(--weiss); border: 1px solid var(--beton-tief); border-radius: 12px; padding: .8rem .9rem; }
.kz-wert { display: block; font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1; }
.kz-label { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--asphalt-60); margin-top: .3rem; }

@media (max-width: 720px) {
  .streifen { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .led-tafel { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
  .led-kachel { padding: .5rem .55rem .45rem; }
  .stationen-tabelle td:nth-child(2), .stationen-tabelle th:nth-child(2) { display: none; }
  .stationen-tabelle, .hub-tabelle { font-size: .88rem; }
  .stationen-tabelle td, .hub-tabelle td, .stationen-tabelle th, .hub-tabelle th { padding: .5rem .5rem; }
}