@charset "UTF-8";

/* Charter */
@font-face{
  font-family:"Charter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/charter_regular-webfont.woff2") format("woff2");
}
@font-face{
  font-family:"Charter";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/charter_italic-webfont.woff2") format("woff2");
}
@font-face{
  font-family:"Charter";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/charter_bold-webfont.woff2") format("woff2");
}
@font-face{
  font-family:"Charter";
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/charter_bold_italic-webfont.woff2") format("woff2");
}

/* UnitWeb */
@font-face{
  font-family:"UnitWeb";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/UnitWeb.woff") format("woff");
}
@font-face{
  font-family:"UnitWeb";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/UnitWeb-Ita.woff") format("woff");
}
@font-face{
  font-family:"UnitWeb";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/UnitWeb-Bold.woff") format("woff");
}
@font-face{
  font-family:"UnitWeb";
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/UnitWeb-BoldIta.woff") format("woff");
}

/* ==========================================================================
   ND-inspired template.css for Joomla (standard output compatible)
   Goal: strong visual continuity to nd-aktuell (colors/typo/spacing/components)
   Works with: com_content blog/article, mod_menu, breadcrumb, pagination,
               system messages, forms, buttons, modules, tables
   ========================================================================== */

/* -----------------------------
   1) Design Tokens (ND look)
------------------------------ */
:root{
  /* Colors */
  --nd-fastschwarz:#222;
  --nd-dunkelgrau:#5a5a5a;
  --nd-grau:#b4b4b4;
  --nd-hellgrau:#e6e6e6;
  --nd-sehrhell:#fff;
  --nd-body-bg:#efefef;
  --nd-wrapper-bg:#fff;

  --nd-magenta:#e60050;
  --nd-rosa:#f8e0e7;
  --nd-petrol:#005866;

  /* Typography */
  --nd-sans:"UnitWeb", Arial, Helvetica, sans-serif;
  --nd-serif:"Charter", Cambria, Cochin, Georgia, serif;

  /* Sizing */
  --nd-fontsize-basic:0.875rem;     /* ~14px */
  --nd-fontsize-content:1rem;       /* ~16px */
  --nd-fontsize-h1:1.625rem;        /* ~26px */
  --nd-fontsize-h2:1rem;            /* ~16px */
  --nd-fontsize-kicker:0.675rem;    /* ~10.8px */
  --nd-fontsize-small:0.8125rem;    /* ~13px */

  /* Layout */
  --nd-wrap-max: 1000px;            /* approx ND width feel */
  --nd-pad: 1.25rem;                /* 20px */
  --nd-pad-lg: 1.75rem;             /* 28px */
  --nd-gap: 1.25rem;

  /* Borders / UI */
  --nd-border: 1px solid rgba(47,50,56,.2);
  --nd-border-dotted: 2px dotted var(--nd-grau);
  --nd-radius: 2px;
}

/* Larger screens: slightly bigger type like ND */
@media (min-width: 67.5em){
  :root{
    --nd-fontsize-basic:1.125rem;
    --nd-fontsize-content:1.25rem;
    --nd-fontsize-h1:2.5rem;
    --nd-fontsize-h2:1.375rem;
    --nd-fontsize-kicker:0.875rem;
    --nd-wrap-max: 1200px;
  }
}

/* -----------------------------
   2) Base / Reset-ish
------------------------------ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--nd-body-bg);
  color:var(--nd-fastschwarz);
  font-family:var(--nd-serif);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; vertical-align:bottom; border:0; }
a{ color:var(--nd-magenta); text-decoration:none; }
a:hover, a:focus{ text-decoration:underline; }

/* Common Joomla containers (Cassiopeia/Bootstrap) */
.container,
.container-fluid,
.site-grid,
.site,
.wrapper{
  max-width: var(--nd-wrap-max);
}

/* Provide ND-like “paper on gray” frame */
.site,
body.site,
.wrapper,
.site-grid,
#site-wrapper{
  background:var(--nd-wrapper-bg);
}

/* If your template uses a wrapper div, keep it ND-like */
.nd-wrapper,
.Wrapper,
.site{
  margin:0 auto;
  width:calc(100vw - 5px); /* iPhone hack-ish like ND */
  max-width:100%;
  background:var(--nd-wrapper-bg);
}
.nd-inner,
.Wrapper-Inner{
  margin:0 auto;
  max-width:var(--nd-wrap-max);
  background:var(--nd-wrapper-bg);
}

