/* ==========================================================================
   gaz69m Design "Tourenkarte" - Bootstrap 5.3
   1. Schriften   2. Farben/Theme   3. Layout   4. Komponenten
   5. Kompatibilitaet fuer Bootstrap-2-Markup in den PHP-Seiten (Schritt 1)
   ========================================================================== */

/* 1. Schriften (lokal, keine externen Server) ----------------------------- */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

@font-face { font-family: "Bitter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/bitter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/bitter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 2. Farben / Theme -------------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --gz-olive: #3f5f45;          /* Markenfarbe: Waldgruen (Tourenkarte) */
  --gz-olive-dark: #2b4430;
  --gz-olive-light: #e3eadf;
  --gz-sand: #f3f5ee;           /* Seitenhintergrund (Kartenpapier) */
  --gz-map: #e4e9dd;            /* Kartenflaeche (Kopfbereiche) */
  --gz-contour: #8a5a3b;        /* Hoehenlinien */
  --gz-water: #3d6c8a;          /* Gewaesser / Links */
  --gz-road: #c2412d;           /* Route / Hinweise */
  --gz-khaki: #8a5a3b;          /* Akzent (Hoehenlinien-Braun) */
  --gz-ink: #24291f;

  --bs-primary: var(--gz-olive);
  --bs-primary-rgb: 63, 95, 69;
  --bs-link-color: #2f5d7c;
  --bs-link-color-rgb: 47, 93, 124;
  --bs-link-hover-color: #1f425a;
  --bs-link-hover-color-rgb: 31, 66, 90;
  --bs-body-bg: var(--gz-sand);
  --bs-body-color: var(--gz-ink);
  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.55;
  --bs-border-color: #d9ddd1;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-secondary-color: #5f6656;
  --gz-card-bg: #ffffff;
  --gz-shadow: 0 1px 0 #c8d0bb;
}
[data-bs-theme="dark"] {
  --gz-olive-light: #26312a;
  --gz-map: #1d231c;
  --gz-sand: #141813;
  --bs-primary: #8fb596;
  --bs-primary-rgb: 143, 181, 150;
  --bs-link-color: #8fbcd8;
  --bs-link-color-rgb: 143, 188, 216;
  --bs-link-hover-color: #b5d4e8;
  --bs-body-bg: var(--gz-sand);
  --bs-body-color: #e3e5dc;
  --bs-border-color: #303a30;
  --bs-secondary-color: #a7ac9c;
  --gz-card-bg: #1c221c;
  --gz-shadow: none;
}

