/*************************************
 * basicreset.css + global Reset
 *************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*************************************
 * CSS Variablen – zentrale Settings
 *************************************/
:root {
  /* Container */
  --container-width: 900px;
  --container-padding: 1px;
  --container-margin: auto;

  /* Typografie */
  --font-family-base: "trebuchet ms", Arial, Helvetica, sans-serif;
  --font-family-brand: 'sefont', "trebuchet ms", Arial, sans-serif;
  --font-size-base: 75%; /* Desktop-Root-Size */
  --line-height-base: 1.5;

  /* Layering / Z-Index */
  --z-header: 1000;
  --z-overlay: 1300;
  --z-overlay-fallback: 1250;
  --z-menu-toggle: 1400;
  --z-preloader: 1100;

  /* Radius & Shadows */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.08);
  --shadow-md: 0 12px 36px rgba(0,0,0,0.28);
  /* --shadow-elevated: 5px 5px 20px rgba(15,15,15,0.6); */
  --shadow-elevated: 5px 5px 20px 10px #0f0f0f9e;

  /* Farben – Basis */
  --color-bg: #00326b;
  --color-bg-overlay: #00316c;
  --color-surface: #ffffff;
  --color-surface-muted: #f2f2f2;

  --color-text: #303030;
  --color-text-muted: #6f6f6f;

  --color-brand: #0202A2;       /* Marken-/Menü-Highlight */
  --color-link: #00008b;        /* Standard-Link */
  --color-link-hover: #005ea2;  /* Link-Hover */
  --color-accent: #004a99;      /* Buttons, Akzentflächen */

  --color-heading-2: #FF9900;
  --color-divider: #d7ddb9;
  --color-border: #ddd;
  --color-border-weak: #eeeeee;
  --color-shadow-text: #666666;

  /* Menüfarben (zentral) */
  --menu-link:         var(--link-color);
  --menu-link-visited: var(--link-color);
  --menu-link-hover:   var(--color-link-hover);
  --menu-link-active:  var(--color-link-hover);
  --menu-toggle: var(--color-brand);
  --menu-bg: var(--color-surface);
  --menu-border: var(--color-border-weak);
  --menu-active-item: #BFBFBF;

  /* Mobile-Overlay-Layout */
  --mobile-menu-right: 22px;              /* Abstand vom rechten Rand */
  --mobile-menu-min-width: 250px;         /* Mindestbreite */
  --mobile-menu-max-width: 360px;         /* Maximalbreite (optional) */
  --mobile-menu-vertical-gap: 80px;       /* Abstand oben+unten im Viewport */
  --mobile-menu-inline-padding: 12px;     /* horizontaler Innenabstand im Overlay */
  --toggle-top-offset: 200px; /* Standard-Zusatzabstand */

  /* Feedbackfarben */
  --color-success-bg: #32cd32;
  --color-success-border: #1b731b;
  --color-success-text: #ffffff;
  --color-error-bg: #ffcccc;   /* vormals #fcc */
  --color-error-border: #ff0000; /* vormals #f00 */
  --color-error-text: var(--color-text);

  /* Header */
  --header-height: 56px;

  /* Abwärtskompatibilität zu bestehenden Variablennamen */
  --primary-color: var(--color-text);
  --accent-color: var(--color-accent);
  --link-color: var(--color-link);
  
  /* --- Utility-Skalierung --- */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* --- Zusatzfarben --- */
  --color-secondary: #6c757d;

  --color-info-bg: #e8f2ff;
  --color-info-border: #7aa7ff;
  --color-info-text: #0b3d91;

  --color-warning-bg: #fff4cc;
  --color-warning-border: #f0b429;
  --color-warning-text: #5b3d00;

  --color-danger-bg: #ffe6e6;
  --color-danger-border: #d93025;
  --color-danger-text: #7a0c07;
  
/* Einheitliche Mindesthöhe für alle Controls */
  --control-height: 38px; /* feinjustieren: 36–42px je nach Geschmack */
  
}

/*************************************
 * body.css (Hintergrund) + Basis-Styles
 *************************************/
body {
  background: var(--color-bg) url("../img/bgse.jpg") repeat fixed 0 50%;
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  height: 100%;
  margin: 0;
  padding: 0;
}

/*************************************
 * Quadapto-Webfont einbinden
 *************************************/
@font-face {
  font-family: 'sefont';
  src: url('./font/quadapto-webfont.woff2') format('woff2'),
       url('./font/quadapto-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/*************************************
 * Page container / allgemeine Wrapper
 *************************************/
#page-wrap {
  /* width: var(--container-width); */
  width: 100%;
  margin: 0 auto;
}

/* Neue generische Container-Klasse (für .container in index.php) */
.container {
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  box-sizing: border-box;
}

/*************************************
 * Header, Logo, Uhr & Slogan
 * Mapping: #div-header, #logo, #logo-slogan -> .site-header, .brand, .logo-slogan
 *************************************/
#div-header, .site-header {
  margin-top: 30px;
}

/* Basis: Desktop wird weiter unten per @media überschrieben */
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
}

/* Brand / Name */
.brand {
  /* keine Floats – das Desktop-Grid übernimmt die Platzierung */
  margin-left: 1px;
  text-align: left;
  font-family: var(--font-family-brand);
  font-size: 76px;
  text-shadow: 9px 6px 5px var(--color-shadow-text);
  color: var(--link-color);
  line-height: 0.95;          /* kompakter zur Slogan-Zeile */
}
.brand a {
  display: block;             /* verhindert Inline-Baseline-Zwischenräume */
  line-height: 0.95;
  margin: 0;
}

/* Logo-Text / Slogan */
.logo-slogan {
  margin-top: 1px;
  text-align: left;
  font-family: var(--font-family-brand);
  font-size: 26px;
  color: var(--link-color);
  display: block;
  line-height: 1.1;
  text-shadow: none;
}

/* Uhr */
#uhr {
  /* keine Floats – Platzierung übernimmt Desktop-Grid */
  border-bottom: 2px dotted var(--color-divider);
  font-size: 10px;
  margin: 0 5px 0 0;
  padding: 5px 0 5px 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.uhrspan {
  color: var(--color-accent);
  font-size: 1.1em;
}

/* ============================================================
   DESKTOP-HEADER (>=769px):
   1. Zeile:  Name (links) | Uhr (rechts)
   2. Zeile:  Slogan über volle Breite
   ============================================================ */
@media (min-width: 769px) {
  .header-bar {
    display: grid;
    grid-template-columns: 1fr auto;   /* links flexibel, rechts so breit wie nötig */
    grid-template-rows: auto auto;
    grid-template-areas:
      "name   uhr"
      "slogan slogan";
    column-gap: 16px;
    align-items: end;                   /* Name/Uhr optisch auf Linie */
    padding: 0 10px;                      /* dein bisheriges Padding */
  }

  /* WICHTIG:
     .brand (enthält <a> + .logo-slogan) und .header-controls (enthält #uhr)
     „auflösen“, damit deren Kinder direkte Grid-Items werden – OHNE HTML-Änderung. */
  .brand,
  .header-controls {
    display: contents;
  }

  /* Name links oben */
  .brand > a {
    grid-area: name;
  }

  /* Uhr rechts oben */
  #uhr {
    grid-area: uhr;
    justify-self: end;                  /* nach rechts schieben */
    align-self: start;                  /* oben ausrichten */
    margin: 0 0 6px 0;                  /* etwas Luft zur Brand-Zeile */
    padding: 0;                         /* Linie eng an die Zeit setzen */
  }

  /* Slogan in zweiter Zeile über volle Breite */
  .logo-slogan {
    grid-area: slogan;
    /* margin-top: 6px;                    /* feine Luft unter Brand-Zeile */ */
  }

  /* Desktop: Burger ausblenden (mobil separat sichtbar) */
  .menu-toggle { display: none !important; }
}


/*************************************
 * Rahmen & Mittlerer Bereich
 *************************************/
.div-rahmen {
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  display: block;

  border: 5px solid var(--color-surface);
  /* oben/unten 12px, links/rechts 8px → kompakter am Rand */
  padding: 12px 1px;
  /* margin-top: 30px; */
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  overflow: visible;
}
.div-rahmen > p {
  padding-top: 20px;
}

#div-middle {
  display: block;               /* statt inline-block */
  max-width: var(--container-width);
  width: 100%;
  margin: 30px auto 0;          /* zentriert durch auto-Margen */
  min-height: 10px;
  overflow: hidden;
}

/* === Grid === */
.grid { display: grid; gap: var(--space-md); }
.grid-gap-lg { gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/*************************************
 * Breadcrumbs / Pathway
 *************************************/
#pathway {
  padding: 10px 0 0 0;
  border-bottom: 2px dotted var(--color-divider);
  margin-left: 10px;
  margin-right: auto;
  width: 97%;
}

/* Breadcrumbs (als semantisches Nav-Element) */
.breadcrumbs {
  font-size: 0.9rem;
  margin: 1px 10px 5px 10px;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
.breadcrumbs li {
  display: inline;
  color: #3e3fff;
}
.breadcrumbs a {
  text-decoration: none;
  color: var(--link-color);
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumb-sep::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  background-image: url("../img/arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 5px;
  padding-bottom: 1px;
}

/*************************************
 * Link-Formatierung
 *************************************/
a:link, a:visited {
  color: var(--link-color);
  font-family: inherit;
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: none;
  /* Optional: globale Hoverfarbe aktivieren
  color: var(--color-link-hover);
  */
}
/* === Utilities === */
.lead { font-size: 1.125rem; line-height: 1.7; color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }

.mt-sm { margin-top: var(--space-sm); } .mb-sm { margin-bottom: var(--space-sm); }
.mt-md { margin-top: var(--space-md); } .mb-md { margin-bottom: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); } .mb-lg { margin-bottom: var(--space-lg); }

.p-sm { padding: var(--space-sm); } .p-md { padding: var(--space-md); } .p-lg { padding: var(--space-lg); }

kbd { background: #111; color: #fff; border-radius: 3px; padding: 2px 6px; font-size: 0.85em; }
code { background: #f5f5f5; border: 1px solid #eee; border-radius: 4px; padding: 0 4px; }
blockquote { border-left: 4px solid var(--accent-color); padding: 8px 12px; margin: 8px 0; background: #fafafa; }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-lg) 0; }

.list-inline { list-style: none; margin: 0; padding: 0; }
.list-inline > li { display: inline-block; margin-right: var(--space-md); }

.list-checked { list-style: none; margin: 0; padding: 0; }
.list-checked > li { padding-left: 1.2em; position: relative; margin: 6px 0; }
.list-checked > li::before { content: "✔"; color: var(--accent-color); position: absolute; left: 0; }

/*************************************
 * Menü & Navigation
 * Mapping: #menu, .menu -> .navigation, .nav, .menu
 *************************************/
#menu {
  min-height: 10px;
  overflow: hidden;
  float: left;
  width: 140px;
  padding: 15px 5px 15px 0;
  margin-left: 10px;
  line-height: 25px;
}
.menu {
  font-family: var(--font-family-brand);
  font-size: 22px;
  color: var(--menu-link); /* Textfarbe im Menücontainer */
}
.menu ul { display: block; }
.menu li:hover {
  text-decoration: normal;
  font-weight: normal;
  text-shadow: 1px 2px 2px var(--color-shadow-text);
}
.menu a:hover {
  text-decoration: normal;
  font-weight: normal;
  text-shadow: 1px 2px 2px var(--color-shadow-text);
}
li.active a, li.current a {
  color: var(--menu-active-item);
}

/* Navigation generisch (neue Klasse) */
.navigation {
  display: block;
}
.nav {
  /* zusätzliche Struktur-Regeln */
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li {
  margin-bottom: 0.5rem;
}

/* Menü-Toggle (im Desktop ausgeblendet) */
.menu-toggle {
  display: none;
}

/* Burger-Icon (kleines Icon in Button) */
.burger {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.burger::before, .burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
}
.burger::before { top: -6px; }
.burger::after  { top: 6px; }

/* Visually-hidden helper (für Screenreader) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  white-space: nowrap;
}
.visually-hidden:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 8px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/*************************************
 * Inhalt (Content)
 *************************************/
#content {
  margin-left: 150px;
  /* padding-left: 15px; */
  /* padding-top: 15px; */
  /* padding-bottom: 10px; */
  padding: 15px;
  min-height: 450px;
  border-left: 2px dotted var(--color-divider);
}
#content ul {
  line-height: 25px;
  padding: 0 0 0 20px;
}

/* Card / Prose mapping (neue Klassen aus index.php) */
.card {
  background: var(--color-surface);
  padding: 1rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
/* === Card-Erweiterungen === */
.card-header {
  font-weight: 600;
  margin: -0.5rem -0.5rem 0.5rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.card-body { /* optional */ }
.card-footer {
  margin: 0.5rem -0.5rem -0.5rem;
  padding: 0.5rem;
  border-top: 1px solid var(--color-border);
  background: #fafafa;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.prose {
  line-height: 1.6;
  color: var(--color-text);
}

/* Content-Footer */
#content-footer {
  text-align: center;
}

/* Footer / Mapping #div-bottom -> .site-footer */
#div-bottom {
  padding-top: 15px;
  padding-bottom: 15px;
}
.site-footer, .footer {
  color: var(--color-border-weak);
  font-size: 12px;
  height: 2.4em;
  line-height: 2.4em;
  margin: 0 auto;
  text-align: center;
}
a.footer:link, a.footer:visited {
  font-size: 12px;
  color: #ffffff;
  font-weight: normal;
  text-decoration: none;
  text-align: left;
}

/*************************************
 * Typografie, Formularelemente & Tabellen
 *************************************/
h1 {
  font-family: inherit;
  font-size: 1.5rem;
  margin: 0.67em 0;
  color: var(--color-text);
}
h2 {
  font-family: inherit;
  font-size: 1.0rem;
  font-weight: bold;
  color: var(--color-heading-2);
  text-align: left;
  line-height: 16px;
  height: 15px;
  margin-bottom: 1em;
}
h3 { font-size: 1.0rem; }
h3, h4, h5, h6 {
  font-family: inherit;
  margin-bottom: 0.5em;
  line-height: 1.2;
}
p {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  /* margin-bottom: 1em; */
}

/* ============================================================
   FORMULARELEMENTE – VEREINHEITLICHT (REPLACE)
   - Deckt Text-, URL-, Datalist-, Number-, Date-, Time-, Select-, Textarea- und File-Inputs ab
   - Einheitliche Mindesthöhe über --control-height (Fallback 38px)
   - Konsistente Fokus-/Fehlerzustände
   - Datalist/URL mit Chevron-Hinweis (optional per Kommentar entfernbar)
   ============================================================ */

/* Basisfelder: vereinheitlichte Optik + Mindesthöhe */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="datetime-local"],
input[list],
textarea,
select {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-surface);
  color: var(--color-text);
  min-height: var(--control-height, 38px);
}

/* Buttons (Basis) */
button,
input[type="submit"] {
  font-family: inherit;
  font-size: 16px;
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover,
input[type="submit"]:hover {
  background-color: var(--color-link-hover);
}

.control, .radio-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
}
dd { margin-inline-start: 20px; }

/* Fokus-/Fehler-/Disabled-Zustände einheitlich */
:where(input, select, textarea):focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.18);
}
:where(input, select, textarea):is([aria-invalid="true"], :invalid) {
  border-color: var(--color-danger-border, #d93025);
  box-shadow: 0 0 0 1px rgba(217, 48, 37, 0.18);
}
:where(input[disabled], select[disabled], textarea[disabled]) {
  background: #f5f5f5;
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ---------- Datei-Upload (Button + Feld) ---------- */
input[type="file"] {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 6px 8px;      /* Puffer um Dateiname */
  width: 100%;
  box-sizing: border-box;
}
input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 1px solid var(--accent-color);
  background: var(--accent-color);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::file-selector-button:focus {
  background: var(--color-link-hover);
  border-color: var(--color-link-hover);
  outline: none;
}
/* Fallback für ältere WebKit-Engines */
input[type="file"]::-webkit-file-upload-button {
  margin-right: 10px;
  border: 1px solid var(--accent-color);
  background: var(--accent-color);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ---------- Datalist & URL (mit Datalist) ---------- */
/* Optik angleichen + Chevron-Hinweis rechts (optional) */
input[list],
input[type="url"][list] {
  /* neutrale, konsistente Optik */
  -webkit-appearance: none;
  appearance: none;

  /* Chevron-Hinweis (optional; bei Wunsch: die 5 Background-Zeilen auskommentieren) */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23666'>\
<path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 36px;  /* Platz fürs Chevron */
}
/* Versuch, den nativen Datalist-Pfeil (Chromium/Edge) auszublenden */
input[list]::-webkit-calendar-picker-indicator,
input[type="url"][list]::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
}

/* ---------- Date/Time – Grundstil + Picker-Icon ---------- */
input[type="date"],
input[type="time"] {
  /* Optik (bereits über Basisblock definiert) kann so bleiben */
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  color: var(--accent-color);
  opacity: 0.75;
  cursor: pointer;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}
/* (Optional) „Clear“-Buttons in WebKit ausblenden */
input[type="date"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button {
  display: none;
}


/* === Buttons === */
.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.2;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover, .btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,0.06); outline: none; }

.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-lg { padding: 10px 18px; font-size: 16px; }
.btn-block { display: block; width: 100%; }

.btn-primary { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-link-hover); border-color: var(--color-link-hover); }

