/* Farben: hier zentral aendern (z. B. nach Style Guide) */
:root { --blue:#3366ff; --dark:#333; --darker:#272727; --line:#ddd;
        --text:#222; --accent:#ffffdc; --tile:#ffffdc; --tile-hover:#ffff99; --notice-info:#e8eeff; --notice-warn:#fff3cd;
        /* Tabellen: Standard = Variante A (neutral). Varianten B und C siehe unten, Umschalten im Admin (Themes > LVU > Tabellenfarben). */
        --w-brand:700; --w-nav:700; --w-side:700; --w-sum:700; --w-th:700; --w-h:700;
        --tbl-border:#999; --tbl-head:#e2e2e2; --tbl-zebra:#f4f7f9; --tbl-hover:#e8eeff; }
body.tbl-b { --tbl-border:#008800; --tbl-head:#ffffcc; --tbl-zebra:#ffffee; --tbl-hover:#ffffb0; }  /* B: gruener Rahmen, gelbe Kopfzeile, Zeilen weiss/zartgelb */
body.tbl-c { --tbl-border:#008800; --tbl-head:#ffffcc; --tbl-zebra:#ffffcc; --tbl-hover:#ffff99; }  /* C: gruener Rahmen, jede zweite Zeile #FFFFCC */
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 1600px; font: 15px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--text); background: #fff; }
a { color: var(--blue); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
img { max-width: 100%; height: auto; }
h2 { font-size: 200%; line-height: 1.1; margin: 0 0 15px; }

.toolbar { padding: 5px 15px; font-size: 75%; }
.lang { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; gap: 10px; }
.lang img { display: block; height: 12px; width: auto; border: 1px solid #ccc; }
.lang .active img { outline: 2px solid var(--blue); }

.site-header { padding: 20px 15px; }
/* Briefkopf: Logo + Firmenname (Schrift laut Briefkopf Century Gothic, sonst serifenlose Ersatzschrift) */
.brand { display: flex; align-items: center; gap: 18px; color: #000; }
.brand:hover, .brand:focus { text-decoration: none; }
.brand img { display: block; width: 110px; height: 110px; flex: none; }
.brand-text { min-width: 0; overflow-wrap: break-word; color: #000; font: var(--w-brand) clamp(0.95rem, 4.2vw, 1.7rem)/1.35 "Century Gothic", CenturyGothic, "Apple Gothic", "URW Gothic", Questrial, "Segoe UI", Arial, sans-serif; }
@media (max-width: 991px) { .brand { gap: 12px; } .brand img { width: 80px; height: 80px; } }

.mainnav { background: var(--dark); position: relative; }
.mainnav ul { list-style: none; margin: 0; padding: 0; }
.mainnav .wrap { max-width: 1170px; margin: 0 auto; }
.mainnav .wrap > ul { display: flex; flex-wrap: wrap; }
.mainnav li { position: relative; }
.mainnav a { display: block; color: #fff; font-weight: var(--w-nav); padding: 15px 18px; line-height: 24px; }
.mainnav a:hover, .mainnav a:focus { text-decoration: none; }
.mainnav li:hover > a, .mainnav li.active > a { background: var(--darker); }
.mainnav .sub { display: none; position: absolute; left: 0; top: 100%; min-width: 260px; background: var(--dark); z-index: 10; }
.mainnav .sub a { font-weight: normal; font-size: 14px; padding: 10px 18px; line-height: 1.3; }
.mainnav li:hover > .sub, .mainnav li:focus-within > .sub { display: block; }
.navtoggle, .navbtn { display: none; }

.layout { display: grid; grid-template-columns: minmax(270px, 25%) minmax(0, 1fr); gap: 30px; padding: 30px 15px; }
.layout.nosidebar { grid-template-columns: minmax(0, 1fr); }
main { min-width: 0; }
.side { list-style: none; margin: 0; padding: 0; }
.side a { display: block; padding: 14px 15px; font-weight: var(--w-side); }
.side a:hover { text-decoration: none; background: #f5f5f5; }
.side li.active a { background: var(--blue); color: #fff; font-weight: 700; }

.page-home h2 { color: var(--blue); }
.page-home p { margin: 0 0 18px; line-height: 1.7; font-size: 108%; }
.page-home img.welcome { float: right; margin: 0 0 15px 30px; max-width: 30%; border: 1px solid var(--line); padding: 4px; }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 30px; align-items: start; border-top: 1px solid var(--line); padding-top: 10px; margin-bottom: 40px; }
.intro p { margin: 0; line-height: 1.8; }
.legend, .dl { font-size: 15px; }
.legend { width: 100%; border-collapse: collapse; }
.legend th, .legend td { border: 1px solid var(--tbl-border); padding: 6px 8px; text-align: center; vertical-align: middle; }
.legend th { background: var(--tbl-head); font-weight: var(--w-th); }
.dl { width: 100%; border-collapse: separate; border-spacing: 0; border-top: 1px solid var(--tbl-border); border-left: 1px solid var(--tbl-border); }
.dl th, .dl td { border-right: 1px solid var(--tbl-border); border-bottom: 1px solid var(--tbl-border); padding: 6px 8px; text-align: center; vertical-align: middle; }
.dl th { background: var(--tbl-head); font-weight: var(--w-th); position: sticky; top: 0; z-index: 2; }
.dl:not(.filtered) tbody tr:nth-child(even) td, .dl.filtered tbody tr.alt td { background: var(--tbl-zebra); }
.dl tbody tr:hover td { background: var(--tbl-hover); }
.dl td.name, .dl th.name { text-align: left; }
.dl a.ico { display: inline-block; line-height: 0; }
.tablefilter { margin: 0 0 10px; }
.tablefilter input { padding: 8px 10px; width: 100%; max-width: 320px; border: 1px solid var(--tbl-border); font: inherit; }

.accordion details { border: 1px solid var(--line); margin: 0 0 8px; }
.accordion summary { cursor: pointer; padding: 12px 15px; font-weight: var(--w-sum); background: #f5f5f5; }
.accordion .answer { padding: 5px 15px 10px; }
article p { line-height: 1.6; }

@media (max-width: 991px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 20px 15px; }
  .side { display: flex; flex-wrap: wrap; gap: 5px; }
  .side a { padding: 8px 12px; }
  .intro { grid-template-columns: minmax(0, 1fr); }
  .navbtn { display: block; color: #fff; font-weight: var(--w-nav); padding: 15px 18px; cursor: pointer; text-align: right; }
  .mainnav .wrap { display: none; }
  .navtoggle:checked ~ .wrap { display: block; }
  .mainnav .wrap > ul { display: block; }
  .mainnav .sub { display: block; position: static; background: var(--darker); }
  .page-home img.welcome { float: none; max-width: 100%; margin: 0 0 15px; }
}

article table:not(.dl):not(.legend) { border-collapse: collapse; margin: 0 0 20px; }
article table:not(.dl):not(.legend) th, article table:not(.dl):not(.legend) td { border: 1px solid var(--tbl-border); padding: 6px 10px; text-align: left; }
article table:not(.dl):not(.legend) th { background: var(--tbl-head); }
article h3, article h4 { margin: 25px 0 8px; }
article h4 { font-size: 110%; }
article ul { line-height: 1.6; }

.accordion summary:hover { background: #ebebeb; }
.accordion details[open] > summary { border-bottom: 1px solid var(--line); }
.debug { background: #fff3cd; border: 1px solid #e0c36a; padding: 8px 12px; font-size: 80%; word-break: break-all; }

@media (max-width: 991px) { .tablewrap { overflow-x: auto; } }

.tiles { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 30px 0 10px; }
.tile { display: block; min-width: 0; background: var(--tile); border: 1px solid var(--line); border-top: 4px solid var(--blue); padding: 16px 18px; color: var(--text); }
.tile:hover, .tile:focus { background: var(--tile-hover); text-decoration: none; }
.tile strong { display: block; color: var(--blue); font-size: 110%; margin-bottom: 6px; overflow-wrap: break-word; }
.tile span { display: block; line-height: 1.5; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 991px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* Sehr lange Woerter duerfen notfalls umbrechen, damit nichts ueber den Rand ragt (ohne Silbentrennung). */
h2, .tile strong, .side a { overflow-wrap: break-word; }

.notice { display: block; padding: 12px 16px; margin: 0 0 20px; border: 1px solid var(--line); border-left: 6px solid var(--blue); background: var(--notice-info); }
.notice strong { display: block; margin-bottom: 2px; }
.notice-warn { background: var(--notice-warn); border-color: #e0c36a; border-left-color: #d39e00; }

/* Schriftstaerke (Theme-Einstellung "Schriftstaerke"): A = wie bisher, B = leichter, C = sehr leicht */
h2, h3 { font-weight: var(--w-h); }
body.wt-b { --w-brand:400; --w-side:400; --w-sum:400; }
body.wt-c { --w-brand:400; --w-nav:400; --w-side:400; --w-sum:400; --w-h:400; }

/* Schoenere Zeilenumbrueche (moderne Browser): keine einzelnen Woerter in der letzten Zeile, ausgewogene Ueberschriften */
h2, h3, summary, .tile strong, .notice strong { text-wrap: balance; }
p, li, .tile span, .notice span { text-wrap: pretty; }