/* Typography */
h1,h2,h3,h4{
  font-family:var(--nd-serif);
  font-weight:700;
  line-height:1.32;
  margin: 1.25rem 0 0 0;
}
h1{ font-size:var(--nd-fontsize-h1); }
h2{ font-size:var(--nd-fontsize-h2); }
p{ margin:0 0 1.5rem 0; font-size:var(--nd-fontsize-content); hyphens:auto; }

/* Inline emphasis */
em,i{ font-style:italic; }
strong,b{ font-weight:700; }

/* -----------------------------
   3) Header / Logo / Nav
------------------------------ */
header.header,
.site-header,
header{
  background:var(--nd-wrapper-bg);
}
.header-inner,
.site-header .container,
header .container{
  padding: var(--nd-pad) var(--nd-pad);
}

.logo,
.brand-logo,
.navbar-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.Logo-Image img{
  width: 100%;
  max-width: 210px;
  height: auto;
  display: block;
  padding: 25px;
}
.brand-logo img{
  display:block;
  height:auto;
  max-width: 210px;
}

/* Primary navigation (mod_menu often renders ul.mod-menu) */
nav,
.navbar,
.site-nav{
  font-family:var(--nd-sans);
}
.mod-menu,
.menu,
.nav.menu,
.navbar-nav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap: 0.9rem 1.1rem;
  align-items:center;
}
.mod-menu > li,
.menu > li,
.navbar-nav > li{
  margin:0;
  padding:0;
}
.mod-menu a,
.menu a,
.navbar-nav a{
  color:var(--nd-dunkelgrau);
  font-size: .875rem;
  font-weight:400;
  text-decoration:none;
}
.mod-menu a:hover,
.menu a:hover,
.navbar-nav a:hover{
  color:var(--nd-magenta);
  text-decoration:underline;
}

/* Active state */
.mod-menu .current > a,
.mod-menu .active > a,
.menu .current > a,
.menu .active > a{
  color:var(--nd-fastschwarz);
  font-weight:700;
}

/* Dropdowns (Bootstrap / Joomla) */
.dropdown-menu{
  border: var(--nd-border);
  border-radius: var(--nd-radius);
}
.dropdown-item:hover,
.dropdown-item:focus{
  background: rgba(230,0,80,.06);
}

/* -----------------------------
   4) Breadcrumb
------------------------------ */

.mod-breadcrumbs ol,
.breadcrumb ol,
ol.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mod-breadcrumbs li,
.breadcrumb li,
ol.breadcrumb li {
  display: inline;
  margin: 0;
}

.mod-breadcrumbs li + li:before,
.breadcrumb li + li:before,
ol.breadcrumb li + li:before {
  content: " / ";
  color: var(--nd-dunkelgrau);
}
.breadcrumb a{ color: var(--nd-magenta); }

/* -----------------------------
   5) Layout: main + aside (generic, not page-specific)
------------------------------ */
main,
.site-main,
.component,
#component{
  padding: var(--nd-pad) var(--nd-pad);
}

/* If your template uses a two-column grid, style aside modules ND-like */
aside,
.sidebar,
.site-sidebar{
  font-family:var(--nd-sans);
}
/* Sidebar navigation vertical */
aside .mod-menu,
aside .menu,
.site-sidebar .mod-menu {
  display: block;
}

aside .mod-menu > li,
.site-sidebar .mod-menu > li {
  margin: 0 0 .6rem 0;
}

aside .mod-menu a,
.site-sidebar .mod-menu a {
  display: inline-block;
  padding-left: 12px;
  position: relative;
  color: var(--nd-magenta);
}

aside .mod-menu a:before,
.site-sidebar .mod-menu a:before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--nd-magenta);
}
@media (min-width: 48em){
  .site-grid,
  .nd-layout{
    display:grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items:start;
  }
}

/* -----------------------------
   6) Joomla “Modules” (boxes)
------------------------------ */
.moduletable,
.card,
.sidebar .moduletable,
aside .moduletable{
  margin: 0 0 2.5rem 0;
}

/* ND-like box */
.moduletable > .module-title,
.moduletable > h3,
.module-title,
aside h3.module-title{
  font-family:var(--nd-sans);
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-size: 1rem;
  color: var(--nd-fastschwarz);
  margin: 0 0 .75rem .75rem;
  position:relative;
}
.moduletable > .module-title:before,
.moduletable > h3:before,
.module-title:before{
  content:"";
  position:absolute;
  left:-1.2rem;
  top:0rem;
  width:.95rem;
  height:14px;
  background:var(--nd-magenta);
}