.btn-secondary { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.btn-secondary:hover, .btn-secondary:focus-visible { filter: brightness(0.95); }

.btn-outline { background: transparent; color: var(--accent-color); border-color: var(--accent-color); }
.btn-outline:hover, .btn-outline:focus-visible { background: rgba(0,0,0,0.03); }

.btn-ghost { background: transparent; color: var(--color-text); border-color: transparent; }
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(0,0,0,0.03); }

.btn-link { background: transparent; color: var(--link-color); border-color: transparent; padding: 0; }
.btn-link:hover, .btn-link:focus-visible { color: var(--color-link-hover); text-decoration: underline; }

/* === Badges === */
.badge {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--color-border-weak);
  color: var(--color-text);
  vertical-align: middle;
}
.badge-primary { background: var(--accent-color); color: #fff; }
.badge-secondary { background: var(--color-secondary); color: #fff; }
.badge.ok, .badge-success { background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge.warn, .badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge.info, .badge-info    { background: var(--color-info-bg);    color: var(--color-info-text);    border: 1px solid var(--color-info-border); }
.badge.err, .badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text);  border: 1px solid var(--color-danger-border); }

/* Tabellen */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
th, td {
  border: 1px solid var(--color-border);
  padding: 8px;
  text-align: left;
}
th {
  background-color: var(--accent-color);
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
}
tr:nth-child(even) {
  background-color: var(--color-surface-muted);
}
/* === Tabellen-Erweiterungen === */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 8px 10px; border: 1px solid var(--color-border); }
.table thead th { background: var(--accent-color); color: #fff; text-transform: uppercase; font-size: 11px; }
.table-striped tbody tr:nth-child(even) { background: var(--color-surface-muted); }
.table-hover tbody tr:hover { background: #f8f9fa; }
.table-compact th, .table-compact td { padding: 6px 8px; }

.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table caption { caption-side: bottom; padding-top: 6px; font-size: 12px; color: var(--color-text-muted); }


/*************************************
 * Skip-to-Content Link (visually hidden bis Fokus)
 *************************************/
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: absolute;
  width: auto;
  height: auto;
  padding: 8px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #111;
  color: #fff;
  top: 0;
  left: 0;
  z-index: 100;
}

/*************************************
 * Mobile & Responsive Styles (<=768px)
 *************************************/
@media (max-width: 768px) {

  /* ===== Mobile-spezifische Default-Höhen (für Sticky + Overlay-Top) ===== */
  /* Falls du --header-height schon global setzt, bleibt sie vorrangig.
     Sonst fällt Overlay-Top auf die Summe aus Uhr + Toggle zurück. */
  :root {
    --uhr-sticky-height: 24px;      /* ungefähre Höhe der Uhrzeile */
    --toggle-sticky-height: 40px;   /* ungefähre Höhe des Buttons */
  }

  /* Logo / Slogan verkleinern */
  .brand, #logo {
    font-size: 46px;
    line-height: 1;
  }
  .brand a, #logo a { font-size: 46px; }
  .logo-slogan { font-size: 16px; margin-top: 4px; }

  /* Page wrap / Content */
  #page-wrap { width: 95%; margin: 0 auto; }

  /* Endgültige Content-Werte (kein Push durch Menü) */
  #content {
    margin: 0 !important;
    padding: 12px 0 !important;
    border-left: 0 !important;
    min-height: 350px;
  }

/* ===== Header-Layout mobil: Logo oben, darunter Uhr + FIXED Toggle ===== */
.header-bar {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "brand"
    "controls";
  row-gap: 8px;
  padding: 1px;
}

.brand {
  grid-area: brand;
  justify-self: start;
}