.btn-primary {
  --bs-btn-bg: var(--gz-olive); --bs-btn-border-color: var(--gz-olive);
  --bs-btn-hover-bg: var(--gz-olive-dark); --bs-btn-hover-border-color: var(--gz-olive-dark);
  --bs-btn-active-bg: var(--gz-olive-dark); --bs-btn-active-border-color: var(--gz-olive-dark);
  --bs-btn-disabled-bg: var(--gz-olive); --bs-btn-disabled-border-color: var(--gz-olive);
}
.btn-outline-primary {
  --bs-btn-color: var(--gz-olive); --bs-btn-border-color: var(--gz-olive);
  --bs-btn-hover-bg: var(--gz-olive); --bs-btn-hover-border-color: var(--gz-olive);
  --bs-btn-active-bg: var(--gz-olive-dark);
}
.text-bg-primary, .bg-primary { background-color: var(--gz-olive) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #7f9c84; box-shadow: 0 0 0 .2rem rgba(63, 95, 69, .2); }
.form-check-input:checked { background-color: var(--gz-olive); border-color: var(--gz-olive); }

h1, h2, h3, .gz-display { font-family: "Bitter", Georgia, serif; font-weight: 700; letter-spacing: 0; }
h4, h5, h6 { font-weight: 700; }

/* 3. Layout ---------------------------------------------------------------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.gz-skip { position: absolute; left: -999px; top: .5rem; z-index: 2000; }
.gz-skip:focus { left: .5rem; }

/* Navigation (hell, wie eine Kartenlegende) */
.gz-topline { display: none; }
.gz-navbar { background: var(--gz-card-bg); border-bottom: 1px solid var(--bs-border-color); }
.gz-navbar .navbar-brand { font-family: "Bitter", Georgia, serif; font-weight: 800; font-size: 1.5rem; color: var(--gz-ink); display: flex; align-items: center; gap: .55rem; }
[data-bs-theme="dark"] .gz-navbar .navbar-brand { color: #e8ece2; }
.gz-navbar .navbar-brand .gz-mark { width: 2.4rem; height: 2.4rem; flex: none; object-fit: contain; }
.gz-navbar .nav-link { font-weight: 600; color: var(--bs-secondary-color); padding: .7rem .75rem !important; border-radius: .4rem; }
.gz-navbar .nav-link:hover, .gz-navbar .nav-link:focus, .gz-navbar .nav-link.show, .gz-navbar .nav-link.active { color: var(--bs-body-color); background: var(--gz-olive-light); }
.gz-navbar .navbar-toggler { border: 0; color: var(--bs-body-color); }
.gz-navbar .dropdown-menu { border: 1px solid var(--bs-border-color); box-shadow: 0 .5rem 1.5rem rgba(36, 41, 31, .12); padding: .4rem; }
.gz-navbar .dropdown-item { border-radius: .35rem; padding: .45rem .75rem; }
.gz-navbar .dropdown-item i { color: var(--gz-contour); width: 1.4em; display: inline-block; }
.gz-navbar .dropdown-item:active { background: var(--gz-olive); }
.gz-navbar .dropdown-item:active i { color: #fff; }
.gz-navbar .dropdown-item .gz-count { color: var(--bs-secondary-color); font-size: .85em; margin-left: .3em; }
.gz-navbar .badge { font-size: .7rem; vertical-align: .15em; }
.gz-navbar .gz-mail { position: relative; }
.gz-navbar .gz-mail .badge { position: absolute; top: .2rem; right: .05rem; background: var(--gz-road); }
@media (max-width: 991.98px) {
  .gz-navbar .offcanvas { background: var(--gz-card-bg); }
  .gz-navbar .dropdown-menu { border: 0; box-shadow: none; padding-left: 1rem; }
}

/* Seitenkopf */
.gz-pagehead { padding: 1.75rem 0 1rem; }
.gz-pagehead h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 0; color: var(--gz-ink); font-weight: 800; }
[data-bs-theme="dark"] .gz-pagehead h1 { color: #e8ece2; }
.gz-pagehead .gz-sub { color: var(--bs-secondary-color); font-size: 1rem; }
.gz-pagehead h1 [class^="icon-"], .gz-pagehead h1 [class*=" icon-"] { font-size: .8em; color: var(--gz-khaki); }

/* Fusszeile */
.gz-footer { background: #24291f; color: #c9ccc0; padding: 2rem 0 1.5rem; margin-top: 3rem; font-size: .95rem; }
.gz-footer a { color: #e3e6da; text-decoration: none; }
.gz-footer a:hover { color: #fff; text-decoration: underline; }
.gz-footer .nav { --bs-nav-link-padding-x: .6rem; }
.gz-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.gz-footer li a { display: inline-block; padding: .2rem 0; }

.gz-totop { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; display: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; box-shadow: var(--gz-shadow); }
.gz-totop.show { display: inline-flex; align-items: center; justify-content: center; }

/* 4. Komponenten ----------------------------------------------------------- */
.card { --bs-card-bg: var(--gz-card-bg); --bs-card-border-color: var(--bs-border-color); box-shadow: var(--gz-shadow); }
.card-header { background: transparent; font-weight: 700; }
.list-group { --bs-list-group-bg: var(--gz-card-bg); }

/* Meldungen als Toasts */
.gz-toasts { position: fixed; top: 5rem; right: 1rem; z-index: 1090; width: min(26rem, calc(100% - 2rem)); }
.gz-toasts .toast { box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15); border: 0; }
.gz-toasts .toast-body { font-size: 1rem; }

/* Kartenflaeche mit Hoehenlinien (Startseiten, Kopfbereiche) */
.gz-hero { position: relative; color: var(--gz-ink); background: var(--gz-map); overflow: hidden; border-bottom: 1px solid #c8d0bb; }
[data-bs-theme="dark"] .gz-hero { color: #e8ece2; border-bottom-color: var(--bs-border-color); }
.gz-hero > svg.gz-topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gz-hero > .container { position: relative; }
.gz-hero h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.05; font-weight: 800; }
.gz-hero .lead { font-size: 1.2rem; color: #3d4436; max-width: 36rem; }
[data-bs-theme="dark"] .gz-hero .lead { color: #c9d0c0; }
.gz-hero .card { color: var(--bs-body-color); }
.gz-next { background: var(--gz-card-bg); border: 1px solid #cfd6c4; border-radius: 14px; padding: 1.1rem 1.4rem; box-shadow: 0 1px 0 #c8d0bb; }
.gz-next .gz-next-k { font-size: .9rem; color: var(--bs-secondary-color); }
.gz-next h3 { font-size: 1.45rem; margin: .2rem 0 .4rem; }
.gz-next .gz-next-r { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; color: var(--bs-secondary-color); font-size: .95rem; }
.gz-pin { width: 1.6rem; height: 1.6rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gz-road); flex: none; margin-top: .2rem; }
.gz-pin.gz-pin-water { background: var(--gz-water); }
.btn { --bs-btn-border-radius: 2rem; }
.btn-group > .btn, .input-group > .btn { --bs-btn-border-radius: .5rem; }
.gz-stats .gz-stat { text-align: center; padding: 1.25rem .5rem; }
.gz-stats .gz-stat strong { display: block; font-family: "Bitter", Georgia, serif; font-size: 2.4rem; color: var(--gz-olive); line-height: 1; }
.gz-stats .gz-stat span { color: var(--bs-secondary-color); }
.gz-feature i { font-size: 1.75rem; color: var(--gz-contour); }

/* Kleine Hilfsklassen */
.gz-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; }
.gz-muted { color: var(--bs-secondary-color); }

/* ==========================================================================
   5. KOMPATIBILITAET: Bootstrap-2-Klassen aus den bestehenden PHP-Seiten
   Wird in Schritt 2 (Umstellung der Seiten) wieder abgebaut.
   ========================================================================== */

/* Raster: .row > .spanN, .row-fluid */
.row-fluid { display: flex; flex-wrap: wrap; margin-left: calc(-.5 * 1.5rem); margin-right: calc(-.5 * 1.5rem); }
.row > [class*="span"], .row-fluid > [class*="span"] { flex: 0 0 auto; width: 100%; max-width: 100%; padding-left: .75rem; padding-right: .75rem; }
@media (min-width: 768px) {
  .row > .span1, .row-fluid > .span1 { width: 8.333%; }   .row > .span2, .row-fluid > .span2 { width: 16.666%; }
  .row > .span3, .row-fluid > .span3 { width: 25%; }       .row > .span4, .row-fluid > .span4 { width: 33.333%; }
  .row > .span5, .row-fluid > .span5 { width: 41.666%; }   .row > .span6, .row-fluid > .span6 { width: 50%; }
  .row > .span7, .row-fluid > .span7 { width: 58.333%; }   .row > .span8, .row-fluid > .span8 { width: 66.666%; }
  .row > .span9, .row-fluid > .span9 { width: 75%; }       .row > .span10, .row-fluid > .span10 { width: 83.333%; }
  .row > .span11, .row-fluid > .span11 { width: 91.666%; } .row > .span12, .row-fluid > .span12 { width: 100%; }
}
/* spanN an Formularfeldern = Breite */
input[class*="span"], select[class*="span"], textarea[class*="span"], .input-block-level { width: 100%; max-width: 100%; }
@media (min-width: 768px) {
  input.span2, select.span2 { max-width: 10rem; } input.span3, select.span3 { max-width: 16rem; }
  input.span4, select.span4 { max-width: 22rem; } input.span5, select.span5 { max-width: 28rem; }
}
.hidden-phone { }
@media (max-width: 767.98px) { .hidden-phone { display: none !important; } }
@media (min-width: 768px) { .visible-phone { display: none !important; } }

/* Formulare */
input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"],
input[type="date"], input[type="url"], input[type="tel"], select, textarea {
  display: block; width: 100%; padding: .5rem .75rem; font-size: 1rem; line-height: 1.5; color: var(--bs-body-color);
  background-color: var(--bs-body-bg); background-color: var(--gz-card-bg); border: 1px solid var(--bs-border-color); border-radius: .4rem;
  transition: border-color .15s, box-shadow .15s;
}
select { appearance: auto; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
  outline: 0; border-color: #9db67a; box-shadow: 0 0 0 .2rem rgba(95, 122, 60, .2);
}
.form-inline input, .input-append input, .input-prepend input, .navbar-search input { display: inline-block; width: auto; }
.control-group { margin-bottom: 1rem; }
.control-label { font-weight: 600; margin-bottom: .35rem; display: block; }
.control-group.error .control-label, .control-group.error .help-inline { color: var(--bs-danger); }
.control-group.error input, .control-group.error select, .control-group.error textarea { border-color: var(--bs-danger); }
@media (min-width: 768px) {
  .form-horizontal .control-group { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem 1.25rem; align-items: start; }
  .form-horizontal .control-label { padding-top: .5rem; margin: 0; text-align: right; }
  .form-horizontal .controls { grid-column: 2; min-width: 0; }
  .form-horizontal .form-actions { padding-left: 12.25rem; }
}
.form-actions { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bs-border-color); display: flex; flex-wrap: wrap; gap: .5rem; }
.help-block, .help-inline { color: var(--bs-secondary-color); font-size: .9rem; }
.checkbox, .radio { display: block; padding-left: 0; }
.input-append, .input-prepend { display: flex; flex-wrap: nowrap; align-items: stretch; max-width: 100%; }
.input-append input, .input-prepend input { flex: 1 1 auto; min-width: 0; }
.input-append > :not(:first-child), .input-prepend > :not(:first-child) { margin-left: -1px; }
.input-append input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-append .btn:last-child, .input-append .add-on:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-prepend input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-prepend .add-on:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.add-on { display: flex; align-items: center; padding: .375rem .75rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .4rem; color: var(--bs-secondary-color); }

/* Buttons */
.btn:not([class*="btn-"]), .btn.btn-large:not([class*="btn-primary"]):not([class*="btn-success"]):not([class*="btn-danger"]):not([class*="btn-warning"]):not([class*="btn-info"]):not([class*="btn-inverse"]):not([class*="btn-link"]) {
  --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--gz-card-bg); --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--gz-olive-light); --bs-btn-hover-border-color: #c7cfb7; --bs-btn-hover-color: var(--bs-body-color);
}
.btn-large { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1.1rem; --bs-btn-font-size: 1.1rem; }
.btn-mini, .btn-small { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .85rem; }
.btn-inverse { --bs-btn-color: #fff; --bs-btn-bg: var(--gz-ink); --bs-btn-border-color: var(--gz-ink); --bs-btn-hover-bg: #000; --bs-btn-hover-color: #fff; }
.btn-success { --bs-btn-bg: var(--gz-olive); --bs-btn-border-color: var(--gz-olive); --bs-btn-hover-bg: var(--gz-olive-dark); --bs-btn-hover-border-color: var(--gz-olive-dark); }
.btn-group > .btn + .dropdown-toggle { padding-left: .5rem; padding-right: .5rem; }
.caret { display: inline-block; width: 0; height: 0; margin-left: .25em; vertical-align: .15em; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; }
.dropdown-toggle .caret + .caret, .gz-navbar .dropdown-toggle::after { }

/* Kaesten */
.well { background: var(--gz-card-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--gz-shadow); }
.well-small { padding: .75rem; }
.well.row { margin-left: 0; margin-right: 0; padding: 1rem .25rem; }
.hero-unit { background: var(--gz-olive-light); border-radius: var(--bs-border-radius-lg); padding: 2rem; margin-bottom: 1.5rem; }
.page-header { border-bottom: 1px solid var(--bs-border-color); padding-bottom: .5rem; margin: 1.5rem 0 1rem; }
.alert-error { --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-bg: var(--bs-danger-bg-subtle); --bs-alert-border-color: var(--bs-danger-border-subtle); }
.alert-block { padding: 1.25rem 1.5rem; }
.alert .close, .close { float: right; font-size: 1.5rem; line-height: 1; color: inherit; opacity: .5; text-decoration: none; background: none; border: 0; }
.alert .close:hover, .close:hover { opacity: .9; }
.muted { color: var(--bs-secondary-color) !important; }
.text-error { color: var(--bs-danger) !important; }
.pull-right { float: right !important; }
.pull-left { float: left !important; }
.img-polaroid { padding: .25rem; background: var(--gz-card-bg); border: 1px solid var(--bs-border-color); border-radius: .4rem; max-width: 100%; height: auto; }
.img-rounded { border-radius: .4rem; }
.img-circle { border-radius: 50%; }
.label, .badge:not([class*="text-bg"]):not([class*="bg-"]) { display: inline-block; padding: .3em .55em; font-size: .78em; font-weight: 700; line-height: 1; color: #fff; background: #737868; border-radius: .35rem; vertical-align: baseline; }
.badge { border-radius: 1rem; }
.label-success, .badge-success { background: var(--gz-olive) !important; }
.label-important, .badge-important { background: #b8352b !important; }
.label-warning, .badge-warning { background: #c28a1e !important; }
.label-info, .badge-info { background: #3a7491 !important; }
.label-inverse, .badge-inverse { background: var(--gz-ink) !important; }
.table { --bs-table-bg: var(--gz-card-bg); }
table[bgcolor], td[bgcolor], tr[bgcolor] { background: var(--gz-card-bg) !important; }
.thumbnails { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.thumbnail { display: block; padding: .3rem; background: var(--gz-card-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.pagination ul { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; }
.pagination ul > li > a, .pagination ul > li > span { display: block; padding: .35rem .75rem; border: 1px solid var(--bs-border-color); border-radius: .4rem; background: var(--gz-card-bg); text-decoration: none; }
.pagination ul > .active > a, .pagination ul > .active > span { background: var(--gz-olive); border-color: var(--gz-olive); color: #fff; }
.breadcrumb { background: transparent; padding: 0; }
.breadcrumb .divider { padding: 0 .4rem; color: var(--bs-secondary-color); }

/* Seitenleisten-Boxen (bs-docs-sidebar / nav-list) als Karten */
.bs-docs-sidebar, div.bs-docs-sidenav { margin-bottom: 1.5rem; }
ul.bs-docs-sidenav, .nav-list, .bs-docs-sidebar ul.nav.nav-list {
  display: block; list-style: none; margin: 0 0 1.5rem; padding: 0; background: var(--gz-card-bg);
  border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); box-shadow: var(--gz-shadow); overflow: hidden;
}
.bs-docs-sidebar ul.bs-docs-sidenav { margin-bottom: 0; }
ul.bs-docs-sidenav > li, .nav-list > li { border-top: 1px solid var(--bs-border-color); }
ul.bs-docs-sidenav > li:first-child, .nav-list > li:first-child { border-top: 0; }
ul.bs-docs-sidenav > li > a, .nav-list > li > a { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .6rem 1rem; color: var(--bs-body-color); text-decoration: none; }
ul.bs-docs-sidenav > li > a:hover, .nav-list > li > a:hover { background: var(--gz-olive-light); color: var(--gz-olive-dark); }
ul.bs-docs-sidenav > li > a .pull-right, .nav-list > li > a .pull-right { float: none !important; margin-left: auto; color: var(--bs-secondary-color); font-size: .88em; }
ul.bs-docs-sidenav > li > a [class^="icon-"], ul.bs-docs-sidenav > li > a [class*=" icon-"] { color: var(--gz-olive); }
ul.bs-docs-sidenav > li:not(.active) { padding: 0; }
ul.bs-docs-sidenav > li:not(.active):not(:has(> a)) { padding: .6rem 1rem; }
/* erste "aktive" Zeile = Kartenkopf */
ul.bs-docs-sidenav > li.active, .nav-list > li.active { background: var(--gz-olive-light); }
ul.bs-docs-sidenav > li.active > a, .nav-list > li.active > a { color: var(--gz-olive-dark); font-family: "Bitter", Georgia, serif; font-size: 1.2rem; font-weight: 700; padding: .65rem 1rem; letter-spacing: .01em; }
ul.bs-docs-sidenav > li.active > a [class^="icon-"], ul.bs-docs-sidenav > li.active > a [class*=" icon-"] { color: var(--gz-khaki); }
ul.bs-docs-sidenav > li.active > a b { font-weight: 700; }
[data-bs-theme="dark"] ul.bs-docs-sidenav > li.active > a { color: #dfe8cf; }
ul.bs-docs-sidenav > li > a img, ul.bs-docs-sidenav > li img.img-polaroid { width: 2.25rem; height: 2.25rem; border-radius: 50%; padding: 0; object-fit: cover; }
ul.bs-docs-sidenav > li > a > div[style*="clear"] { display: none; }
ul.bs-docs-sidenav .nav-header { padding: .6rem 1rem; font-weight: 700; color: var(--bs-secondary-color); font-size: .85rem; text-transform: uppercase; }
.nav-list .divider { height: 0; margin: 0; border-top: 1px solid var(--bs-border-color); }

/* Sonstige Altlasten */
font[color] { color: inherit; }
center { text-align: center; display: block; }
a > h4 { color: inherit; }
.newstext { color: var(--bs-secondary-color); }

/* Kachel-Listen (z. B. News auf der Uebersicht): ul.nav ohne nav-list */
.bs-docs-sidebar > ul.nav:not(.nav-list):not(.bs-docs-sidenav) { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.bs-docs-sidebar > ul.nav:not(.nav-list) > li.well { flex: 1 1 14rem; margin: 0; text-align: left !important; }
.bs-docs-sidebar > ul.nav:not(.nav-list) > li.well a { text-decoration: none; color: var(--bs-body-color); }
.bs-docs-sidebar > ul.nav:not(.nav-list) > li.well b { display: block; color: var(--gz-olive-dark); margin-bottom: .25rem; }
ul.bs-docs-sidenav > li > a[style*="height"] { padding: 0 !important; display: block; }
ul.bs-docs-sidenav > li > a[style*="height"] img { width: 100% !important; height: auto !important; border-radius: 0 !important; }
/* Hinweise im Inhalt */
.gz-notice { box-shadow: var(--gz-shadow); }
.gz-notice h3, .gz-notice h4 { font-family: "Bitter", Georgia, serif; }

/* Links: ohne Unterstreichung, beim Ueberfahren unterstrichen (in Fliesstext/Hinweisen weiter unterstrichen) */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.alert a, .gz-prose a { text-decoration: underline; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .navbar-brand:hover, ul.bs-docs-sidenav a:hover { text-decoration: none; }

/* Zeilen-Kaesten (.well.row, z. B. Forenliste): letzte Spalte fuellt den Rest */
.well.row { display: flex; flex-wrap: nowrap; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; }
.well.row > [class*="span"] { padding: 0; width: auto !important; }
.well.row > [class*="span"]:first-child { flex: 0 0 7rem; max-width: 7rem; }
.well.row > [class*="span"]:last-child { flex: 1 1 0; min-width: 0; }
.well.row .img-polaroid { border: 0; background: none; padding: 0; text-align: center; font-size: .85rem; line-height: 1.2; }
.well.row .img-polaroid img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto .35rem; }
.well.row h4 { margin: 0 0 .25rem; font-size: 1.2rem; color: var(--gz-olive-dark); }
[data-bs-theme="dark"] .well.row h4 { color: #dfe8cf; }
.well.row p { margin-bottom: .25rem; }
.well.row br + a, .well.row p > a:not(:first-child) { color: var(--bs-body-color); }
.well.row .muted { font-size: .92rem; }
.well:hover { border-color: #c9d2b8; }
@media (max-width: 575.98px) {
  .well.row > [class*="span"]:first-child { flex-basis: 4rem; max-width: 4rem; }
  .well.row .img-polaroid img { width: 3rem; height: 3rem; }
}

/* Grosses Y-Zeichen (Anmeldeseiten) */
.gz-mark-lg { width: 5.5rem; height: 5.5rem; object-fit: contain; }
.input-group-text { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.list-group-item.active { background: var(--gz-olive); border-color: var(--gz-olive); }
.list-group-item-action:hover { background: var(--gz-olive-light); }

/* ---------- Schrittanzeige (Registrierung) ---------- */
.gz-steps { display: flex; list-style: none; padding: 0; margin: 0 auto; max-width: 560px; counter-reset: s; }
.gz-steps li { flex: 1; position: relative; text-align: center; color: var(--bs-secondary-color); font-size: .9rem; }
.gz-steps li::before { content: ""; position: absolute; top: 1.05rem; left: -50%; width: 100%; height: 3px; background: var(--bs-border-color); z-index: 0; }
.gz-steps li:first-child::before { display: none; }
.gz-steps li.done::before, .gz-steps li.active::before { background: var(--gz-olive, #5f7a3c); }
.gz-step-nr { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--bs-body-bg); border: 3px solid var(--bs-border-color); font-weight: 700; }
.gz-step-name { display: block; margin-top: .35rem; }
.gz-steps li.active { color: var(--bs-body-color); font-weight: 600; }
.gz-steps li.active .gz-step-nr { border-color: var(--gz-olive, #5f7a3c); color: var(--gz-olive, #5f7a3c); }
.gz-steps li.done .gz-step-nr { background: var(--gz-olive, #5f7a3c); border-color: var(--gz-olive, #5f7a3c); color: #fff; }

html { scroll-padding-top: 5.5rem; }

/* ---------- Nachrichten ---------- */
.gz-msg-row { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; }
.gz-msg-row > .form-check-input { margin-top: .35rem; flex: none; }
.gz-msg-status { flex: none; width: 1.25rem; text-align: center; margin-top: .1rem; }
.gz-msg-main { flex: 1; min-width: 0; }
.gz-msg-from a { color: inherit; text-decoration: none; }
.gz-msg-subject { color: var(--bs-body-color); text-decoration: none; }
.gz-msg-subject:hover { color: var(--gz-olive); text-decoration: underline; }
.gz-msg-preview { font-size: .875rem; color: var(--bs-secondary-color); }
.gz-msg-row:hover { background: var(--bs-tertiary-bg); }
.gz-unread { box-shadow: inset 3px 0 0 var(--gz-olive); }
.gz-unread .gz-msg-from, .gz-unread .gz-msg-subject { font-weight: 700; }
.gz-msg-toolbar { background: var(--bs-tertiary-bg); }
.gz-avatar-sm { font-size: 2rem; line-height: 1; color: var(--gz-khaki, #b59a5b); }
.gz-message-body { font-size: 1.05rem; line-height: 1.6; overflow-wrap: anywhere; }
.gz-message-body img { max-width: 100%; height: auto; }
.gz-message-body blockquote { border-left: 3px solid var(--bs-border-color); padding-left: 1rem; color: var(--bs-secondary-color); }

/* Eingabefelder immer auf Kartenfarbe (Bootstrap nutzt sonst den Seitenhintergrund) */
.form-control, .form-select, .input-group-text { background-color: var(--gz-card-bg); }
.input-group-text { color: var(--bs-secondary-color); }
.form-control:disabled, .form-control[readonly] { background-color: var(--bs-tertiary-bg); }
.gz-initials { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gz-khaki); color: #fff; font-weight: 700; letter-spacing: .02em; }
.gz-msg-person { flex-wrap: wrap; }
.gz-msg-person > a { font-weight: 600; }

/* ---------- Profil-Vorschau beim Ueberfahren von Namen (a.tooltipp > span) ---------- */
a.tooltipp { position: relative; }
a.tooltipp > span {
  display: none; position: absolute; left: 0; top: 100%; z-index: 1080; margin-top: .35rem;
  width: 18rem; padding: .75rem .9rem; border-radius: .5rem; border: 1px solid var(--bs-border-color);
  background: var(--gz-card-bg); color: var(--bs-body-color); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .15);
  font-size: .875rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; text-decoration: none;
}
a.tooltipp > span b { font-weight: 700; }
a.tooltipp > span img { float: right; width: 62px; height: auto; margin: 0 0 .5rem .75rem; border-radius: .35rem; }
a.tooltipp.gz-tip-right > span { left: auto; right: 0; }
a.tooltipp.gz-tip-up > span { top: auto; bottom: 100%; margin: 0 0 .35rem; }
@media (hover: hover) {
  a.tooltipp:hover > span, a.tooltipp:focus-visible > span { display: block; }
}

/* Bootstrap-2 "pager" (Vor/Zurueck-Pfeile, z. B. Bildansicht) */
ul.pager { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; }
ul.pager li.next { margin-left: auto; }
ul.pager li > a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border: 1px solid var(--bs-border-color); border-radius: 50rem; background: var(--gz-card-bg); text-decoration: none; }
ul.pager li > a:hover { border-color: var(--gz-olive); color: var(--gz-olive); }

/* Letzte Kommentare (Seitenleiste): Bild immer links, Text daneben */
a.gz-lastcomment { display: flex !important; align-items: center; gap: .6rem; }
a.gz-lastcomment img { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: .35rem; }
a.gz-lastcomment span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Bild-Uploader ---------- */
.gz-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; cursor: pointer;
  padding: 2rem 1rem; border: 2px dashed #b9c3ad; border-radius: 14px; background: var(--gz-map); transition: border-color .15s, background .15s; }
.gz-drop i { font-size: 2.6rem; color: var(--gz-contour); line-height: 1; }
.gz-drop strong { font-size: 1.1rem; }
.gz-drop:hover, .gz-drop.gz-over { border-color: var(--gz-olive); background: var(--gz-olive-light); }
.gz-drop:focus-within { outline: 3px solid rgba(63, 95, 69, .35); outline-offset: 2px; }
.gz-up-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.gz-up-list li { position: relative; border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; background: var(--gz-card-bg); font-size: .85rem; }
.gz-up-list img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gz-map); }
.gz-up-list .gz-up-name { padding: .35rem .5rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-up-list .gz-up-state { padding: 0 .5rem .45rem; color: var(--bs-secondary-color); }
.gz-up-list .progress { height: 4px; border-radius: 0; }
.gz-up-list .progress-bar { background: var(--gz-olive); }
.gz-up-list li.gz-up-ok .gz-up-state { color: var(--gz-olive); }
.gz-up-list li.gz-up-err .gz-up-state { color: var(--gz-road); }

/* ---------- Startseite (Mitglieder) ---------- */
.gz-threads { border-top: 1px solid var(--bs-border-color); }
.gz-thread { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .85rem 0; border-bottom: 1px solid var(--bs-border-color); color: inherit; text-decoration: none; }
.gz-thread:hover .gz-thread-t { color: var(--bs-link-hover-color); text-decoration: underline; }
.gz-thread-t { font-weight: 700; font-size: 1.1rem; }
.gz-thread-m { grid-column: 1; color: var(--bs-secondary-color); font-size: .95rem; }
.gz-thread-c { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--bs-secondary-color); white-space: nowrap; }
.gz-thread.gz-new .gz-thread-t { color: var(--gz-road); }
.gz-event { display: flex; gap: .85rem; padding: .55rem 0; color: inherit; text-decoration: none; }
.gz-event b { display: block; line-height: 1.3; }
.gz-event span span { font-size: .95rem; color: var(--bs-secondary-color); }
.gz-event:hover b { text-decoration: underline; }
.gz-tuev { border: 1px dashed var(--gz-contour); border-radius: 12px; padding: .85rem 1rem; color: #4a3a2c; background: #f6f1ea; }
[data-bs-theme="dark"] .gz-tuev { background: #2a241d; color: #e6d9c9; }
.gz-plainlist.nav-list, ul.gz-plainlist { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; margin: 0 0 .5rem; }
.gz-plainlist > li > a { padding: .35rem 0 !important; }
.gz-pics { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 180px; gap: 14px; }
.gz-pic { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--gz-map); }
.gz-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.gz-pic:hover img { transform: scale(1.03); }
.gz-pic span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem .75rem .6rem; color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-pic-big { grid-row: span 2; }
@media (max-width: 767.98px) {
  .gz-pics { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .gz-pic-big { grid-column: span 2; grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) { .gz-pic img { transition: none; } }
.gz-plainlist > li.active:first-child { display: none; }
.gz-plainlist img { max-width: 48px; height: auto; border-radius: 6px; }

/* TinyMCE immer volle Breite, auch in alten Formular-Layouts */
.tox.tox-tinymce { width: 100% !important; max-width: 100%; border-radius: .5rem; border-color: var(--bs-border-color); }

/* Karikaturen */
.gz-cartoon { background: #fff; padding: .5rem; border-radius: .6rem; box-shadow: 0 .6rem 1.6rem rgba(36, 41, 31, .18); transform: rotate(-1.2deg); }
.gz-cartoon img { display: block; width: 100%; height: auto; border-radius: .35rem; }
.gz-cartoon-alt { transform: rotate(1deg); }
.gz-cartoon figcaption { font-size: .9rem; color: var(--bs-secondary-color); text-align: center; padding: .5rem .25rem .1rem; }
.gz-cartoon-top { width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 60%; }
[data-bs-theme="dark"] .gz-cartoon { background: #2c3128; }
@media (prefers-reduced-motion: reduce) { .gz-cartoon { transform: none; } }

/* Seitenleisten-Listen mit Bild (Zuletzt online, Album-Kommentare): gut lesbare Schrift */
.gz-online-txt { font-size: 1rem; line-height: 1.35; color: var(--bs-body-color); }
.gz-online-txt .gz-muted { font-size: .92rem; }
.list-group-item > span:not(.badge) { min-width: 0; overflow-wrap: anywhere; }

/* Laenderflaggen (land2flag) */
.gz-flag { display: inline-block; width: 1.35em; height: auto; aspect-ratio: 4 / 3; vertical-align: -.12em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }

/* ---------- Kopfbereich mit Foto (Startseiten) ---------- */
.gz-hero.gz-hero-photo { color: #fff; background: #1b2119; border-bottom: 0; min-height: clamp(420px, 44vw, 600px); display: flex; align-items: flex-end; }
.gz-hero-photo > .gz-hero-bg { position: absolute; inset: 0; display: block; }
.gz-hero-photo > .gz-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--gz-hero-pos, 50% 60%); }
.gz-hero-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 18, 12, .80) 0%, rgba(14, 18, 12, .55) 36%, rgba(14, 18, 12, .12) 66%, rgba(14, 18, 12, 0) 100%),
              linear-gradient(0deg, rgba(14, 18, 12, .55) 0%, rgba(14, 18, 12, 0) 40%); }
.gz-hero-photo > .container { position: relative; z-index: 1; width: 100%; }
.gz-hero.gz-hero-photo h1 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.gz-hero.gz-hero-photo .lead, [data-bs-theme="dark"] .gz-hero.gz-hero-photo .lead { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.gz-hero.gz-hero-photo .lead a { color: #fff; }
.gz-hero-photo .gz-next { color: var(--bs-body-color); box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35); border-color: transparent; }
.gz-hero-photo .gz-next h3 { color: var(--bs-body-color); }
/* Handy: Foto als eigener Streifen oben, Text darunter auf dunklem Grund */
@media (max-width: 991.98px) {
  .gz-hero.gz-hero-photo { display: block; min-height: 0; }
  .gz-hero-photo::after { display: none; }
  .gz-hero-photo > .gz-hero-bg { position: relative; aspect-ratio: 4 / 3; max-height: 70vh; }
  .gz-hero-photo > .gz-hero-bg img { object-position: 50% 72%; }
  .gz-hero-photo > .gz-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27, 33, 25, 0) 55%, #1b2119 100%); }
  .gz-hero-photo > .container { margin-top: -2.5rem; padding-top: 0 !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) { .gz-hero-photo > .gz-hero-bg { aspect-ratio: 16 / 7; } .gz-hero-photo > .gz-hero-bg img { object-position: var(--gz-hero-pos, 50% 60%); } }

/* Gewaehlter Eintrag in Seitenleisten (z. B. Sortierung in user.php): nur leicht hervorgehoben */
ul.bs-docs-sidenav > li.gz-current, .nav-list > li.gz-current { background: rgba(63, 95, 69, .08); }
ul.bs-docs-sidenav > li.gz-current > a, .nav-list > li.gz-current > a { font-weight: 600; }
[data-bs-theme="dark"] ul.bs-docs-sidenav > li.gz-current, [data-bs-theme="dark"] .nav-list > li.gz-current { background: rgba(255, 255, 255, .06); }

/* Mitgliederliste (user.php): Links in Textfarbe wie in den anderen Listen, Haendler dezent markiert */
.gz-memberlist a { color: var(--bs-body-color); }
.gz-memberlist a:hover { color: var(--bs-link-hover-color); }
.gz-memberlist td a[style*="font-weight:normal"] { color: var(--bs-secondary-color); }
.gz-memberlist tr.gz-seller-1 > td { --bs-table-bg: rgba(220, 200, 40, .18); }
.gz-memberlist tr.gz-seller-2 > td { --bs-table-bg: rgba(90, 170, 100, .18); }

/* ---------- Dunkles Design: Gruentoene, die auf dunklem Grund zu dunkel sind ---------- */
[data-bs-theme="dark"] ul.bs-docs-sidenav > li > a:hover,
[data-bs-theme="dark"] .nav-list > li > a:hover { color: #fff; background: #2f3d33; }
[data-bs-theme="dark"] ul.bs-docs-sidenav > li.active > a,
[data-bs-theme="dark"] .nav-list > li.active > a,
[data-bs-theme="dark"] .bs-docs-sidebar > ul.nav:not(.nav-list) > li.well b,
[data-bs-theme="dark"] .well.row h4 { color: #cfe3d2; }
[data-bs-theme="dark"] ul.bs-docs-sidenav > li > a [class^="icon-"],
[data-bs-theme="dark"] ul.bs-docs-sidenav > li > a [class*=" icon-"] { color: #8fb596; }
[data-bs-theme="dark"] .gz-msg-subject:hover { color: #cfe3d2; }
[data-bs-theme="dark"] ul.pager li > a:hover { color: #cfe3d2; border-color: #8fb596; }
[data-bs-theme="dark"] .gz-drop:hover, [data-bs-theme="dark"] .gz-drop.gz-over { border-color: #8fb596; }


/* PostIT-Hinweis als Overlay (Modal) */
.gz-postit-modal .modal-content { border: 0; border-top: 6px solid #e8c547; box-shadow: 0 1rem 3rem rgba(0,0,0,.25); }
.gz-postit-modal .modal-header { background: #fff8d6; }
.gz-postit-modal .modal-title i { color: #c9a227; }
.gz-postit-from { font-size: .9rem; color: var(--bs-secondary-color); margin-bottom: .5rem; }
.gz-postit-modal .postcontent { background: #fffbea; border-left: 4px solid #e8c547; padding: .75rem 1rem; border-radius: .25rem; margin-bottom: 1rem; white-space: normal; word-wrap: break-word; }
[data-bs-theme="dark"] .gz-postit-modal .modal-header { background: #3a3520; }
[data-bs-theme="dark"] .gz-postit-modal .postcontent { background: #2f2b1c; color: var(--bs-body-color); }

/* pix.php: Bildunterschrift statt Mouseover-Vorschau */
a.gz-pix { text-decoration: none; }
.gz-pix-cap { padding: .35rem .25rem 0; line-height: 1.25; overflow: hidden; }
.gz-pix-cap b, .gz-pix-cap small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-pix-cap b { font-weight: 600; color: var(--bs-body-color); }
.gz-pix-cap small { color: var(--bs-secondary-color); }
ul.thumbnails.gz-pixgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
ul.thumbnails.gz-pixgrid > li { width: auto !important; min-width: 0; margin: 0 !important; float: none; }
ul.thumbnails.gz-pixgrid > li > .thumbnail { display: block; height: 100%; }
ul.thumbnails.gz-pixgrid img { aspect-ratio: 1 / 1; object-fit: cover; display: block; }
@media (max-width: 575.98px) { ul.thumbnails.gz-pixgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }