/* ======================================================================
   01. SCHRIFTEN (@font-face)
   ====================================================================== */

@charset "UTF-8";

@font-face {font-display: swap; font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("../fonts/material-icons-v145-latin-regular.woff2") format("woff2");}

/* nunito-sans-200 - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: normal; font-weight: 200; src: url('../fonts/nunito-sans-v19-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-200italic - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: italic; font-weight: 200; src: url('../fonts/nunito-sans-v19-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-300 - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: normal; font-weight: 300; src: url('../fonts/nunito-sans-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-300italic - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: italic; font-weight: 300; src: url('../fonts/nunito-sans-v19-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-regular - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; src: url('../fonts/nunito-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-italic - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; src: url('../fonts/nunito-sans-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-500 - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: normal; font-weight: 500; src: url('../fonts/nunito-sans-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-500italic - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: italic; font-weight: 500; src: url('../fonts/nunito-sans-v19-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-600 - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; src: url('../fonts/nunito-sans-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-600italic - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: italic; font-weight: 600; src: url('../fonts/nunito-sans-v19-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-700 - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; src: url('../fonts/nunito-sans-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-700italic - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: italic; font-weight: 700; src: url('../fonts/nunito-sans-v19-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-800 - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; src: url('../fonts/nunito-sans-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-800italic - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: italic; font-weight: 800; src: url('../fonts/nunito-sans-v19-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-900 - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: normal; font-weight: 900; src: url('../fonts/nunito-sans-v19-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* nunito-sans-900italic - latin */
@font-face {font-display: swap;  font-family: 'Nunito Sans'; font-style: italic; font-weight: 900; src: url('../fonts/nunito-sans-v19-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}

/* open-sans-300 - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('../fonts/open-sans-v44-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-300italic - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('../fonts/open-sans-v44-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-regular - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-italic - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('../fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-500 - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: normal; font-weight: 500; src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-500italic - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: italic; font-weight: 500; src: url('../fonts/open-sans-v44-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-600 - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-600italic - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: italic; font-weight: 600; src: url('../fonts/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-700 - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-700italic - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('../fonts/open-sans-v44-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-800 - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: normal; font-weight: 800; src: url('../fonts/open-sans-v44-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}
/* open-sans-800italic - latin */
@font-face {font-display: swap;  font-family: 'Open Sans'; font-style: italic; font-weight: 800; src: url('../fonts/open-sans-v44-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */}


/* ======================================================================
   02. VARIABLEN (:root)
   ====================================================================== */

:root {
  --font-primary: "Nunito Sans";
  --color-font: #1d1d1b;
  --color-primary: #03c8be; /* Tuerkis */
  --color-secondary: #021564; /* Dunkelblau */
  --color-dark-bg: #1e2731; /* Blau-Schwarz */
  --color-dark-grey: rgb(102,102,102);   /* Dunkelgrau */
  
  --color-border: rgb(203, 203, 203); /* mittleres Grau */
  --color-soft: rgb(241, 241, 241); /* grau wie Seitenhintergrund */
  --color-contrast:#1D1D1B; /* Schwarz */
  --color-tabs:rgb(230, 149,0); /*Orange */
  --color-tabs-soft:rgb(230, 149,0, 0.7); /*Orange transparenz*/
  --color-boosting:hsl(27, 100%, 47%);
  --color-page: rgb(241, 241, 241); /* Seitenhintergrund */
  --color-error:#D80B0B;
  --color-notice:#E69500;
  --color-success:#008000;
  --color-advice: #CC0000; /*Rot */

  --bs-primary: #03c8be;/* Tuerkis */
  --bs-primary-rgb: 3, 200, 190;
  --bs-secondary: #021564;
  --bs-secondary-rgb: 2, 21, 100;
  --bs-body-font-family: var(--font-primary), Arial, sans-serif;
  --bs-body-font-size: 16px;
  --bs-body-font-size-bigger: 1.4em;
  --bs-body-line-height: 1.42857143;
  --bs-body-font-size-small: 0.8em;
  --bs-body-color: var(--color-font);
  --bs-border-color: var(--color-border);
  --bs-link-color-rgb: 29, 29, 27;
  --bs-link-hover-color-rgb: 29, 29, 27;
  --bs-card-spacer-y: 0.7rem;
  
  /* Abstände */
  --margin-primary:30px;
  --margin-small:20px;
  --margin-smaller:10px;
  --margin-large:40px;
  --margin-larger:60px;
}


/* ======================================================================
   03. NORMALIZE / BROWSER-RESET
   ====================================================================== */

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {line-height:1.15; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; min-height:100%;}

body {margin:0; min-height:100%; overflow-x:clip;
  background: var(--color-page);
  -webkit-font-smoothing: antialiased;
  
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  -webkit-text-size-adjust: 100%;

}

hr {box-sizing:content-box}

pre {font-family:monospace,monospace}

a {background-color:transparent}

abbr[title] {border-bottom:none}

b,strong {font-weight:bolder}

code,kbd,samp {font-family:monospace,monospace}

small {font-size:80%}

sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline}

sub {bottom:-.25em}

sup {top:-.5em}

img {border-style:none; height:auto; max-width:100%;}

button,input,optgroup,select,textarea {font-family:inherit}

[type=button],[type=reset],[type=submit],button {-webkit-appearance:button}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {border-style:none;padding:0}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {outline:1px dotted ButtonText}

fieldset {padding:.35em .75em .625em}

legend {box-sizing:border-box;white-space:normal}

progress {vertical-align:baseline}

textarea {overflow:auto}

[type=checkbox],[type=radio] {box-sizing:border-box}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {height:auto}

[type=search] {-webkit-appearance:textfield}

[type=search]::-webkit-search-decoration {-webkit-appearance:none}

::-webkit-file-upload-button {-webkit-appearance:button}

details {display:block}

summary {display:list-item}

template {display:none}

[hidden] {display:none}


/* ======================================================================
   04. BASIS-RESET (Listen, Formulare, Tabellen)
   ====================================================================== */

* {margin:0;padding:0}

a:active,a:focus,a:hover {outline:0;text-decoration:none}

ul {margin:0;padding:0}

figure {margin-bottom:15px;max-width:100%;position:relative}

strong {font-weight:600}

iframe {border:none;float:left;width:100%}

select {cursor:pointer;display:inline-block;font-size:14px;font-weight:400;height:40px;padding:8px 12px;width:100%}

label {color:#000;display:block;font-weight:400;margin-bottom:10px}

button {border:none}

.uneditable-input,input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],textarea {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;border:1px solid #fff;color:#888;width:100%;font-size:12px;font-weight:400;height:50px;line-height:30px;outline:0;padding:10px;background:#fff;box-shadow:none;border-radius:0}

input:focus,textarea:focus {box-shadow:none!important;border-color:#616161!important}

form p {position:relative;width:100%}

form p span i {color:#474747;left:16px;position:absolute;top:13px}

option {padding:5px 15px}

li {line-height:28px;list-style:none}

ul ul {margin-left:5px}

ol {float:none;list-style:decimal;padding-left:15px}

ol ol {margin-left:20px}

ol li {list-style:decimal;width:100%}

table {background-color:transparent; max-width:100%; margin-bottom:15px; width:100%;}

th {text-align:left}

table>tbody>tr>td,table>tbody>tr>th,table>tfoot>tr>td,table>tfoot>tr>th,table>thead>tr>td,table>thead>tr>th {border-top:1px solid #d2d2d2;border:1px solid #d2d2d2;line-height:2.5;padding-left:3px;text-align:center;vertical-align:top}

table thead tr th {border-top:1px solid #d2d2d2;text-align:center;text-transform:capitalize}

.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th {border-top:1px solid #d2d2d2}

table>thead>tr>th {border-bottom:1px solid #d2d2d2;vertical-align:bottom}

table>caption+thead>tr:first-child>td,table>caption+thead>tr:first-child>th,table>colgroup+thead>tr:first-child>td,table>colgroup+thead>tr:first-child>th,table>thead:first-child>tr:first-child>td,table>thead:first-child>tr:first-child>th {border-bottom:0}

table>tbody+tbody {border-top:2px solid #d2d2d2}

.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th {padding:6px 10px}

p ins {color:#888}

dl dd {margin-left:20px}

address {font-style:italic}


/* ======================================================================
   05. TYPOGRAFIE (Überschriften)
   ====================================================================== */

h1,h2,h3,h4,h5 {var(--color-font); font-family:var(--font-primary); font-weight:800;}

h1, .h1 {
  font-size: 2.6rem;
}

h2, .h2 {
  font-size: 2.0rem;
}

h3, .h3 {
  font-size: 1.8rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}


/* ======================================================================
   06. LINKS (a, .more, .noline)
   ====================================================================== */

a:hover {color:var(--color-border);}

a.more {
  position: relative;
  color: var(--color-font);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  z-index: 0;
  letter-spacing: 0.5px;
}

a.more::before {
  position: absolute;
  content: "";
  background: #dddddd;
  bottom: -3px;
  left: -7px;
  width: 20px;
  height: 12px;
  z-index: -1;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
}

a.more:hover {
  color: var(--color-dark-grey);
}

.more:hover:before {
  width: calc( 100% + 14px );
  transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: width 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.noline a, a.noline {text-decoration:none;}


/* ======================================================================
   07. LAYOUT (.page, .contentwrapper) & Material-Icons
   ====================================================================== */

.clearer {clear:both;}

.page {
  background: var(--color-page);
}

.contentwrapper {
  max-width: 1050px;
  min-height: 100vh;
  padding: 0 25px 20px;
  background: #fff;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

@media (max-width: 991.98px) {
  /* Tablet */
  .contentwrapper {
      padding-right: 20px;
      padding-left: 20px;
    }
}

@media (max-width: 767.98px) {
  /* Mobile */
  .contentwrapper {
      padding-right: 12px;
      padding-left: 12px;
    }
}

.material-icons {
  display: inline-block;
  font-family: "Material Icons";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ======================================================================
   08. BUTTONS & TEXT-LINKS
   ====================================================================== */

.btn-primary {
  --bs-btn-color: var(--color-font);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-dark-bg);
  --bs-btn-hover-border-color: var(--color-dark-bg);
  --bs-btn-active-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-dark-bg);
  --bs-btn-active-border-color: var(--color-dark-bg);
  font-weight: 900;
}

.btn-outline-primary {
  --bs-btn-color: var(--color-font);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-font);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
}

.text-link-general {
  color: var(--color-font);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}


/* ======================================================================
   09. HEADER (Logo, Regionswahl, Icons, Suche) inkl. Responsive
   ====================================================================== */

/* Header */
.site-header {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  z-index: 1020;
  background: #fff;
}

.site-header__top {
  display: grid;
  grid-template-columns: auto auto minmax(2rem, 1fr) auto;
  align-items: center;
  min-height: 80px;
  border-bottom: 1px solid var(--color-border);
}

/* Tag-Leiste im Header: gleiche Breite wie die anderen Linien */
.site-header .container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

.site-logo {
  display: inline-flex;
  align-items: center;
}

.site-logo img {
  display: block;
  width: 250px;
  max-width: 100%;
  height: auto;
}

.region-picker {
  margin-left: 28px;
}

.region-picker__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 7px 12px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 10px;
}

.region-picker__toggle:hover,
.region-picker__toggle:focus-visible,
.region-picker__toggle.show {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: #fff;
}

.region-picker__toggle::after {
  margin-left: 2px;
}

.region-picker__menu {
  min-width: 250px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
}

.region-picker__menu .dropdown-header {
  color: var(--color-font);
  font-size: 17px;
  font-weight: 700;
}

.region-picker__menu .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.region-picker__menu .dropdown-item.active,
.region-picker__menu .dropdown-item:active {
  color: var(--color-font);
  background: rgba(var(--bs-primary-rgb), 0.18);
}

.region-picker__menu .dropdown-item:hover,
.region-picker__menu .dropdown-item:focus {
  background: rgba(var(--bs-primary-rgb), 0.12);
}

.region-picker__menu .material-icons {
  font-size: 17px;
}

.site-header__actions {
  grid-column: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.social-links {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.social-links img {
  display: block;
  width: 22px;
  height: 22px;
}

.header-divider {
  width: 1px;
  height: 28px;
  background: #e4e4e4;
}

.header-icon-button,
.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px;
  color: var(--color-font);
  background: transparent;
  border: 0;
}

.header-icon-button:hover,
.header-icon-button:focus-visible,
.header-icon-button.show,
.login-button:hover,
.login-button:focus-visible {
  color: var(--color-primary);
  background: transparent;
}

.header-icon-button .material-icons {
  font-size: 31px;
}

.login-button {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.login-button .material-icons {
  font-size: 31px;
}

.menu-button .material-icons {
  font-size: 37px;
}

.search-dropdown__menu {
  width: min(400px, calc(100vw - 32px));
  padding: 12px;
}

.search-dropdown__menu .form-control {
  min-width: 0;
}

.search-dropdown__menu .form-group input {
    padding: 2px;
    margin-bottom: 14px;
    border: solid 1px var(--color-border);
 }

@media (min-width: 576px) and (max-width: 767.98px) {
  /* Fix: contentwrapper hat hier 12px Padding, Header hatte -15px Margin = 3px Ueberlauf (horizontales Scrollen) */
  .site-header { margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:12px; }
}

@media (max-width: 575.98px) {
  /* Handy: eine Spalte */
  .site-header {
        margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
    }
}

@media (max-width: 991.98px) {
  .site-header__top {
      grid-template-columns: auto auto minmax(1rem, 1fr) auto;
      min-height: 84px;
    }
  .site-logo img {
      width: 205px;
    }
  .region-picker {
      margin-left: 18px;
    }
  .social-links {
      display: none;
    }
  .header-divider {
      display: none;
    }
  .site-header__actions {
      gap: 12px;
    }
}

@media (max-width: 767.98px) {
  /* Wie Desktop: Logo | Picker | Platz | Aktionen in einer Zeile */
  .site-header__top {
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      column-gap: 6px;
      min-height: 64px;
      padding: 8px 0;
    }
  .site-logo {
      min-width: 0;
    }
  .site-logo img {
      width: 130px;
    }
  .region-picker {
      margin-left: 4px;
    }
  .region-picker__toggle {
      min-height: 34px;
      padding: 4px 6px;
      font-size: 14px;
    }
  .region-picker__toggle .material-icons {
      font-size: 18px;
    }
  .site-header__actions {
      gap: 2px;
    }
  .login-button span {
      display: none;
    }
  .header-icon-button,
    .login-button {
      padding: 3px;
    }
  .header-icon-button .material-icons,
    .login-button .material-icons {
      font-size: 26px;
    }
  .menu-button .material-icons {
      font-size: 30px;
    }
}

@media (max-width: 479.98px) {
  .site-logo img {
      width: 155px;
    }
  .site-header__actions {
      gap: 3px;
    }
  .header-icon-button,
    .login-button {
      padding: 3px;
    }
}


/* ======================================================================
   10. NAVIGATION (Localnav, Offcanvas, Navigation-Grid) inkl. Responsive
   ====================================================================== */

/* Quicklinks */
.localnav {
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

.localnav .nav {
  --bs-nav-link-color: var(--color-font);
  --bs-nav-link-hover-color: var(--color-font);
  --bs-nav-underline-border-width: 2px;
  justify-content: center;
  gap: clamp(18px, 4vw, 58px);
  min-height: 48px;
  padding: 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.localnav .nav-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.localnav .nav-link.active {
  color: var(--color-font);
  border-bottom-color: var(--color-primary);
}

/* Offcanvas navigation */
.main-navigation {
  --bs-offcanvas-width: min(760px, 100vw);
}

.main-navigation .offcanvas-header {
  border-bottom: 1px solid var(--bs-border-color);
}

.main-navigation .offcanvas-title {
  font-weight: 900;
}

.navigation-search {
  margin-bottom: 24px;
}

.navigation-home {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  color: var(--color-font);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid var(--bs-border-color);
}

.navigation-home:hover {
  color: var(--color-primary);
}

.navigation-accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
  --bs-accordion-active-color: var(--color-font);
  --bs-accordion-active-bg: rgba(var(--bs-primary-rgb), .1);
}

.navigation-accordion .accordion-button {
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.navigation-accordion .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.navigation-grid {
  display: grid;
  grid-template-columns: repeat(var(--nav-cols, 3), max-content);
  justify-content: start;        
  justify-items: start;
  align-items: start;
  column-gap: 100px;              
  row-gap: 4px;
}

.navigation-grid a,
.navigation-grid span {
  display: block;
  padding: 5px 0;
  color: var(--color-font);
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 4px;
}

.navigation-grid a:hover {
  color: var(--color-primary);
}

.navigation-grid--4 {
  --nav-cols: 4;
}

@media (max-width: 767.98px) {
  .localnav .nav {
      gap: 28px;
      min-height: 52px;
      padding: 0 4px;
      scroll-snap-type: x proximity;
    }
  .localnav .nav > * {
      scroll-snap-align: start;
    }
  .localnav .nav-link {
      min-height: 52px;
      font-size: 15px;
    }
  .main-navigation {
      --bs-offcanvas-width: 100vw;
    }
  /* Tablet: 2 Spalten */
  .navigation-grid {
      grid-template-columns: repeat(2, max-content);
    }
}

@media (max-width: 575.98px) {
  .navigation-grid {
      grid-template-columns: 1fr;
    }
}

@media (max-width: 479.98px) {
  .navigation-grid {
      grid-template-columns: 1fr;
    }
}


/* ======================================================================
   11. ARTIKELLISTEN (.item, .list, Bilder)
   ====================================================================== */

Artikel
.item {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 5px;
}

/* Abstand zwischen Listeneinträgen (Rubriken, Suche, Gesponserte) – alle Breiten */
.item.list {
  margin-top: 0;
  margin-bottom: 1.75rem;
}

.item .notes {
  font-size: 18px;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-primary);
  letter-spacing: .96px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-weight: 400;
}

.item .notes span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  background: var(--color-primary);
  color: var(--color-font);
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
}

.notes-sponsor {margin-bottom:1.0em;}

.notes-sponsor span {
	font-size: 16px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: normal;
  background: var(--color-primary);
  color: var(--color-font);
  padding: 4px 8px;
  font-weight: 600;
}

.item span.news-list-tags {
	font-size: var(--bs-body-font-size-small);
}

.list h3 a, .aktu-news-suggestions-list h3 a {
	text-decoration:none;
	font-weight:700;
	line-height:1.2;
}

figure.article_list_medium {
  position: relative;
  margin-bottom: 0;
}

.list figure {overflow:hidden;}

.item figure img, article.articleDetail figure img {width:100%; border:solid 1px var(--color-soft);}

.news-img-wrap {display:block;}

/* Search */
.news-search-result .item.list {
    min-height: 120px;
    margin-bottom: 1rem;  
}

@media (max-width: 767.98px) {
  /* Abstand zwischen Bild und Text */
  .item.list .row > .col-md-8 { margin-top: .75rem; }
}

/* ======================================================================
   12. ARTIKELDETAIL (article.articleDetail), Autor, Meta
   ====================================================================== */

article.articleDetail {margin-top:30px;}

article.articleDetail ul.news-list-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 16px 0 10px;
}

article.articleDetail ul.news-list-tags li {
	font-size: var(--bs-body-font-size-small);
	border:solid 1px var(--color-primary);
	padding:6px 10px;
	color: var(--color-secondary);
}

article.articleDetail ul.news-list-tags li a {
text-decoration:none}

article.articleDetail .teaser-text {
	font-weight:700;
	font-size: var(--bs-body-font-size-bigger);
}

article.articleDetail .imagewrap, figure.article_list_medium  div.isoha {
position:relative;
margin-bottom:10px;
}

article .card-body a {text-decoration:none;}

article .card-body a:hover {color:var(--color-font)}

p.news-img-caption {font-style:italic; margin:6px 0 20px 0;}

.news-authors, .news-list-date, .suggestion-detail-meta {
font-size: 0.9em;
  line-height: 1.2em;
  margin: 15px 0;
  box-sizing: border-box;
  border-bottom: solid 1px var(--color-border);
  padding-bottom:20px;
}

.list-list-date {
font-size: 0.9em;
  line-height: 1.2em;
  box-sizing: border-box;
}

.author-profile {
  box-sizing: border-box;
}

.author-profile img {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: var(--color-primary) solid 2px;
  vertical-align:middle;
}

.author-info {
  margin-left: 15px;
  vertical-align: middle;
  display: inline-block;
}

.author-info a {text-decoration:none;}

.author-info a strong {font-weight:700}

/* ------------------------------------------------ */
/* News Card Design auf in den Details/Artikeln     */
/* ------------------------------------------------ */
article.articleDetail .imagewrap {
	margin-bottom: 0;
}

article.articleDetail .imagewrap img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1;        
	object-fit: cover;
	object-position: center;
}

@media (max-width: 767.98px) {
  article.articleDetail .imagewrap img {
  		aspect-ratio: 16 / 9;
  	}
}

/* Spitzmarke */
article.articleDetail .notes {
	margin-bottom: 6px;
}

article.articleDetail .notes span {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-dark-grey);
}

article.articleDetail .header h1 {
	margin-bottom: 14px;
}


/* ======================================================================
   13. ASIDE, RELATED, TOPNEWS, SPONSORLIST
   ====================================================================== */

@media (min-width: 768px) {
  .meta-fullsize {display:none;}
}

@media (max-width: 767.98px) {
  .meta-aside {
      display: none;
    }
}

.aside {padding-left:25px;overflow:hidden;}

.news-related {
	margin-top:40px;
	padding-top:15px;
	border-top:solid 2px var(--color-primary);
}

.news-related span.news-related-news-date {
	padding-right:25px;
	color:var(--color-dark-grey);
}

.news-related a {
	text-decoration:none;
	font-weight:600;
}

.news-related ul {padding-left:20px;}

.news-related ul li {
	list-style-type: square;
	color:var(--color-primary)
	}

.topnews {
background:var(--color-tabs-soft); 
border-width: var(--bs-border-width);
/* border-color: var(--bs-border-color-translucent);*/
border-color:var(--color-primary);
border-radius: var(--bs-border-radius);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

margin-top:20px; margin-bottom:10px;padding:10px; padding-bottom:0;
}

.topnews figure {
	margin:0px;
	
}

.topnews figure img {border:none;}

.sponsorlist {
	padding:16px;
	margin:50px 0;
	background:#EEE;
}

.sponsorlist .item {
	border-bottom: solid 1px #DFDFDF;
}

.sponsorlist .item a {text-decoration: none;}

.sponsorlist .item h4 {font-weight:500;}

@media (max-width: 767.98px) {
  .sponsorlist .notes {
      margin-top: 10px;
    }
}


/* ======================================================================
   14. INFINITE SCROLL
   ====================================================================== */

/* Infinite Scroll */
.infinite-scroll-active [data-infinite-scroll-pagination] {
    display: none;
}

.infinite-scroll-status {
    display: none;
    padding: 20px 0;
    text-align: center;
}

.infinite-scroll-status.is-loading {
    display: block;
}

[data-infinite-scroll-trigger] {
    width: 100%;
    height: 1px;
}


/* ======================================================================
   15. TAG-NAVIGATION (.news-tag-nav)
   ====================================================================== */

/* =========================================================
   Horizontale Tag-Navigation
   ========================================================= */
.news-tag-nav {
    position: relative;
    width: 100%;
    overflow: hidden; border-bottom: 1px solid #ccc;}

.news-tag-nav-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    padding-left: 45px;
    padding-right: 45px;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.news-tag-nav-inner::-webkit-scrollbar {
    display: none;
}

.news-tag-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;

    font-size: 0.9em;

    margin-right: 28px;
    padding: 10px 0 9px;

    color: #000;
    text-decoration: none;
}

.news-tag-nav-arrow {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    padding: 0;

    border: 0;
    background: #fff;

    color: #000;
    font-size: 2rem;
    line-height: 1;

    cursor: pointer;
}

.news-tag-nav-arrow-left {
    left: 0;
}

.news-tag-nav-arrow-right {
    right: 0;
}

.news-tag-nav-arrow.is-hidden {
    visibility: hidden;
    pointer-events: none;
}


/* ======================================================================
   16. VORSCHLÄGE / SUGGESTIONS
   ====================================================================== */

/* Suggestions */
.aktu-news-suggestions-list-body {
	height:120px;
	overflow:hidden;
}

article.aktu-news-suggestions-item {
	margin-bottom:100px;
	border-bottom: solid 1px var(--color-border);
}

.suggest-new-entrance {
	padding-top:15px;
}

.aktu-news-suggestions-list h3 {
	font-size:1.1em;
}

.suggestion-meta {
	font-size: 0.9em;
	line-height: 1.2em;
	margin: 5px 0;
	box-sizing: border-box;
	padding-top: 15px;
	 display: flex;
  justify-content: space-between;
  align-items: center;
	}

.suggestion-vote-row {
    gap: 20px;
}

form.suggestion-list {
    margin: 0;
    padding: 0;
    border: 0;
    width: auto;
    display: block;
}

form.suggestion-list > div {
    display: none;
}

form.suggestion-list .btn {
    margin: 0;
    white-space: nowrap;
}

input[type="submit"].test,
button.test {
    /* Erzwingt die Material-Icons Schriftart */
    font-family: 'Material Icons' !important;
    font-size: 24px;       /* Größe des Icons */
    color: #333333;        /* Farbe des Icons */
    
    /* Standard-Button-Styles entfernen */
    background: none;
    border: none;
    padding-right: 8px;
    margin: 0;
    cursor: pointer;
    
    /* Zentrierung des Icons */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Text-Eigenschaften für Icons optimieren */
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    
    /* Runder Hover-Effekt */
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover-Effekt: Hintergrund wird leicht grau, Icon wird blau */
input[type="submit"].test:hover,
button.test:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #007bff; 
}

/* Fokus-Rahmen für Tastatur-Nutzer */
input[type="submit"].test:focus-visible,
button.test:focus-visible {
    outline: 2px solid #007bff;
}

.suggestion-meta-first {
	border-top: solid 1px var(--color-soft);
}

a.suggestion-link {
	color: var(--color-primary);
	font-weight:700;
}

span.meta-item {
	display:flex;
	align-items: center;
}

span.meta-item .material-icons {padding-right: 10px;}

.suggestion-detail-meta .advice {
	color: var(--color-error);
}

span.meta-item .advice {
	color: var(--color-advice);
	padding:10px 0 10px 5px;
}


/* ======================================================================
   17. MODAL, LOGIN, FORMULARE
   ====================================================================== */

/* =================*/
/* Login / Forms */
/*==================*/
/* Modal */
.modal {
  z-index: 1055;
}

.modal-backdrop {
  z-index: 1050;
}

.modal-content {
padding: 10px;
}

.login-header,
.login-footer {
  border-color: var(--color-border);
}

.modal-content form fieldset, .main div .login-footer form fieldset {
	padding:0px;
}

.modal-content form fieldset input, .main div .login-footer form fieldset input,
form.newsnip fieldset input, form.newsnip fieldset textarea {
	border-color: var(--color-border);
	margin-bottom:10px;font-size:1em;
}

.main div .login-footer form fieldset input {
	max-width:240px; margin-bottom:40px;}

.modal-content form fieldset label, .modal-content form fieldset legend, .main div .login-footer form fieldset label, .main div .login-footer form fieldset legend,
form.newsnip fieldset label, form.newsnip fieldset legend {
	display:none;
}

.modal-content form fieldset label.show, .main div .login-footer form fieldset label.show {display:block;}

.main .login-footer { 
	margin-bottom:30px;
}

.form-control:focus,
.form-check-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

#sfrForm input[type="text"],
#sfrForm input[type="email"],
#sfrForm input[type="password"],
#sfrForm input[type="file"],
#sfrForm select,
#sfrForm textarea,
.tx-sf-register input[type="text"],
.tx-sf-register input[type="email"],
.tx-sf-register input[type="password"],
.tx-sf-register input[type="file"],
.tx-sf-register select,
.tx-sf-register textarea {
    border: 1px solid var(--color-border) !important;
    background-color: #ffffff !important;
    border-radius: 0.375rem;
}

#sfrForm input:focus,
#sfrForm textarea:focus,
.tx-sf-register input:focus,
.tx-sf-register textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(3, 200, 190, 0.25) !important;
}


/* ======================================================================
   18. KOMMENTARE (pwcomment)
   ====================================================================== */

/* Comments */
.tx-pwcomment-pi1 {padding-bottom:35px;}

.tx-pwcomment-pi1 * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tx-pwcomment-pi1 ul {
    list-style-type: none;
}

.comments-container {
    margin: 60px auto 15px;
    max-width: 768px;
}

.comments-list {
    margin-top: 30px;
    position: relative;
}

.comments-list:before {
    content: '';
    width: 2px;
    height: 100%;
    background: #c7cacb;
    position: absolute;
    left: 32px;
    top: 0;
}

.comments-list:after {
    content: '';
    position: absolute;
    background: #c7cacb;
    bottom: 0;
    left: 28px;
    width: 10px;
    height: 10px;
    border: 3px solid #c7cacb;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.comments-list.no-avatar:before {
    display: none;
}

.comments-list.no-avatar:after {
    display: none;
}

.comments-list.no-avatar .comment-box:before, .comments-list.no-avatar .comment-box:after {
    display: none;
}

.comments-list.no-avatar .comment-box {
    float: none;
}

.reply-list:before, .reply-list:after {display: none;}

.reply-list li:before {
    content: '';
    width: 60px;
    height: 2px;
    background: #c7cacb;
    position: absolute;
    top: 25px;
    left: -55px;
}

.comments-list li {
    margin-bottom: 15px;
    display: block;
    position: relative;
}

.comments-list li:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    width: 0;
}

.reply-list {
    padding-left: 88px;
    clear: both;
    margin-top: 15px;
}

.comments-list .comment-avatar {
    width: 65px;
    height: 65px;
    position: relative;
    z-index: 99;
    float: left;
    border: 1px solid #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    overflow: hidden;
    background: var(--color-soft);
}

.comments-list .comment-avatar img.default-user-icon {
    padding: 8px 5px 5px;
}

.comments-list .comment-avatar img {
    width: 100%;
    height: 100%;
}

.reply-list .comment-avatar {
    width: 50px;
    height: 50px;
}

.comment-main-level:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    clear: both;
}

.comments-list .comment-box {
    width: 80%;
    float: right;
    position: relative;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

.comments-list .comment-box:before, .comments-list .comment-box:after {
    content: '';
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    border-width: 10px 12px 10px 0;
    border-style: solid;
    border-color: transparent var(--color-soft);
    top: 12px;
    left: -11px;
}

.comments-list .comment-box:before {
    border-width: 11px 13px 11px 0;
    border-color: transparent rgba(0,0,0,0.05);
    left: -12px;
}

.reply-list .comment-box {
    width: 85%;
}

.comment-box .comment-head {
    background: var(--color-soft);
    padding: 14px 12px;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
}

.comment-box .comment-head i {
    float: right;
    margin-left: 14px;
    position: relative;
    top: 2px;
    color: #A6A6A6;
    cursor: pointer;
    -webkit-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.comment-box .comment-head i:hover {
    color: #03658c;
}

.comment-box .comment-name {
    color: #283035;
    font-weight: bold;
    float: left;
    margin: 0 10px 0 0;
}

.comment-box .comment-date {
    line-height: 1.1;
}

.comment-box .comment-name a {
    color: #283035;
}

.comment-box .comment-head span {
    float: left;
    color: #999;
    font-size: 13px;
    position: relative;
    top: 5px; 
}

.comment-box .comment-content {
    background: #FFF;
    padding: 12px;
    font-size: 15px;
    color: #595959;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.comment-box .comment-name.by-author, .comment-box .comment-name.by-author a {color: #03658c;}

.comment-box .comment-name.by-author:after {
    content: 'autor';
    background: #03658c;
    color: #FFF;
    font-size: 12px;
    padding: 3px 5px;
    font-weight: 700;
    margin-left: 10px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.comment-actions {
    position: absolute;
    right: 12px;
    top: 10px;
    /*font-size:0.9em;*/
}

.comment-actions .votesum {
    font-size: 1.1em !important;
    color: #000 !important;
    margin-right: 5px;
}

.comment-actions a.upvote,
.comment-actions a.downvote,
.comment-actions a.reply {
    margin: 0 2px;
}

.comment-actions a.reply {
    margin-left: 25px;
    vertical-align: text-bottom;
}

.comment-actions a.upvote,
.comment-actions a.downvote {
    display: inline-block;
    overflow: hidden;
    width: 18px;
    height: 23px;
   
}

.comment-actions a.upvote:before,
.comment-actions a.downvote:before,
.comment-actions a.reply:before {
    content: '';
    background: url('../img/thumbs-up.svg') no-repeat;
    background-size: cover;
    opacity: 0.6;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 4px;
}

.comment-actions a.upvote:hover:before,
.comment-actions a.downvote:hover:before,
.comment-actions a.reply:hover:before {
    opacity: 1;
}

.comment-actions a.downvote:before {
    background-image: url('../img/thumbs-down.svg');
}

.comment-actions a.reply:before {
    background-image: url('../img/reply.svg');
}

.comment-actions a.upvote.voted:before {
    opacity: 1;
    background-image: url('../img/thumbs-up-active.svg');
}

.comment-actions a.downvote.voted:before {
    opacity: 1;
    background-image: url('../img/thumbs-down-active.svg');
}

.comment-actions .voted-positive { color: green !important; }

.comment-actions .voted-negative { color: red !important; }

form.commentform {
	margin-top:30px;
}

form.commentform div {margin: 10px 0;}

#writeComment {
    max-width: 768px;
    margin: 30px auto;
}

#writeComment h3 {
    padding: 20px 0 8px;
}

#writeComment div.hide_initally {
    display: none;
}

#writeComment label {
    display: block;
}

#writeComment label span {
    font-size: 10px;

}

#writeComment label span a {
    text-decoration: none;

}

#writeComment input[type=text] {
    font-size:0.9em;
    width: 66%;
    padding: 2px;
    margin-bottom: 14px;
    border: solid 1px var(--color-border);
}

#writeComment textarea {
    width: 90%;
    line-height: 16px;
    padding: 5px;
	font-size:0.9em;
    margin-bottom: 10px;
    min-height:100px;
    border: solid 1px var(--color-border);
}

#writeComment input.btn {
    padding: 2px 10px;
    margin-top: 15px;

}

/*
#writeComment input.button:hover {
	background-color: var(--color-soft);
}*/
.tx-pwcomment-pi1 .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.tx-pwcomment-pi1 .alert-success {
    color: var(--color-dark-grey);
    background-color: var(--color-primary);
    border-color: #d6e9c6;
    box-shadow: 0px 0.732px 4px 4px rgba(223, 223, 223, 0.75);
}

.tx-pwcomment-pi1 .alert-danger {
    color: var(--color-error);
    background-color: var(--color-soft);
    border-color: #ebccd1;
    font-weight:600;
    box-shadow: 0px 0.732px 4px 4px rgba(223, 223, 223, 0.75);
}

.tx-pwcomment-pi1 .alert-warning {

color: var(--color-error);
    background-color: var(--color-soft);
    border-color: #ebccd1;
    font-weight:600;
    margin-top:20px;
    box-shadow: 0px 0.732px 4px 4px rgba(223, 223, 223, 0.75);
}

@media only screen and (max-width: 766px) {
  .comments-container {
          width: 480px;
      }
  .comments-list .comment-box {
          width: 390px;
      }
  .reply-list .comment-box {
          width: 320px;
      }
}

#thanksForYourComment, #customMessages {
    list-style: none;
    margin: 0;
    padding: 0;
}

#thanksForYourComment li, #customMessages li {
    background: #ccffcc;
    border: 1px solid #009900;
    color: #009900;
    font-weight: bold;
    padding: 6px 10px;
    margin-bottom: 15px;
}

