@layer reset, basis, band, bausteine, ausnahmen, vertrag;

@layer reset {
  *, *::before, *::after { box-sizing: border-box }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0 }
  ol, ul { padding: 0; list-style: none }

  img, picture, svg { max-width: 100%; display: block; height: auto }

  [hidden] { display: none !important }

  button, input, textarea, select { font: inherit; color: inherit }
  table { border-collapse: collapse; width: 100% }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer basis {
  :root {
    
    --weiss:        #FFFFFF;
    --hell:         #F8F8F8;
    --beige:        #F5F0E5;
    --grau:         #E2E2E2;
    --hellblau:     #D4E7ED;
    --tief:         #144250;   
    --tief-2:       #0E2F39;   
    --dunkel:       #1C1F22;   

    --text:         #1C1F22;
    --leise:        #5C6159;
    --auf-dunkel:   #F8F8F8;
    --leise-dunkel: #C3C7C9;

    --linie:        #E2E2E2;
    --linie-leise:  #EFEFEF;

    --schrift:  'FiraSans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --serife:   'SourceSerif', Georgia, 'Times New Roman', serif;

    --a1: 8px;  --a2: 16px; --a3: 24px; --a4: 32px;
    --a5: 40px; --a6: 56px; --a7: 72px; --a8: 96px;

    --breite: 1280px;
    --rand: 24px;
    --r: 20px;          
    --r-klein: 12px;
    --r-pille: 999px;

    --kopf-hoehe: 72px;
    --kopf-h: 72px;     
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--kopf-hoehe) + var(--a3));
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background: var(--weiss);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }

  .bahn {
    width: 100%;
    max-width: var(--breite);
    margin-inline: auto;
    padding-inline: var(--rand);
  }

  h1, h2, h3, h4 { font-weight: 500; line-height: 1.2 }

  .titel {
    font-family: var(--serife);
    font-weight: 500;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.08;
    letter-spacing: -.01em;
  }

  .ueberschrift {
    font-family: var(--serife);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    letter-spacing: -.005em;
  }

  .vorspann {
    font-size: clamp(19px, 1.6vw, 22px);
    line-height: 1.5;
    color: var(--fg-leise, var(--leise));
    max-width: 62ch;
  }

  .prosa { max-width: 70ch }
  .prosa p + p { margin-top: var(--a3) }
  .prosa strong { font-weight: 600 }

  .prosa > * + * { margin-top: var(--a3) }
  .prosa h2 {
    font-family: var(--serife); font-weight: 500;
    font-size: clamp(23px, 2.1vw, 28px); line-height: 1.2;
    margin-top: var(--a6);
  }
  .prosa > h2:first-child { margin-top: 0 }
  .prosa h3 { font-size: 19px; font-weight: 600; margin-top: var(--a4) }
  .prosa li { position: relative; padding-left: 22px; margin-top: var(--a1) }
  .prosa ul > li::before {
    content: "\2013"; position: absolute; left: 0; color: var(--fg-leise);
  }
  .prosa ol { counter-reset: prosa-punkt }
  .prosa ol > li { counter-increment: prosa-punkt; padding-left: 30px }
  .prosa ol > li::before {
    content: counter(prosa-punkt) "."; position: absolute; left: 0;
    color: var(--fg-leise); font-variant-numeric: tabular-nums;
  }
  .prosa address { font-style: normal; line-height: 1.6 }
  .prosa .klein { font-size: 15px; line-height: 1.5; color: var(--fg-leise) }

  a { color: inherit }
  .prosa a {
    color: var(--fg-link, var(--tief));
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .prosa a:hover { text-decoration-thickness: 2px }

  :focus-visible {
    outline: 3px solid var(--fokus, var(--tief));
    outline-offset: 2px;
    border-radius: 2px;
  }

  .skip {
    position: absolute; left: var(--a2); top: -60px; z-index: 100;
    background: var(--tief); color: #fff; padding: 12px var(--a3);
    border-radius: 0 0 var(--r-klein) var(--r-klein); font-weight: 500;
    text-decoration: none;
  }
  .skip:focus { top: 0 }
}

