@charset "UTF-8";
/* ==========================================================================
   Volkspartei Natschbach-Loipersbach
   Aufbau: mobile first. Die Grundregeln gelten für das Handy,
   die @media-Blöcke ergänzen nur, was größere Bildschirme zusätzlich können.
   Schriften liegen lokal – es wird kein Google-Server kontaktiert.
   ========================================================================== */

@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --blau-tief:#0B2C4C;
  --blau:#0E5C9E;
  --blau-hell:#E8F1F8;
  --gelb:#FFCB05;
  --gelb-tief:#E0AE00;
  --text:#17232E;
  --leise:#56646F;
  --linie:#DCE4EB;
  --grund:#F2F6F9;
  --papier:#FFFFFF;

  --schrift:'Barlow',system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --titel:'Barlow Condensed','Barlow',system-ui,'Arial Narrow',sans-serif;

  --rand:1rem;
  --breite:1180px;
  --radius:8px;
  --schatten:0 12px 26px -20px rgba(11,44,76,.55);
}

/* ------------------------------------------------------------ Grundlagen */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--text);
  font-family:var(--schrift);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-underline-offset:.15em}
a:hover{color:var(--blau-tief)}
:focus-visible{outline:3px solid var(--gelb);outline-offset:2px;border-radius:3px}

h1,h2,h3,h4{font-family:var(--titel);font-weight:700;line-height:1.08;margin:0 0 .5em;overflow-wrap:break-word}
h1{font-size:2.05rem}
h2{font-size:1.65rem}
h3{font-size:1.25rem}
p{margin:0 0 1em;max-width:68ch}
ul,ol{max-width:68ch}

.huelle{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)}
.huelle--schmal{max-width:750px}
.abschnitt{padding:2.25rem 0}
.abschnitt--grund{background:var(--grund)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:-9999px;background:var(--gelb);color:var(--blau-tief);padding:.7rem 1.1rem;z-index:100}
.sprung:focus{left:0;top:0}

.kopfzeile{margin-bottom:1.3rem}
.kopfzeile h2{margin:0 0 .25rem}
.kopfzeile a{font-weight:600;font-size:1rem;text-decoration:none}
.kopfzeile a:hover{text-decoration:underline}
.kopfzeile::after{content:"";display:block;width:56px;height:4px;background:var(--gelb);border-radius:2px;margin-top:.7rem}