#customMessages li {
    background: #ffcccc;
    border-color: #990000;
    color: #990000;
}


/* ======================================================================
   19. BEWERTUNG (Rating) & SNIPS
   ====================================================================== */

.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    padding-bottom: 6px;
}

.rating input {
    display: none;
}

.rating label {
    font-size: 1.5rem;
    color: #ccc;
    padding: 0 5px;
    cursor: pointer;
    position: relative;
}

/* Standard Sterne (links nach rechts) */
.rating label::before {
    content: "\2605";
}

/* Hover-Effekt: Alle Sterne links vom aktuellen auch hervorheben */
.rating label:hover,
.rating label:hover ~ label {
    color: #ffc700;
}

/* Wenn ein Stern ausgewählt ist, färbe alle Sterne links davon */
.rating input:checked ~ label {
    color: #ffc700;
}

.static-rating {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

.static-rating .star {
    font-size: 1.3rem;
    color: #ccc;
    margin-right: 2px;
}

.static-rating .star.filled {
    color: #ffc700;
}

.rating-text {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    font-size: 0.9rem;
    color: #333;
}

/* Snips */
.snips .snip-header {
  margin: 30px 0 15px 0;
  line-height: 1.2em;
  font-size:1.0em;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--color-dark-grey);
  }

.snips .snip-list {
	padding:20px 0;
	border-top: solid 2px var(--color-primary);
	border-bottom: solid 2px var(--color-primary);
}