/* Wrapper für Uhr + Toggle – NICHT im Vordergrund und NICHT sticky */
.header-controls {
  grid-area: controls;
  position: static;            /* <-- nicht sticky */
  z-index: auto;               /* <-- nicht im Vordergrund */
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* rechtsbündig */
  gap: 4px;
  /* Kein Rahmen/Background/Shadow */
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Uhr: rechts, ohne Rahmen (bleibt normal im Fluss) */
#uhr {
  order: 1;
  align-self: flex-end;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Toggle: FIXED oben rechts – bleibt beim Scrollen sichtbar */
.menu-toggle {
  order: 2;
  align-self: flex-end;

  position: fixed; /* <-- fixiert */
top: calc(
  env(safe-area-inset-top, 0px)
  + var(--header-height, 56px)
  + var(--toggle-top-offset, 0px)
);
  right: var(--mobile-menu-right, 22px);
  left: auto;
  margin: 0;

  z-index: var(--z-menu-toggle);  /* 1400 – über Overlay (1300) */

  /* Button-Optik (deine bestehenden Werte) */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  font-family: var(--font-family-brand);
  font-size: 28px;
  color: var(--menu-toggle);
  background: none;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}

/* Burger -> X (gesteuert via aria-expanded durch dein JS) */
.menu-toggle .burger,
.menu-toggle .burger::before,
.menu-toggle .burger::after {
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.menu-toggle .burger {
  position: relative;
  width: 24px; height: 2px;
  background: currentColor;
}
.menu-toggle .burger::before,
.menu-toggle .burger::after {
  content: "";
  position: absolute; left: 0;
  width: 24px; height: 2px;
  background: currentColor;
}
.menu-toggle .burger::before { top: -6px; }
.menu-toggle .burger::after  { top:  6px; }
.menu-toggle[aria-expanded="true"] .burger { background-color: transparent; }
.menu-toggle[aria-expanded="true"] .burger::before {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .burger::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Hover-Override NUR mobil ---
   Verhindert, dass generische button:hover (Desktop) den Toggle einfärbt */
button.menu-toggle:hover {
  background: none !important;
  color: var(--menu-toggle) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Zusätzlich: Geräte ohne Hover (typisch Mobile) neutralisieren */
@media (hover: none) {
  button.menu-toggle:hover {
    background: none !important;
    color: var(--menu-toggle) !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
}


  /* Breadcrumbs / Footer ausblenden */
  #pathway { display: none; }
  div#content-footer { display: none; }

  /* Navigation-Container sichtbar lassen (Listen separat gesteuert) */
  .navigation { display: block; }
  .navigation.open { display: block; } /* falls genutzt */

  /* Desktop-Liste verbergen */
  .desktop-list { display: none !important; }

  /* === Zentrale Menü-Farben (mobil) === */
  .navigation a, .menu a, #menu a {
    color: var(--menu-link);
    text-decoration: none;
  }
  .navigation a:visited, .menu a:visited, #menu a:visited {
    color: var(--menu-link-visited);
  }
  .navigation a:hover,
  .menu a:hover,
  #menu a:hover,
  .navigation a:focus-visible,
  .menu a:focus-visible,
  #menu a:focus-visible {
    color: var(--menu-link-hover);
    outline: none;
  }
  .navigation a:active, .menu a:active, #menu a:active {
    color: var(--menu-link-active);
  }
  
  #site-navigation.navigation { display: none; }
  #site-navigation.navigation.open { 
    display: block;
    /* >>> verhindert Content-Push <<< */
    height: 0;              /* Nav-Container selbst nimmt keinen Platz ein */
    overflow: visible;      /* Overlay (fixed) darf drüber/außerhalb erscheinen */
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* Auch den Menü-Container neutral halten, solange mobil */
  #site-navigation.navigation.open #menu,
  #site-navigation.navigation.open .menu {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  
  /* Menü-Container mobil */
  #menu {
    float: none;
    width: 100%;
    margin: 10px 0;
    padding: 15px 0;
    position: relative; /* Parent für Overlay */
    z-index: 1200;
  }
  .menu { position: relative; z-index: 1200; }

  /* Menüliste standardmäßig verstecken; bei .active anzeigen */
  .menu ul { display: none; }
  #menu.active ul, .menu.active ul {
    display: block;
    margin: 0;
    padding: 0;
  }
  #menu:not(.active) {
    margin: 0;
    padding: 0;
    min-height: 0;
  }
  
  /* --- Overlay-Menü: fixed, scrollt eigenständig, Content bleibt stehen --- */

  /* Overlay-Container: rechts ausgerichtet, Breite = Inhalt + Padding, min 200px, bei Bedarf scrollbar */
  .menu .overlay {
    display: none; /* bleibt wirklich versteckt, bis .active gesetzt wird */
    position: fixed;

    /* Start direkt UNTER der sticky Top-Bar:
       nutzt --header-height falls global gesetzt,
       sonst fällt auf Summe (Uhr + Toggle) zurück. */
    top: calc(
      env(safe-area-inset-top, 0px) +
      var(--header-height,
           calc(var(--uhr-sticky-height, 24px) + var(--toggle-sticky-height, 40px) + 8px))
    );

    right: var(--mobile-menu-right, 22px);
    left: auto; /* rechts ausrichten */

    /* Shrink-to-fit: Breite koppelt an Inhalt */
    width: fit-content;           /* alternativ: max-content */
    min-width: var(--mobile-menu-min-width, 200px);
    max-width: var(--mobile-menu-max-width, var(--mobile-menu-width, 360px));

    max-height: calc(100vh - (env(safe-area-inset-top, 0px) + var(--mobile-menu-vertical-gap, 80px)));
    box-sizing: border-box;
    padding: 8px var(--mobile-menu-inline-padding, 12px);

    background: var(--menu-bg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);

    overflow-y: auto;   /* Overlay scrollt vertikal */
    overflow-x: hidden; /* keine horizontale Scrollbar */
    z-index: var(--z-overlay);
    -webkit-overflow-scrolling: touch;
  }

  /* Overlay sichtbar, wenn Menü aktiv – HIER shrink-wrap aktivieren */
  #menu.active .overlay, .menu.active .overlay {
    display: inline-block; /* shrink-wrap */
  }

  /* Liste im Overlay: kein eigenes Scrolling – Overlay scrollt */
  .menu.active .overlay ul { list-style: none; margin: 0; padding: 0; }

  .menu.active .overlay li {
    padding: 10px 8px;
    border-bottom: 1px solid var(--menu-border);
  }
  .menu.active .overlay li:last-child { border-bottom: none; }

  .menu.active .overlay li.current > a,
  #menu.active .overlay li.current > a {
    color: var(--menu-active-item);
    font-weight: 600; /* optional */
  }

  /* Overlay-Linkfarben zentral */
  .menu.active .overlay a {
    display: block;
    color: var(--menu-link);
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .menu.active .overlay a:hover,
  .menu.active .overlay a:focus-visible {
    color: var(--menu-link-hover);
  }

  /* ===== Optionaler Fallback ohne .overlay (wenn du ihn nutzt) =====
     Rechts ausgerichtet, shrink-wrap, scrollbar – wie das Overlay. */
  #menu.active > ul, .menu.active > ul {
    display: inline-block;
    position: fixed;
    top: calc(
      env(safe-area-inset-top, 0px) +
      var(--header-height,
           calc(var(--uhr-sticky-height, 24px) + var(--toggle-sticky-height, 40px) + 8px))
    );
    right: var(--mobile-menu-right, 22px);
    left: auto;

    width: fit-content;
    min-width: var(--mobile-menu-min-width, 200px);
    max-width: var(--mobile-menu-max-width, var(--mobile-menu-width, 360px));
    max-height: calc(100vh - var(--mobile-menu-vertical-gap, 80px));
    overflow-y: auto;
    overflow-x: hidden;

    background: var(--menu-bg);
    padding: 8px var(--mobile-menu-inline-padding, 12px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-overlay-fallback);
    -webkit-overflow-scrolling: touch;
  }

  #menu.active > ul a, .menu.active > ul a {
    color: var(--menu-link);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  #menu.active > ul a:hover,
  #menu.active > ul a:focus-visible,
  .menu.active > ul a:hover,
  .menu.active > ul a:focus-visible {
    color: var(--menu-link-hover);
  }

  /* Menü-Items Layout */
  .menu li { width: 100%; text-align: left; padding: 6px 0; }

  /* Schriftgrößen / Layoutanpassungen */
  body { font-size: 14px; }
  .contentheading { font-size: 1.5em; }
  .div-rahmen, #div-middle, .pathway { width: 100%; }

  /* Kontakt / Formulare */
  .imprint-contact { padding: 15px; }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    font-size: 0.95rem;
  }
  .checkbox-container {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  /* Uhr: (klassische Alt-Styles neutralisiert) */
  .uhrspan { font-size: 1.1em; }

  /* Body no-scroll: Hintergrund nicht scrollen, Overlay darf scrollen */
  .no-scroll { overflow: hidden; touch-action: none; }
}