@layer band {
  .band {
    --flaeche:    var(--weiss);
    --fg:         var(--text);
    --fg-leise:   var(--leise);
    --fg-link:    var(--tief);
    --linie-band: var(--linie);
    --karte-bg:   var(--weiss);
    --karte-rand: var(--linie);
    --knopf-fg:   var(--dunkel);
    --knopf-rand: var(--dunkel);
    --knopf-hover-bg: var(--tief);
    --knopf-hover-fg: #fff;
    --fokus:      var(--tief);

    background: var(--flaeche);
    color: var(--fg);
    
    --band-luft: clamp(40px, 4.5vw, 72px);
    padding-block: var(--band-luft);
  }

  .band[data-flaeche="hell"]  { --flaeche: var(--hell) }
  .band[data-flaeche="beige"] { --flaeche: var(--beige) }

  .band[data-flaeche="grau"] {
    --flaeche: var(--grau);
    --karte-rand: #CFCFCF;
    --fg-leise: #595959;     
  }

  .band[data-flaeche="hellblau"] {
    --flaeche: var(--hellblau);
    --karte-rand: #B6D2DB;
    --fg-leise: #595959;     
  }

  .band[data-flaeche="tief"] {
    --flaeche:    var(--tief);
    --fg:         #FFFFFF;
    --fg-leise:   var(--hellblau);
    --fg-link:    #FFFFFF;
    --linie-band: rgba(255,255,255,.28);
    --karte-bg:   rgba(255,255,255,.08);
    --karte-rand: rgba(255,255,255,.24);
    --knopf-fg:   #FFFFFF;
    --knopf-rand: #FFFFFF;
    --knopf-hover-bg: #FFFFFF;
    --knopf-hover-fg: var(--tief);
    --fokus:      #FFFFFF;
    --haken-bg:   #FFFFFF; --haken-fg: var(--tief);
    --kreuz-bg:   #FFFFFF; --kreuz-fg: #7A2318;
  }

  .band[data-flaeche="weiss"]    + .band[data-flaeche="weiss"],
  .band[data-flaeche="hell"]     + .band[data-flaeche="hell"],
  .band[data-flaeche="beige"]    + .band[data-flaeche="beige"],
  .band[data-flaeche="grau"]     + .band[data-flaeche="grau"],
  .band[data-flaeche="hellblau"] + .band[data-flaeche="hellblau"],
  .band[data-flaeche="tief"]     + .band[data-flaeche="tief"] { padding-top: 0 }

  
  .band:not(.buehne) > .bahn > * + * { margin-top: var(--a5) }
  .band:not(.buehne) > .bahn > .bandkopf + * { margin-top: var(--a4) }

  .band:not(.buehne) > .bahn > .bandkopf + .einleitung { margin-top: var(--a1) }
}

@layer bausteine {

  
  .bandkopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--a3);
    flex-wrap: wrap;
  }
  .bandkopf .mehr {
    font-size: 16px; font-weight: 500; white-space: nowrap;
    color: var(--fg-link); text-decoration: none;
    border-bottom: 1px solid currentColor; padding-bottom: 2px;
  }
  .bandkopf .mehr:hover { border-bottom-width: 2px }

  .einleitung { max-width: none }

  .knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 10px var(--a4);
    border: 1px solid var(--knopf-rand); border-radius: var(--r-pille);
    background: transparent; color: var(--knopf-fg);
    font-size: 17px; font-weight: 500; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
  }
  .knopf:hover {
    background: var(--knopf-hover-bg);
    border-color: var(--knopf-hover-bg);
    color: var(--knopf-hover-fg);
  }

  .knopf-voll {
    background: var(--knopf-hover-bg);
    border-color: var(--knopf-hover-bg);
    color: var(--knopf-hover-fg);
  }
  .knopf-voll:hover {
    background: var(--tief-2); border-color: var(--tief-2); color: #fff;
  }
  .band[data-flaeche="tief"] .knopf-voll:hover,
  .feature .knopf-voll:hover {
    background: var(--hellblau); border-color: var(--hellblau); color: var(--tief);
  }

  .knopf-klein { min-height: 40px; padding: 6px var(--a3); font-size: 15px }

  .knopfzeile { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center }

  .bild { overflow: hidden; border-radius: var(--r); background: var(--linie-leise) }
  .bild > img { width: 100%; height: 100%; object-fit: cover }
  .bild-buehne { aspect-ratio: 4 / 3 }
  .bild-karte  { aspect-ratio: 16 / 9 }
  .bild-person { aspect-ratio: 4 / 5 }
  
  .bild-band   { aspect-ratio: 7 / 3 }

  .bildzeile { margin-top: var(--a2); font-size: 15px; line-height: 1.45;
               color: var(--fg-leise); max-width: 70ch }

  .bild-hoch > img { object-position: 50% 35% }

  .bild-kopf { aspect-ratio: 8 / 9 }
  .bild-kopf > img { object-position: 50% 0 }

  .sitz-20  > img { object-position: 50% 20% }
  .sitz-40  > img { object-position: 50% 40% }
  .sitz-70  > img { object-position: 50% 70% }
  .sitz-100 > img { object-position: 50% 100% }

  .bild-kopf.naeher { position: relative }
  .bild-kopf.naeher > img { position: absolute; left: 0; bottom: 0; height: 115% }

  .raster {
    display: grid;
    gap: var(--a4);
    
    grid-template-columns: repeat(auto-fit, minmax(min(var(--raster-min, 280px), 100%), 1fr));
  }
  
  .raster-2 { --raster-min: 380px }
  .raster-3 { --raster-min: 340px }
  .raster-4 { --raster-min: 250px; gap: var(--a3) }
  .raster-5 { --raster-min: 200px; gap: var(--a3) }

  @media (max-width: 760px) {
    .raster.schiene {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 82%;
      gap: var(--a3);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      
      margin-inline: calc(var(--rand) * -1);
      padding-inline: var(--rand);
      scroll-padding-inline: var(--rand);
      
      scrollbar-width: none;
    }
    .raster.schiene::-webkit-scrollbar { display: none }
    .raster.schiene > * { scroll-snap-align: start }
    
    .raster.schiene:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px }

    .schiene-stand {
      display: flex; justify-content: flex-end; align-items: center;
      gap: var(--a2);
      margin-top: var(--a2);
      font-size: 15px; color: var(--fg-leise);
      font-variant-numeric: tabular-nums;
    }
    .schiene-balken {
      flex: 1; height: 3px; border-radius: 999px;
      background: var(--linie-band);
    }
    .schiene-balken > span {
      display: block; height: 100%; border-radius: 999px;
      background: var(--fg-leise);
      transition: width .2s ease, margin-left .2s ease;
    }
  }
  
  @media (min-width: 761px) {
    .schiene-stand { display: none }
    
    .tafel-marke { display: none }
  }

  @media (prefers-reduced-motion: reduce) {
    .schiene-balken > span { transition: none }
  }

  .duo {
    display: grid; gap: var(--a5);
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items: center;
  }
  .duo-schmal { grid-template-columns: minmax(0,5fr) minmax(0,7fr) }
  .duo-breit  { grid-template-columns: minmax(0,7fr) minmax(0,5fr) }
  .duo-oben   { align-items: start }
  .duo-gleich { align-items: stretch }
  
  .duo > div:not(.karte) > * + * { margin-top: var(--a3) }
  @media (max-width: 860px) {
    .duo, .duo-schmal, .duo-breit { grid-template-columns: minmax(0,1fr); gap: var(--a4) }
  }

  .karte {
    background: var(--karte-bg);
    border: 1px solid var(--karte-rand);
    border-radius: var(--r);
    padding: var(--a4);
    display: flex; flex-direction: column; gap: var(--a2);
  }
  
  .karte > .bild {
    flex: none;
    margin: calc(var(--a4) * -1) calc(var(--a4) * -1) var(--a1);
    border-radius: var(--r) var(--r) 0 0;
  }
  .karte h3 { font-size: 20px; font-weight: 500; line-height: 1.24 }
  .karte p  { font-size: 16px; line-height: 1.45; color: var(--fg-leise) }

  .karte .rolle { display: block; margin-top: 2px; font-size: 15px; color: var(--fg-leise) }

  a.karte { text-decoration: none; color: inherit; transition: border-color .15s }
  a.karte:hover { border-color: var(--fg-link) }
  a.karte:hover h3 { text-decoration: underline; text-underline-offset: 3px }

  

  .buehne { padding-block: clamp(40px, 5vw, 72px) }
  .buehne .bahn {
    display: grid; gap: clamp(32px, 4vw, 64px);
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
  }
  .buehne-text { display: flex; flex-direction: column; gap: var(--a3) }
  .buehne-text .knopfzeile { margin-top: var(--a1) }
  @media (max-width: 900px) {
    .buehne .bahn { grid-template-columns: minmax(0,1fr) }
  }

  .zahlen { display: grid; gap: var(--a5);
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }
  .zahl { display: flex; flex-direction: column; gap: var(--a1) }
  
  .zahl-wert {
    font-family: var(--serife); font-weight: 400;
    font-size: clamp(48px, 6vw, 80px); line-height: 1.05;
    letter-spacing: -.02em;
    white-space: nowrap;
  }
  
  .zahl-wert .einheit { display: block; font-size: .4em; letter-spacing: -.01em }
  .zahl-text { font-size: 17px; line-height: 1.4; color: var(--fg-leise); max-width: 28ch }

  .feature {
    background: var(--tief); color: #fff;
    --fg: #FFFFFF;
    --fg-leise: var(--hellblau);
    --fg-link: #FFFFFF;
    --linie-band: rgba(255,255,255,.28);
    --knopf-fg: #FFFFFF; --knopf-rand: #FFFFFF;
    --knopf-hover-bg: #FFFFFF; --knopf-hover-fg: var(--tief);
    --fokus: #FFFFFF;
    --haken-bg: #FFFFFF; --haken-fg: var(--tief);
    --kreuz-bg: #FFFFFF; --kreuz-fg: #7A2318;
    border-radius: var(--r); overflow: hidden;
    display: grid; grid-template-columns: minmax(0,6fr) minmax(0,5fr);
    align-items: stretch;
  }
  .feature-text {
    
    padding: clamp(28px, 3.4vw, 48px);
    display: flex; flex-direction: column; gap: var(--a3);
    justify-content: center;
  }
  .feature-bild { position: relative; min-height: 300px }
  
  .feature-bild img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 20%;
  }
  
  .feature-bild.unten img { object-position: 50% 80% }
  @media (max-width: 860px) {
    .feature { grid-template-columns: minmax(0,1fr) }
    .feature-bild { min-height: 220px; order: -1 }

    .feature-bild.ganz { min-height: 0; aspect-ratio: 4 / 3; align-self: start }

    .feature-bild.oben img { object-position: 50% 5% }
  }

  
  .zitat { display: grid; gap: var(--a4);
           grid-template-columns: minmax(0, 340px) minmax(0,1fr) }

  .zitat .bild-person { position: relative; aspect-ratio: auto; min-height: 460px }
  .zitat .bild-person > img { position: absolute; inset: 0 }

  .zitat-inhalt { display: flex; flex-direction: column; gap: var(--a4) }
  .zitat-text {
    font-family: var(--serife); font-weight: 500;
    font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3;
  }
  .zitat figcaption { margin-top: var(--a3); font-size: 16px; line-height: 1.4 }
  .zitat figcaption .name { display: block; font-weight: 600 }
  .zitat figcaption .rolle { display: block; color: var(--fg-leise) }
  
  @media (max-width: 900px) {
    .zitat { grid-template-columns: minmax(0, 260px) minmax(0,1fr) }
    .zitat .bild-person { min-height: 360px }
  }

  @media (max-width: 760px) {
    .zitat { grid-template-columns: minmax(0,1fr) }
    
    .zitat .bild-person { aspect-ratio: 4 / 5; min-height: 0 }
    
  }

  .schritte { counter-reset: schritt }
  .schritt {
    counter-increment: schritt; padding-top: var(--a3);
    border-top: 2px solid var(--fg);
    display: flex; flex-direction: column; gap: var(--a1);
  }
  .schritt::before {
    content: counter(schritt);
    font-family: var(--serife); font-weight: 400; font-size: 44px; line-height: 1;
    color: var(--fg-link);
  }
  .schritt h3 { font-size: 19px; font-weight: 500 }
  .schritt p  { font-size: 16px; line-height: 1.45; color: var(--fg-leise) }
  .schritt .ort { font-size: 14px; font-weight: 500; color: var(--fg-leise) }

  .liste li { position: relative; padding-left: 34px; margin-top: var(--a2);
              font-size: 17px; line-height: 1.45 }
  .liste li:first-child { margin-top: 0 }
  .liste li::before {
    position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 12px; font-weight: 700; line-height: 1;
  }
  .liste-ja li::before {
    content: "\2713";
    background: var(--haken-bg, var(--tief)); color: var(--haken-fg, #fff);
  }
  .liste-nein li::before {
    content: "\2715";
    background: var(--kreuz-bg, #7A2318); color: var(--kreuz-fg, #fff);
  }

  .blatt { border-top: 1px solid var(--linie-band) }
  .blatt > div {
    display: grid; grid-template-columns: minmax(150px, 34%) minmax(0,1fr);
    gap: var(--a3); padding: 14px 0; border-bottom: 1px solid var(--linie-band);
  }
  .blatt dt { font-size: 15px; font-weight: 500; color: var(--fg-leise) }
  .blatt dd { margin: 0; font-size: 17px; line-height: 1.45 }
  @media (max-width: 560px) {
    .blatt > div { grid-template-columns: minmax(0,1fr); gap: 2px }
  }

  .tafel { font-size: 17px }
  .tafel caption { text-align: left; font-size: 15px; color: var(--fg-leise);
                   padding-bottom: var(--a2) }
  .tafel th {
    text-align: left; font-size: 14px; font-weight: 600; letter-spacing: .01em;
    padding: 12px var(--a2); border-bottom: 2px solid var(--fg);
  }
  .tafel td { padding: 14px var(--a2); border-bottom: 1px solid var(--linie-band);
              vertical-align: top; line-height: 1.45 }
  .tafel tbody tr:last-child td { border-bottom: 0 }
  .tafel .betrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
  .tafel .summe td {
    background: var(--tief); color: #fff; font-weight: 600; border-bottom: 0;
  }
  .tafel .summe td:first-child { border-radius: var(--r-klein) 0 0 var(--r-klein) }
  .tafel .summe td:last-child  { border-radius: 0 var(--r-klein) var(--r-klein) 0 }
  
  .tafel-rolle {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background:
      linear-gradient(to right, var(--karte-bg, #fff) 40%, rgba(255,255,255,0))
        left center / 36px 100% no-repeat local,
      linear-gradient(to left, var(--karte-bg, #fff) 40%, rgba(255,255,255,0))
        right center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(28,31,34,.18), rgba(28,31,34,0))
        left center / 16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(28,31,34,.18), rgba(28,31,34,0))
        right center / 16px 100% no-repeat scroll;
  }

  .fragen { display: flex; flex-direction: column; gap: var(--a2) }
  .fragen details {
    background: var(--karte-bg); border: 1px solid var(--karte-rand);
    border-radius: var(--r);
  }
  .fragen summary {
    list-style: none; cursor: pointer; position: relative;
    padding: var(--a3) var(--a7) var(--a3) var(--a4);
    font-size: 18px; font-weight: 500; line-height: 1.35;
  }
  .fragen summary::-webkit-details-marker { display: none }
  .fragen summary::after, .fragen summary::before {
    content: ""; position: absolute; right: var(--a4); top: 50%;
    width: 15px; height: 2px; margin-top: -1px;
    background: var(--fg-link); transition: transform .15s;
  }
  .fragen summary::before { transform: rotate(90deg) }
  .fragen details[open] summary::before { transform: rotate(0deg) }
  .fragen .antwort { padding: 0 var(--a4) var(--a4); font-size: 17px; line-height: 1.6 }
  .fragen .antwort > * + * { margin-top: var(--a2) }
  .fragen .antwort a { color: var(--fg-link); text-underline-offset: 3px }

  .sprungliste li + li { border-top: 1px solid var(--karte-rand) }
  .sprungliste a {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--a2); padding: 12px 0;
    font-size: 17px; line-height: 1.35;
    color: var(--fg); text-decoration: none;
  }
  .sprungliste a:hover {
    color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px;
  }
  .sprungliste .anzahl {
    flex: none; font-size: 15px; color: var(--fg-leise);
    font-variant-numeric: tabular-nums;
  }

  .autor {
    margin-top: var(--a6); padding-top: var(--a4);
    border-top: 1px solid var(--linie-band);
  }
  .autor h3 { font-size: 17px; font-weight: 600; margin-bottom: var(--a1) }
  .autor p { font-size: 16px; line-height: 1.5 }
  .autor p + p { margin-top: var(--a2) }
  .autor a { color: var(--fg-link); text-underline-offset: 3px }
  .credits { font-size: 15px; line-height: 1.5; color: var(--fg-leise) }

  .kasten {
    border-left: 4px solid var(--fg-link);
    background: var(--karte-bg);
    border-radius: 0 var(--r-klein) var(--r-klein) 0;
    padding: var(--a3);
  }
  .kasten h3 { font-size: 17px; font-weight: 600; margin-bottom: var(--a1) }
  .kasten p { font-size: 16px; line-height: 1.5 }
  .kasten p + p { margin-top: var(--a2) }
  .kasten a { color: var(--fg-link); text-underline-offset: 3px }
  .kasten-stop { border-left-color: #7A2318 }

  .person { display: flex; align-items: center; gap: var(--a3) }
  .person .bild { flex: 0 0 72px; width: 72px; aspect-ratio: 1; border-radius: 50% }
  .person .bild > img { object-position: 50% 20% }
  .person .name { display: block; font-weight: 600; font-size: 17px }
  .person .rolle { display: block; font-size: 15px; color: var(--fg-leise) }

  .stimmen blockquote { font-size: 17px; line-height: 1.5 }
  .stimmen figcaption { margin-top: var(--a2); font-size: 15px; color: var(--fg-leise) }

  footer.amt {
    background: var(--dunkel); color: var(--auf-dunkel);
    padding-block: var(--a7) var(--a5);
    --fg-leise: var(--leise-dunkel);
    --fokus: #FFFFFF;
  }
  .fuss-raster {
    display: grid; gap: var(--a5);
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  }
  .fuss-marke { display: block; font-family: var(--serife); font-size: 24px;
                font-weight: 500; line-height: 1.2 }

  .fuss-marke ~ p { font-size: 15px; line-height: 1.5; color: var(--leise-dunkel);
                    margin-top: var(--a2); max-width: 42ch }
  .fuss-marke ~ p a { color: var(--auf-dunkel);
                      text-decoration: underline; text-underline-offset: 3px }

  .fuss-raster h2 { font-size: 14px; font-weight: 600; letter-spacing: .01em;
                    color: var(--leise-dunkel); margin-bottom: var(--a2) }
  .fuss-raster li + li { margin-top: 10px }
  .fuss-raster a { font-size: 16px; text-decoration: none; color: var(--auf-dunkel) }
  .fuss-raster a:hover { text-decoration: underline; text-underline-offset: 3px }
  .fuss-schluss {
    margin-top: var(--a6); padding-top: var(--a3);
    border-top: 1px solid rgba(255,255,255,.18);
    font-size: 14px; color: var(--leise-dunkel);
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--a2) var(--a3);
  }
  @media (max-width: 860px) {
    .fuss-raster { grid-template-columns: minmax(0,1fr) minmax(0,1fr) }
  }

  @media (max-width: 520px) {
    footer.amt { padding-block: var(--a6) var(--a4) }
    .fuss-raster { grid-template-columns: minmax(0,1fr); gap: var(--a4) }

    .fuss-raster ul { columns: 2; column-gap: var(--a3) }
    .fuss-raster li { break-inside: avoid }
    .fuss-raster li + li { margin-top: 2px }
    .fuss-raster a { line-height: 1.35 }
    .fuss-schluss { margin-top: var(--a4) }
  }
}

@layer ausnahmen {
  
  .band[data-flaeche="tief"] > .bahn > .zahlen { margin-top: var(--a6) }

  @media (max-width: 1080px) and (min-width: 561px) {
    .raster-5 { grid-template-columns: repeat(2, minmax(0,1fr)) }
  }
}

@layer vertrag {

  body > header {
    position: sticky; top: 0; z-index: 60;
    background: var(--dunkel); color: var(--auf-dunkel);
    --fokus: #FFFFFF;
  }
  body > header .bahn {
    display: flex; align-items: center; gap: var(--a4);
    min-height: var(--kopf-hoehe);
  }
  header.scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.2) }

  .marke {
    font-family: var(--serife); font-size: 21px; font-weight: 500;
    color: var(--auf-dunkel); text-decoration: none; white-space: nowrap;
    margin-right: auto;
  }
  .marke:hover { text-decoration: underline; text-underline-offset: 4px }

  .haupt { display: flex; gap: var(--a4); align-items: center }
  
  .haupt a:not(.knopf) {
    font-size: 16px; color: var(--auf-dunkel); text-decoration: none;
    padding-block: 6px; border-bottom: 2px solid transparent;
  }
  .haupt a:not(.knopf):hover,
  .haupt a:not(.knopf)[aria-current] { border-bottom-color: var(--hellblau) }

  .kopf-rechts { display: flex; align-items: center; gap: var(--a2) }
  body > header .knopf {
    --knopf-fg: #FFFFFF; --knopf-rand: #FFFFFF;
    --knopf-hover-bg: #FFFFFF; --knopf-hover-fg: var(--dunkel);
  }

  .burger {
    display: none; width: 44px; height: 44px; padding: 0;
    background: transparent; border: 1px solid rgba(255,255,255,.4);
    border-radius: var(--r-klein); cursor: pointer;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    transition: background-color .15s, border-color .15s;
  }
  
  .burger span {
    display: block; width: 22px; height: 2px; background: currentColor;
    transition: transform .18s, opacity .12s;
  }

  body.nav-offen .burger { border-color: #fff; background: rgba(255,255,255,.12) }
  body.nav-offen .burger span:first-child { transform: translateY(7px) rotate(45deg) }
  body.nav-offen .burger span:nth-child(2) { opacity: 0 }
  body.nav-offen .burger span:last-child { transform: translateY(-7px) rotate(-45deg) }

  .haupt-tat { display: none }

  @media (max-width: 1080px) {
    .burger { display: flex }
    body > header .bahn { gap: var(--a2) }
    .haupt {
      position: fixed; left: 0; right: 0; top: var(--kopf-h, 72px); bottom: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--dunkel);
      border-top: 1px solid rgba(255,255,255,.14);
      padding: 0 0 var(--a5);
      overflow-y: auto; overscroll-behavior: contain;
      opacity: 0; visibility: hidden;
      
      transition: opacity .15s, visibility 0s linear .15s;
    }
    body.nav-offen .haupt {
      opacity: 1; visibility: visible;
      transition: opacity .15s, visibility 0s;
    }
    .haupt li + li { border-top: 1px solid rgba(255,255,255,.12) }
    
    .haupt a:not(.knopf) {
      display: flex; align-items: center; min-height: 52px;
      padding: 10px var(--rand); font-size: 19px;
      color: var(--leise-dunkel); border-bottom: 0;
    }
    .haupt a:not(.knopf):hover { color: #fff; background: rgba(255,255,255,.06) }

    .haupt a[aria-current] {
      color: #fff; font-weight: 500;
      background: rgba(255,255,255,.06);
      box-shadow: inset 3px 0 0 var(--hellblau);
    }

    body.nav-offen { overflow: hidden }
  }

  @media (max-width: 560px) {
    
    body > header .kopf-rechts .knopf { display: none }

    .haupt-tat {
      display: block;
      padding: var(--a4) var(--rand) 0;
    }
    .haupt-tat .knopf { width: 100% }
  }

  .cal { display: flex; flex-direction: column; gap: var(--a2) }
  .cal > h3 { font-size: 20px; font-weight: 500 }
  .cal > p { font-size: 16px; line-height: 1.5; color: var(--fg-leise) }
  .cal-gate { margin-top: var(--a1) }
  .cal.is-loaded > h3, .cal.is-loaded > p, .cal.is-loaded .cal-gate { display: none }

  .cal .calendly-inline-widget {
    min-height: 420px; border-radius: var(--r); overflow: hidden;
    background: var(--weiss);
  }

  .karte:has(> .cal) { padding: var(--a2) }

  @media (min-width: 861px) {
    #kontakt > .bahn > .duo.duo-oben:has(.cal) > :first-child {
      padding-top: var(--a2);
    }
  }

  .buehne:has(.cal) > .bahn { align-items: start }

  .foot-legal { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: center }
  .foot-legal a { color: var(--leise-dunkel); text-decoration: none }
  .foot-legal a:hover { text-decoration: underline; text-underline-offset: 3px }
  .foot-widerruf, [data-einwilligung-widerruf] {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 14px; color: var(--leise-dunkel);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .foot-widerruf:hover, [data-einwilligung-widerruf]:hover { color: #fff }

  .einwilligung {
    position: fixed; left: var(--a2); right: var(--a2); bottom: var(--a2); z-index: 90;
    max-width: 640px; margin-inline: auto;
    background: var(--dunkel); color: var(--auf-dunkel);
    border-radius: var(--r); padding: var(--a3) var(--a4);
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--a3);
    box-shadow: 0 2px 18px rgba(28,31,34,.3);
    --fokus: #FFFFFF;
  }
  .einwilligung p { font-size: 15px; line-height: 1.45; flex: 1 1 260px }
  .einwilligung a { color: #fff }
  .einwilligung-knoepfe { display: flex; gap: var(--a2); flex-wrap: wrap }

  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px var(--a3);
    border-radius: var(--r-pille); border: 1px solid transparent;
    font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer;
    white-space: nowrap;
  }
  .btn-primary { background: #FFFFFF; color: var(--dunkel) }
  .btn-primary:hover { background: var(--hellblau) }
  .btn-ghost { background: transparent; color: var(--auf-dunkel);
               border-color: rgba(255,255,255,.5) }
  .btn-ghost:hover { border-color: #fff }

  
  @media (max-width: 760px) {
    .marke { font-size: 18px }
    .haupt a:not(.knopf) { font-size: 17px }
  }
}

@layer ausnahmen {

  @media (max-width: 760px) {

    .marke { display: inline-flex; align-items: center; min-height: 44px }
    .bandkopf .mehr { padding-block: 10px }
    .fuss-raster li > a,
    .fuss-schluss .foot-widerruf {
      display: inline-flex; align-items: center; min-height: 44px;
    }

    .nur-breit { display: none }

    
    .buehne:has(.bild-buehne) {
      position: relative;
      isolation: isolate;
      display: flex;
      align-items: flex-end;
      min-height: 600px;
      min-height: min(88svh, 680px);
      padding-block: var(--a7) var(--a6);
      
      --fg: #FFFFFF;
      --fg-leise: #E7EAEA;
      --fg-link: #FFFFFF;
      --knopf-fg: #FFFFFF;
      --knopf-rand: #FFFFFF;
      --knopf-hover-bg: #FFFFFF;
      --knopf-hover-fg: var(--tief);
      --fokus: #FFFFFF;
      color: #FFFFFF;
    }
    
    .buehne .bahn { z-index: 1; width: 100% }

    .buehne:has(.bild-buehne) + .band { padding-top: var(--band-luft) }

    .buehne .buehne-text { position: relative; z-index: 1 }

    .buehne .bild-buehne {
      position: absolute; inset: 0; z-index: 0;
      aspect-ratio: auto; border-radius: 0;
    }
    
    .buehne .bild-buehne > img {
      position: absolute; left: 0; bottom: 0;
      width: 100%; height: 121%;
      object-position: 55% 50%;
    }
    .buehne .bild-buehne::after {
      content: ""; position: absolute; inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(28,31,34,0) 0%,
          rgba(28,31,34,.30) 30%,
          rgba(28,31,34,.58) 52%,
          rgba(28,31,34,.78) 100%),
        rgba(28,31,34,.22);
    }

    .buehne .knopfzeile { display: grid; gap: var(--a2) }

    
    .tafel .betrag { white-space: normal }
    
    .tafel .betrag-ganz { white-space: nowrap }

    .tafel-stapel thead { display: none }
    
    .tafel-stapel caption { display: block }
    .tafel-stapel,
    .tafel-stapel tbody,
    .tafel-stapel tr,
    .tafel-stapel th,
    .tafel-stapel td { display: block; width: auto }
    .tafel-stapel tr {
      padding-block: var(--a3);
      border-bottom: 1px solid var(--linie-band);
    }
    .tafel-stapel tr:last-child { border-bottom: 0; padding-bottom: 0 }
    .tafel-stapel th[scope="row"] {
      font-size: 18px; font-weight: 600; letter-spacing: 0;
      padding: 0 0 var(--a2); border-bottom: 0;
    }
    .tafel-stapel td { padding: 0 0 var(--a3); border-bottom: 0 }
    .tafel-stapel td:last-child { padding-bottom: 0 }
    .tafel-marke {
      display: block; margin-bottom: 2px;
      font-size: 13px; font-weight: 600; letter-spacing: .02em;
      color: var(--fg-leise);
    }
    .tafel { font-size: 15px }
    .tafel th, .tafel td { padding: 10px var(--a1) }
    .tafel caption { font-size: 14px }

    body { font-size: 16px; line-height: 1.55 }

    .titel       { font-size: 28px }
    .ueberschrift { font-size: 22px }
    .vorspann    { font-size: 17px }

    .prosa h2    { font-size: 20px }
    .prosa h3    { font-size: 17px }
    .prosa .klein { font-size: 14px }

    .karte h3    { font-size: 18px }
    .karte p     { font-size: 15px }
    .karte .rolle { font-size: 14px }

    .karte { padding: var(--a3) }
    .karte > .bild {
      margin: calc(var(--a3) * -1) calc(var(--a3) * -1) var(--a1);
    }

    .zahl-wert   { font-size: 40px }
    .zahl-text   { font-size: 15px }

    .zitat-text  { font-size: 19px }
    .zitat figcaption { font-size: 15px }

    .schritt::before { font-size: 34px }
    .schritt h3  { font-size: 17px }
    .schritt p   { font-size: 15px }

    .liste li    { font-size: 16px }
    .blatt dd    { font-size: 16px }
    .sprungliste a { font-size: 16px }

    .fragen summary { font-size: 17px }
    .fragen .antwort { font-size: 16px }

    .kasten h3, .autor h3 { font-size: 16px }
    .kasten p,  .autor p  { font-size: 15px }
    .credits     { font-size: 14px }

    .person .name { font-size: 16px }
    .person .rolle { font-size: 14px }

    .stimmen blockquote { font-size: 16px }
    .stimmen figcaption { font-size: 14px }

    .bildzeile   { font-size: 14px }
    .knopf       { font-size: 16px }

    .cal > h3    { font-size: 18px }
    .cal > p     { font-size: 15px }

    .fuss-marke  { font-size: 20px }
    .fuss-marke ~ p { font-size: 14px }
    .fuss-raster a { font-size: 15px }

    .tafel-stapel th[scope="row"] { font-size: 17px }

    .band { --band-luft: 34px }
  }
}