.snips .snip-list a {text-decoration:none;}

.snips .snip-list h5 {
	margin: 0;
  font-size: 1.0em;
  line-height: 1.2;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .01em;
  hyphens: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.snips footer { border-top: none; }


/* ======================================================================
   20. O-HA-KREIS (eine Variante für alle Layouts)
   ====================================================================== */

.oha-circle { --oha-circle-size: 72px;
  --oha-circle-color: var(--color-primary);
  --oha-circle-text-color: #222;
  --oha-circle-background-width: 2;
  --oha-circle-progress-width: 7;
  --oha-circle-animation-duration: 1000ms;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex: 0 0 var(--oha-circle-size);
  align-items: center;
  justify-content: center;
  width: var(--oha-circle-size);
  height: var(--oha-circle-size);
  color: var(--oha-circle-text-color); }

.oha-circle__svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;

    overflow: visible; z-index: 1;}

.oha-circle__background {
    fill: none;
    stroke: var(--oha-circle-color);
    stroke-width: var(--oha-circle-background-width);
}

.oha-circle__progress {
    fill: none;
    stroke: var(--oha-circle-color);
    stroke-width: var(--oha-circle-progress-width);
    stroke-linecap: round;

    stroke-dasharray: 100;
    stroke-dashoffset: 100;

    transform: rotate(-90deg);
    transform-origin: 50% 50%;

    transition:
        stroke-dashoffset
        var(--oha-circle-animation-duration)
        cubic-bezier(0.22, 1, 0.36, 1);
}