/* Box body */
.moduletable > .module-content,
.moduletable > div,
.moduletable > ul,
.moduletable > p{
  background: var(--nd-hellgrau);
  padding: .5rem 0;
  border: 0;
}
.moduletable .module-content,
.moduletable > div{
  font-size: 1rem;
}
.moduletable .module-content > *{
  margin-left: 20px;
  margin-right: 20px;
}
.moduletable ul{
  list-style:none;
  margin:0 20px;
  padding:0;
}
.moduletable li{
  margin: 0 0 .6rem 0;
}
.moduletable li a{
  color: var(--nd-magenta);
  position:relative;
  padding-left: 12px;
  display:inline-block;
}
.moduletable li a:before{
  content:"›";
  position:absolute;
  left:0;
  top:0;
  color: var(--nd-magenta);
}

/* -----------------------------
   7) com_content: Blog (Category Blog) + Article
------------------------------ */

/* Blog container (Joomla standard) */
.blog,
.category-blog,
.com-content-category-blog{
  font-family:var(--nd-serif);
}
.blog .page-header h1,
.category-blog .page-header h1{
  margin-top:0;
}

/* Article cards in blog list */
.blog .items-leading .leading,
.blog .items-row .item,
.blog .item,
.com-content-category-blog__item{

}
.blog .items-leading .leading:first-child,
.blog .items-row:first-child .item:first-child{
  border-top:0;
}

/* Title */

/* Intro text */
.blog .item-content,
.blog .introtext,
.blog .item-body{
  font-size: var(--nd-fontsize-content);
  color: var(--nd-fastschwarz);
}
.blog .readmore a{
  font-family:var(--nd-sans);
  font-weight:700;
}

/* Article Info (date/author/category) */
.article-info,
.com-content-article__info,
dl.article-info{
  font-family:var(--nd-sans);
  font-size: .875rem;
  color: var(--nd-dunkelgrau);
  margin: .75rem 0 0 0;
}
.article-info dd{ display:inline; margin:0; }
.article-info dd + dd:before{ content:" / "; color:var(--nd-dunkelgrau); }

/* Full article page */
.item-page,
.com-content-article{
  font-family:var(--nd-serif);
}
.item-page .page-header h1,
.com-content-article h1{
  margin-top:0;
}
.item-page .articleBody,
.com-content-article__body{
  font-size: var(--nd-fontsize-content);
}

/* In-article links ND-like underline */
.item-page a,
.com-content-article a{
  text-decoration:underline;
  text-underline-offset:4px;
}
.item-page a:hover,
.com-content-article a:hover{
  text-decoration:none;
}

/* Blockquotes ND-ish */
blockquote{
  margin: 2rem;
  font-weight:700;
  border-top: var(--nd-border-dotted);
  border-bottom: var(--nd-border-dotted);
  padding: 1rem 0;
}
@media (min-width: 25em){
  blockquote{ margin: 2rem 3rem; }
}

/* Tags (if output) */
.tags,
.article-tags{
  font-family:var(--nd-sans);
  margin: 2rem 0;
}
.tags a{
  color:var(--nd-magenta);
}

