/* PIRON Metallbau GmbH, piron.nrw
   Hausfarbe #0055a9, uebernommen aus dem Stylesheet und der theme-color
   von pironmetallbau.de. Warmgrau #949187, ausgezaehlt aus dem Logo. */

:root{
  --blau:#0055a9;
  --blau-dunkel:#004488;
  --grau:#949187;
  --text:#2a2a2a;
  --text-hell:#5a6a76;
  --linie:#dfe4e8;
  --flaeche:#f7f7f7;
  --weiss:#fff;
  --bahn:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:var(--weiss);
  line-height:1.65;
  font-size:17px;
  -webkit-text-size-adjust:100%;
}

.bahn{max-width:var(--bahn);margin:0 auto;padding:0 24px}

a{color:var(--blau)}
a:hover{color:var(--blau-dunkel)}

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

.skip{
  position:absolute;left:-9999px;top:0;background:var(--blau);color:#fff;
  padding:10px 18px;z-index:100
}
.skip:focus{left:0}

/* ---------- Kopf mit Partnernetzwerk ---------- */

.kopf{background:#eceff1}

/* Schalter fuers Aufklappmenue, unsichtbar aber bedienbar */
.menuschalter{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

.kopf-bahn{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:14px;padding-bottom:14px;
}

.marke img{width:220px;display:block}

/* Kacheln des Partnernetzwerks */
.partner{display:flex;align-items:stretch;gap:9px}

.partnerkachel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:106px;min-height:64px;padding:10px 10px 5px;
  background:#fff;border:1px solid var(--blau);border-radius:6px;
  text-decoration:none;color:var(--blau);
}
.partnerkachel:hover{background:#f2f6fa}
.partnerkachel img{
  display:block;width:100px;height:auto;margin:auto;object-fit:contain;
}
.partnerkachel span{
  font-size:11px;text-transform:uppercase;font-weight:700;
  color:var(--blau);text-align:center;line-height:1.25;margin-top:5px;
}

.aktionsknopf{
  display:flex;align-items:center;
  background:var(--blau);color:#fff;text-decoration:none;
  padding:0 18px;border-radius:6px;min-height:64px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.aktionsknopf:hover{background:var(--blau-dunkel);color:#fff}

/* Aufklappknopf, nur auf schmalen Geraeten sichtbar */
.burger{
  display:none;align-items:center;gap:9px;cursor:pointer;
  padding:11px 14px;border:1px solid var(--blau);border-radius:6px;background:#fff;
  font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--blau);
}
.burger-striche{
  position:relative;display:block;width:19px;height:2px;background:var(--blau);
}
.burger-striche::before,.burger-striche::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:var(--blau);
}
.burger-striche::before{top:-6px}
.burger-striche::after{top:6px}

/* Blaue Navigationsleiste */
.navi{background:var(--blau)}
.navi-innen{display:flex;justify-content:center}
.navi ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center}
.navi li + li{border-left:1px solid rgba(255,255,255,.22)}
.navi a{
  display:block;padding:13px 15px;color:#fff;text-decoration:none;
  font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.navi a:hover{background:var(--blau-dunkel);color:#fff}
.navi a[aria-current="page"]{background:var(--blau-dunkel)}

/* Im Aufklappmenue erscheinen Kacheln und Kontakt, auf dem Rechner nicht */
.partner-menue,.menue-kontakt{display:none}

@media(max-width:1180px){
  .partner-oben{display:none}
  .burger{display:flex}

  .navi{display:none}
  .menuschalter:checked ~ .navi{display:block;padding:8px 0 22px}

  .navi-innen{flex-direction:column;gap:22px}
  .navi ul{flex-direction:column;justify-content:flex-start}
  .navi li + li{border-left:0;border-top:1px solid rgba(255,255,255,.22)}
  .navi a{padding:13px 4px;font-size:15px}

  .partner-menue{display:flex;flex-wrap:wrap;gap:10px}
  .partner-menue .partnerkachel{flex:1 1 132px}
  .partner-menue .aktionsknopf{flex:1 1 100%;justify-content:center;padding:13px 18px}

  .menue-kontakt{display:flex;flex-direction:column;gap:5px}
  .menue-kontakt a{color:#fff;text-decoration:none;font-weight:600}
  .menue-kontakt a:first-child{font-size:21px}
}

.brotkrumen{background:var(--flaeche);border-bottom:1px solid var(--linie);font-size:14px}
.brotkrumen .bahn{padding-top:10px;padding-bottom:10px;color:var(--text-hell)}
.brotkrumen span{margin:0 8px}
.brotkrumen span:last-child{margin:0;color:var(--text)}

/* ---------- Bildband am Seitenanfang ---------- */

.buehne{
  position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(400px,62vh,600px);background:#0b2033;
}

/* Das Bild liegt als echtes <img> darin, nicht als CSS-Hintergrund.
   Nur so laedt es der Browser frueh, hat einen Alt-Text und zaehlt
   sauber als groesstes Element fuer den LCP. */
.buehne-hg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}

.buehne-schleier{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(6,24,40,.88) 0%, rgba(6,24,40,.74) 44%, rgba(6,24,40,.40) 100%);
}

.buehne-innen{
  position:relative;z-index:2;width:100%;
  padding-top:54px;padding-bottom:54px;
}

.buehne-text{max-width:680px;color:#fff}

.buehne-text .marke{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:#9fc6ea;margin-bottom:14px;
}

.buehne-text h1{
  color:#fff;margin-bottom:16px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.buehne-text h1 em{font-style:normal;color:#8fc0ec}

.buehne-unter{
  font-size:19px;line-height:1.6;color:#dde7f0;
  margin-bottom:0;max-width:60ch;
}

.buehne-aktion{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.knopf.hell{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);
  padding:11px 24px;
}
.knopf.hell:hover{background:#fff;color:var(--blau)}

.zahlen-oben{margin-top:0}

@media(max-width:760px){
  .buehne{min-height:clamp(360px,72vh,540px)}
  .buehne-innen{padding-top:38px;padding-bottom:38px}
  .buehne-unter{font-size:17px}
  .buehne-aktion .knopf{flex:1 1 100%;text-align:center}
}

/* ---------- Bewegung ---------- */

@keyframes auf{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

@keyframes ring{
  0%  {box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  60% {box-shadow:0 0 0 18px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

@keyframes kenburns{
  from{transform:scale(1.04) translate(-1.2%,-.8%)}
  to  {transform:scale(1.14) translate(1.2%,.8%)}
}

/* Laeuft nur, wenn im Betriebssystem keine Bewegungsreduzierung eingestellt
   ist. Fuellmodus "backwards" statt "both": Fuehrt ein Browser die Animation
   nicht aus, steht der Text trotzdem sichtbar da. */
@media (prefers-reduced-motion: no-preference){

  .buehne-text > *{animation:auf .7s cubic-bezier(.22,.61,.36,1) backwards}
  .buehne-text > *:nth-child(1){animation-delay:.05s}
  .buehne-text > *:nth-child(2){animation-delay:.17s}
  .buehne-text > *:nth-child(3){animation-delay:.30s}
  .buehne-text > *:nth-child(4){animation-delay:.43s}

  .buehne-hg{
    /* "backwards" ist hier entscheidend: ohne den Fuellmodus stuende das Bild
       waehrend der Wartesekunde auf scale(1) und wuerde beim Start sichtbar
       auf scale(1.04) springen. */
    animation:kenburns 26s ease-in-out 1s infinite alternate backwards;
  }

  .knopf.pulsiert{animation:ring 5.5s ease-out 2.4s infinite}

  .zahlen-oben > div{animation:auf .6s ease-out backwards}
  .zahlen-oben > div:nth-child(1){animation-delay:.52s}
  .zahlen-oben > div:nth-child(2){animation-delay:.60s}
  .zahlen-oben > div:nth-child(3){animation-delay:.68s}
  .zahlen-oben > div:nth-child(4){animation-delay:.76s}
}

/* ---------- Textbausteine ---------- */

h1{
  font-size:clamp(28px,4vw,42px);line-height:1.2;font-weight:700;
  letter-spacing:-.01em;margin-bottom:20px
}
h2{
  font-size:clamp(22px,2.6vw,29px);line-height:1.25;font-weight:700;
  margin:44px 0 16px
}
h3{font-size:20px;font-weight:600;margin:28px 0 10px}

p{margin-bottom:16px}
p:last-child{margin-bottom:0}

.einstieg{font-size:19px;color:var(--text-hell);max-width:65ch}

section{padding:44px 0}
section.hell{background:var(--flaeche)}

ul.blank{list-style:none}
ul.blank li{margin-bottom:7px}

.liste{margin:0 0 18px 22px}
.liste li{margin-bottom:8px}

/* ---------- Bausteine ---------- */

.kacheln{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.kachel{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--weiss);border:1px solid var(--linie);border-radius:6px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.kachel:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(11,32,51,.14);
  border-color:#b9cde0;
}

/* Bild mit blauem Schleier. Er weicht beim Ueberfahren zurueck und das Foto
   kommt in voller Farbe. Der Text bleibt davon unberuehrt und ist immer
   sichtbar, es wird nichts erst beim Ueberfahren eingeblendet. */
.kachelbild{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--flaeche)}
.kachelbild img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.kachelbild::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(0,85,169,.46) 0%,rgba(0,40,80,.30) 100%);
  transition:opacity .45s ease;
}
.kachel:hover .kachelbild::after{opacity:0}
.kachel:hover .kachelbild img{transform:scale(1.06)}

.kachelinhalt{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.kachel h3{margin:0 0 9px;font-size:21px}
.kachel p{font-size:16px;color:var(--text-hell);margin-bottom:16px}
.kachel .weiterlesen{margin-top:auto}

.zahlen{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:28px}
.zahl{background:var(--weiss);border:1px solid var(--linie);padding:22px;border-radius:3px}
.zahl b{display:block;font-size:31px;line-height:1.1;color:var(--blau);font-weight:700}
.zahl span{font-size:15px;color:var(--text-hell)}

.knopf{
  display:inline-block;background:var(--blau);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:3px;font-weight:600
}
.knopf:hover{background:var(--blau-dunkel);color:#fff}
.knopf.rand{background:transparent;color:var(--blau);border:2px solid var(--blau);padding:11px 24px}
.knopf.rand:hover{background:var(--blau);color:#fff}

.hinweis{
  border-left:4px solid var(--grau);background:var(--flaeche);
  padding:18px 22px;margin:24px 0;font-size:16px
}

/* ---------- Bilder ---------- */

.hauptbild{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  border-radius:3px;margin:30px 0 8px;
  background:var(--flaeche);
}

.bildreihe{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin:20px 0 8px;
}
.bildreihe figure{margin:0}
.bildreihe img{
  display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;
  border-radius:3px;background:var(--flaeche);
}
.bildreihe figcaption{
  font-size:14px;color:var(--text-hell);
  padding-top:8px;line-height:1.45;
}

@media(max-width:600px){
  .hauptbild{aspect-ratio:4/3}
}

/* ---------- Beitraege ---------- */

.newsband{background:linear-gradient(180deg,#fff 0%,var(--flaeche) 100%);padding:52px 0 58px}

.abschnittkopf{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:30px;
}
.abschnittkopf h2{margin:0}

.marke.dunkel{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--blau);margin-bottom:8px;
}

.newsraster{display:grid;gap:24px;grid-template-columns:repeat(2,1fr)}

.newskarte{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--linie);border-radius:6px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.newskarte:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(11,32,51,.13);
  border-color:#b9cde0;
}

/* Die erste Karte laeuft ueber die volle Breite, Bild links, Text rechts */
.newskarte-gross{grid-column:1 / -1;flex-direction:row}
.newskarte-gross .newsbild{flex:0 0 46%;aspect-ratio:auto}
.newskarte-gross .newstext{padding:32px 34px}
.newskarte-gross h3{font-size:25px}

.newsbild{display:block;overflow:hidden;background:var(--flaeche);aspect-ratio:16/9}
.newsbild img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.newskarte:hover .newsbild img{transform:scale(1.05)}

.newstext{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}

.newsdatum{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--grau);margin-bottom:9px;
}

.newskarte h3{font-size:20px;line-height:1.3;margin:0 0 10px}
.newskarte h3 a{color:var(--text);text-decoration:none}
.newskarte:hover h3 a{color:var(--blau)}

.newsanriss{font-size:16px;color:var(--text-hell);margin-bottom:16px}

.weiterlesen{
  margin-top:auto;align-self:flex-start;
  font-weight:700;font-size:15px;text-decoration:none;
  display:inline-flex;align-items:center;gap:.55rem;
}
.weiterlesen span{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.newskarte:hover .weiterlesen span{transform:translateX(5px)}

@media(max-width:860px){
  .newsraster{grid-template-columns:1fr}
  .newskarte-gross{flex-direction:column}
  .newskarte-gross .newsbild{flex:none;aspect-ratio:16/9}
  .newskarte-gross .newstext{padding:24px 26px 26px}
  .newskarte-gross h3{font-size:21px}
}

/* ---------- Einzelbeitrag auf der News-Seite ---------- */

.beitrag{padding:38px 0;border-top:1px solid var(--linie)}
.beitrag:first-of-type{border-top:0}
.beitrag:nth-of-type(even){background:var(--flaeche)}

.beitrag-raster{
  display:grid;gap:38px;align-items:start;
  grid-template-columns:minmax(0,42%) minmax(0,1fr);
}
.beitrag-gedreht .beitrag-raster{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
.beitrag-gedreht .beitrag-bild{order:2}
.beitrag-gedreht .beitrag-text{order:1}

.beitrag-bild{margin:0;position:sticky;top:22px}
.beitrag-bild img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:6px;background:var(--linie);
}

.beitrag-text h2{margin:6px 0 16px;font-size:clamp(21px,2.4vw,27px)}
.beitrag-text p{font-size:16.5px}

@media(max-width:860px){
  .beitrag-raster,.beitrag-gedreht .beitrag-raster{grid-template-columns:1fr;gap:22px}
  .beitrag-gedreht .beitrag-bild{order:0}
  .beitrag-gedreht .beitrag-text{order:0}
  .beitrag-bild{position:static}
}

/* ---------- Bewegung beim Scrollen ---------- */

@keyframes vonlinks{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes vonrechts{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}

/* Nur in Browsern, die scrollgesteuerte Ablaeufe koennen. Aeltere ignorieren
   den Block vollstaendig und zeigen alles sofort, ohne Nachteil. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    .newskarte{
      animation:auf .8s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 46%;
    }
    .newsraster > .newskarte:nth-child(2){animation-range:entry 4% entry 50%}
    .newsraster > .newskarte:nth-child(3){animation-range:entry 8% entry 54%}

    .kacheln > .kachel{
      animation:auf .8s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 46%;
    }
    .kacheln > .kachel:nth-child(2){animation-range:entry 5% entry 51%}
    .kacheln > .kachel:nth-child(3){animation-range:entry 10% entry 56%}

    .beitrag-bild{
      animation:vonlinks .9s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 48%;
    }
    .beitrag-text{
      animation:vonrechts .9s linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 52%;
    }
    .beitrag-gedreht .beitrag-bild{animation-name:vonrechts}
    .beitrag-gedreht .beitrag-text{animation-name:vonlinks}
  }
}

/* ---------- Suche und Sprungmarken ---------- */

.suche{margin:6px 0 26px}
.suche label{
  display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--grau);margin-bottom:9px;
}
.suchzeile{display:flex;gap:10px;flex-wrap:wrap}
.suchzeile input[type=search]{
  flex:1 1 320px;min-width:0;
  font:inherit;font-size:16px;padding:12px 15px;
  border:1px solid #c2ced9;border-radius:6px;background:#fff;color:var(--text);
}
.suchzeile input[type=search]:focus{
  outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.16);
}
.suchzeile .knopf{border-radius:6px}

.suchbefund{font-size:16px;color:var(--text-hell);margin-bottom:18px}

mark{background:#ffe9a8;color:inherit;padding:0 2px;border-radius:2px}

.sprungmarken{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px}
.sprungmarken a{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border:1px solid var(--linie);border-radius:99px;
  background:#fff;text-decoration:none;font-size:14px;font-weight:600;
  color:var(--text);transition:border-color .2s ease,background .2s ease;
}
.sprungmarken a:hover{border-color:var(--blau);background:#f2f7fc;color:var(--blau)}
.sprungmarken span{
  background:var(--blau);color:#fff;border-radius:99px;
  font-size:12px;padding:1px 8px;font-variant-numeric:tabular-nums;
}

h2[id]{scroll-margin-top:18px}

/* ---------- Aufklappbare Fragen ---------- */

/* Bewusst <details>/<summary>: das kann jeder Browser von sich aus,
   es braucht kein JavaScript und der Text steht immer im HTML. */
.fragen{margin:26px 0 8px;border-top:1px solid var(--linie)}

.fragen details{border-bottom:1px solid var(--linie)}

.fragen summary{
  display:flex;align-items:flex-start;gap:14px;
  padding:19px 2px;cursor:pointer;list-style:none;
  font-size:18px;font-weight:650;line-height:1.35;color:var(--text);
  transition:color .2s ease;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--blau)}

/* Zeichen links, dreht sich beim Aufklappen */
.fragen summary::before{
  content:"+";
  flex:0 0 auto;width:26px;height:26px;margin-top:1px;
  display:grid;place-items:center;
  background:var(--blau);color:#fff;border-radius:50%;
  font-size:17px;font-weight:700;line-height:1;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.fragen details[open] summary::before{content:"–";transform:rotate(180deg)}

.fragen .antwort{padding:0 2px 22px 40px}
.fragen .antwort p{font-size:16.5px;color:var(--text-hell)}
.fragen .antwort p:last-child{margin-bottom:0}

@media(max-width:600px){
  .fragen summary{font-size:16.5px;gap:11px}
  .fragen .antwort{padding-left:0}
}

/* ---------- Formular ---------- */

.formular{max-width:820px;margin-top:8px}

.formular fieldset{border:0;padding:0;margin:0 0 30px}
.formular legend{
  padding:0;margin-bottom:16px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--blau);
}

.feldpaar{display:grid;gap:0 20px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.feldpaar{grid-template-columns:1fr}}

.feld{margin-bottom:18px}
.feld label{display:block;font-weight:600;font-size:15px;margin-bottom:6px}
.pflicht{color:#c0392b}

.feld input[type=text],
.feld input[type=email],
.feld input[type=tel],
.feld select,
.feld textarea{
  width:100%;font:inherit;font-size:16px;
  padding:11px 14px;border:1px solid #c2ced9;border-radius:6px;
  background:#fff;color:var(--text);
}
.feld textarea{resize:vertical;min-height:130px;line-height:1.6}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(0,85,169,.16);
}
.feld input[type=file]{
  width:100%;font:inherit;font-size:15px;padding:11px 0;
}
.hilfe{display:block;font-size:14px;color:var(--text-hell);margin-top:7px;line-height:1.5}

.einwilligung label{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:15.5px}
.einwilligung input{margin-top:4px;width:18px;height:18px;flex:0 0 auto}

/* Fuer Menschen unsichtbar, aber nicht per display:none, damit Automaten
   das Feld finden und ausfuellen. */
.falle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.meldung{border-radius:6px;padding:22px 24px;margin-bottom:26px}
.meldung h2{margin:0 0 10px;font-size:23px}
.meldung p:last-child{margin-bottom:0}
.meldung.gut{background:#eaf6ec;border-left:4px solid #2e7d43}
.meldung.schlecht{background:#fdeeec;border-left:4px solid #c0392b}
.meldung.schlecht .liste{margin-bottom:0}

/* ---------- Tabellen ---------- */

.tabellenrahmen{overflow-x:auto;margin:18px 0 30px}

table{border-collapse:collapse;width:100%;font-size:16px;min-width:520px}
caption{text-align:left;font-weight:600;padding-bottom:10px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
thead th{background:var(--flaeche);font-weight:600;white-space:nowrap}
tbody tr:hover{background:#fafbfc}
td.nr{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--blau)}
td.kurz{white-space:nowrap;color:var(--text-hell)}

/* ---------- Kontakt ---------- */

.kontaktraster{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kontaktblock{background:var(--flaeche);padding:26px;border-radius:3px}
.kontaktblock .telefon{font-size:25px;font-weight:700;color:var(--blau);text-decoration:none;display:block}

/* ---------- Karte auf der Kontaktseite ---------- */

.karte{margin:20px 0 26px}
.karte a{display:block;overflow:hidden;border-radius:6px;border:1px solid var(--linie)}
.karte img{
  display:block;width:100%;height:auto;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.karte a:hover img{transform:scale(1.03)}
.karte figcaption{
  font-size:14px;color:var(--text-hell);padding-top:9px;line-height:1.5;
}

/* ---------- Fuss ---------- */

.fuss{background:#1b2733;color:#c3ccd4;margin-top:56px;padding:44px 0 0;font-size:15px}
.fuss a{color:#c3ccd4;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss-titel{color:#fff;font-weight:600;margin-bottom:12px}
.fuss-raster{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding-bottom:32px}
.fuss-zeile{border-top:1px solid #2c3a48;padding-top:18px;padding-bottom:22px;font-size:14px;color:#8f9ba7}

/* ---------- Rechtstexte ---------- */

.rechtstext{max-width:76ch}
.rechtstext h2{font-size:22px;margin-top:34px}
.rechtstext h3{font-size:18px}
.rechtstext p,.rechtstext li{font-size:16px}

@media(max-width:760px){
  body{font-size:16px}
  .marke img{width:180px}
  .burger-text{display:none}
  .burger{padding:10px 12px}
  section{padding:32px 0}
}