.oha-circle__marker {
    transform: rotate(0deg);
    transform-origin: 60px 60px;

    transition:
        transform
        var(--oha-circle-animation-duration)
        cubic-bezier(0.22, 1, 0.36, 1);
}

.oha-circle__marker-dot {
    fill: var(--oha-circle-color);
    stroke: #fff;
    stroke-width: 3;

    transform-box: fill-box;
    transform-origin: center;

    transition:
        opacity 200ms ease,
        transform 200ms ease;
}

.oha-circle.is-zero .oha-circle__progress {
    opacity: 0;
}

.oha-circle.is-zero .oha-circle__marker-dot {
    opacity: 0;
    transform: scale(0);
}

.oha-circle__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    line-height: 1;
    text-align: center;
    pointer-events: none;
}

.oha-circle__label {display:block; margin:0 0 3px; font-size:1em; font-weight:900; line-height:1;}

.oha-circle__value {display:block; font-size:0.9em; font-weight:400; line-height:1;}

@media (prefers-reduced-motion: reduce) {
  .oha-circle__progress,
      .oha-circle__marker,
      .oha-circle__marker-dot {
          transition: none;
      }
}

/* halbtransparente Scheibe UNTER dem Ring */
.oha-circle::before { content:""; position:absolute; inset:calc(var(--oha-circle-size) * .1); border-radius:50%; background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:0; }