/*************************************
 * Preloader-Styles
 *************************************/
.preloader {
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #000;
  width: 320px;
  height: 56px;
  border: 3px solid #6E89DD;
  background-color: #EEF0FC;
}
.divTableBody_preloader { display: table-row-group; }
.divTableRow_preloader { display: table-row; }
.divTableCell_preloader {
  border: 0;
  display: table-cell;
  padding: 7px 3px 3px 10px;
  vertical-align: middle;
}
#preloader_table {
  display: none;
  position: absolute;
  z-index: 1098;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background-color: var(--color-bg-overlay);
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}
#preloader_table tr, #preloader_table td {
  margin: 0;
  padding: 0;
  border: 0;
}
#loader {
  width: 320px;
  height: 56px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-preloader);
}
#div_desktop {
  width: 1%;
  height: 1%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
}

/*************************************
 * Kontakt, Impressum, Datenschutzerklärung & Formular Styles
 *************************************/
.imprint-contact {
  max-width: 1200px;
  margin: 0 auto;
  /* padding: 20px; */
}
.contact-details address {
  font-style: normal;
  line-height: 1.6;
  margin-top: 10px;
  font-family: inherit;
  font-size: 14px;
}
.contact-details a {
  color: var(--accent-color);
  text-decoration: underline;
}
.contact-details a:hover,
.contact-details a:focus {
  color: var(--color-link-hover);
}
.dataprivacy p {
  margin-bottom: 15px;
  line-height: 1.6;
}
.contact-form-section { margin-top: 30px; }
.contact-form {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.contact-form .form-row { margin-bottom: 15px; }
.contact-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.contact-form textarea { resize: vertical; }
.checkbox-container {
  display: flex;
  /* align-items: center; */
  /* align-items: flex-start; */
  /* justify-content: space-between; */
  gap: 10px;
  flex-direction: column;
}
.checkbox-item { display: flex; align-items: center; }
.checkbox-item input[type="checkbox"] {
  margin: 0;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.checkbox-label { margin-left: 8px; line-height: 1.2; }
.terms, .email { display: none; }

#akkordeon:not(:target) .inhalt,
#akkordeon:not(:target) .hide,
#akkordeon:target .show {display: none;}
#akkordeon:target .inhalt {display: block;}

/* === Alerts (Info, Warning, Danger) === */
.alert {
  padding: 15px;
  margin: 15px 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-family, inherit);
}
.alert.err, .alert.error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}
.alert.ok, .alert.success {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
}
/* === Alerts (Info, Warning, Danger) === */
.alert.info {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info-text);
}
.alert.warn, .alert.warning {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
}
/* optionaler Alias für 'error' */
.alert.danger {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger-text);
}

/*************************************
 * Newsfeeds & Gästebuch
 *************************************/
.contentpane th, .contentpane td {
  line-height: 10px;
}
p.feed-meta {
  font-size: 12px;
  color:#b9b9b9;
}
section.feed-content { font-size: 14px; }
h4.feed-title {
    background: var(--accent-color);
	color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 5px 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: -.25rem 0 .35rem;
}
h4.feed-title a {
  color: #f5f5f5;
  font-weight: lighter;
}
feed-header {
  display: contents;
  justify-content: space-between;
  color: #fff;
  margin-bottom: 0.8em;
  margin-right: 0.8em;
  height: 45px;
}

/* === Formular – vereinheitlicht (global + sanft gescoped) === */

/* Fieldset/Legend überall konsistent */
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md, 12px);
  margin: 0 0 var(--space-lg, 16px);
  min-width: 0; /* verhindert overflow in schmalen Layouts */
}
legend {
  font-weight: 700;
  padding: 0 6px;
  color: var(--color-text);
}

/* Gilt für: native <form>, .contact-form, .form und (falls vorhanden) .form-demo */
:where(form, .contact-form, .form, .form-demo) .form-row {
  margin-bottom: var(--space-md, 12px);
}
:where(form, .contact-form, .form, .form-demo) label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
:where(form, .contact-form, .form, .form-demo) .choice {
  display: block;
  font-weight: 400;
  margin: 4px 0;
}
:where(form, .contact-form, .form, .form-demo) .form-help {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
:where(form, .contact-form, .form, .form-demo) .form-error {
  font-size: 12px;
  color: var(--color-danger-text, #7a0c07);
  margin-top: 4px;
}

/* Fokuszustand für Eingabefelder (nutzt deine Akzentfarbe) */
:where(input, select, textarea):focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(0, 74, 153, 0.18); /* #004a99 bei ~18% */
}

/* Fehlerzustand – via aria-invalid oder :invalid */
:where(input, select, textarea):is([aria-invalid="true"], :invalid) {
  border-color: var(--color-danger-border, #d93025);
  /* box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.18); */
}

/* Disabled */
:where(input[disabled], select[disabled], textarea[disabled]) {
  background: #f5f5f5;
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Radiobuttons & Checkboxen mit einheitlichem Abstand */
:where(.choice) input[type="checkbox"],
:where(.choice) input[type="radio"] {
  margin-right: 8px;
  vertical-align: middle;
}

/* Formular-Grid-Helfer wiederverwenden */
:where(form, .contact-form, .form, .form-demo) .grid {
  gap: var(--space-md, 12px);
}

/* Aktionen am Formularende (Buttons nebeneinander) – optional */
:where(form, .contact-form, .form, .form-demo) .form-actions {
  display: flex;
  gap: var(--space-sm, 8px);
  flex-wrap: wrap;
}

/* Switch (reines CSS, ohne .form-demo Abhängigkeit) */
.switch-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.switch {
  appearance: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #ccc;
  position: relative;
  outline: none;
  cursor: pointer;
  border: 1px solid #bbb;
  transition: background .2s ease;
  vertical-align: middle;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.switch:checked {
  background: var(--accent-color);
  border-color: var(--accent-color);
}
.switch:checked::after { transform: translateX(20px); }


/* ======================================================================
   GÄSTEBUCH 
   ====================================================================== */
/* ======================================================================
   Gästebuch – an Newsfeeds/Global-Design angepasst + Spacing-Fix
   ====================================================================== */

/* Alerts */
.gb_error,
.gb_message {
  padding: .75rem .9rem;
  margin: .8rem 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-width: 700px;
}
.gb_error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}
.gb_message {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.gb_clear { clear: both; }

/* Paginierung */
.gb_new_entry_link { font-weight: 700; font-size: 1rem; }
.gb_pagebrowser {
  margin-top: 1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}
.gb_pagebrowser p { margin: 0; }
.gb_pagebrowser_left  { display: flex; align-items: center; gap: .4rem; }
.gb_pagebrowser_right { display: flex; align-items: center; }
.gb_pagebrowser_input {
  width: 2.5rem;
  border: 1px solid var(--color-border);
  padding: .35rem .45rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.gb_pagebrowser_submit {
  background: none; border: 1px solid transparent; cursor: pointer;
  font-weight: 700; color: var(--accent-color);
  padding: .35rem .6rem; border-radius: var(--radius-sm);
  transition: color .15s, background-color .15s, border-color .15s;
}
.gb_pagebrowser_prev a, .gb_pagebrowser_next a {
  font-weight: 700; text-decoration: none;
  border: 1px dashed var(--color-border);
  padding: .1rem .45rem; border-radius: var(--radius-sm);
  color: inherit;
  transition: background-color .15s ease, border-color .15s ease.
}
.gb_pagebrowser_prev a:hover, .gb_pagebrowser_next a:hover {
  background: rgba(0,0,0,.03);
  border-color: var(--color-border);
}

/* Einträge: Karte */
.gb_entries { width: 100%; margin: 1rem 0; display: grid; gap: var(--space-md, 12px); }
.gb_entry   { margin: 0 !important; padding-bottom: 0 !important; background: none !important; }
.gb_entry_body {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.gb_entry_body:hover { box-shadow: var(--shadow-sm); }

/* ===== Eintrags-Header im Stil von h4.feed-title =====
   (gleiche Farbe, Größe, Padding; flach/kein Radius) */
.gb_entry_header {
  background-color: var(--accent-color);
  color: #f5f5f5;
  border: none;
  border-radius: 0;          /* flach wie Newsfeeds */
  padding: 1px 5px;          /* wie h4.feed-title */
  font-size: 14px;           /* wie h4.feed-title */
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .35rem 0;
}
.gb_entry_header strong { font-weight: 700; }
.gb_entry_header_left  { color: inherit; flex: 1 1 auto; min-width: 200px; }
.gb_entry_header_right { margin-left: auto; display: flex; align-items: center; gap: .35rem; }

/* Icons (neutral + Hover) */
.gb_entry_email, .gb_entry_web {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  /* border: 1px solid var(--color-border); */
  border-radius: var(--radius-sm);
  /* background: var(--color-surface); */
  text-decoration: none;
  background-repeat: no-repeat; background-position: center; /* background-size: 14px 14px; */
  transition: background-color .15s ease, border-color .15s ease;
}
.gb_entry_email { background-image: url(../../../includes/guestbook/images/email.png); }
.gb_entry_web   { background-image: url(../../../includes/guestbook/images/web.png); }
.gb_entry_email:hover, .gb_entry_web:hover {
  background-color: rgba(0,0,0,.03);
  border-color: var(--color-border);
}

/* Text/Content */
.gb_entry_text { padding: .5rem 0 0 0; color: inherit; }
.gb_entry_text p { margin: .6rem 0; padding-bottom: .75rem; border-bottom: 1px solid var(--color-border); }
.gb_entry_text p:last-child { padding-bottom: 0; border-bottom: none; }

/* Kommentar (Info-Ton) */
.gb_entry_comment {
  margin: .75rem 0 0 0;
  border: 1px solid var(--color-info-border, #7aa7ff);
  background: var(--color-info-bg, #e8f2ff);
  border-radius: var(--radius-sm);
}
.gb_entry_comment .gb_entry_comment_header {
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 3px 10px; font-weight: 600;
}
.gb_entry_comment p { padding: 7px 10px; margin: 0; }

/* ---------- Formular ---------- */
.gb_form_back_link { text-align: center; }
.gb_form {
  width: 100%; max-width: 46rem; margin: 1rem 0;
  background: var(--color-surface);
  /* border: 1px solid var(--color-border); */
  border-radius: var(--radius-md);
  padding: 1rem;
}
.gb_form_box {
  margin: 1rem 0; padding-bottom: .25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.gb_form_header {
  /* Headerleiste wie Newsfeeds */
  background-color: var(--accent-color);
  color: #f5f5f5;
  border-bottom: 1px solid rgba(0,0,0,.05);
  padding: 5px 5px;          /* wie h4.feed-title */
  font-size: 14px; font-weight: 700;
  border-top-left-radius: 0; border-top-right-radius: 0;
}
/* WICHTIG: margin-collapsing zwischen Header und erstem Feld zuverlässig verhindern */
.gb_form_body {
  padding: 10px;
  position: relative;
  border-top: 1px solid transparent;    /* verhindert Top-Margin-Collapse */
}

/* Pflicht-Hinweis dezent */
.gb_form_required { margin: .25rem 0 .5rem; color: var(--color-text-muted); font-size: .95em; }

/* Honeypot – vollständig entfernen + erste sichtbare Zeile ohne Top-Margin */
.gb_hidden_row { display: none !important; }
.gb_form_body > .gb_form_row:first-of-type,
.gb_form_body > .gb_form_message:first-of-type { margin-top: 0 !important; }

/* Zeilen & Felder */
.gb_form_row, .gb_form_message { margin: .6rem 0; /* clear: none – keine Floats */ }
.gb_form_row label { display: block; font-weight: 600; margin-bottom: .35rem; }
.gb_form_row label span,
.gb_form_message label span { font-weight: 400; font-size: .9rem; padding-left: .25rem; color: var(--color-text-muted); }

.gb_form .gb_form_message input { width: 3.5rem; }

.gb_form input, .gb_form textarea {
  width: 100%;
  max-width: 46rem;
  padding: .6rem .7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}
.gb_form_message { margin-top: 1rem; }
.gb_form_message label { font-weight: 700; }
.gb_form_message p { margin: .35rem 0 .5rem; font-size: .95rem; color: var(--color-text-muted); }
.gb_form_message textarea { width: 100%; height: auto; min-height: 12rem; }

/* Smileys */
.gb_form_smileys div {
  display: inline-flex; cursor: pointer; padding: 1px;
  /* border: 1px solid var(--color-border); */
  border-radius: var(--radius-sm);
  /* background: var(--color-surface); */
  margin: .2rem .25rem .2rem 0;
  transition: background-color .15s, border-color .15s;
}
.gb_form_smileys div:hover {
  background: rgba(0,0,0,.03);
  border-color: var(--color-border);
}

/* Spamschutz */
.gb_form_securequestion { margin-top: 1rem; }
.gb_form_securequestion label { width: auto; display: block; line-height: 1.35; }
.gb_form_securequestion label span { padding-left: 0; font-size: .95rem; }
.gb_form_securequestion input { width: 12rem; margin-top: .35rem; }

/* Buttons wie global */
.gb_form_buttons {
  margin-top: .75rem; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center;
}
.gb_form_buttons p { margin: 0; }
.gb_form_buttons input {
  font: inherit; width: auto; min-width: 9.5rem;
  height: auto; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: .55rem .85rem; margin: 0 .2rem; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* primär */
.gb_form_buttons input[type="submit"],
.gb_form_buttons input[name="save_without_preview"],
.gb_form_buttons input.btn-primary {
  background: var(--accent-color); color: #fff; border-color: var(--accent-color);
}
.gb_form_buttons input[type="submit"]:hover,
.gb_form_buttons input[name="save_without_preview"]:hover,
.gb_form_buttons input.btn-primary:hover {
  background: var(--color-link-hover); border-color: var(--color-link-hover);
}
/* sekundär */
.gb_form_buttons input[type="button"],
.gb_form_buttons input.btn-secondary {
  background: var(--color-surface); color: var(--color-text); border-color: var(--color-border);
}
.gb_form_buttons input[type="button"]:hover,
.gb_form_buttons input.btn-secondary:hover {
  background: rgba(0,0,0,.03);
}

/* ---------- Mobile-Feinschliff ---------- */
@media (max-width: 640px){
  .gb_form, .gb_entry_body { padding: .85rem; }
  .gb_entry_header { padding: 1px 5px; border-radius: 0; font-size: 14px; }
  .gb_entry_email, .gb_entry_web { width: 26px; height: 26px; background-size: 13px 13px; }
  .gb_pagebrowser { flex-direction: column; align-items: stretch; gap: .6rem; }
  .gb_pagebrowser_right { justify-content: space-between; }
}