/* ---------------------------------------------------------------- Knöpfe */
.knopf{
  display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:600;
  padding:.8rem 1.35rem;border-radius:var(--radius);background:var(--blau);color:#fff;
  text-decoration:none;text-align:center;line-height:1.25;min-height:44px;
}
.knopf:hover{background:var(--blau-tief);color:#fff}
.knopf--gelb{background:var(--gelb);color:var(--blau-tief)}
.knopf--gelb:hover{background:var(--gelb-tief);color:var(--blau-tief)}
.knopf--rand{background:transparent;color:var(--blau);box-shadow:inset 0 0 0 2px currentColor}
.knopf--rand:hover{background:var(--blau);color:#fff;box-shadow:inset 0 0 0 2px var(--blau)}
.knopf--hell{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);background:transparent}
.knopf--hell:hover{background:#fff;color:var(--blau-tief);box-shadow:inset 0 0 0 2px #fff}
.knopf--klein{padding:.5rem 1rem;font-size:.95rem;min-height:0}
.knopfzeile{display:flex;flex-wrap:wrap;gap:.7rem}

/* ------------------------------------------------------------------ Kopf */
.kopf{background:var(--papier);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:50}
.kopf__inhalt{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.9rem}
.marke{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);padding:.35rem 0}
.marke__balken{width:6px;align-self:stretch;min-height:2.2rem;background:var(--gelb);border-radius:1px;flex:none}
.marke__logo{max-height:2.6rem;width:auto}
.marke__zeile1{display:block;font-size:.72rem;font-weight:600;letter-spacing:.05em;color:var(--blau);line-height:1.15}
.marke__zeile2{display:block;font-family:var(--titel);font-weight:700;font-size:1.15rem;line-height:1.05}

.menuknopf{
  display:inline-flex;align-items:center;gap:.45rem;background:none;color:var(--text);
  border:1px solid var(--linie);border-radius:var(--radius);padding:.5rem .8rem;
  font:600 .95rem var(--schrift);cursor:pointer;min-height:44px;
}
.menuknopf svg{width:1.2rem;height:1.2rem}

.nav{
  display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
  background:var(--papier);border-bottom:1px solid var(--linie);
  padding:.3rem var(--rand) 1rem;box-shadow:var(--schatten);
  max-height:calc(100vh - 3.9rem);overflow-y:auto;
}
.nav.offen{display:flex}
.nav a{
  font-family:var(--titel);font-size:1.3rem;font-weight:600;text-decoration:none;color:var(--text);
  padding:.8rem .2rem;border-bottom:1px solid var(--linie);
}
.nav a[aria-current="page"]{color:var(--blau);box-shadow:inset 3px 0 0 var(--gelb);padding-left:.75rem}
.nav__social{display:flex;gap:.6rem;margin-top:1rem}
.nav__social a{
  display:grid;place-items:center;width:2.8rem;height:2.8rem;padding:0;border:1px solid var(--linie);
  border-radius:var(--radius);color:var(--blau-tief);
}
.nav__social svg{width:1.3rem;height:1.3rem}

@media (min-width:950px){
  .menuknopf{display:none}
  .nav{
    display:flex;flex-direction:row;align-items:center;position:static;padding:0;
    border:0;box-shadow:none;background:none;gap:.15rem;max-height:none;overflow:visible;
  }
  .nav a{font-size:1.18rem;padding:.45rem .6rem;border:0;border-radius:4px}
  .nav a:hover{background:var(--blau-hell);color:var(--blau-tief)}
  .nav a[aria-current="page"]{padding-left:.6rem;box-shadow:inset 0 -3px 0 var(--gelb)}
  .nav__social{margin:0 0 0 .5rem;padding-left:.7rem;border-left:1px solid var(--linie);gap:.2rem}
  .nav__social a{width:2.2rem;height:2.2rem;border:0}
  .nav__social svg{width:1.2rem;height:1.2rem}
  .marke__zeile2{font-size:1.45rem}
  .marke__zeile1{font-size:.78rem}
  .kopf__inhalt{min-height:4.6rem}
}

/* ==================================================== Beiträge (Newsfeed)
   Die Beiträge von Instagram und Facebook werden wie eigene Beiträge der
   Website dargestellt: Kopfzeile mit Wortmarke, Text, Bildergalerie, Fußzeile.
   Es wird nichts von Meta nachgeladen – alle Bilder liegen auf dem Server.
   ---------------------------------------------------------------------- */

/* Einspaltiger Lesefluss (News-Seite) */
.timeline{display:flex;flex-direction:column;gap:1.4rem;max-width:660px;margin-inline:auto}

/* Raster (Startseite) */
.feed{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:600px){.feed{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.feed{grid-template-columns:repeat(3,1fr);gap:1.5rem}}

.post{
  position:relative;display:flex;flex-direction:column;background:var(--papier);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;
}
.feed .post{height:100%}

.post__kopf{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem .75rem}
.post__avatar{
  width:2.5rem;height:2.5rem;border-radius:50%;flex:none;object-fit:cover;
  background:var(--blau-tief);display:grid;place-items:center;
}
.post__avatar--wortmarke{
  font-family:var(--titel);font-weight:700;font-size:1.05rem;color:var(--gelb);letter-spacing:.02em;
}
.post__wer{min-width:0;line-height:1.25}
.post__name{display:block;font-weight:600;font-size:1rem}
.post__meta{display:flex;align-items:center;gap:.3rem;font-size:.86rem;color:var(--leise)}
.post__meta svg{width:.95rem;height:.95rem;flex:none}
.post--instagram .post__meta svg{color:#C13584}
.post--facebook .post__meta svg{color:#1877F2}

.post__text{padding:0 1.1rem;font-size:1rem;line-height:1.6;overflow-wrap:break-word}
.post__text--kurz{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.post__schalter{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.post__schalter:checked + .post__text{display:block;overflow:visible;-webkit-line-clamp:unset}
.post__schalter:checked ~ .post__weiter{display:none}
.post__weiter{display:block;padding:.15rem 1.1rem 0;cursor:pointer;font-weight:600;font-size:.95rem;color:var(--blau)}
.post__weiter:hover{color:var(--blau-tief);text-decoration:underline}
.post__schalter:focus-visible + .post__text{outline:3px solid var(--gelb);outline-offset:2px}

.post__tags{margin:.5rem 0 0;padding:0 1.1rem;font-size:.92rem;line-height:1.5;color:var(--leise)}
.post__tag{color:var(--blau);text-decoration:none}
.post__tag:hover{text-decoration:underline}

/* Bilder */
.post__medien{display:grid;gap:3px;margin-top:.9rem;background:var(--linie)}
.post__bild{position:relative;display:block;overflow:hidden;background:var(--grund);aspect-ratio:1/1}
.post__bild img{width:100%;height:100%;object-fit:cover}
.post__medien--1{grid-template-columns:1fr}
.post__medien--1 .post__bild{aspect-ratio:auto;max-height:520px}
.post__medien--1 .post__bild img{height:auto;max-height:520px}
.post__medien--2{grid-template-columns:1fr 1fr}
.post__medien--3{grid-template-columns:2fr 1fr}
.post__medien--3 .post__bild:first-child{grid-row:span 2;aspect-ratio:auto}
.post__medien--4{grid-template-columns:1fr 1fr}
.post--gross .post__medien--1 .post__bild,
.post--gross .post__medien--1 .post__bild img{max-height:620px}

.post__abspielen{
  position:absolute;inset:0;margin:auto;width:3.6rem;height:3.6rem;border-radius:50%;
  background:rgba(11,44,76,.72);color:#fff;display:grid;place-items:center;
}
.post__abspielen svg{width:1.9rem;height:1.9rem;margin-left:.15rem}
.post__mehrbilder{
  position:absolute;inset:0;background:rgba(11,44,76,.62);color:#fff;
  display:grid;place-items:center;font-family:var(--titel);font-size:1.8rem;font-weight:700;
}

.post__fuss{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;border-top:1px solid var(--linie);font-size:.93rem;
}
.post__fuss a{font-weight:600;text-decoration:none}
.post__fuss a:hover{text-decoration:underline}
.post__datum{color:var(--leise)}

/* Der erste Beitrag auf der Startseite darf mehr Platz haben */
@media (min-width:820px){
  .post--gross{margin-bottom:1.8rem}
  .post--gross .post__kopf{padding:1.2rem 1.4rem .85rem}
  .post--gross .post__text,
  .post--gross .post__tags,
  .post--gross .post__weiter{padding-inline:1.4rem}
  .post--gross .post__text{font-size:1.1rem;line-height:1.65}
  .post--gross .post__text--kurz{-webkit-line-clamp:6}
  .post--gross .post__fuss{padding-inline:1.4rem}
  .post--gross .post__name{font-size:1.08rem}
}

.social-leer{
  border:1px dashed var(--linie);border-radius:var(--radius);padding:1.6rem;
  color:var(--leise);background:var(--grund);max-width:660px;margin-inline:auto;
}

/* --------------------------------------------------------------- Termine */
.termine{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
.termin{display:grid;grid-template-columns:3.6rem 1fr;gap:.9rem;padding:1.1rem 0;border-bottom:1px solid var(--linie)}
.termin__datum{
  text-align:center;background:var(--blau-hell);border-radius:var(--radius);
  padding:.4rem .2rem;border-bottom:4px solid var(--gelb);align-self:start;
}
.termin__tag{display:block;font-family:var(--titel);font-size:1.55rem;font-weight:700;line-height:1;color:var(--blau-tief)}
.termin__monat{display:block;font-size:.8rem;font-weight:600;color:var(--blau)}
.termin__jahr{display:block;font-size:.72rem;color:var(--leise)}
.termin h3{margin:0 0 .2rem;font-size:1.2rem}
.termin__meta{margin:0;color:var(--leise);font-size:.95rem}
.termin__text{margin:.5rem 0 0;font-size:.98rem}
.termin__text p{margin-bottom:.4rem}
.termin--vergangen{opacity:.62}
.termin__aktion{grid-column:2}
@media (min-width:700px){
  .termin{grid-template-columns:5rem 1fr auto;gap:1.5rem;align-items:center;padding:1.4rem 0}
  .termin__datum{align-self:center;padding:.55rem .25rem}
  .termin__tag{font-size:2rem}
  .termin h3{font-size:1.35rem}
  .termin__aktion{grid-column:auto}
}

/* ------------------------------------------------------------------ Team */
.personen{display:grid;gap:1.4rem 1rem;list-style:none;padding:0;margin:0;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.personen{grid-template-columns:repeat(3,1fr);gap:1.8rem 1.4rem}}
@media (min-width:980px){.personen{grid-template-columns:repeat(4,1fr)}}
.person{text-align:center}
.person__bild{
  width:100%;max-width:150px;margin:0 auto .7rem;aspect-ratio:1/1;border-radius:50%;
  overflow:hidden;background:var(--blau-hell);display:grid;place-items:center;
  box-shadow:0 0 0 3px var(--papier),0 0 0 5px var(--gelb);
}
.person__bild img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.person__initialen{font-family:var(--titel);font-size:2.2rem;font-weight:700;color:var(--blau)}
.person h3{margin:0 0 .15rem;font-size:1.15rem}
.person__funktion{margin:0 0 .4rem;color:var(--leise);font-size:.92rem;line-height:1.4}
.person__kontakt{display:flex;flex-direction:column;gap:.1rem;font-size:.93rem}

.gruppenwahl{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.gruppenwahl a{
  font-family:var(--titel);font-size:1.15rem;font-weight:600;text-decoration:none;
  padding:.45rem 1rem;border:1px solid var(--linie);border-radius:99px;color:var(--text);
  background:var(--papier);min-height:44px;display:inline-flex;align-items:center;
}
.gruppenwahl a[aria-current]{background:var(--blau-tief);border-color:var(--blau-tief);color:#fff}
.gruppenwahl--mitte{justify-content:center}

/* ---------------------------------------------------- Teilorganisationen */
.teilorgs{display:grid;gap:1.4rem;list-style:none;margin:0;padding:0;grid-template-columns:1fr}
@media (min-width:700px){.teilorgs{grid-template-columns:repeat(2,1fr);gap:1.8rem}}
.teilorg{display:grid;grid-template-columns:4.6rem 1fr;gap:1rem;align-items:start;
  background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius);padding:1.1rem}
.teilorg__bild{width:4.6rem;height:4.6rem;border-radius:50%;object-fit:cover;background:var(--blau-hell)}
.teilorg__platzhalter{display:grid;place-items:center;font-family:var(--titel);font-size:1.5rem;font-weight:700;color:var(--blau)}
.teilorg h3{margin:0 0 .1rem;font-size:1.2rem}
.teilorg__org{margin:0 0 .45rem;font-weight:600;color:var(--blau);font-size:.95rem}
.teilorg__kontakt{font-size:.95rem;display:flex;flex-direction:column;gap:.1rem;word-break:break-word}

/* -------------------------------------------------------------- Zeitungen */
.zeitungen{display:grid;gap:1.5rem 1rem;list-style:none;margin:0;padding:0;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.zeitungen{grid-template-columns:repeat(3,1fr);gap:2rem 1.5rem}}
@media (min-width:980px){.zeitungen{grid-template-columns:repeat(4,1fr)}}
.zeitung a{text-decoration:none;color:inherit;display:block}
.zeitung__cover{
  position:relative;aspect-ratio:210/297;background:var(--grund);border:1px solid var(--linie);
  border-radius:var(--radius);overflow:hidden;display:grid;place-items:center;margin-bottom:.7rem;
}
.zeitung__lesen{
  position:absolute;left:.5rem;bottom:.5rem;background:var(--gelb);color:var(--blau-tief);
  font-weight:600;font-size:.82rem;padding:.2rem .6rem;border-radius:99px;
}
.zeitung__cover img{width:100%;height:100%;object-fit:cover}
.zeitung a:hover .zeitung__cover{box-shadow:var(--schatten)}
.zeitung__pdf{font-family:var(--titel);font-weight:700;font-size:1.5rem;color:var(--blau)}
.zeitung h3{font-size:1.02rem;margin:0 0 .15rem;line-height:1.25}
.zeitung__datum{color:var(--leise);font-size:.88rem;margin:0}
.zeitung__datum a{color:var(--leise)}

/* ------------------------------------------------------------- Formulare */
.formular{display:grid;gap:1rem;max-width:44rem}
.feld{display:flex;flex-direction:column;gap:.3rem}
.feld label{font-weight:600;font-size:.97rem}
.feld input,.feld textarea,.feld select{
  font:inherit;font-size:1rem;
  padding:.75rem .85rem;border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--papier);color:var(--text);width:100%;
}
.feld input:focus,.feld textarea:focus{border-color:var(--blau)}
.feld textarea{min-height:9rem;resize:vertical}
.feld__hinweis{font-size:.87rem;color:var(--leise)}
.feld__fehler{font-size:.87rem;color:#8C1D1D}
.feldpaar{display:grid;gap:1rem}
@media (min-width:640px){.feldpaar{grid-template-columns:1fr 1fr}}
.honigtopf{position:absolute;left:-9999px}

.meldung{padding:.9rem 1.05rem;border-radius:var(--radius);margin:0 0 1.2rem;font-weight:500}
.meldung--ok{background:#E7F5EE;color:#155C39;border:1px solid #B6E0C9}
.meldung--fehler{background:#FDECEC;color:#8C1D1D;border:1px solid #F3C4C4}
.meldung--info{background:var(--blau-hell);color:var(--blau-tief);border:1px solid #C3DAEE}

/* --------------------------------------------------------------- Kontakt */
.kontaktraster{display:grid;gap:2rem}
@media (min-width:900px){.kontaktraster{grid-template-columns:1.2fr .8fr;gap:3rem}}
.kontaktbox{background:var(--grund);border-radius:var(--radius);padding:1.3rem}
.kontaktbox h3{margin-top:0}
.kontaktbox p{font-size:.98rem;word-break:break-word}

/* ----------------------------------------------------------- Textseiten */
.inhalt h2{margin-top:1.8rem}
.inhalt h3{margin-top:1.4rem}
.inhalt ul{padding-left:1.1rem}
.inhalt li{margin-bottom:.3rem}
.inhalt a{word-break:break-word}

/* ------------------------------------------------------------- Seitenkopf */
.seitenkopf{background:var(--blau-tief);color:#fff;padding:1.8rem 0 1.6rem;position:relative}
.seitenkopf::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--gelb)}
.seitenkopf h1{color:#fff;margin:0}
.seitenkopf p{color:#C6D8E8;margin:.5rem 0 0;font-size:1.02rem}
@media (min-width:700px){
  .seitenkopf{padding:2.8rem 0 2.4rem}
  .seitenkopf h1{font-size:2.8rem}
  .seitenkopf p{font-size:1.12rem}
}

/* -------------------------------------------------------- Begrüßungsband */
.willkommen{background:var(--blau-tief);color:#fff;position:relative;padding:2rem 0 1.9rem}
.willkommen::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--gelb)}
.willkommen h1{color:#fff;margin:0 0 .5rem;font-size:2.1rem}
.willkommen p{color:#C6D8E8;margin:0;font-size:1.05rem}
.ortsteile{display:flex;flex-wrap:wrap;list-style:none;margin:1.1rem 0 0;padding:0}
.ortsteile li{font-family:var(--titel);font-size:1.05rem;font-weight:600;padding:.1rem .8rem;border-left:2px solid var(--gelb)}
.ortsteile li:first-child{padding-left:0;border-left:0}
@media (min-width:820px){
  .willkommen{padding:3rem 0 2.6rem}
  .willkommen h1{font-size:3.2rem}
  .willkommen p{font-size:1.18rem}
  .willkommen__inhalt{display:grid;grid-template-columns:1.3fr .9fr;gap:3rem;align-items:center}
}

.naechster{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);
  padding:1.1rem 1.2rem;margin-top:1.5rem}
@media (min-width:820px){.naechster{margin-top:0}}
.naechster__label{font-size:.88rem;color:#A9C4DB;margin:0 0 .5rem;font-weight:600}
.naechster__datum{font-family:var(--titel);font-size:1rem;color:var(--gelb);font-weight:600;margin:0 0 .15rem}
.naechster h2{color:#fff;margin:0 0 .4rem;font-size:1.35rem}
.naechster p{color:#C6D8E8;margin:0 0 .8rem;font-size:.97rem}
.naechster a{color:#fff;font-weight:600}

/* ------------------------------------------------------------------ Band */
.band{background:var(--blau);color:#fff;padding:2rem 0}
.band h2{margin:0 0 .3rem;color:#fff}
.band p{margin:0 0 1.1rem;color:#D8E8F5}
@media (min-width:820px){
  .band__inhalt{display:flex;align-items:center;justify-content:space-between;gap:2rem}
  .band p{margin:0}
}

/* ------------------------------------------------------------------- Fuß */
.fuss{background:var(--blau-tief);color:#B9CDDD;padding:2.2rem 0 1.4rem;font-size:.97rem}
.fuss a{color:#fff;text-decoration:none;word-break:break-word}
.fuss a:hover{color:var(--gelb);text-decoration:underline}
.fuss__raster{display:grid;gap:1.8rem;padding-bottom:1.6rem}
@media (min-width:640px){.fuss__raster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.fuss__raster{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.fuss h3{color:#fff;font-size:1.2rem;margin:0 0 .6rem}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.fuss__social{display:flex;gap:.6rem;margin-top:.9rem}
.fuss__social a{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius)}
.fuss__social svg{width:1.2rem;height:1.2rem}
.fuss__unten{border-top:1px solid rgba(255,255,255,.15);padding-top:1.1rem;display:flex;flex-wrap:wrap;
  gap:.7rem 1.4rem;justify-content:space-between;font-size:.9rem}
.fuss__unten ul{flex-direction:row;gap:1.2rem;flex-wrap:wrap}

/* ------------------------------------------------------------------ Rest */
.leer{color:var(--leise);background:var(--grund);border-radius:var(--radius);padding:1.2rem;margin:0}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
@media print{.kopf,.fuss,.band,.menuknopf{display:none}body{font-size:11pt}}