.ohabadge { position:absolute; top:10px; right:10px; z-index:10; width:72px; height:72px; }

/* Artikeldetail: 80px */
article.articleDetail .ohabadge { top:12px; right:12px; width:80px; height:80px; }

article.articleDetail .oha-circle { --oha-circle-size:80px; }

article.articleDetail .oha-circle__label { margin-bottom:4px; font-size:14px; }

article.articleDetail .oha-circle__value { font-size:13px; }


/* ======================================================================
   21. SHARE & FOOTER
   ====================================================================== */

/* Socialshare */
.news-detail-share {
  margin: 30px 0 15px 0;
  line-height: 1.2em;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--color-dark-grey);
}

/* Footer */
footer {
  box-sizing: border-box;
  max-width: 100%;
  padding: 1.5rem 1rem;
  overflow-x: hidden;
  border-top: solid 2px var(--color-primary);
}

.footer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;            
  justify-content: center;
  gap: 0.75rem 1.3rem;        /* Zeilen- / Spaltenabstand */
}

.footer li {
  position: relative;
  padding-left: 0.9rem; 
  white-space: normal;
}

/* Türkiser Punkt*/
.footer li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--color-primary);     
}

.footer li:first-child {
  padding-left: 0;     /* kein Platz für den Punkt nötig */
}

.footer li:first-child::before {
  display: none;       /* Punkt beim Copyright ausblenden */
}

@media (max-width: 600px) {
  /* Mobil: untereinander, linksbündig, Copyright oben */
  .footer {
      display: grid;
      grid-template-columns: 1fr 1fr;   /* 2 Spalten */
      gap: 0.9rem 1.5rem;
      justify-content: stretch;
      align-items: start;
    }
  /* Copyright über beide Spalten, ohne Punkt */
  .footer li:first-child {
      grid-column: 1 / -1;
      margin-bottom: 0.2rem;
      opacity: 0.8;
    }
}


/* ======================================================================
   22. UMFRAGE (tx-poll)
   ====================================================================== */

/* Grundstyling für die Shariff-Buttonleiste */
/* POLL */
.tx-poll {margin-bottom:30px;}

.tx-poll .poll-answer-image,
.tx-poll .poll-answer-description {
	margin-left: 18px;
	font-style:italic;
}

.tx-poll .poll-question .poll-question-number {
	display: none;
}

.tx-poll .poll-question .poll-checkbox-user-answer,
.tx-poll .poll-question .poll-radiobutton-user-answer {
	display: inline-block;
}

.tx-poll div.poll-result-bar {
	width: 100%;
}

.tx-poll span.poll-result-bar {
	display: inline-block;
	background-color: var(--color-primary);
	height: 10px;
}

