/* ==========================================================================
   W&M Energie GmbH — Redesign-Integration
   Mobile-First: Basis-Styles gelten für Mobile, Erweiterungen via min-width
   Breakpoints: md = 700px (Tablet), lg = 1000px (Desktop)
   ========================================================================== */

/* Schriften lokal ausgeliefert, nicht von Google.

   Frueher stand hier ein @import auf die Schriften-API von Google. Damit
   ging bei jedem Seitenaufruf die IP-Adresse des Besuchers an Google - ohne
   Einwilligung und ohne dass wir darauf Einfluss haetten. Die Dateien liegen
   jetzt unter app/static/fonts, der Lizenztext (SIL Open Font License 1.1)
   daneben.

   Inter und Space Grotesk sind variable Schriften: eine Datei deckt alle
   Schnitte ab, daher der Gewichtsbereich statt einzelner Werte. IBM Plex Mono
   kommt als getrennte Dateien je Schnitt.

   Auffrischen: python scripts/schriften_holen.py - das Skript gibt diesen
   Block neu aus. */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Farben 1:1 aus dem Firmenlogo gesampelt (app/static/img/logo.png) */
  --brand: #171E49;
  --brand-dark: #10152f;
  --brand-mid: #2091EA;
  --brand-light: #e6f2fd;
  --brand-soft: #f3f7fb;
  --accent: #FCA501;
  --accent-hover: #ffb733;
  /* Dieselben Farben, nur so weit abgedunkelt, dass sie als Text auf hellem
     Grund den geforderten Kontrast von 4.5:1 erreichen. Das helle Orange hat
     auf Weiss nur 2.0:1 und ist damit fuer Text unbrauchbar - als Flaeche,
     Rahmen und Symbol bleibt es unveraendert. */
  --accent-text: #976301;
  --brand-mid-text: #1270bb;
  --ink: #171E49;
  --muted: #5c6470;
  --bg: #ffffff;
  --border: #dde1e8;
  --shadow: 0 8px 30px rgba(23, 30, 73, 0.08);
  --shadow-hover: 0 16px 40px rgba(23, 30, 73, 0.14);
  --radius: 12px;
  --font: "Space Grotesk", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* Muss vor den Layoutklassen stehen: sonst setzt ein display:flex einer Klasse
   das hidden-Attribut ausser Kraft (Klassenselektor schlaegt die Browserregel). */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* "hidden" macht das Element zum Scroll-Container und setzt damit
     position: sticky der Kopfzeile ausser Kraft. "clip" verhindert den
     seitlichen Ueberlauf genauso, ohne einen Scroll-Container zu erzeugen.
     Die erste Zeile bleibt als Rueckfall fuer aeltere Browser stehen. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

img { max-width: 100%; display: block; height: auto; }

a { color: inherit; text-decoration: none; transition: color var(--transition); }

svg.icon {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 700px) {
  .container { padding: 0 24px; }
}

/* ---------- Typography ---------- */
.eyebrow {
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
section:not(.hero):not(.cta) .eyebrow,
.page-hero .eyebrow {
  color: var(--brand-mid-text);
}

h1, h2, h3, h4 {
  font-family: var(--font);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.85rem, 4.5vw, 2.65rem); }
h2 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  position: relative;
}
h2.section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--accent);
  margin-top: 14px;
  border-radius: 2px;
}

p { margin: 0 0 1em; color: var(--muted); }
.lead { font-size: 1.05rem; max-width: 620px; }

.section-head { margin-bottom: 32px; }
@media (min-width: 700px) {
  .section-head { margin-bottom: 44px; }
}
.section-head.center { text-align: center; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.section-head.center h2.section-title::after { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn-primary {
  background: var(--accent);
  color: var(--brand-dark);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(252, 165, 1, 0.35);
}
.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-ghost:hover {
  background: var(--brand-soft);
}

/* ---------- Status-Banner ---------- */
.status-banner {
  background: var(--accent);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
}
.status-banner-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
@media (min-width: 700px) {
  .status-banner-inner { padding: 10px 24px; }
}
.status-banner-inner .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Sticky-Header überdeckt sonst Sprungmarken-Ziele wie /kontakt#kontaktformular oder /#galerie */
#kontaktformular,
#galerie {
  scroll-margin-top: 96px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* Senkrecht kein Polster: die Hoehe der Kopfzeile steht als min-height fest,
   das Logo fuellt sie aus. Den Abstand nach oben und unten bringt das Logo
   selbst mit - in der Bilddatei sind oben und unten je 5 Prozent frei. So wird
   das Logo groesser, ohne dass der Rahmen waechst. */
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-height: 68px;
  max-width: 1100px;
  margin: 0 auto;
}
/* Derselbe Innenabstand wie beim Textraster, und ab derselben Breite: bis
   999 Punkte standen hier 16 gegen 24 Punkte, und Logo und Text darunter
   lagen um acht Punkte auseinander. */
@media (min-width: 700px) {
  .header-inner { padding: 0 24px; }
}
@media (min-width: 1000px) {
  .header-inner { min-height: 73px; flex-wrap: nowrap; }
}

/* Frueher schrumpfte die Kopfzeile beim Scrollen samt Logo. Das Logo soll
   jederzeit gleich gross bleiben, deshalb aendert sich hier nichts mehr; die
   Klasse "scrolled" steuert nur noch den Anfrage-Knopf. */
.logo {
  flex: 1;
  min-width: 0;
}
@media (min-width: 1000px) {
  .logo { margin-right: 6px; }
}
@media (min-width: 1200px) {
  .logo { margin-right: 14px; }
}
@media (min-width: 1000px) {
  .logo { flex: none; }
}
/* Sichtbar sind 90 Prozent der hier gesetzten Hoehe; die uebrigen 10 Prozent
   sind der Rand in der Bilddatei (je 5 Prozent oben und unten).
   Die Hoehe liegt seit 1.1.4 um ein Fuenftel unter der Rahmenhoehe der
   Kopfzeile - vorher fuellte das Logo sie ganz aus und wirkte vor allem auf
   dem Smartphone erschlagend. Der Rahmen selbst bleibt unveraendert. */
.logo img {
  height: 54px;
  width: auto;
  max-width: 100%;
}
@media (min-width: 1000px) {
  .logo img { height: 53px; }
}
@media (min-width: 1200px) {
  .logo img { height: 58px; }
}
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.main-nav ul a {
  display: block;
  padding: 10px 16px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.main-nav ul a:hover {
  color: var(--brand);
  border-color: var(--accent);
}
.main-nav ul a.active {
  color: var(--brand);
  font-weight: 600;
  border-color: var(--brand);
}

/* Mobile-Basis: Hamburger-Menü, Nav als Dropdown */
.nav-toggle {
  display: flex;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle .icon { width: 22px; height: 22px; stroke: var(--brand); }

.main-nav {
  position: static;
  width: 100%;
  flex: 0 0 100%;
  order: 10;
  background: #fff;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  padding: 0;
  margin: 0;
  border-top: none;
  box-shadow: none;
  transition: max-height 0.3s ease, padding 0.3s ease, visibility 0.3s;
}
.main-nav.open {
  /* Hoehe nicht fest verdrahten: mit aktivem Admin-Eintrag wurde die Liste
     sonst unten abgeschnitten. Notfalls scrollt das Menue in sich. */
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  visibility: visible;
  padding: 12px 0 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.main-nav ul { flex-direction: column; gap: 4px; background: #fff; }
.main-nav ul a { padding: 14px 12px; font-size: 1rem; background: #fff; border-radius: 8px; }
.main-nav ul a:hover, .main-nav ul a.active { background: var(--brand-soft); }
.site-header:has(.main-nav.open),
body.nav-open .site-header {
  background: #fff;
  backdrop-filter: none;
}

/* Telefonnummer und Anfrage-Knopf: auf dem Smartphone am Fuss des
   Klappmenues, ab Desktop rechts in der Kopfzeile. */
.header-aktionen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.header-telefon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--brand);
  white-space: nowrap;
}
.header-telefon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.header-telefon:hover { color: var(--brand-mid-text); }
.header-cta { white-space: nowrap; }
.site-header.scrolled .header-cta { padding-top: 9px; padding-bottom: 9px; }

/* Desktop ab lg: horizontale Nav, kein Hamburger */
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .main-nav {
    position: static;
    width: auto;
    flex: none;
    order: 0;
    max-height: none;
    overflow: visible;
    visibility: visible;
    padding: 0;
    margin: 0;
    border-top: none;
    box-shadow: none;
  }
  .main-nav ul { flex-direction: row; gap: 4px; background: transparent; }
  .main-nav ul a { font-size: 0.92rem; background: transparent; border-radius: 0; }
  .main-nav ul a:hover, .main-nav ul a.active { background: transparent; }

  /* Telefonnummer und Anfrage-Knopf stehen rechts neben den Menuepunkten.
     min-width: 0 ist die Reissleine: ohne sie koennen Flexelemente nicht unter
     ihre Inhaltsbreite schrumpfen und schieben die Kopfzeile ueber das Raster
     hinaus, statt enger zusammenzuruecken. Genau so ist der Knopf einmal nach
     rechts gerutscht. */
  .main-nav { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .main-nav ul { min-width: 0; flex-shrink: 1; }
  .header-aktionen { flex-shrink: 0; }
  .logo { flex-shrink: 0; }
  .header-aktionen { flex-direction: row; margin: 0 0 0 6px; padding: 0; border-top: none; }
  .header-telefon { padding: 8px 10px; }
  .header-cta { padding: 11px 20px; font-size: 0.88rem; }
}

/* Die Kopfzeile haelt exakt dasselbe Raster wie der Seiteninhalt: 1100 Punkte
   breit, 24 Punkte Innenabstand auf beiden Seiten. Damit steht der
   Anfrage-Knopf genau so weit vom rechten Rand wie das Logo vom linken.

   Frueher durfte sie ab 1360 Punkten breiter werden (max-width 1360,
   padding-left 154), damit die Telefonnummer neben Menue und Knopf Platz
   fand. Das Logo blieb dadurch zwar buendig, der Knopf ragte aber 130 Punkte
   ueber den Text hinaus - und weil die Nummer bei angemeldeter Redaktion
   ohnehin ausgeblendet ist, war der zusaetzliche Platz meist ungenutzt. Eine
   Kopfzeile, die auf einer Seite buendig ist und auf der anderen nicht, sieht
   nach Versehen aus, auch wenn sie Absicht war. */
@media (min-width: 1000px) {
  .main-nav ul a { padding: 10px 10px; }
}

/* Die Telefonnummer braucht rund 150 Punkte. Die hat die Kopfzeile erst,
   wenn das Raster ausgereizt ist - darunter hat der Anfrage-Knopf Vorrang.
   Die Nummer steht weiterhin im Klappmenue, im Fussbereich und auf der
   Kontaktseite; sie geht also nirgends verloren. */
@media (min-width: 1000px) and (max-width: 1159px) {
  .header-telefon { display: none; }
}
/* Im Klappmenue bleibt die Nummer immer sichtbar, in der Kopfzeile nicht. */
@media (min-width: 1000px) {
  .header-telefon.nur-menue { display: none; }
}


/* ---------- Hero (Vollbild-Hintergrundbild, wie Kunden-Redesign) ---------- */
.hero {
  position: relative;
  min-height: 66vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
@media (min-width: 700px) {
  .hero { min-height: 88vh; align-items: center; }
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 55%;
  z-index: 0;
}
@media (min-width: 700px) {
  .hero-bg { object-position: center; }
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(23, 30, 73, 0.94) 0%, rgba(23, 30, 73, 0.82) 45%, rgba(23, 30, 73, 0.45) 80%, rgba(23, 30, 73, 0.2) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 24px 0 40px;
}
@media (min-width: 700px) {
  .hero-inner { padding: 140px 0 90px; }
}
.hero .eyebrow { color: var(--accent); }
.hero h1 {
  color: #fff;
  margin: 16px 0 18px;
  max-width: 680px;
  font-size: clamp(2rem, 4.8vw, 2.85rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { color: rgba(255, 255, 255, 0.9); margin-bottom: 0; max-width: 540px; }
.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.hero-trust {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
@media (min-width: 700px) {
  .hero-trust { flex-direction: row; align-items: center; gap: 14px; }
}
.hero-faces {
  display: flex;
  flex-shrink: 0;
}
.hero-faces img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  margin-left: -10px;
  background: var(--brand-light);
}
.hero-faces img:first-child { margin-left: 0; }
.hero-trust p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.45;
}
.hero-trust strong { color: #fff; font-weight: 600; }

.page-hero {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #fff;
  padding: 64px 0 58px;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 580px; }

/* ---------- Sections ---------- */
section { padding: 56px 0; }
@media (min-width: 700px) {
  section { padding: 72px 0; }
}
.section-soft { background: var(--brand-soft); }

/* Einblenden beim Scrollen. Bewusst an die Klasse "js" gebunden: ohne
   JavaScript (oder wenn ein Skriptfehler das Einblenden verhindert) bleiben
   die Inhalte sichtbar, statt dass die Seite leer erscheint. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}
.step {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
@media (min-width: 1000px) {
  .step { padding: 28px 24px 28px 0; }
  .step + .step { padding-left: 24px; border-left: 1px solid var(--border); }
}
.step:hover { background: var(--brand-soft); }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.step h3 {
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.step p { font-size: 0.88rem; margin: 0; }

/* ---------- Feature-Split (Bild + Text nebeneinander, z.B. Speicher-Sektion) ---------- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 700px) {
  .feature-split { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.feature-split-img img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.feature-split-steps {
  grid-template-columns: 1fr;
  border-top: none;
  margin-top: 8px;
}
.feature-split-steps .step {
  padding-left: 0;
  padding-right: 0;
  border-left: none;
}

/* ---------- Why grid ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 40px; }
}
.why-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--ink);
}
.why-item svg {
  width: 18px;
  height: 18px;
  color: var(--brand-mid);
  margin-top: 3px;
}
.why-item p { margin: 0; color: var(--ink); }

/* ---------- Services ---------- */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 700px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .services { grid-template-columns: repeat(4, 1fr); }
}
/* Fuenfte Karte (Elektrokontrollen) sitzt allein in der letzten Zeile:
   volle Breite bei 2 Spalten, mittig ueber zwei Spalten bei 4 Spalten.
   Der Trennstrich davor macht sichtbar, dass sie nicht zu den vier
   Kernleistungen gehoert. */
.services-trenner {
  grid-column: 1 / -1;
  width: 100%;
  height: 0;
  margin: 10px 0 2px;
  border: none;
  border-top: 1px solid var(--border);
}
@media (min-width: 700px) {
  .service-zusatz { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .service-zusatz { grid-column: 2 / span 2; }
}
a.service {
  display: block;
  color: inherit;
}
.service {
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  padding: 28px 22px;
  background: var(--bg);
  transition: box-shadow var(--transition), transform var(--transition);
}
.service h3 { color: var(--ink); }
.service:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.service svg {
  width: 30px;
  height: 30px;
  color: var(--brand-mid);
  margin-bottom: 16px;
}
/* Symbolfarben abwechselnd Orange/Blau wie im Kundenredesign. */
.service svg.icon-orange { color: var(--accent); }
.service svg.icon-blau { color: var(--brand-mid); }
.service h3 {
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.service p {
  font-size: 0.86rem;
  margin: 0;
}

.services-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1000px) {
  .services-detail { grid-template-columns: repeat(2, 1fr); }
}
.service-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.service-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.service-card .icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.service-card .icon-wrap svg { width: 26px; height: 26px; color: var(--brand); }
.service-card h2 { font-size: 1.17rem; color: var(--brand-dark); }
.loxone-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
  font-size: 0.88rem;
  color: var(--ink);
}
.loxone-note a { color: var(--brand); font-weight: 600; }

/* Fünfte Karte (Elektrokontrollen): bei ungerader Anzahl in der 2-Spalten-Ansicht
   volle Breite, damit keine Lücke neben der letzten Karte entsteht. */
@media (min-width: 1000px) {
  .service-card-zusatz { grid-column: 1 / -1; }
}

/* ---------- Gallery (Startseite: einheitliches 2x2-Raster, exakt 4 Highlight-Projekte) ---------- */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 560px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.gallery > a { display: block; }
.gallery figure {
  position: relative;
  margin: 0;
  height: 100%;
  border-radius: var(--radius);
  background: var(--brand);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.gallery figure:hover {
  box-shadow: var(--shadow-hover);
}
.gallery .media {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Linksbuendig: die Titelbilder haben den Beschreibungstext links eingebrannt,
     der beim mittigen Zuschnitt angeschnitten wuerde. */
  object-position: left center;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--brand-light);
  transition: transform 0.4s ease;
}
.gallery figure:hover .media { transform: scale(1.04); transform-origin: left center; }

.gallery-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1000px) {
  .gallery-full { grid-template-columns: repeat(2, 1fr); }
}
.gallery-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.gallery-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}
.gallery-card img {
  width: 100%;
  /* Feste Hoehe erzwang auf dem Desktop ein sehr breites Format und schnitt
     den unteren Bildstreifen mit der Beschriftung weg. Die Titelbilder liegen
     in 16:9 vor - mit diesem Verhaeltnis bleibt das Bild vollstaendig. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Faellt ein Bild aus dem Raster, bleibt der beschriftete untere Teil erhalten. */
  object-position: left bottom;
  background: var(--brand-light);
}
.gallery-card-body { padding: 22px; }
.gallery-card-body h2 {
  font-size: 1rem;
  color: var(--brand-dark);
  margin-bottom: 8px;
}
.gallery-card-body p { font-size: 0.9rem; margin: 0; }
a.gallery-card { display: block; color: inherit; }
.gallery-card-count {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
}

.projekt-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
@media (min-width: 700px) {
  .projekt-detail-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.projekt-detail-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: left center;
  border-radius: var(--radius);
  background: var(--brand-light);
}

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1000px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
.team-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 26px;
  text-align: center;
  background: var(--bg);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.team-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.team-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto 18px;
  border: 3px solid var(--accent);
  display: block;
  background: var(--brand-light);
}
.team-role {
  color: var(--brand);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.team-card h2 { font-size: 1.1rem; }
.team-card p { font-size: 0.9rem; text-align: left; }
.team-tel {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  color: var(--brand);
}

/* ---------- CTA ---------- */
.cta {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #fff;
}
.cta .eyebrow { color: var(--accent); }
.cta h2 { color: #fff; }
.cta h2.section-title::after { background: var(--accent); }
.cta p { color: rgba(255, 255, 255, 0.85); max-width: 520px; }

/* ---------- Kontakt ---------- */
.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 1000px) {
  /* Formular links, Infokarten rechts – Aufteilung wie im Kundenredesign. */
  .kontakt-grid { grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start; }
}
.kontakt-spalte { display: flex; flex-direction: column; gap: 24px; }
.kontakt-spalte .info-card { height: auto; }
/* Karten wachsen mit ihrem Inhalt – sonst zieht das Nachrichtenfeld die
   Formularkarte auf die Hoehe der ganzen Spalte auf. */
.kontakt-grid .form-card { height: auto; }
.kontakt-grid .form-card form .form-group-grow { flex: 0 0 auto; }
.kontakt-grid .form-card form .form-group-grow textarea { min-height: 150px; }

/* Ueberschrift im Formular bewusst ohne den orangen Strich der Sektionstitel. */
.kontakt-titel {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 4px 0 18px;
  color: var(--brand);
}
.form-zeile { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) {
  .form-zeile { grid-template-columns: 1fr 1fr; }
}
.pflicht { color: var(--accent-hover); }

.kontakt-aktionen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
/* Alle drei Knoepfe untereinander ueber die volle Breite: nebeneinander bricht
   die Telefonnummer sonst auf zwei Zeilen um. */
.kontakt-aktionen .btn { width: 100%; white-space: nowrap; }
/* Die allgemeine Regel setzt Formularknoepfe linksbuendig – hier sollen sie
   die volle Zeile teilen. */
.form-card form .kontakt-aktionen .btn { margin-top: 0; align-self: stretch; }

.info-titel {
  display: block;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 16px;
}
.ablauf-liste { list-style: none; margin: 0; padding: 0; }
.ablauf-liste li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 14px;
}
.ablauf-liste li:last-child { margin-bottom: 0; }
.ablauf-nummer {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent-hover);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Geschaeftsfuehrer im Abschnitt "Drei Geschaeftsfuehrer, ein Team" */
.chefs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (min-width: 700px) { .chefs-grid { grid-template-columns: repeat(3, 1fr); } }
.chef-karte {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chef-karte img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex-shrink: 0;
  border: 2px solid var(--brand-light);
}
.chef-text strong { display: block; font-size: 0.95rem; color: var(--ink); }
.chef-text span { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 3px; }
.chef-text a { font-size: 0.84rem; color: var(--brand); font-weight: 500; }
.info-card, .form-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--bg);
  box-shadow: var(--shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 700px) {
  .info-card, .form-card { padding: 32px; }
}
.form-card form {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.form-card form .form-group-grow {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}
.form-card form .form-group-grow textarea {
  flex: 1;
  min-height: 140px;
}
.form-card form .btn {
  margin-top: auto;
  align-self: flex-start;
}
.info-row {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}
.info-row:last-child { margin-bottom: 0; }
.info-row svg { width: 22px; height: 22px; color: var(--brand); margin-top: 2px; }
.info-row strong { display: block; color: var(--ink); margin-bottom: 2px; }
.info-row a { color: var(--brand); font-weight: 500; }
/* Erlaeuterung unter einer Adresse - etwa der Unterschied zwischen
   Betriebsstandort und Firmensitz. */
.info-zusatz {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.5;
}
/* Das Pfeilsymbol steht als SVG im Markup und nicht als CSS-Zeichen: nicht
   jede Schrift bringt U+2197 mit, und fehlt es, erscheint ein leeres Kaestchen. */
.anfahrt-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 0.88rem;
}
.anfahrt-link svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}
table.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.hours td {
  display: block;
  width: 100%;
  padding: 6px 0 0;
  border-bottom: none;
  color: var(--muted);
}
/* Vor- und Nachmittag je auf einer eigenen Zeile, ohne Umbruch innerhalb
   einer Zeitspanne. */
.zeitspanne { display: block; white-space: nowrap; }
.zeitspanne + .zeitspanne { margin-top: 2px; }
table.hours td:first-child {
  font-weight: 600;
  color: var(--ink);
  width: 100%;
  padding: 6px 0 0;
  border-bottom: none;
}
@media (min-width: 700px) {
  table.hours td {
    display: table-cell;
    width: auto;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
  }
  table.hours td:first-child { width: 42%; padding-right: 12px; }
}
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 6px;
  color: var(--ink);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--brand-soft);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(3, 87, 176, 0.12);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 20px;
  padding: 10px 12px;
  background: var(--brand-soft);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  padding: 52px 0 24px;
  font-size: 0.88rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
