/* =========================================================================
   Template Völker IT
   Kein Framework. Reihenfolge: Variablen, Grundlagen, Kopfzeile, Hero,
   Karten, Inhalt, Joomla-Ausgaben, Karussell, Fußzeile, schmale Bildschirme.
   ========================================================================= */

/* --- Variablen ---------------------------------------------------------- */
:root{
  --navy:#1B2150;
  --navy-deep:#161B42;
  --orange:#EF7F1A;
  --orange-dark:#D96F10;
  --blue:#008DD2;
  --grey:#C5C6C6;
  --pastel:#EEF2FA;
  --ink:#252B45;
  --body:#5A6275;
  --linie:#E2E5EC;

  --hdr-full:76px;                 /* aus den Template-Einstellungen */
  --hdr-base:var(--hdr-full);
  --header-h:76px;                 /* gemessene Höhe der Kopfzeile */
  --cut-base:var(--header-h);      /* Unterkante der weißen Fläche */
  --cut:calc(var(--cut-base) - var(--logo-top));

  --logo-top:10px;
  --logo-pad:14px;
  /* Die Lücke zwischen L und K liegt bei 50,04 % der Bildhöhe des Logos.
     Die Logogröße wird daraus so gerechnet, dass die Farbkante bei jeder
     Kopfzeilenhöhe genau in dieser Lücke liegt. */
  --logo-size:calc(2 * var(--logo-pad) + (var(--header-h) - var(--logo-top) - var(--logo-pad)) * 1.9984);
  --frame-w:5px;
  --frame-blue:var(--navy);
  --tile-bg:var(--grey);

  --wrap:1240px;
  --wrap-hdr:1600px;        /* die Kopfzeile darf breiter sein als der Inhalt */
  --gutter:24px;
  --radius:14px;
  --btn-h:52px;
  --btn-pad:34px;
  --band-h:220px;
  --panel-hub:90px;
}

/* --- Grundlagen --------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  /* Fußzeile unten, wenn der Inhalt das Fenster nicht füllt */
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  margin:0;background:var(--pastel);color:var(--body);
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:17px;line-height:1.55;
  /* Text bleibt in seinem Block: Ketten ohne Leerzeichen (Pfade, Adressen,
     Befehle, lange Wörter) werden notfalls an beliebiger Stelle umgebrochen.
     Wirkt nur, wo Umbruch erlaubt ist, also nicht bei white-space:nowrap
     oder pre. */
  overflow-wrap:anywhere;
}
body > *{flex:none}
/* zentrierende Außenabstände verhindern sonst das Aufziehen auf volle Breite.
   Nur die Blöcke im Textfluss, damit fest positionierte Elemente anderer
   Erweiterungen unberührt bleiben. */
body > .wrap,body > .hdr,body > .hero,body > .band,body > .haupt,
body > .foot,body > .banner,body > .reihe{width:100%}