.tx-poll .poll-result-percent {
	display: inline-block;
	width: 75px;
}

.tx-poll .poll-result-answer {
	display: inline-block;
}

.tx-poll .poll-result-row {
	height: 70px;
	display: inline-block;
	width: 100%;
}

.tx-poll .poll-button {
	margin-top: 40px;
	display: inline-block;
	width: 100%;
}

.tx-poll .card-img-top {
	height: auto;
}

.tx-poll .typo3-messages {
	list-style: none;
	padding: 0;
}

/* Poll-Question */
.tx-poll .poll-question {
	padding-top: 15px;
	padding-bottom: 15px;
    width: 100%;
    display: inline-block;
}

.tx-poll .poll-question h5 {
color: var(--color-primary);
}

.tx-poll .poll-question .poll-question-answers {
	padding: 0;
    width: 100%;
    display: inline-block;
   
}

.tx-poll .poll-question .poll-question-label {
	font-weight:800;
	
}

.tx-poll .poll-question .poll-question-answers .poll-radio-user-answer {
    display: inline-block;
}

.tx-poll .poll-question .poll-question-answers .poll-radio {
	display: inline-block;
	width: 100%;
	float: left;
	font-weight:600;
}

.tx-poll .poll-question .poll-question-answers .poll-radiolabel {
	display: inline-block;
	float: left;
	margin-top: 2px;
}

.tx-poll .poll-question .poll-question-answers .poll-radiolabel label {
	font-weight: normal;
}

.tx-poll .poll-question.layout-inline-scaled .poll-question-answers .poll-answer {
	text-align: center;
}

.tx-poll .poll-question.layout-inline-scaled .poll-answer-scale {
	background-image: linear-gradient(90deg, red, yellow, green);
	height: 5px;
}

.tx-poll .poll-result-question {
    width: 100%;
}

/* Captcha - MathGuard */
.tx-poll .poll-captcha {
    margin-bottom: 16px;
}

.tx-poll .poll-captcha .poll-captcha-label {
    display: inline-block;
    width: 100%;
    margin-bottom: 8px;
}

.tx-poll .poll-captcha #mathguard {
    border-radius: 0;
}

.tx-poll .poll-captcha pre {
    overflow: hidden;
    color: #000000;
    font-size: 4px;
    font-weight: bold;
    padding: 0;
    margin: 0;
    line-height: 0;
    border: 0 solid;
}

.tx-poll .poll-captcha pre span {
    background-color: #000000;
    padding: 0;
    margin: 0;
    display: inline-block;
    height: 4px;
    width: 4px;
    overflow: hidden;
}

.tx-poll .poll-captcha pre span.space {
    background-color: transparent;
    color: transparent;
    padding: 0;
    margin: 0;
}

.tx-poll .message-error {
    color: #CC0000;
    font-weight: bold;
}


/* ======================================================================
   23. EVENTS (Filterleiste, Scroll-Wrapper, .card)
   ====================================================================== */

/* Scrollbar Design (WIP)   */
.scroll-wrapper {
    position: relative;
}

.scroll-fade-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.5));
    pointer-events: none;
    z-index: 10;
}

/* Event-Bilder: Box füllen, zuschneiden statt verzerren */
.card img.event-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* Event-Karten: Meta einzeilig, Titel max. 2 Zeilen */
.event-card__meta {
  display: block;
  font-size: .75rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-dark-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card__title {
  margin: .25rem 0 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-font);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;   /* immer 2 Zeilen Platz, damit alle Karten gleich hoch sind */
}