@media (min-width: 700px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.site-footer h2 {
  color: #fff;
  font-size: 0.92rem;
  margin-bottom: 14px;
}
.site-footer p { color: rgba(255, 255, 255, 0.65); margin: 0 0 6px; }
.site-footer a { color: rgba(255, 255, 255, 0.78); }
.site-footer a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
}
@media (min-width: 700px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
}
/* Eigene weisse Fassung des Logos statt des frueheren CSS-Filters
   (brightness(0) invert(1)): der Filter macht aus dem Farblogo eine
   Silhouette, in der die feinen Linien von Dach und Modulen zu einem Klumpen
   verschmelzen - das sah unscharf aus. */
.footer-logo img {
  height: 44px;
  width: auto;
  margin-bottom: 14px;
}
/* Der Firmensitz steht im Fussbereich bewusst kleiner als der
   Betriebsstandort: gesucht wird die Adresse, die man anfaehrt. */
.footer-sitz {
  font-size: 0.78rem;
  opacity: 0.65;
  margin-top: 8px;
}

/* ---------- Lightbox / Slideshow ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 22, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.lightbox-overlay.open { display: flex; }
body.lightbox-open { overflow: hidden; }
.lightbox-stage {
  max-width: min(1100px, 90vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.lightbox-img {
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  background: #11151f;
}
.lightbox-caption {
  color: #fff;
  font-weight: 600;
  text-align: center;
  margin: 0;
}
.lightbox-count {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
@media (min-width: 700px) {
  .lightbox-close, .lightbox-prev, .lightbox-next { width: 48px; height: 48px; }
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
}
.lightbox-close { top: 12px; right: 12px; }
.lightbox-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 8px; top: 50%; transform: translateY(-50%); }
@media (min-width: 700px) {
  .lightbox-close { top: 20px; right: 20px; }
  .lightbox-prev { left: 20px; }
  .lightbox-next { right: 20px; }
}
.lightbox-close .icon,
.lightbox-prev .icon,
.lightbox-next .icon { width: 22px; height: 22px; }

/* ---------- Redesign-Ergänzungen: Trust-Bar, FAQ, Loxone-Flow, Sticky-CTA, Solarrechner ---------- */

/* ---------- Trust-Bar ---------- */
.trust-bar-wrap { position: relative; z-index: 2; }
.trust-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  margin-top: -28px;
  overflow: hidden;
}
@media (min-width: 560px) {
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .trust-bar { grid-template-columns: repeat(4, 1fr); margin-top: -40px; }
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1000px) {
  .trust-item { border-bottom: none; border-right: 1px solid var(--border); }
  .trust-item:last-child { border-right: none; }
}
.trust-item svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.trust-item strong { display: block; font-size: 0.9rem; color: var(--ink); margin-bottom: 2px; }
.trust-item span { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }

/* ---------- FAQ (native details/summary) ---------- */
.faq-list { display: grid; gap: 12px; max-width: 780px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--border); }
.faq-item p {
  margin: 0;
  padding: 18px 22px 22px;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* ---------- Loxone-Sektion (dunkler Navy-Hintergrund) ---------- */
.loxone-section {
  background: linear-gradient(145deg, var(--brand-dark) 0%, #024a94 45%, var(--brand-mid) 100%);
  color: #fff;
}
.loxone-section .eyebrow { color: var(--accent); }

/* Kopfbereich: Text links, Partnerkarte rechts – Aufbau wie im Kundenredesign. */
.loxone-kopf {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 36px;
}
@media (min-width: 1000px) {
  .loxone-kopf { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
}
.loxone-intro .lead { margin-bottom: 24px; }
.loxone-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-outline-hell {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  background: transparent;
}
.btn-outline-hell:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.loxone-badge-punkte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
}
.loxone-badge-punkte span::before { content: "✓ "; color: var(--accent); }

/* Partnerhinweis im dunklen Abschnitt. Das smart-me-Logo ist blau-gruen auf
   Weiss und braucht deshalb eine helle Flaeche, sonst versinkt es im Grund. */
.partner-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: 44px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
}
@media (min-width: 700px) {
  .partner-band { flex-direction: row; text-align: left; gap: 22px; padding: 18px 24px; }
}
.partner-band-logo {
  flex: none;
  background: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  line-height: 0;
}
.partner-band-logo img { height: 26px; width: auto; }
.partner-band p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1.6;
}
.partner-band strong { color: #fff; }

/* Sechs Leistungskarten – Inhalte und Symbolfarben aus dem Kundenredesign. */
.loxone-karten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 44px;
}
@media (min-width: 700px) { .loxone-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .loxone-karten { grid-template-columns: repeat(3, 1fr); } }
.loxone-karte {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.loxone-karte:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}
.loxone-karte-symbol {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.loxone-karte-symbol svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Helle Kachel statt getoenter Flaeche: auf dem blauen Verlauf der Sektion
   waere ein blaues Symbol sonst kaum zu erkennen. */
.loxone-karte-symbol.symbol-orange { background: #fff; color: var(--accent); }
.loxone-karte-symbol.symbol-blau { background: #fff; color: var(--brand-mid); }
.loxone-karte h3 { font-size: 0.98rem; margin-bottom: 8px; color: #fff; }
.loxone-karte p { font-size: 0.86rem; margin: 0; color: rgba(255, 255, 255, 0.78); line-height: 1.65; }

.loxone-flow-titel {
  text-align: center;
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 18px;
}

/* ---------- Loxone Energiefluss-Diagramm ---------- */
.loxone-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
@media (min-width: 700px) {
  .loxone-flow { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
.loxone-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 130px;
  text-align: center;
  padding: 16px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
}
.loxone-flow-step .num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
}
.loxone-flow-step svg { width: 24px; height: 24px; color: #fff; }
.loxone-flow-step span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); line-height: 1.3; }
.loxone-flow-arrow { color: var(--accent); flex-shrink: 0; }
.loxone-flow-arrow svg { width: 18px; height: 18px; transform: rotate(90deg); }
@media (min-width: 700px) {
  .loxone-flow-arrow svg { transform: none; }
}

/* Partnerkarte: steht im Kopfbereich rechts neben dem Einleitungstext. */
.loxone-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 24px 22px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
}
/* Offizielles Loxone-Partner-Badge – Seitenverhaeltnis unveraendert lassen. */
.loxone-badge-logo {
  display: block;
  width: 210px;
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
  border-radius: 3px;
}
.loxone-badge-text strong { display: block; color: #fff; font-size: 0.95rem; margin-bottom: 5px; }
.loxone-badge-text span { display: block; color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; line-height: 1.6; }

/* ---------- Gallery Slideshow-Dots (manuell klickbar, kein Autoplay) ---------- */
.slide-dots {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 20px;
  background: rgba(23, 30, 73, 0.55);
  z-index: 3;
}
.slide-dots button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-dots button::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transition: background var(--transition), transform var(--transition);
}
.slide-dots button.active::before { background: var(--accent); transform: scale(1.4); }

/* ---------- Solarrechner ---------- */
.calc-hero { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.calc-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
@media (min-width: 1000px) {
  .calc-shell { grid-template-columns: 1fr 1fr; }
}
.calc-form {
  padding: 24px;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 700px) {
  .calc-form { padding: 36px; }
}
@media (min-width: 1000px) {
  .calc-form { border-bottom: none; border-right: 1px solid var(--border); }
}
.calc-results {
  padding: 24px;
  background: var(--brand-soft);
}
@media (min-width: 700px) {
  .calc-results { padding: 36px; }
}
.calc-form h3, .calc-results h2 { font-size: 1.05rem; margin-bottom: 20px; }

.calc-field { margin-bottom: 20px; }
.calc-field label {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.calc-field label .val { font-family: var(--font-mono); color: var(--brand-mid-text); }
.calc-field select,
.calc-field input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--bg);
}
.calc-field input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--border) var(--fill, 50%));
  appearance: none;
  -webkit-appearance: none;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--accent);
  cursor: pointer;
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--accent);
  cursor: pointer;
}
.calc-toggle-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.calc-toggle-group button {
  flex: 1;
  min-width: 100px;
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.calc-toggle-group button.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.calc-checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; font-weight: 600; margin-bottom: 14px; }
.calc-checkbox.disabled { opacity: 0.55; }
.calc-soon {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  background: var(--brand-light);
  color: var(--brand-mid-text);
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}

.calc-kpis { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
@media (min-width: 560px) {
  .calc-kpis { grid-template-columns: repeat(2, 1fr); }
}
.calc-kpi { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.calc-kpi .label { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.calc-kpi .value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--brand); }
.calc-kpi .value.accent { color: var(--accent-hover); }


.calc-cta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.calc-tco-canvas { width: 100%; height: 220px; margin-top: 16px; }

.calc-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(23, 30, 73, 0.55);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.calc-modal-overlay.open { display: flex; }
.calc-modal {
  background: var(--bg);
  border-radius: var(--radius);
  max-width: 420px;
  width: 100%;
  padding: 32px;
  text-align: center;
}
.calc-modal .icon-big { font-size: 2.2rem; margin-bottom: 8px; }

/* ---------- Solarrechner: Eingaben ---------- */
.calc-gruppe {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-mid-text);
  margin: 28px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.calc-gruppe:first-child { margin-top: 0; }
.calc-field label small,
.calc-checkbox small {
  display: block;
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.calc-toggle-group button small {
  display: block;
  font-weight: 400;
  font-size: 0.68rem;
  opacity: 0.75;
  margin-top: 2px;
}
.calc-hinweis {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 0;
}
.calc-unterfeld {
  margin-left: 26px;
  padding-left: 12px;
  border-left: 2px solid var(--brand-light);
}
.calc-checkbox { align-items: flex-start; flex-wrap: wrap; }
.calc-checkbox input { margin-top: 2px; }
.calc-checkbox > span:not(.calc-badge) { flex: 1; min-width: 140px; }
.calc-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--brand-mid-text);
  background: var(--brand-light);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* ---------- Solarrechner: Ergebnis ---------- */
.calc-invest {
  background: var(--brand);
  color: #fff;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 18px;
  text-align: center;
}
.calc-invest-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}
.calc-invest-wert {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--accent-text);
  line-height: 1.3;
}
.calc-invest-detail {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}
.calc-kpi .sub { font-size: 0.72rem; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.calc-kpis-drei { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .calc-kpis-drei { grid-template-columns: repeat(3, 1fr); }
}
.calc-hinweis-box {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.8rem;
  line-height: 1.55;
  margin-bottom: 10px;
  border-left: 3px solid;
}
.calc-hinweis-box.warnung { background: #fff5e6; border-color: var(--accent); color: #7a5200; }
.calc-hinweis-box.info { background: var(--brand-light); border-color: var(--brand-mid); color: #17456e; }

.calc-diagramm {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-top: 20px;
}
.calc-diagramm h3 { font-size: 0.9rem; margin: 0 0 10px; }
.calc-diagramm canvas { width: 100%; display: block; }

/* ---------- Solarrechner: E-Auto-Vergleich ---------- */
.calc-tco {
  margin-top: 28px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.calc-tco-kopf { padding: 24px 24px 0; }
.calc-tco-kopf h2 { margin: 0 0 4px; font-size: 1.05rem; }
.calc-tco-kopf p { font-size: 0.85rem; color: var(--muted); margin: 0; }
.calc-tco-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 24px; }
@media (min-width: 1000px) {
  .calc-tco-grid { grid-template-columns: 300px 1fr; }
}
.calc-tco-eingaben { border-right: none; }
@media (min-width: 1000px) {
  .calc-tco-eingaben { border-right: 1px solid var(--border); padding-right: 24px; }
}
.calc-tco-auswertung canvas { width: 100%; display: block; }
.calc-tco-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.74rem;
  color: var(--muted);
  margin: 10px 0 18px;
}
.calc-tco-legende i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 6px;
}

/* ---------- Solarrechner: Anfrage ---------- */
.calc-modal-breit { max-width: 660px; text-align: left; max-height: 90vh; overflow-y: auto; }
.calc-modal-breit h3 { margin: 0 0 6px; }
.calc-modal-zusammenfassung {
  background: var(--brand-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.8rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 14px 0 20px;
}
.calc-modal-felder { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) {
  .calc-modal-felder { grid-template-columns: 1fr 1fr; }
}
.calc-modal-breitfeld { grid-column: 1 / -1; }
.calc-modal-felder .form-group { margin-bottom: 14px; }
.calc-modal-felder select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--bg);
}
.calc-modal-fehler {
  background: #fbe9e9;
  color: #a33a3a;
  border-left: 3px solid #a33a3a;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.82rem;
  margin-bottom: 14px;
}
.calc-modal-aktionen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.calc-modal-aktionen .btn { flex: 1; min-width: 140px; }
/* Honigtopf gegen Formularspam: fuer Menschen unsichtbar, fuer Automaten
   aber im Formular auffindbar. Bewusst nicht display:none – manche Automaten
   ueberspringen ausgeblendete Felder. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Rechtstexte (Datenschutz) ---------- */
.rechtstext {
  max-width: 780px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink);
}
.rechtstext-stand { font-size: 0.82rem; color: var(--muted); margin-bottom: 32px; }
.rechtstext h2 {
  font-size: 1.15rem;
  margin: 40px 0 12px;
  color: var(--brand);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.rechtstext h3 { font-size: 0.98rem; margin: 26px 0 8px; color: var(--ink); }
.rechtstext p { margin-bottom: 14px; }
.rechtstext ul { margin: 0 0 16px; padding-left: 22px; }
.rechtstext li { margin-bottom: 7px; }
.rechtstext a { color: var(--brand-mid-text); font-weight: 500; }
.rechtstext-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 18px;
  font-size: 0.88rem;
}
.rechtstext-tabelle td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.rechtstext-tabelle td:first-child { font-weight: 600; width: 38%; color: var(--ink); }
.rechtstext-tabelle td:last-child { color: var(--muted); }

.formular-erfolg {
  text-align: center;
  padding: 30px 10px;
}
.formular-erfolg h3 { margin: 0 0 8px; }
.formular-erfolg p { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; }
.formular-fehler {
  background: #fbe9e9;
  color: #a33a3a;
  border-left: 3px solid #a33a3a;
  border-radius: 6px;
  padding: 11px 13px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.calc-erfolg-symbol {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #e3f7e8;
  color: #1c7a3c;
  font-size: 1.8rem;
  line-height: 56px;
  font-weight: 700;
}

/* ---------- Admin ---------- */
.admin-shell {
  background: var(--brand-soft);
  min-height: 60vh;
  /* Vorher klebte die Kopfzeile des Adminbereichs direkt unter der Navigation. */
  padding: 28px 0 56px;
}
@media (min-width: 700px) {
  .admin-shell { padding: 40px 0 72px; }
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 28px;
}
.admin-header h1 { line-height: 1.2; }
.admin-header h1 { font-size: 1.4rem; }
@media (min-width: 700px) {
  .admin-header h1 { font-size: 1.6rem; }
}
.admin-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
@media (min-width: 700px) {
  .admin-nav { gap: 8px; margin-bottom: 32px; }
}
.admin-nav a {
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.84rem;
}
@media (min-width: 700px) {
  .admin-nav a { padding: 10px 16px; font-size: 0.9rem; }
}
.admin-nav a.active,
.admin-nav a:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.admin-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 28px;
}
@media (min-width: 700px) {
  .admin-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .admin-cards { grid-template-columns: repeat(3, 1fr); }
}
.admin-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.admin-card p { margin: 0; }
.admin-card .btn { margin-top: auto; }
.admin-card .kpi { font-size: 2rem; font-weight: 700; color: var(--brand); line-height: 1.1; }
.admin-card .kpi-detail { font-size: 0.8rem; color: var(--muted); }

.admin-begruessung {
  margin: -8px 0 24px;
  font-size: 0.9rem;
  color: var(--muted);
}
.admin-begruessung strong { color: var(--ink); }

.admin-panel-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: 20px;
}
.admin-panel-kopf h2 { margin: 0; }

/* Aufrufe je Zeitraum ueber der Statistiktabelle */
.zeitraum-leiste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 700px) {
  .zeitraum-leiste { grid-template-columns: repeat(4, 1fr); }
}
.zeitraum {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--brand-soft);
}
.zeitraum-wert { font-size: 1.5rem; font-weight: 700; color: var(--brand); line-height: 1.2; }
.zeitraum-label { font-size: 0.78rem; color: var(--muted); }

/* Statistiktabelle: viele schmale Zahlenspalten, Bereichsname bekommt den Rest */
@media (min-width: 1000px) {
  .admin-table-statistik th:not(:first-child):not(:last-child),
  .admin-table-statistik td:not(:first-child):not(:last-child) { width: 1%; white-space: nowrap; }
  .admin-table-statistik th:first-child { width: auto; }
}

/* Balken fuer den prozentualen Anteil in der Aufruf-Statistik */
.anteil-balken {
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  margin-right: 8px;
}
.anteil-balken > span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.anteil-wert { font-size: 0.82rem; color: var(--muted); }

.admin-verlauf { list-style: none; margin: 0; padding: 0; }
.admin-verlauf li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
/* Ab Tablet dreispaltig: Eintrag | geaenderte Bereiche | Zeitpunkt */
@media (min-width: 700px) {
  .admin-verlauf li {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 20px;
  }
}
.admin-verlauf li:last-child { border-bottom: none; }
.admin-verlauf-text { min-width: 0; }
.admin-verlauf-text a { font-weight: 600; color: var(--brand); }
.admin-verlauf-text a:hover { color: var(--brand-mid-text); }
.admin-verlauf-text strong { font-weight: 600; color: var(--ink); }
.admin-verlauf-bereich {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
.admin-verlauf-was { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-verlauf time { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
@media (min-width: 700px) {
  .admin-verlauf time { text-align: right; }
}
/* Was wurde geaendert: Text, Bild, Status ... */
.aenderung-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.admin-hinweis {
  margin: 16px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
}
.admin-leer { margin: 0; color: var(--muted); font-size: 0.9rem; }
.admin-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}
@media (min-width: 700px) {
  .admin-panel { padding: 28px; }
}
.admin-panel h2 { margin-top: 0; }
.admin-form { display: grid; gap: 16px; }
.admin-form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) {
  .admin-form-row { grid-template-columns: 1fr 1fr; }
}
.admin-form label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--ink);
}
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="tel"],
.admin-form input[type="password"],
.admin-form input[type="file"],
.admin-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.92rem;
  background: var(--brand-soft);
}
.admin-form textarea { min-height: 90px; resize: vertical; }

/* Datei-Auswahl: Browser-Standardlook durch eigenen Knopf ersetzen. */
.admin-form input[type="file"] {
  padding: 10px;
  border-style: dashed;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--muted);
  transition: border-color var(--transition), background var(--transition);
}
.admin-form input[type="file"]:hover {
  border-color: var(--brand);
  background: #fff;
}
.admin-form input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 18px;
  border: none;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition);
}
.admin-form input[type="file"]::file-selector-button:hover { background: var(--brand-mid); }

.admin-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.admin-checkbox input { width: auto; }

/* ---------- Admin: Solarrechner und Anfragen ---------- */
.admin-form input[type="number"] {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--bg);
}
.admin-abschnitt {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-mid);
  margin: 26px 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.admin-abschnitt small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400; }
.admin-raster { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .admin-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .admin-raster { grid-template-columns: repeat(3, 1fr); } }
.admin-raster label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; }
.admin-raster label small { font-weight: 400; color: var(--muted); }
.admin-raster .admin-breit { grid-column: 1 / -1; }
.admin-hinweis { font-size: 0.74rem; color: var(--muted); line-height: 1.5; margin: 5px 0 0; }
.admin-knopfzeile { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.admin-unterblock {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
  background: var(--brand-soft);
}
.admin-unterblock .admin-raster { margin-bottom: 14px; }
.admin-unterblock input { background: var(--bg); }

.admin-tabelle-wrap { overflow-x: auto; }
.admin-tabelle { width: 100%; border-collapse: collapse; margin-top: 8px; }
.admin-tabelle th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 6px 8px 6px 0;
  font-weight: 600;
}
.admin-tabelle td { padding: 4px 8px 4px 0; vertical-align: middle; }
.admin-tabelle input {
  width: 100%;
  min-width: 90px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  background: var(--bg);
}
.admin-tabelle tr.admin-neu input { border-style: dashed; }
.admin-panel-aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-zaehler {
  font-family: var(--font-mono);
  background: var(--brand-light);
  color: var(--brand-mid);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.82rem;
}
.admin-leer { color: var(--muted); font-style: italic; }

/* Verbrauchtes Mailkontingent */
.kontingent { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 18px; }
.kontingent-balken { flex: 1 1 220px; }
.kontingent-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.kontingent-kopf strong { font-family: var(--font-mono); color: var(--brand); }
.kontingent-spur {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.kontingent-spur span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

/* Abgewehrte Sendeversuche */
.abwehr-zahlen { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.abwehr-zahlen > div {
  flex: 1 1 160px;
  background: var(--brand-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.abwehr-zahlen strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--brand);
  line-height: 1.2;
}
.abwehr-zahlen span { font-size: 0.78rem; color: var(--muted); }
.abwehr-tabelle td { font-size: 0.82rem; }
.abwehr-tabelle code { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }
.abwehr-browser {
  max-width: 320px;
  color: var(--muted);
  font-size: 0.74rem;
  word-break: break-word;
}
.badge-bot { background: #fbe9e9; color: #a33a3a; }
.badge-limit { background: #fff5e6; color: #8a6100; }
.badge-login { background: #eceaf6; color: #4a3f8a; }

/* Inhalt einer abgewehrten Sendung: zugeklappt, damit die Tabelle lesbar
   bleibt. Aufgeklappt zeigt sie, was jemand schreiben wollte. */
.abwehr-inhalt summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--brand-mid-text);
}
.abwehr-inhalt dl {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  font-size: 0.82rem;
  max-width: 460px;
}
.abwehr-inhalt dt { color: var(--muted); white-space: nowrap; }
.abwehr-inhalt dd {
  margin: 0;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.abwehr-leer { color: var(--muted); }

.anfrage-karte {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--bg);
}
.anfrage-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.anfrage-name { display: block; margin-top: 6px; font-size: 1rem; }
.anfrage-zeit { font-size: 0.76rem; color: var(--muted); }
.badge-rechner { background: var(--brand-light); color: var(--brand-mid); }
.badge-kontakt { background: #f0eefb; color: #5b4bb5; }
.anfrage-kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.84rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.anfrage-werte { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.anfrage-werte span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  background: var(--brand-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
}
.anfrage-nachricht {
  background: var(--brand-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.85rem;
  white-space: pre-wrap;
  margin-bottom: 10px;
}
.anfrage-fehler {
  background: #fbe9e9;
  color: #a33a3a;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 0.78rem;
  margin-bottom: 10px;
  word-break: break-word;
}
.anfrage-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* Admin-Tabellen: Mobile-Basis = gestapelte Karten, ab lg = klassische Tabelle */
.admin-table { border: none; background: none; box-shadow: none; width: 100%; }
.admin-table thead { display: none; }
.admin-table, .admin-table tbody, .admin-table tr, .admin-table td {
  display: block;
  width: 100%;
}
.admin-table tr {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.admin-table td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  word-break: break-word;
  font-size: 0.9rem;
}
.admin-table tr td:last-child { border-bottom: none; }
.admin-table td::before {
  content: attr(data-label);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: left;
  flex-shrink: 0;
}
/* Symbolknoepfe stehen auch auf dem Smartphone nebeneinander – gestapelt
   waeren sie unnoetig breit. */
.admin-table td.admin-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.admin-table td.admin-actions::before { margin-right: auto; }
.admin-table td.admin-actions form { display: flex; margin: 0; }
.admin-table td.admin-actions a,
.admin-table td.admin-actions button {
  width: auto;
}
/* Vorschaubild im Querformat: zeigt vom Foto deutlich mehr als der frühere
   quadratische Ausschnitt. */
.admin-table img.thumb {
  margin-left: auto;
  width: 112px;
  height: 63px;
  object-fit: cover;
  object-position: left center;
  border-radius: 6px;
}

@media (min-width: 1000px) {
  .admin-table {
    border-collapse: collapse;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: none;
  }
  .admin-table thead { display: table-header-group; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: revert; width: auto; }
  /* Muss nach der Zeile darueber stehen: dort setzt width:auto die Tabelle
     sonst auf Inhaltsbreite und sie nutzt die Panelbreite nicht aus. */
  .admin-table { width: 100%; table-layout: auto; }
  .admin-table tr {
    background: none;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
  }
  .admin-table th, .admin-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    vertical-align: middle;
    /* In der Kartenansicht duerfen lange Titel im Wort brechen, in der
       Tabelle sieht das bei Ortsnamen wie "Obersteckhol z" schlecht aus. */
    word-break: normal;
  }
  .admin-table th { background: var(--brand-soft); font-weight: 600; }
  .admin-table td::before { content: none; }
  /* display:flex auf einer Tabellenzelle nimmt ihr das Zellverhalten – die
     Zelle rutscht dann aus dem Raster und legt sich ueber die Nachbarspalte.
     Deshalb bleibt die Zelle eine Zelle, die Knoepfe werden inline gesetzt. */
  .admin-table td.admin-actions {
    display: table-cell;
    text-align: right;
    white-space: nowrap;
  }
  .admin-table td.admin-actions form { display: inline-block; margin: 0; }
  .admin-table td.admin-actions a,
  .admin-table td.admin-actions button {
    width: auto;
    vertical-align: middle;
    margin-left: 6px;
  }
  .admin-table img.thumb { margin-left: 0; width: 150px; height: 84px; }
  /* Zahlen- und Aktionsspalten so schmal wie noetig halten, damit die
     Titelspalte den restlichen Platz bekommt und weniger umbricht. */
  .admin-table td.admin-actions,
  .admin-table th:last-child { width: 1%; }
  .admin-table td:first-child,
  .admin-table th:first-child { width: 150px; }
}

.kennwerte-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.kennwerte-list li {
  background: #fff6e5;
  color: #7a5400;
  border: 1px solid #f2dda4;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
  /* Ohne dies zerlegt der Wortumbruch der Tabellenzelle "veroeffentlicht". */
  white-space: nowrap;
}
.badge-on { background: #e3f7e8; color: #1c7a3c; }
.badge-off { background: #f3e9e9; color: #a33a3a; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Aktionen als Symbolknoepfe: sparen Platz, damit die Tabelle die Breite
   fuer Titel und Inhalte nutzen kann. Beschriftung steckt in title/aria-label. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--brand);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.icon-btn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}
.icon-btn:focus-visible {
  outline: 2px solid var(--brand-mid);
  outline-offset: 2px;
}
.icon-btn-danger { color: #d64545; }
.icon-btn-danger:hover {
  background: #fdeaea;
  border-color: #d64545;
  color: #b93838;
}
.btn-sm { padding: 8px 14px; font-size: 0.82rem; white-space: nowrap; }
.btn-danger { background: #d64545; color: #fff; }
.btn-danger:hover { background: #b93838; }
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.alert-success { background: #e3f7e8; color: #1c7a3c; border-left: 3px solid #1c7a3c; }
.alert-error { background: #fbe9e9; color: #a33a3a; border-left: 3px solid #a33a3a; }
/* Warnung: kein Fehler, aber etwas, das vor dem Livegang erledigt sein muss. */
.alert-warn { background: #fdf3e3; color: #8a5a1a; border-left: 3px solid #d9932a; }
.alert-info { background: #eaf1fb; color: #2b4f86; border-left: 3px solid #2b4f86; }
.admin-bild-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
@media (min-width: 700px) {
  .admin-bild-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
.admin-bild-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: var(--brand-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.admin-bild-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: left center;
  border-radius: 6px;
}
.admin-bild-item .badge { align-self: flex-start; }
.login-shell {
  max-width: 380px;
  margin: 40px auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
@media (min-width: 700px) {
  .login-shell { margin: 80px auto; padding: 36px; }
}

/* Unsichtbarer Speicherknopf am Anfang eines Formulars: er faengt die
   Eingabetaste ab, damit sie nicht den ersten sichtbaren Knopf betaetigt -
   in den Tabellen des Adminbereichs waere das ein "Entfernen". Nicht
   display:none, denn ein ausgeblendeter Knopf zaehlt nicht als Standardknopf. */
.enter-speichert {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Erfolgsmeldung, wenn nach dem Speichern die Hoehe wiederhergestellt wurde:
   sie stuende sonst weit oben ausserhalb des Sichtfelds. */
.alert-schwebend {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  max-width: min(560px, calc(100vw - 32px));
  box-shadow: 0 8px 24px rgba(10, 14, 22, 0.18);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.alert-schwebend.alert-verblasst {
  opacity: 0;
  visibility: hidden;
}

/* Projekte, die auf der Startseite erscheinen: in der Adminliste am
   Akzentstreifen erkennbar, damit man ohne Nachzaehlen sieht, was der Besucher
   zuerst zu sehen bekommt.

   Zwei Fassungen, weil die Liste auf schmalen Bildschirmen aus Karten besteht
   und ab 900 Punkten eine echte Tabelle ist. Die Karte bekommt den Rahmen, die
   Tabellenzeile den Streifen an der ersten Zelle - ein Schatten auf einer
   Tabellenzeile wird je nach Browser verschluckt. */
.admin-table tr.auf-startseite {
  background: var(--brand-soft);
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.badge-startseite {
  background: var(--accent);
  color: #3a2a00;
}
.icon-btn-stern { color: var(--accent); border-color: var(--accent); }

@media (min-width: 1000px) {
  .admin-table tr.auf-startseite { box-shadow: none; }
  .admin-table tr.auf-startseite td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
  }
}

/* Vorschau des Titelbildes im Adminbereich: im selben Seitenverhaeltnis wie auf
   der Startseite, damit man vor dem Speichern sieht, was beschnitten wird. */
.titelbild-vorschau img {
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.titelbild-vorschau { margin-bottom: 14px; }