/* -----------------------------
   8) Forms / Buttons (Convert Forms + Joomla)
------------------------------ */
label,
.control-label,
.form-label{
  font-family:var(--nd-sans);
  color: rgba(47,50,56,.75);
  font-size: .875rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea,
.form-control{
  background-color: rgba(47,50,56,.05);
  border: var(--nd-border);
  border-radius: var(--nd-radius);
  min-height: 29px;
  padding: 2px 8px;
  width:100%;
  font-family:inherit;
}

input:focus, select:focus, textarea:focus, .form-control:focus{
  background:#fff;
  border-color:#2f3238;
  outline:none;
  box-shadow:none;
}

/* Primary button */
button,
.btn,
.btn-primary,
input[type="submit"],
[type="submit"],
.convertforms .cf-submit button,
.convertforms button[type="submit"]{
  background: var(--nd-magenta);
  border: 1px solid var(--nd-magenta);
  border-radius: var(--nd-radius);
  color: var(--nd-sehrhell);
  cursor:pointer;
  display:inline-block;
  min-height: 29px;
  padding: 6px 30px;
  font-family: var(--nd-sans);
  font-weight:700;
  text-decoration:none !important;
}
button:hover,
.btn:hover,
.btn-primary:hover,
input[type="submit"]:hover,
[type="submit"]:hover{
  background: var(--nd-magenta) !important;
  border-color: var(--nd-magenta) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Secondary button */
.btn-secondary,
.btn-outline-secondary{
  background:transparent;
  border:1px solid var(--nd-dunkelgrau);
  color: var(--nd-dunkelgrau);
}
.btn-secondary:hover,
.btn-outline-secondary:hover{
  background: var(--nd-magenta);
  border-color: var(--nd-magenta);
  color:#fff;
}

/* Convert Forms (common selectors) */
.convertforms,
.cf-wrapper{
  font-family:var(--nd-sans);
}
.convertforms .cf-submit button,
.convertforms button[type="submit"]{
  border-color: var(--nd-magenta);
}

/* -----------------------------
   9) Pagination
------------------------------ */
/* ================================
   Pagination – clean & centered
================================ */

.pagination_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* "Seite X von Y" */
p.counter {
    float: none !important;
    text-align: center;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #666;
}

/* UL */
.pagination {
    display: flex;
    gap: 6px;
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center;
}

/* LI */
.pagination .page-item {
    margin: 0;
}

/* Links */
.pagination .page-link {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    font-size: 14px;
    text-decoration: none;

    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Hover */
.pagination .page-link:hover {
    background: #f2f2f2;
    border-color: #bbb;
}

/* Active page */
.pagination .active .page-link,
.pagination .page-link[aria-current="true"] {
    background: #d81b60;
    border-color: #d81b60;
    color: #fff;
    font-weight: 600;
}

/* Disabled (falls vorhanden) */
.pagination .disabled .page-link {
    opacity: 0.4;
    pointer-events: none;
}

/* Pfeil-Icons etwas kleiner */
.pagination .page-link span {
    font-size: 13px;
}
.pagination .icon-angle-double-left::before {
    content: "«";
    font-size: 16px;
}

.pagination .icon-angle-left::before {
    content: "‹";
    font-size: 18px;
}

.pagination .icon-angle-right::before {
    content: "›";
    font-size: 18px;
}

.pagination .icon-angle-double-right::before {
    content: "»";
    font-size: 16px;
}

/* Original-Icons unsichtbar */
.pagination span[class^="icon-"] {
    font-family: inherit;
}

/* -----------------------------
   10) System messages (alerts)
------------------------------ */
#system-message-container{
  padding: 0 var(--nd-pad);
}
.alert,
.joomla-alert,
.system-message{
  border-radius: var(--nd-radius);
  border: var(--nd-border);
  padding: .75rem 1rem;
  margin: 1rem 0;
  font-family:var(--nd-sans);
}
.alert-success{ border-color: rgba(0,128,0,.35); background: rgba(0,128,0,.06); }
.alert-warning{ border-color: rgba(255,140,0,.45); background: rgba(255,140,0,.08); }
.alert-danger{ border-color: rgba(200,0,0,.35); background: rgba(200,0,0,.06); }

/* -----------------------------
   11) Tables
------------------------------ */
table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--nd-sans);
  font-size: .95rem;
}
th, td{
  border-bottom: 1px solid rgba(47,50,56,.15);
  padding: .6rem .4rem;
  text-align:left;
}
th{
  color: var(--nd-dunkelgrau);
  font-weight:700;
}

/* -----------------------------
   12) Footer
------------------------------ */
footer,
.site-footer{
  padding: 2rem var(--nd-pad);
  color: var(--nd-dunkelgrau);
  font-family:var(--nd-sans);
  font-size: .875rem;
}

/* -----------------------------
   13) Small helpers
------------------------------ */
hr{
  border:0;
  border-top: var(--nd-border-dotted);
  margin: 2rem 0;
}
.hidden, { display:none !important; }
.text-muted{ color: var(--nd-dunkelgrau) !important; }

/* -----------------------------
   14) Optional: "ND highlight" utility you can add via article class
   Add "nd-highlight" to an article or container in Joomla settings.
------------------------------ */
.nd-highlight{
  background: var(--nd-rosa);
  padding: .5rem var(--nd-pad);
  margin-left: calc(-1 * var(--nd-pad));
  margin-right: calc(-1 * var(--nd-pad));
}
/* 1) Modul-Wrapper identifizieren über die Headerklasse und seitliches Padding entfernen */
.moduletable:has(> .haHeader),
.card:has(> .haHeader),
.mod-card:has(> .haHeader){
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Falls dein Template eine innere Body-Box hat (z.B. card-body), auch dort padding killen */
.card:has(> .haHeader) .card-body,
.mod-card:has(> .haHeader) .card-body{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Header darf natürlich weiterhin “Luft” haben (optional) */
.haHeader{
  margin: 0 !important;
  padding: 12px 12px 8px 12px;  /* anpassbar */
}

/* 4) Sicherstellen: unsere Box bleibt bündig */
.haHeader + .ha-box{
  margin: 0 !important;
}
.ha-image-wrap{ position: relative; }
.ha-credits{
  font-size: 9px;
  line-height: 1.2;
  opacity: .75;
  margin-top: 4px;
}
/* ===== ND Top Navigation line under logo ===== */
.TopnavLine{
  border-top: 1px solid rgba(47,50,56,.25);
  border-bottom: 1px solid rgba(47,50,56,.25);
  background: #fff;
}

.TopnavInner{
  max-width: var(--nd-wrap-max);
  margin: 0 auto;
  padding: 0 var(--nd-pad);
  display:flex;
  align-items:stretch;
  gap: 0;
}
search{
	float: right;
	margin-top: 8px;
	width: 240px;
}
search input.form-control{
	width: auto !important;
}

.TopnavHome{
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--nd-grau);
  text-decoration:none;
  font-size: 18px;
}

.TopnavTabs{
  flex:1;
}

/* make the menu look like ND "tabs" */
.TopnavTabs .mod-menu,
.TopnavTabs .menu{
  display:flex;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  width: calc(100% - 250px);
  float: left;
}

.TopnavTabs .mod-menu > li,
.TopnavTabs .menu > li{
  margin:0;
  padding:0;
  border-right: 1px solid rgba(47,50,56,.25);
}

.TopnavTabs .mod-menu > li > a,
.TopnavTabs .menu > li > a{
  display:block;
  padding: 10px 16px;
  font-family: var(--nd-sans);
  font-size: 16px;
  color: var(--nd-fastschwarz);
  text-decoration:none;
}

/* active tab: magenta like ND */
.TopnavTabs .mod-menu > li.current > a,
.TopnavTabs .mod-menu > li.active > a,
.TopnavTabs .menu > li.current > a,
.TopnavTabs .menu > li.active > a{
  color: var(--nd-magenta);
  font-weight:700;
}

/* hover */
.TopnavTabs .mod-menu > li > a:hover,
.TopnavTabs .menu > li > a:hover{
  color: var(--nd-magenta);
  text-decoration:none;
}
/* Parent muss Position-Context sein */
.TopnavTabs .mod-menu > li.deeper.parent{
  position: relative;
}

/* Toggle-Button (Joomla erzeugt den extra) */
.TopnavTabs .mod-menu__toggle{
  border: 0;
  background: transparent;
  padding: 0 10px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* Optional: Pfeil-Icon „dezent“ (falls Joomla ein span/icon rendert) */
.TopnavTabs .mod-menu__toggle .icon-chevron-down,
.TopnavTabs .mod-menu__toggle svg{
  width: 14px;
  height: 14px;
  opacity: .55;
}

/* Submenu-Container: versteckt, absolut unter dem Tab */
.TopnavTabs .mod-menu__sub{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(47,50,56,.25);
  z-index: 9999;
}

/* Submenu sichtbar bei Hover und Tastatur-Fokus */
.TopnavTabs .mod-menu > li.deeper.parent:hover > .mod-menu__sub,
.TopnavTabs .mod-menu > li.deeper.parent:focus-within > .mod-menu__sub{
  display: block;
}

/* Submenu-Links */
.TopnavTabs .mod-menu__sub > li{
  border: 0;
  margin: 0;
  padding: 0;
}

.TopnavTabs .mod-menu__sub > li > a{
  display: block;
  padding: 8px 14px;
  font-family: var(--nd-sans);
  font-size: 14px;
  color: var(--nd-fastschwarz);
  text-decoration: none;
  white-space: nowrap;
}

/* Hover im Dropdown */
.TopnavTabs .mod-menu__sub > li > a:hover{
  background: rgba(230,0,80,.06);
  color: var(--nd-magenta);
}

/* Aktives Submenu-Item */
.TopnavTabs .mod-menu__sub > li.current > a,
.TopnavTabs .mod-menu__sub > li.active > a{
  color: var(--nd-magenta);
  font-weight: 700;
}
.TopnavTabs .visually-hidden, button.mod-menu__toggle-sub{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* ===== FORCE ND-like two column layout (Main + right sidebar) ===== */
.Layout{
  display:block;
}

@media (min-width: 48em){
  .Layout{
    display:grid;
    grid-template-columns: 70% calc(30% - 2rem);
    gap: 2rem;
    align-items:start;
  }
}

/* Make sure sidebar boxes stack nicely */
.Specials-Block{ margin-bottom: 40px; }
.Specials .moduletable{
  background: var(--nd-hellgrau);
  padding-bottom: 10px;
  margin: 0;
}

/* module title = kicker */
.Specials .module-title,
.Specials h3{
  display:block !important;
  margin: 0 0 10px 0 !important;
  font-family: var(--nd-sans) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--nd-dunkelgrau) !important;
  font-weight: 400 !important;
}

/* module content spacing */
.Specials .moduletable > div,
.Specials .moduletable .module-content,
.Specials .moduletable > ul,
.Specials .moduletable > p{
  margin: 0 20px;
  background: transparent;
  padding: 0;
}

/* links in boxes with "caret" feeling */ 
.Specials .moduletable li a{
  color: var(--nd-magenta);
  position:relative;
  padding-left: 12px;
  text-transform: uppercase !important;
}

.Specials .moduletable li a:before{
  content: "›";
  position:absolute;
  left:0;
  top:0;
  color: var(--nd-magenta);
}
.Specials .Specials-Block{
  background: var(--nd-hellgrau) !important;
  padding: 14px 20px !important;
  margin: 0 0 24px 0 !important;
}

/* Also cover modules that render as mod-custom / module etc. */
.Specials .mod-custom,
.Specials .module,
.Specials [id^="mod-"]{
  background: transparent !important; /* box is on Specials-Block */
  margin: 0 !important;
  padding: 0 !important;
}
.Specials .Specials-Block{
  background: var(--nd-hellgrau) !important;
  padding: 14px 20px !important;
  margin: 0 0 24px 0 !important;
}
/* ==== Reise-Kalender: Layout fix ==== */
.reise-kalender{
  width: 100%;
  margin: 0 !important;
}

.reise-kalender__yearTitle{
  font-weight: 700;
  margin: 0 0 10px;
}

/* Zeile: Saison links, Monate rechts */
.reise-kalender__row{
  display: grid;
  grid-template-columns: 1fr; /* links schmal, rechts flexibel */
  column-gap: 5px;
  align-items: start;
  margin: 0 0 10px;
}

.reise-kalender__season{
  display: none;
}

/* Monate: saubere 3er-Kacheln */
.reise-kalender__months{
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, 1fr)); /* Mindestbreite verhindert Umbruch */
  gap: 5px; 
}

/* Monats-Kachel */
.reise-kalender__month{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 6px 10px;

  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  text-decoration: none;

  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;          /* KEIN Zeilenumbruch */
  overflow: hidden;
  text-overflow: ellipsis;      /* falls es doch zu eng wird */
}

/* Hover */
.reise-kalender__month:hover{
  filter: brightness(0.97);
}

/* ==== Responsive ==== */
@media (max-width: 420px){
  .reise-kalender__row{
    grid-template-columns: 75px 1fr;
    column-gap: 10px;
  }

  .reise-kalender__months{
    grid-template-columns: repeat(3, minmax(70px, 1fr));
    gap: 6px;
  }

  .reise-kalender__month{
    min-height: 40px;
    font-size: 0.9rem;
    padding: 6px 8px;
  }
}

/* Bulletpoints entfernen */
.fields-container {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0.8rem;
}

/* Labels ausblenden */
.fields-container .field-label {
    display: none;
}

/* Einzeilige Darstellung */
.fields-container .field-entry {
    display: inline;
    font-size: 0.95rem;
    color: #444;
}

/* "von " vor Reisedatum */
.fields-container .field-entry.reisedatum .field-value::before {
    content: "vom ";
}

/* " bis " vor Enddatum */
.fields-container .field-entry.enddatum .field-value::before {
    content: " bis ";
}
.cf-checkbox-group {
    align-items: flex-start !important;
}

.cf-checkbox-group input[type="checkbox"] {
    margin-top: 4px;
}