/* Event-Card Hover Effekt  */
.card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
}

.card:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow: 0 0.5em 0.5em rgba(0,0,0,.175) !important;
    cursor: pointer;
}

/* Filterleiste  */
.sticky-filter-bar {
    position: sticky;
    top: 0;
    z-index: 0;
    background-color: #ffffff;
    padding: 0.4rem 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
    border-top: 1px solid #eaeaea;
}

.sticky-filter-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.75rem 0;
}

/* Highlights: Desktop-Grid (1 groß + 3 klein, feste Gesamthöhe) */
.event-hl { display: none; }
@media (min-width: 992px) {
  .event-hl {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-template-rows: repeat(3, 150px);   /* Gesamthöhe = 3 × 150px + 2 Lücken */
    gap: 16px;
  }
}
.event-hl__main { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; }
.event-hl__side { grid-column: 2; flex-direction: row; }   /* Zeilen 1–3 füllen sich automatisch */

/* großes Event: Bild füllt den freien Platz, ohne die Karte zu verlängern */
.event-hl__media { position: relative; flex: 1 1 0; min-height: 0; }
.event-hl__media img.event-img,
.event-hl__thumb img.event-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.event-hl__main-body { padding: .75rem 1rem .8rem !important; }
.event-hl__main-title { font-size: 1.35rem; min-height: 2.6em; }

/* kleine Events: Bild links, Text rechts */
.event-hl__thumb { position: relative; flex: 0 0 40%; }
.event-hl__side-body { flex: 1 1 0; min-width: 0; padding: .6rem .75rem !important; }

@media (max-width: 768px) {
  .event-search-wrapper {
          width: 100%;
      }
  .event-search-wrapper input {
          width: 100% !important;
      }
}

.event-subnav {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    align-items: center;
}

.event-subnav::-webkit-scrollbar {
    display: none;
}

/* Filterleiste Design Buttons (Huete, Morgen, etc.) */
/* Standard-Zustand */
.event-filter-btn {
    background-color: #ececec;
    color: #000000;
    transition: all 0.2s ease-in-out;
    box-shadow: none !important;
}

/* Hover-Zustand  */
.event-filter-btn:hover {
    background-color: #03c8be;
    color: #000000;
    border-color: #03c8be;
}

/* Aktiver Zustand */
.event-filter-btn.active {
    background-color: #03c8be !important;
    color: #000000 !important;
    border-color: #03c8be !important;
}

/* Effekte beim Hovern über Kategorie-Namen in der List.html für Events */
.category-link {
    transition: color 0.2s ease-in-out;
}

.category-link:hover {
    color: #03c8be !important;
}


/* ======================================================================
   24. NEWS-CARD (Kartenraster)
   ====================================================================== */

/* News Card Design auf in der Liste/Startseite     */
.news-card a,
.news-card a:hover,
.news-card a:focus {
	text-decoration: none;
	color: inherit;
}

.news-card { height: 100%; display: flex; flex-direction: column; }

.news-card__media {
	position: relative;
	aspect-ratio: 16 / 9;          
	overflow: hidden;
	background: #eee;
}

.news-card__imglink { display: block; width: 100%; height: 100%; }

.news-card__media img,
.news-card__media video,
.news-card__media iframe {
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Text */
.news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 8px;
    min-height: calc(7.8rem + 20px);
}

.news-card__tag {
	display: inline-block; padding: 2px 8px; margin-bottom: 6px;
	background: #00c2b8; color: #111;
	font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}

/* Tag-Zeile */
.news-card__tagrow {
	height: 1.6rem;          
	margin-bottom: 6px;
	display: flex;
	align-items: flex-start;
}

/* Titel: 2 Zeilen */
.news-card__title {
	font-size: 1.35rem;
	line-height: 1.2;
	margin: 0 0 6px;
	display: -webkit-box;
	-webkit-line-clamp: 3;         
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Datum */
.news-card__meta {
	margin-top: 0;
	font-size: .75rem;
	color: #555;
}

.event-card__body {
  padding: .6rem .75rem .65rem !important;  
  gap: .4rem;
}

.event-card__title {
  margin: .15rem 0 0;
  min-height: 2.6em;    
}

.event-card__price {
  padding-top: .4rem;
  margin-top: 0;
}

/* Hover-Effekt */
.news-card a:hover .news-card__title,
.news-card__title a:hover {
	color: #D3D3D3;
}


/* ======================================================================
   25. WERBUNG (ads_*, .ad-slot, .ad-*)
   ====================================================================== */

p.adhint {font-size:0.8em; color:var(--color-font)}

a.pricelist {font-size:0.8em; color:var(--color-dark-grey)}

/* ADs */
.ads_rect_list {  margin-top: 0px;
  margin-bottom: 30px;
  text-align:center;}

.ads_topad {
  margin-bottom:20px;
  }

.ads_interstitial {margin-top:30px;
margin-bottom:20px;text-align:center;}

/* Banner/Umfrage im Artikeltext: gleicher Abstand oben und unten */
.news-text-wrap .ads_textsplit {
	display: block;
	margin: 28px 0;
	text-align: center;
	clear: both;
}

/* Abstände der Kinder neutralisieren, damit nur der Wrapper zählt */
.news-text-wrap .ads_textsplit > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Werbebanner   */
.ads_premium,
.ads_super,
.ads_standard,
.ads_rectangle {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.ad-slot {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.ad-slot ins {
  position: relative;
  display: block;
  max-width: 100%;
  text-decoration: none;
}

.ad-slot a {
  display: block;
  max-width: 100%;
}

.ad-slot img {
  display: block;
  max-width: 100%;
  height: auto;      
  margin: 0 auto;
}

.ad-slot img[width="0"],
.ad-slot img[height="0"] {
  position: absolute;
  width: 0;
  height: 0;
}

/* ===== Premium (Desktop 1880x320, Mobil 1172x320) ===== */
.ad-premium {
  max-width: 1880px;
  aspect-ratio: 1880 / 320;
}

/* ===== Super (Desktop 1880x320, Mobil 1172x320) ===== */
.ad-super {
  max-width: 1880px;
  aspect-ratio: 1880 / 320;
}

/* ===== Standard (1440x600) ===== */
.ad-standard {
  max-width: 1440px;
  aspect-ratio: 1440 / 600;
}

/* ===== Medium Rectangle (300x250) ===== */
.ad-rectangle {
  max-width: 300px;
  aspect-ratio: 300 / 250;
}

@media (max-width: 767px) {
  /* ===== Mobil: Banner 1172x320 ===== */
  .ad-premium,
    .ad-super {
      aspect-ratio: 1172 / 320;
    }
  .ads_premium,
    .ads_super,
    .ads_standard {
      margin-bottom: 1rem;
    }
}