img{max-width:100%;height:auto}
a{color:var(--blue)}
a:hover{color:var(--orange)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:#fff;color:var(--ink);padding:12px 20px;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

:target{scroll-margin-top:calc(var(--header-h) + 14px)}

/* --- Knöpfe: ein Stil, eine Größe --------------------------------------- */
.btn,
.inhalt .readmore .btn,
button.btn,
.inhalt input[type=submit],
.inhalt button[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--btn-h);padding:10px var(--btn-pad);
  background:var(--orange);color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-family:inherit;border:0;border-radius:6px;cursor:pointer;
  /* Lange Beschriftungen brechen um, der Knopf wird dann höher. Einzeilig
     bleibt er so hoch wie bisher. */
  white-space:normal;text-align:center;
}
.btn:hover,
.inhalt input[type=submit]:hover,
.inhalt button[type=submit]:hover{background:var(--orange-dark);color:#fff}

.btn--still{background:transparent;color:var(--blue);border:2px solid var(--blue)}
.btn--still:hover{background:var(--blue);color:#fff}

/* =========================================================================
   Kopfzeile
   ========================================================================= */
.hdr{position:relative;z-index:5;background:#fff}
body[data-fest="1"] .hdr{position:sticky;top:0}

.hdr__inner{
  position:relative;display:flex;align-items:center;gap:34px;
  max-width:var(--wrap-hdr);
  min-height:var(--hdr-base);
  padding-left:calc(var(--gutter) + var(--logo-size) + 20px);
  /* Die Kopfzeile ist breiter als der Inhalt. Dieser Zuschlag rückt den
     Kontakt-Knopf so weit nach innen, dass seine rechte Kante mit der
     rechten Kante des Karussell-Pfeils abschließt. */
  padding-right:calc(var(--gutter) + max(0px,
    (min(100%, var(--wrap-hdr)) - min(100%, var(--wrap))) / 2 - 30px));
  transition:min-height .25s ease,padding-left .25s ease;
}

/* beim Scrollen schrumpft das Logo vollständig in die Kopfzeile hinein, senkrecht
   mittig: --header-h ist die tatsächliche Höhe (template.js misst laufend). Sie
   kann größer sein als --hdr-base, wenn der Inhalt der Kopfzeile höher ist. */
.hdr.is-scrolled{
  --hdr-base:60px;--logo-size:50px;--logo-top:calc((var(--header-h) - var(--logo-size)) / 2);--frame-w:3px;--logo-pad:7px;
  box-shadow:0 6px 20px rgba(20,26,60,.10);
}
/* beim Messen dürfen keine Übergänge laufen */
.no-anim,.no-anim *{transition:none !important}

/* --- Logo mit wechselndem Rahmen ---------------------------------------- */
.brand{
  position:absolute;left:var(--gutter);top:var(--logo-top);z-index:7;
  width:var(--logo-size);height:var(--logo-size);display:block;
  transition:width .25s ease,height .25s ease,top .25s ease,left .25s ease;
}
.brand__tile{position:absolute;inset:0;background:var(--tile-bg);padding:var(--logo-pad);
  transition:padding .25s ease}
.brand__logo{position:absolute;inset:var(--logo-pad);transition:inset .25s ease}
.brand__logo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.brand__text{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--navy);font-weight:700;text-align:center;font-size:15px;
}
/* Der Rahmen ist ein Ring, dessen Hintergrund an der Unterkante der
   weißen Fläche hart von Dunkelblau auf Weiß wechselt. */
.brand__frame{
  position:absolute;inset:0;padding:var(--frame-w);
  background:linear-gradient(to bottom, var(--frame-blue) 0 var(--cut), #fff 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  pointer-events:none;transition:padding .25s ease;
}

/* Im geschrumpften Zustand ist der Rahmen einfarbig. Ein echter Rahmen statt
   des Rings aus Maske und Verlauf rundet bei Zoomstufen unter 100 % auf allen
   Seiten gleich; sonst wird die untere Kante schmaler.
   Umgeschaltet wird erst nach der Bewegung: beim Hineinwachsen mit 0,25 s
   Verzögerung, beim Herauswachsen sofort. */
.brand__tile{border:var(--frame-w) solid transparent;transition:padding .25s ease,border-color 0s}
.brand__frame{opacity:1;transition:padding .25s ease,opacity 0s}
.hdr.is-scrolled .brand__tile{border-color:var(--frame-blue);transition:padding .25s ease,border-color 0s .25s}
.hdr.is-scrolled .brand__frame{opacity:0;transition:padding .25s ease,opacity 0s .25s}

/* --- Menü --------------------------------------------------------------- */
/* Achtung: Joomla hängt der Liste selbst die Klasse „nav“ an
   (<ul class="mod-menu mod-list nav">). Regeln, die den Kasten des Menüs
   setzen, gehören deshalb an nav.nav – sonst trifft es auch die Liste. */
nav.nav{display:flex;align-items:center;flex-wrap:nowrap;flex:none}
.nav ul{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;list-style:none;margin:0;padding:0}
.nav li{position:relative}
/* Schriftgröße und Sperrung bestimmen, ab welcher Fensterbreite das ganze
   Menü in die Zeile passt. Ohne Versalien wird es nochmals deutlich schmaler. */
.nav a{
  display:block;text-decoration:none;color:#9AA1AE;font-size:14px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.nav a:hover{color:var(--ink)}
.nav .current > a,
.nav .active > a,
.nav a.active{color:var(--orange)}

/* Reste aus Cassiopeias Klappmenü: Umschaltknopf weg, Hülle sichtbar.
   Hinweis: Steht das Menümodul auf Cassiopeias Layout „dropdown-metismenu“,
   verschachtelt dieses die Einträge der obersten Ebene ineinander. Das lässt
   sich hier nicht geradeziehen. Das Modul gehört unter „Erweitert“ auf das
   Layout „Standard“. */
.nav .navbar{width:100%}
.nav .navbar-toggler{display:none}
.nav .navbar-collapse,.nav .collapse{display:block}

/* Überschriften, Trenner und Aufklapp-Knöpfe im Menü */
.nav .mod-menu__heading,.nav .nav-header{
  color:#9AA1AE;font-size:14px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;
}
.nav .mod-menu__separator,.nav .divider{display:none}
.nav .mod-menu__toggle-sub{
  display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;
  color:#9AA1AE;font:inherit;cursor:pointer;
}
.nav .mod-menu__toggle-sub:hover{color:var(--ink)}
.nav .mod-menu__toggle-sub [class^="icon-"]{display:none}
.nav .mod-menu__toggle-sub::after{
  content:"";width:7px;height:7px;margin-top:-4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease;
}
.nav li.is-offen > .mod-menu__toggle-sub::after{transform:rotate(-135deg);margin-top:2px}
.nav li.is-offen > ul{display:flex}

/* Die Punkte der obersten Ebene sind so hoch wie die Zeile, damit der Weg
   zur Maus kurz ist und das Klappfenster direkt darunter beginnt. */
.nav > ul > li > a,
.nav > ul > li > .mod-menu__heading,
.nav > ul > li > .mod-menu__toggle-sub{padding:12px 0}

/* Untermenü */
.nav li > ul{
  display:none;position:absolute;top:100%;left:-18px;z-index:8;
  flex-direction:column;align-items:stretch;gap:0;min-width:230px;
  /* Die obere Polsterung ist zugleich die Brücke für die Maus: Ohne sie
     schließt das Fenster, sobald der Zeiger den Zwischenraum erreicht. */
  padding:14px 0 8px;
  background:#fff;border-radius:10px;box-shadow:0 18px 34px rgba(20,26,60,.16);
}
.nav li:hover > ul,
.nav li:focus-within > ul{display:flex}
/* zusätzlicher unsichtbarer Streifen, falls doch ein Spalt bleibt */
.nav li > ul::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav li > ul a{padding:11px 18px;text-transform:none;letter-spacing:0;font-size:16px;color:var(--ink)}
.nav li > ul a:hover{background:#F5F7FB;color:var(--orange)}

/* --- Aktionen: Suche, Kontakt, Burger ----------------------------------- */
/* Die Aktionen stehen am rechten Rand, damit der Kontakt-Knopf mit dem
   Karussell-Pfeil darunter abschließt. Das Menü wächst nach rechts, bis es
   an sie stößt; dann schaltet die Zeile auf die nächste Stufe um. */
.actions{display:flex;align-items:center;gap:20px;flex:none;margin-left:auto}
.actions::before{content:"";width:1px;height:34px;background:var(--linie);margin-right:6px}

/* Kontakt-Knopf: dunkelblau und genauso groß wie der Suchknopf.
   Der Suchknopf bleibt orange, seine Regeln stehen weiter unten. */
/* Die Knöpfe der Kopfzeile brechen nicht um: template.js misst an ihrer
   Breite, ob das Menü in die Zeile passt. */
.actions .btn{
  height:40px;min-height:0;padding:0 16px;font-size:13px;letter-spacing:.06em;
  border-radius:6px;background:var(--navy);white-space:nowrap;
}
.actions .btn:hover{background:var(--navy-deep)}

.iconbtn{
  width:40px;height:40px;border:0;background:none;cursor:pointer;color:var(--ink);
  display:grid;place-items:center;border-radius:50%;padding:0;
}
.iconbtn:hover{background:#F1F3F8}

.burger{display:none;flex:none}
/* Der Burger steht an der Stelle, an der sonst das Menü beginnt. */
.is-compact .burger{display:grid}
.is-compact nav.nav{
  position:absolute;top:100%;left:0;right:0;z-index:6;
  display:none;flex-direction:column;align-items:stretch;
  background:#fff;border-top:1px solid var(--linie);
  padding:6px 0;
  box-shadow:0 20px 34px rgba(20,26,60,.14);
}
.is-compact.is-open nav.nav{display:flex}
.is-compact .nav ul{flex-direction:column;align-items:stretch;gap:0}
/* Die Einträge beginnen neben dem Logo, das über die Kopfzeile hinausragt –
   dort, wo auch der Burger steht. Die weiße Fläche bleibt durchgehend. */
.is-compact .nav a,
.is-compact .nav .mod-menu__toggle-sub,
.is-compact .nav .mod-menu__heading,
.is-compact .nav .nav-header{padding:15px var(--gutter) 15px var(--nav-einzug)}
/* Im Burger-Menü dürfen lange Einträge umbrechen. Ob das Menü in die Zeile
   passt, misst template.js ohne is-compact; dort bleibt nowrap. */
.is-compact .nav a{font-size:16px;white-space:normal}
.is-compact .nav a:hover{background:#F5F7FB}
.is-compact .nav li > ul{position:static;display:flex;box-shadow:none;padding:0;min-width:0}
.is-compact .nav li > ul a{padding-left:calc(var(--nav-einzug) + 18px)}
/* im Burger-Menü bleiben Unterlisten zu, bis der Knopf sie aufklappt.
   .mm-collapse und .mm-active kommen aus Cassiopeias Klappmenü. */
.is-compact .nav .mod-menu__sub,
.is-compact .nav .mm-collapse{display:none}
.is-compact .nav li.is-offen > .mod-menu__sub,
.is-compact .nav li.is-offen > .mm-collapse,
.is-compact .nav li.mm-active > .mm-collapse{display:flex}
.is-compact .nav .mod-menu__toggle-sub{
  display:flex;width:100%;justify-content:space-between;font-size:16px;
}
/* Die Überschrift ist im Aufbau ein <span>. Untereinander muss sie eine
   eigene Zeile bilden, sonst zählt ihre Polsterung nicht mit. */
.is-compact .nav .mod-menu__heading,.is-compact .nav .nav-header{display:block;white-space:normal}
/* Steht die Überschrift im Aufklapp-Knopf, hat der Knopf den Einzug schon. */
.is-compact .nav .mod-menu__toggle-sub .mod-menu__heading,
.is-compact .nav .mod-menu__toggle-sub .nav-header{padding:0}
.is-compact nav.nav{max-height:calc(100vh - var(--header-h));overflow-y:auto}

/* Einzug der Einträge: dieselbe Stelle, an der auch der Burger beginnt.
   Schrumpft das Logo beim Scrollen, rückt das Menü mit nach links. */
.is-compact,.suche-klein{--nav-einzug:calc(var(--gutter) + var(--logo-size) + 20px)}

/* Kontakt-Knopf und Symbole schrumpfen gemeinsam */
.is-compact{--btn-h:40px;--btn-pad:20px}
.is-compact .btn{font-size:13px;letter-spacing:.07em}
.is-compact .iconbtn{width:36px;height:36px}
.is-compact .actions{gap:14px}
.is-compact .actions::before{height:28px}

/* --- Suche in der Kopfzeile --------------------------------------------- */
/* Titel und Beschriftungen des Suchmoduls gehören nicht in die Kopfzeile */
.actions h2,.actions h3,.actions h4,.actions .modul__titel,
.actions label,.actions legend{display:none}
.actions form{display:flex;align-items:center;gap:8px;margin:0}
.actions form div,.actions form fieldset{display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0}
/* Suchknopf: gleiche Größe, aber orange */
.actions form .btn,
.actions form button,
.actions form input[type=submit]{
  height:40px;min-height:0;padding:0 16px;font-size:13px;letter-spacing:.06em;border-radius:20px;
  background:var(--orange);white-space:nowrap;
}
.actions form .btn:hover,
.actions form button:hover,
.actions form input[type=submit]:hover{background:var(--orange-dark)}
/* Das Suchfeld bleibt schmal. Ohne feste Breite zieht sich ein Feld mit der
   Klasse form-control auf und drängt das Menü ins Burger-Menü. */
.actions input[type=text],
.actions input[type=search],
.actions .form-control{
  width:190px;max-width:190px;height:40px;padding:0 14px;border:1px solid var(--linie);
  border-radius:20px;background:#F7F9FC;color:var(--ink);font:inherit;font-size:15px;
}
.actions .awesomplete{display:block}
.actions input:focus{outline:2px solid var(--blue);outline-offset:1px}
.actions .btn--suche{
  width:40px;height:40px;padding:0;border-radius:50%;background:none;color:var(--ink);
}
.actions .btn--suche:hover{background:#F1F3F8}
/* Zwischenstufe: Passt die Zeile nicht mehr, klappt zuerst nur das Suchfeld
   ein und das Menü bleibt. Erst danach kommt das Burger-Menü. */
.suche-klein .actions input[type=text],
.suche-klein .actions input[type=search],
.suche-klein .actions .form-control{
  /* Das Feld beginnt neben dem Logo, an derselben Stelle wie Burger und
     aufgeklapptes Menü: Das Logo ragt unten aus der Kopfzeile heraus und läge
     sonst über dem Feld. Rechts endet es mit dem Seitenabstand, bündig mit dem
     Kontakt-Knopf; am Fensterrand würde der Fokusrahmen abgeschnitten. */
  display:none;position:absolute;top:100%;left:var(--nav-einzug);right:var(--gutter);
  width:auto;max-width:none;height:52px;
  border-radius:0;border:0;border-top:1px solid var(--linie);padding:0 var(--gutter);
}
.suche-klein.suche-auf .actions input[type=text],
.suche-klein.suche-auf .actions input[type=search],
.suche-klein.suche-auf .actions .form-control{display:block}
/* Joomlas Suchvorschläge (Awesomplete) legen eine Hülle mit position:relative
   um das Feld. Sie ist 0 px breit; ohne diese Aufhebung richtete sich das
   schwebende Feld nach ihr statt nach der Kopfzeile und schrumpfte auf ein
   32 px breites Quadrat. Die Vorschlagsliste steht dann unter dem Feld. */
.suche-klein .actions .awesomplete{position:static}
.suche-klein .actions .awesomplete > ul{top:calc(100% + 52px);left:var(--nav-einzug);right:var(--gutter)}
.suche-klein .actions form .btn,
.suche-klein .actions form button{width:40px;padding:0;border-radius:50%;background:none;color:var(--ink)}
.suche-klein .actions form .btn:hover,
.suche-klein .actions form button:hover{background:#F1F3F8}
/* Im runden Knopf ist kein Platz für „Suchen“ (48 px Text, 40 px Knopf): Der
   Text wird unsichtbar, bleibt aber für Screenreader, an seiner Stelle eine
   Lupe. Joomlas eigenes Symbol (icon-search) bleibt leer, die Symbolschrift ist
   nicht geladen. */
/* Die Lupe liegt absolut in der Mitte: Im Knopf stehen außerdem das leere
   Symbol und der Text; als Raster lagen alle drei in eigenen Zeilen, und die
   Lupe saß 7 px zu hoch. */
.suche-klein .actions form button{position:relative;font-size:0}
.suche-klein .actions form button::before{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--lupe) center/contain no-repeat;mask:var(--lupe) center/contain no-repeat;
  --lupe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/svg%3E");
}

/* =========================================================================
   Hero und Band
   ========================================================================= */
.hero,.band{position:relative;background:var(--navy);overflow:hidden;isolation:isolate}
.band{height:var(--band-h)}
.hex{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hex polygon{transition:fill 2.4s ease}
@media (prefers-reduced-motion:reduce){.hex polygon{transition:none}}

.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--navy) 18%,rgba(27,33,80,.82) 42%,rgba(27,33,80,0) 68%);
}
.hero__inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;
  align-items:center;padding-bottom:150px;
  /* mindestens so viel Luft, dass die Überschrift unter dem Logo beginnt */
  padding-top:max(64px, calc(var(--logo-ueberstand,0px) + 26px));
}
/* Wabenbereich an die Fensterhöhe gekoppelt: Auf niedrigen Fenstern (FullHD mit
   125 % Skalierung: etwa 730 px) werden Überschrift und Abstand unter dem Text
   kleiner, damit die Kacheln sichtbar bleiben; ab etwa 900 px Höhe greifen die
   bisherigen Werte. Mindestens 140 px, weil die Kacheln 108 px (schmal 120 px)
   in den dunkelblauen Bereich ragen. */
.hat-karten .hero__inner{padding-bottom:clamp(140px,20vh,170px)}

.hero__text{color:#C9CEE0;font-size:19px}
.hero__text h1,.hero__text h2,.hero__text p:first-child strong{
  margin:0 0 22px;color:#fff;font-size:clamp(34px,min(4vw,6vh),54px);line-height:1.12;
  letter-spacing:-.015em;font-weight:700;
}
.hero__text p{margin:0 0 34px;max-width:32em}
.hero__text .btn{margin-top:6px}
.hero__media{position:relative;align-self:end}
.hero__media img{display:block;margin-left:auto}

/* =========================================================================
   Slideshow (Layout „slideshow“ für das Modul „Random Image“)
   Die Keyframes und die Größe des Rahmens (Width und Height des Moduls als
   --ss-breite und --ss-format) erzeugt das Layout je Modul.
   ========================================================================= */
@property --ss-p1{syntax:'<number>';inherits:false;initial-value:0}
@property --ss-p2{syntax:'<number>';inherits:false;initial-value:0}
/* Zweifarbiger Rahmen, je Ring so breit wie der Rahmen des Logos: außen
   Logograu, innen Dunkelblau als dunkle Fuge zum Bild. Die Bilder liegen
   innerhalb der Ringe und füllen diese Fläche ganz; was übersteht, wird
   gleichmäßig um die Bildmitte abgeschnitten. Die Ringe liegen über den
   Bildern, damit verschobene Bilder (slide, push) unter ihnen hindurchlaufen. */
.ss{
  --ss-rand:calc(2 * var(--frame-w));
  position:relative;overflow:hidden;max-width:100%;
  width:var(--ss-breite,100%);aspect-ratio:var(--ss-format,4/3);
}
.ss::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border:var(--frame-w) solid var(--grey);box-shadow:inset 0 0 0 var(--frame-w) var(--navy);
}
.ss__bild{
  position:absolute;top:var(--ss-rand);left:var(--ss-rand);display:block;max-width:none;
  width:calc(100% - 2 * var(--ss-rand));height:calc(100% - 2 * var(--ss-rand));
  object-fit:cover;object-position:50% 50%;
}
/* An der Position hero-media füllt eine Slideshow die Spalte neben dem Text:
   so breit wie die Spalte, so hoch wie der Text von der Überschrift bis zum
   Knopf. Dafür entfällt der Abstand unter dem letzten Textblock, und die Zeile
   wird nicht mehr auf die Mindesthöhe des Hero gestreckt. Andere Module an
   dieser Position bleiben unberührt. */
.hero__inner:has(.hero__media .ss){align-content:center}
.hero__inner:has(.hero__media .ss) .hero__text > :last-child,
.hero__inner:has(.hero__media .ss) .hero__text > :last-child > :last-child{margin-bottom:0}
.hero__media:has(.ss){align-self:stretch}
.hero__media .ss{width:100%}
@media (min-width:981px){
  /* an :has gebunden: Ohne :has wird die Spalte nicht gestreckt, und die
     Slideshow behält das Seitenverhältnis aus dem Modul statt 0 px Höhe. */
  .hero__media:has(.ss) .ss{height:100%;aspect-ratio:auto}
  /* ohne Text daneben bleibt nur das Seitenverhältnis aus dem Modul */
  .hero__inner:has(.hero__text:empty) .hero__media .ss{height:auto;aspect-ratio:var(--ss-format,4/3)}
}
@media (prefers-reduced-motion:no-preference){
  /* 16 Stufen nebeneinander, je Stufe mehr Blöcke aufgedeckt */
  .ss--dissolve .ss__bild{mask-image:url(../images/dissolve.svg);mask-size:1600% 100%;mask-repeat:no-repeat}
  /* Firefox löst var() in Keyframes gegen die Werte desselben Keyframes auf.
     Die Maske steht deshalb hier; die Keyframes ändern nur --ss-p1/2 und mask-size. */
  .ss--checkerboard .ss__bild{
    mask-image:linear-gradient(90deg,#000 calc(var(--ss-p1)*100%),transparent 0),
      repeating-conic-gradient(#000 0 25%,transparent 0 50%),
      linear-gradient(90deg,#000 calc(var(--ss-p2)*100%),transparent 0),
      repeating-conic-gradient(transparent 0 25%,#000 0 50%);
    mask-repeat:repeat;mask-composite:intersect,add,intersect,add;
  }
}
/* Nur das erste Bild. Die übrigen tragen loading="lazy": Firefox lädt sie dann
   nicht, Chrome und Edge laden sie trotzdem (gemessen 19.10.2026). */
@media (prefers-reduced-motion:reduce){.ss__bild ~ .ss__bild{display:none}}

/* =========================================================================
   Karten (Position features)
   ========================================================================= */
/* --kachel-min liest auch template.js, um die Anordnung zu wählen */
.karten{position:relative;z-index:3;--kachel-min:230px}
.hat-hero .karten{margin-top:-108px}
.hat-band .karten{margin-top:40px}
.karten__raster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--kachel-min,230px),1fr));
  --luecke:26px;gap:var(--luecke);
}
.karten__raster ul{display:contents;list-style:none;margin:0;padding:0}

.karte{
  background:#fff;border-radius:var(--radius);padding:30px 26px 34px;
  /* Ohne Schatten: Bei 26 px Abstand überlagerten sich die Schatten zweier
     Nachbarkacheln und färbten die Lücke dazwischen grau. */
  box-shadow:none;
}
.karte > a,.karte__link{display:block;text-decoration:none;color:inherit}
/* Beitragskacheln und Kategorie-Karten: Die ganze Kachel ist der Link. Der
   Innenabstand sitzt deshalb auf dem Link, und der Link füllt die Kachel auch
   in der Höhe (die Kacheln einer Reihe sind gleich hoch). */
.artikel-kacheln .karte,.kategorie-karten .karte{display:flex;flex-direction:column;padding:0}
.artikel-kacheln .karte__link,.kategorie-karten .karte__link{flex:1 1 auto;padding:30px 26px 34px;border-radius:inherit}
.karte__icon{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#2AA5E3,#0A7CC0);color:#fff;margin-bottom:26px;
}
.karte__icon img,.karte__icon svg{width:26px;height:26px;display:block}
/* Beitragsbilder sind Fotos, keine Zeichen: Sie füllen den Kreis aus. */
.artikel-kacheln .karte__icon{overflow:hidden}
.artikel-kacheln .karte__icon img{width:100%;height:100%;object-fit:cover}
/* Beitragskacheln mit Bild: Bild (40 px) rechts neben der Überschrift,
   rechtsbündig, der Text darunter über die ganze Breite. Bei 56 px blieben
   neben dem Bild nur 124 px, zu wenig für „INFRASTRUKTUR“ (142 px).
   Die Bildmitte liegt auf der Mitte der ersten Titelzeile, auch bei
   umbrochenen Überschriften: Titel und Bild oben bündig, das Bild um die halbe
   Differenz aus Zeilenhöhe und Bildhöhe verschoben. --zeile ist Schriftgröße
   der Überschrift (16 px, .karte__titel) mal Zeilenhöhe. */
.artikel-kacheln .karte__link:has(> .karte__icon){
  --bild:40px;--zeile:calc(16px * 1.55);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start;
  align-content:start;   /* der Link ist so hoch wie die Kachel; die Zeilen bleiben oben */
}
.artikel-kacheln .karte__link:has(> .karte__icon) > .karte__icon{
  grid-column:2;grid-row:1;justify-self:end;width:var(--bild);height:var(--bild);
  margin:calc((var(--zeile) - var(--bild)) / 2) 0 0;
}
.artikel-kacheln .karte__link:has(> .karte__icon) > .karte__titel{
  grid-column:1;grid-row:1;margin:0;line-height:var(--zeile);hyphens:auto;overflow-wrap:break-word;
}
.artikel-kacheln .karte__link:has(> .karte__icon) > .karte__text{grid-column:1 / -1;grid-row:2;align-self:start;margin-top:14px}
.karte__titel,.karte h3,
.inhalt .karte__titel,.inhalt .karte h3{
  margin:0 0 14px;color:var(--ink);font-size:16px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}
.karte__text,.karte p{margin:0;font-size:15px;line-height:1.6}
.karte__mehr{display:inline-block;margin-top:16px;font-weight:700;color:var(--blue);text-decoration:none}
.karte__mehr:hover{color:var(--orange)}

/* Die Kachel der gerade gezeigten Seite */
.karte.ist-aktiv{outline:2px solid var(--orange);outline-offset:-2px}
.karte.ist-aktiv .karte__titel{color:var(--orange)}
.karte.ist-aktiv .karte__icon{background:linear-gradient(140deg,#F6A24B,var(--orange))}

/* Passen nicht alle Kacheln mit Mindestbreite nebeneinander, setzt
   template.js eine Reihe zum Scrollen; --sichtbar ist die Zahl der Kacheln,
   die mit Mindestbreite in die Bahn passen. Passen keine zwei, stehen die
   Kacheln untereinander. Ohne Skript bricht das Raster um. */
.karten--karussell .karten__raster{
  grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--sichtbar,2) - 1) * var(--luecke)) / var(--sichtbar,2));
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--pfeil-platz) - 6px);padding:4px 6px;scroll-padding-inline:6px;
}
.karten--karussell .karte{scroll-snap-align:start}
.karten--stapel .karten__raster{grid-template-columns:minmax(0,1fr)}
.karten:not(.karten--karussell) .karussell__pfeil{display:none}

/* =========================================================================
   Inhaltsbereich
   ========================================================================= */
.haupt{position:relative;z-index:2}
.hat-band .haupt{margin-top:calc(-1 * var(--panel-hub))}
.hat-hero .haupt{margin-top:70px}
.hat-karten.hat-band .haupt{margin-top:40px}

.panel{
  background:#fff;border-radius:var(--radius);padding:46px 50px 56px;
  box-shadow:0 18px 40px rgba(20,26,60,.10);
}
/* Auf der Startseite steht der Inhalt wie im Entwurf frei auf dem
   Pastellgrund. Den weißen Kasten gibt es nur auf den Unterseiten.
   Erkannt wird sie am Hero oder am Menüpunkt, der als Standard gesetzt ist. */
.hat-hero .panel,
.startseite .panel{background:none;box-shadow:none;border-radius:0;padding:0}
.panel--spalten{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.panel--spalten:has(.spalte--links){grid-template-columns:280px minmax(0,1fr)}
.panel--spalten:has(.spalte--rechts){grid-template-columns:minmax(0,1fr) 280px}
.panel--spalten:has(.spalte--links):has(.spalte--rechts){grid-template-columns:260px minmax(0,1fr) 260px}

.haupt + .reihe,.reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin:40px auto}

/* Überschriften: Seitentitel als oranges Schild, Abschnitte blau */
/* Seitentitel als Überschrift, nicht als Knopf: Ein oranges Schild sieht aus,
   als ließe es sich anklicken. Das Schild bleibt für Kennzeichnungen. */
.panel .page-header > h1,
.panel .page-header > h2,
.panel .com-content-article__title,
.inhalt > h1:first-child{
  display:block;margin:0 0 22px;padding:0;background:none;border-radius:0;
  color:var(--blue);font-size:28px;line-height:1.25;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;hyphens:auto;
}
/* Silbentrennung auch für Hauptüberschriften im Beitragstext */
.inhalt h1{hyphens:auto}
.panel .page-header > h1 a,
.panel .page-header > h2 a,
.panel .com-content-article__title a{color:var(--blue);text-decoration:none}
.panel .page-header > h1 a:hover,
.panel .page-header > h2 a:hover,
.panel .com-content-article__title a:hover{color:var(--orange)}

.schild{
  display:inline-block;background:var(--orange);color:#fff;border-radius:8px;
  padding:9px 26px;margin:0 0 24px;font-size:14px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.4;
}
/* Joomla vergibt die Klasse page-header auch an Überschriften dritter
   Ordnung, etwa bei den Unterkategorien. */
.panel .page-header:has(> h1),
.panel .page-header:has(> h2){margin:0}

.inhalt h3.page-header{margin:26px 0 10px;font-size:19px;font-weight:700;color:var(--ink)}
.inhalt h3.page-header a{color:var(--blue);text-decoration:none}
.inhalt h3.page-header a:hover{color:var(--orange)}
.inhalt .badge{
  display:inline-block;margin-left:8px;padding:2px 10px;border-radius:12px;
  background:var(--pastel);color:var(--ink);font-size:13px;font-weight:600;
  vertical-align:middle;
}

.abschnitt-titel,
.inhalt h2,
.modul__titel{
  margin:38px 0 18px;color:var(--blue);font-size:26px;line-height:1.25;
  letter-spacing:.04em;text-transform:uppercase;font-weight:700;
}
.inhalt h2:first-child,.modul__titel:first-child{margin-top:0}
.inhalt h3{margin:30px 0 12px;color:var(--ink);font-size:19px;font-weight:700}
.inhalt h4{margin:24px 0 10px;color:var(--ink);font-size:17px;font-weight:700}
.inhalt p{margin:0 0 18px}
.inhalt ul,.inhalt ol{margin:0 0 18px;padding-left:22px}
.inhalt li{margin-bottom:8px}
.inhalt img{border-radius:10px}
.inhalt figure{margin:0 0 22px}
.inhalt figcaption{font-size:14px;color:#8A92A6;margin-top:8px}
/* Befehle in <code> enthalten oft lange Ketten ohne Leerzeichen. Passt eine
   nicht in die Zeile, wird sie an beliebiger Stelle umgebrochen, statt über
   den Kasten hinauszuragen. */
.inhalt code{overflow-wrap:anywhere}
/* Codeblöcke behalten Zeilen und Einrückung, zu lange Zeilen laufen in der
   nächsten weiter statt über den Kasten hinaus. */
pre{white-space:pre-wrap}
/* Aus Word eingefügte Aufzählungen: Word zieht die erste Zeile mit
   text-indent nach links, der ausgleichende Einzug geht beim Einfügen
   verloren. Der Innenabstand holt den Aufzählungspunkt in den Kasten. */
.inhalt p[class^="MsoList"],.inhalt p[style*="mso-list"]{padding-left:24px}
/* Anhangliste (DPAttachments): Deren Stile setzen break-word und Spalten von
   mindestens 250 px. Lange Dateinamen brechen um, ein schmalerer Kasten
   bekommt eine Spalte in voller Breite. */
.inhalt .com-dpattachments-layout-attachments__attachments{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.inhalt .com-dpattachments-layout-attachments__attachments .dp-attachment{overflow-wrap:anywhere}
.inhalt hr{border:0;border-top:1px solid var(--linie);margin:34px 0}
.inhalt blockquote{
  margin:0 0 22px;padding:14px 22px;border-left:4px solid var(--orange);
  background:var(--pastel);border-radius:0 8px 8px 0;
}

/* Eine Breite aus dem Editor (etwa aus Excel eingefügt) gilt, solange die
   Tabelle in den Kasten passt; sonst wird sie so breit wie der Kasten. */
.inhalt table{width:100%;max-width:100%;border-collapse:collapse;margin:0 0 24px;font-size:16px}
/* Bringt eine Tabelle aus dem Editor eigene Rahmen mit, bleiben sie
   unangetastet. Sonst verdrängt die Linie der Zelle beim Zusammenlegen der
   Rahmen den Rahmen der Tabelle. */
.inhalt table:not([style*="border"]) th,
.inhalt table:not([style*="border"]) td{border-bottom:1px solid var(--linie)}
.inhalt table:not([style*="border"]) th{background:var(--pastel)}
.inhalt th,.inhalt td{padding:11px 14px;text-align:left}
/* Die Breite einer Tabelle richtet sich nach ihrem längsten Wort, nicht nach
   der Angabe width:100%. Ein Titel wie „TSegmentedMemoryStream“ schiebt sie
   auf dem Telefon aus dem Kasten heraus und die ganze Seite wird breiter als
   der Bildschirm. In der ersten Spalte – dort steht der lange Text – darf
   deshalb notfalls innerhalb eines Wortes umgebrochen werden. Solange der
   Platz reicht, ändert die Regel nichts. */
.inhalt th:first-child,.inhalt td:first-child{overflow-wrap:anywhere}
.inhalt th{color:var(--ink);font-weight:700}
/* In Tabellenzellen füllt der Text die Zelle; die Breitenbegrenzung für
   Fließtext gilt dort nicht. */
.inhalt td p,.inhalt th p,.inhalt td li,.inhalt td{max-width:none}

.spalte{font-size:16px}
.spalte .modul{margin-bottom:30px}

/* Artikelbild links, Text rechts */
.inhalt .item-image,
.inhalt .com-content-article__body > .float-start{float:none;margin:0 0 26px}
/* Lage-Klassen aus Editor und Feld „Image Class“, wie in Bootstrap 5 */
.float-start{float:left!important}
.float-end{float:right!important}
.float-none{float:none!important}
/* „Center“ schreibt der Editor als mx-auto d-block */
.d-block{display:block!important}
.mx-auto{margin-right:auto!important;margin-left:auto!important}
@media (min-width:860px){
  .beitrag--bild{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
}

/* =========================================================================
   Hinweiskasten (Knowledgebase und Downloads)
   ========================================================================= */
.hinweis{
  border:1px solid #E7A9A2;background:#FBE2DF;border-radius:10px;
  padding:20px 24px;margin:0 0 32px;color:#7A2018;font-size:15px;line-height:1.55;
}
.hinweis__titel,
.inhalt .hinweis__titel{
  margin:0 0 12px;color:#7A2018;font-size:17px;font-weight:700;
  letter-spacing:0;text-transform:none;
}
.hinweis strong,.hinweis b{color:#B03024;font-size:17px}
.hinweis p{margin:0 0 12px;max-width:none}
.hinweis p:last-child{margin-bottom:0}

/* =========================================================================
   Joomla-Ausgaben
   ========================================================================= */
/* Systemmeldungen */
joomla-alert{
  display:block;margin:0 0 24px;padding:16px 20px;border-radius:10px;
  background:var(--pastel);border-left:4px solid var(--blue);color:var(--ink);
}
joomla-alert[type=warning]{background:#FDF3E3;border-left-color:var(--orange)}
joomla-alert[type=danger],joomla-alert[type=error]{background:#FBE2DF;border-left-color:#B03024}
joomla-alert[type=success]{background:#E7F5EC;border-left-color:#2E8B57}
joomla-alert .alert-heading{font-weight:700;margin-bottom:4px}

/* Brotkrumen */
.mod-breadcrumbs,.breadcrumb{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 26px;padding:0;
  font-size:14px;color:#8A92A6;
}
.mod-breadcrumbs__item + .mod-breadcrumbs__item::before,
.breadcrumb-item + .breadcrumb-item::before{content:"›";margin-right:8px;color:#B6BDCB}
.mod-breadcrumbs a,.breadcrumb a{color:#8A92A6;text-decoration:none}
.mod-breadcrumbs a:hover,.breadcrumb a:hover{color:var(--orange)}
.mod-breadcrumbs__here,.breadcrumb .active{color:var(--ink)}

/* Text, den Joomla nur für Hilfsmittel ausgibt. Ohne diese Regel steht er
   sichtbar auf der Seite, etwa „Vorheriger Beitrag: …“ neben den Pfeilen. */
.visually-hidden,.sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Vorheriger und nächster Beitrag: schlichte Textlinks statt großer Knöpfe */
.pagenavigation{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:36px;padding-top:20px;border-top:1px solid var(--linie);
}
.pagenavigation .pagination{display:contents}
.pagenavigation .btn,
.pagenavigation a{
  display:inline-flex;align-items:center;gap:6px;height:auto;min-height:0;padding:0;text-align:left;
  background:none;color:var(--blue);font-size:15px;font-weight:700;
  letter-spacing:0;text-transform:none;border-radius:0;
}
.pagenavigation a:hover{background:none;color:var(--orange)}
.pagenavigation [class^="icon-"]{display:none}
.pagenavigation .previous::before{content:"\2190"}
.pagenavigation .next{margin-left:auto}
.pagenavigation .next::after{content:"\2192"}

/* Seitennummerierung */
.pagination{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:34px 0 0;padding:0}
.pagination .page-link{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--linie);border-radius:8px;text-decoration:none;color:var(--ink);
}
.pagination .page-link:hover{border-color:var(--orange);color:var(--orange)}
.pagination .active .page-link{background:var(--orange);border-color:var(--orange);color:#fff}
.pagination__wrapper .counter{margin-top:12px;font-size:14px;color:#8A92A6}

/* Formulare */
.inhalt label,.feld label{display:block;margin-bottom:6px;color:var(--ink);font-weight:600;font-size:15px}
.inhalt input[type=text],.inhalt input[type=email],.inhalt input[type=tel],
.inhalt input[type=password],.inhalt input[type=search],.inhalt input[type=number],
.inhalt input[type=url],.inhalt input[type=date],.inhalt select,.inhalt textarea,
.panel .form-control{
  width:100%;max-width:520px;padding:12px 14px;border:1px solid var(--linie);
  border-radius:8px;background:#F7F9FC;color:var(--ink);font:inherit;font-size:16px;
}
.inhalt textarea{min-height:170px;max-width:none;resize:vertical}
.inhalt input:focus,.inhalt select:focus,.inhalt textarea:focus{
  outline:2px solid var(--blue);outline-offset:1px;background:#fff;
}
.inhalt .control-group,.inhalt .feld{margin-bottom:18px}
.inhalt .form-check,.inhalt .checkbox{display:flex;align-items:flex-start;gap:10px}
.inhalt .form-check input,.inhalt .checkbox input{width:auto;margin-top:5px}
.inhalt .invalid{border-color:#B03024}
.inhalt .required::after{content:" *";color:var(--orange)}

/* Das Feld „Anlagen“ im Kontaktformular bleibt leer, solange keine Anhänge
   erlaubt sind. Dann wird es ausgeblendet — sobald es Eingabefelder enthält,
   erscheint es wieder. */
.inhalt fieldset:has(#jform_attachments-lbl):not(:has(input, select, textarea)){display:none}

/* Kontaktangaben mit Symbolen */
.kontaktliste{list-style:none;margin:0;padding:0}
.kontaktliste li{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.kontaktliste .symbol{
  flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#2AA5E3,#0A7CC0);color:#fff;
}
.kontaktliste .bez{display:block;color:var(--blue);font-weight:700;font-size:15px}
.kontaktliste .wert{display:block;color:var(--orange);font-weight:700}
.kontaktliste a{text-decoration:none;color:inherit}

/* Joomla vergibt die Klasse btn auch dort, wo kein großer Knopf hingehört.
   Der kräftige orange Knopf bleibt dem Hero, dem Kontakt und den
   Absendeknöpfen vorbehalten. */
.inhalt .btn-sm,
.inhalt .btn-info,
.inhalt .btn-secondary{
  height:auto;min-height:0;padding:6px 14px;font-size:14px;font-weight:600;
  letter-spacing:0;text-transform:none;border-radius:8px;
  background:var(--pastel);color:var(--blue);
}
.inhalt .btn-sm:hover,
.inhalt .btn-info:hover,
.inhalt .btn-secondary:hover{background:var(--blue);color:#fff}

/* Tags als kleine Marken */
.inhalt .tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.inhalt .tags li{margin:0;list-style:none}
.inhalt .tags .btn,
.inhalt .tags a{
  display:inline-block;height:auto;min-height:0;padding:4px 12px;border-radius:12px;
  background:var(--pastel);color:var(--blue);font-size:13px;font-weight:600;
  letter-spacing:.02em;text-transform:none;text-decoration:none;
}
.inhalt .tags a:hover{background:var(--blue);color:#fff}

/* „Weiterlesen“ als Textlink mit Pfeil */
.inhalt .readmore .btn,
.inhalt a.readmore{
  display:inline-flex;align-items:center;gap:6px;height:auto;min-height:0;padding:0;text-align:left;
  background:none;color:var(--blue);font-size:15px;font-weight:700;
  letter-spacing:0;text-transform:none;border-radius:0;
}
.inhalt .readmore .btn::after,
.inhalt a.readmore::after{content:"\2192"}
.inhalt .readmore .btn:hover,
.inhalt a.readmore:hover{background:none;color:var(--orange)}

/* Bewertung: bisheriger Durchschnitt und die Sterne zum Abstimmen */
.content_rating .vote-star svg,
.content_rating .vote-star-half svg{fill:var(--orange)}
.content_rating .vote-star-empty svg{fill:#C9CEDA}

/* Anzeige und Eingabe sind jetzt eine Reihe. Der getrennte Block mit dem
   Durchschnitt bleibt im HTML, weil er die Auszeichnung für Suchmaschinen
   enthält, wird aber nicht mehr angezeigt. */
.inhalt .com-content-article:has(> form.bewerten) > .content_rating{
  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
}

.bewerten{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.bewerten__sterne{
  display:flex;flex-direction:row-reverse;justify-content:flex-end;
  gap:2px;margin:0;padding:0;border:0;
}
.bewerten__sterne label{cursor:pointer;line-height:0;padding:2px}
.bewerten__sterne svg{width:24px;height:24px;fill:#C9CEDA;transition:fill .15s ease}
/* ruhend: die bisherige Bewertung */
.bewerten__sterne label.ist-voll svg{fill:var(--orange)}
/* beim Überfahren zählt nur noch der Zeiger */
.bewerten__sterne:hover label svg{fill:#C9CEDA}
.bewerten__sterne label:hover svg,
.bewerten__sterne label:hover ~ label svg,
.bewerten__sterne input:checked ~ label svg{fill:var(--orange)}
.bewerten__wert{color:#8A92A6;font-size:14px}
.bewerten__stimmen{color:#B6BDCB}
.bewerten__sterne input:focus-visible + label svg{outline:2px solid var(--blue);outline-offset:2px}
.inhalt button.bewerten__senden,
button.bewerten__senden{
  height:auto;min-height:0;padding:6px 14px;border:0;border-radius:8px;cursor:pointer;
  background:var(--pastel);color:var(--blue);font:inherit;font-size:14px;font-weight:600;
  letter-spacing:0;text-transform:none;
}
.inhalt button.bewerten__senden:hover,
button.bewerten__senden:hover{background:var(--blue);color:#fff}
/* Mit JavaScript genügt der Klick auf einen Stern */
.inhalt .bewerten--js button.bewerten__senden,
.bewerten--js button.bewerten__senden{display:none}

/* Beitragsangaben */
.article-info,.com-content-article__info{
  display:flex;flex-wrap:wrap;gap:14px;margin:0 0 22px;padding:0;
  list-style:none;font-size:14px;color:#8A92A6;
}
.readmore{margin-top:18px}

/* Kachelbeiträge: ohne Titelschild, ohne Beitragsnavigation, ohne Angaben zu
   Autor, Datum und Zugriffen. Gesteuert über die Template-Einstellung
   „Kategorien der Kachelbeiträge“. */
.kachel-beitrag .page-header,
.kachel-beitrag .com-content-article__title,
.kachel-beitrag .article-info,
.kachel-beitrag .com-content-article__info,
.kachel-beitrag .pagenavigation{display:none}

/* Kategorie- und Artikelmodule als Liste */
.modul ul{list-style:none;margin:0;padding:0}
.modul li{margin-bottom:10px}

/* =========================================================================
   Knowledgebase-Karussell
   ========================================================================= */
.karussell{position:relative}
/* Feste Spaltenbreiten, damit die Bahn überläuft und wirklich gescrollt wird. */
/* Außenabstand statt Polsterung: Die Bahn endet vor den Pfeilen und schneidet
   dort ab. Mit Polsterung blieben Kachelreste neben den Pfeilen sichtbar.
   Die 6 px Polsterung sind nur Platz für den Schatten. */
.karussell__bahn{
  display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:26px;
  list-style:none;margin-inline:calc(var(--pfeil-platz) - 6px);padding:4px 6px;
  scroll-padding-inline:6px;
  overflow-x:auto;scroll-snap-type:x mandatory;
}
.karussell__bahn > li{scroll-snap-align:start}
@media (min-width:760px){.karussell__bahn{grid-auto-columns:calc(50% - 13px)}}
@media (min-width:1050px){.karussell__bahn{grid-auto-columns:calc(33.333% - 18px)}}

.kb-karte{
  background:var(--pastel);border-radius:var(--radius);padding:18px 18px 26px;
  display:flex;flex-direction:column;
}
.kb-karte__bild{
  display:block;margin-bottom:22px;border-radius:14px;overflow:hidden;
  /* obere linke Ecke abgeschrägt, die anderen Ecken bleiben rund */
  clip-path:polygon(38px 0,100% 0,100% 100%,0 100%,0 38px);
}
.kb-karte__bild img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover}
.kb-karte__meta{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:18px}
.kb-karte__meta .kategorie{color:var(--blue)}
.kb-karte__meta .punkt{width:7px;height:7px;border-radius:50%;background:#B6BDCB}
.kb-karte__meta .autor{color:var(--ink)}
.kb-karte__titel,
.inhalt .kb-karte__titel{margin:0 0 12px;font-size:21px;line-height:1.25;font-weight:700;letter-spacing:0;text-transform:none;color:var(--orange)}
.kb-karte__titel a{color:var(--orange);text-decoration:none}
.kb-karte__titel a:hover{color:var(--orange-dark)}
.kb-karte__text{margin:0 0 20px;font-size:15px}
.kb-karte__mehr{margin-top:auto;color:var(--blue);font-weight:700;text-decoration:none}
.kb-karte__mehr:hover{color:var(--orange)}

/* Pfeile stehen am Rand, die Bahn hält seitlich Abstand, damit die Kacheln
   nicht an den Knöpfen kleben. --pfeil-platz ist Knopf plus Luft. */
.karussell,.karten--karussell{--pfeil-platz:60px}
/* eigene Zeichenebene: sonst bleiben in Firefox nach dem weichen Scrollen
   Reste der Nachbarkarte am Rand stehen, bis etwas anderes neu gezeichnet wird.
   Die Bildlaufleiste bleibt verborgen, gescrollt wird über die Pfeile,
   Wischen und das Mausrad. */
.karussell__bahn,.karten--karussell .karten__raster{
  contain:paint;scrollbar-width:none;-ms-overflow-style:none;
}
.karussell__bahn::-webkit-scrollbar,
.karten--karussell .karten__raster::-webkit-scrollbar{display:none}
.karussell__pfeil{
  position:absolute;top:calc(50% - 22px);z-index:2;width:44px;height:44px;border:0;
  border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;
  box-shadow:0 8px 20px rgba(20,26,60,.16);display:grid;place-items:center;
}
.karussell__pfeil:hover{color:var(--orange)}
.karussell__pfeil[hidden]{display:none}
.karussell__pfeil--links{left:-6px}
.karussell__pfeil--rechts{right:-6px}
/* Füllt der Inhaltskasten das Fenster (1240 px plus 2 × 6 px), stünden die
   Pfeile 6 px über den Rand; die Seite würde seitlich scrollbar. */
@media (max-width:1252px){
  .karussell__pfeil--links{left:0}
  .karussell__pfeil--rechts{right:0}
}

/* =========================================================================
   Fußzeile
   ========================================================================= */
.foot{background:var(--navy-deep);padding:26px 0;margin-top:auto;color:#C9CEE0;font-size:15px}
/* gilt für jedes Menü in der Fußzeile, gleich an welcher Position es hängt */
.foot ul{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.foot li{margin:0;padding:0;list-style:none}
.foot li::marker{content:""}
/* Joomla hängt auch der Fußzeilen-Liste die Klasse nav an; deren nowrap
   gilt hier nicht, lange Einträge brechen um. */
.foot a{color:#fff;text-decoration:none;white-space:normal}
.foot a:hover{color:var(--orange)}
.foot li > ul{display:none}
.foot p{margin:12px 0 0;text-align:center}
.foot__copy{margin:14px 0 0;text-align:center;font-size:14px;color:#8E97BE}

/* =========================================================================
   Schmale Bildschirme
   ========================================================================= */
@media (max-width:980px){
  :root{
    --hdr-full:56px;--logo-top:8px;--logo-pad:10px;--frame-w:4px;
    --gutter:16px;--band-h:150px;--panel-hub:60px;
  }
  .hdr.is-scrolled{--hdr-base:52px;--logo-size:42px;--logo-top:calc((var(--header-h) - var(--logo-size)) / 2);--frame-w:3px;--logo-pad:6px}
  .hdr__inner{padding-left:calc(var(--gutter) + var(--logo-size) + 16px)}
  .is-compact,.suche-klein{--nav-einzug:calc(var(--gutter) + var(--logo-size) + 16px)}
  .hero__inner{
    grid-template-columns:1fr;padding-bottom:150px;min-height:0;
    padding-top:max(40px, calc(var(--logo-ueberstand,0px) + 20px));
  }
  .hero__media{max-width:440px}
  .panel{padding:30px 22px 38px;border-radius:12px}
  .panel--spalten{grid-template-columns:minmax(0,1fr) !important}
  .hat-hero .karten{margin-top:-120px}
  .karussell,.karten--karussell{--pfeil-platz:52px}
}

@media (max-width:420px){
  /* auf sehr schmalen Telefonen zusätzlich Platz sparen */
  .is-compact{--btn-h:38px;--btn-pad:14px}
  .is-compact .btn{font-size:12px}
  .is-compact .actions{gap:10px}
  .is-compact .actions::before{display:none}
  /* Kontakt-Knopf als Briefsymbol: Mit Beschriftung (93 px) ragte er unter
     412 px über den Rand der Kopfzeile. Der Text bleibt für Screenreader. */
  .is-compact .actions a.btn{position:relative;width:40px;padding:0;font-size:0}
  .is-compact .actions a.btn::before{
    content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;
    -webkit-mask:var(--brief) center/contain no-repeat;mask:var(--brief) center/contain no-repeat;
    --brief:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2'/%3E%3Cpath d='m4 7.5 8 6 8-6'/%3E%3C/svg%3E");
  }
}

@media (max-width:360px){
  /* Auch mit Briefsymbol reicht der Platz unter 345 px nicht: Der Abstand
     zwischen Burger und Suche schrumpft. */
  .hdr__inner.is-compact{gap:10px}
}

@media (max-width:560px){
  body{font-size:16px}
  .abschnitt-titel,.inhalt h2,.modul__titel{font-size:22px}
  .karten__raster{--luecke:18px}
  /* schmalere Zellen: Der gewonnene Platz geht an die Textspalte */
  .inhalt th,.inhalt td{padding:9px 8px}
}

/* --- Druck --------------------------------------------------------------- */
@media print{
  .hdr,.foot,.hex,.karussell__pfeil,.skip{display:none !important}
  body{background:#fff;color:#000}
  .panel{box-shadow:none;padding:0}
}