/* Theme: klar */
:root {
  --f-hintergrund: #ffffff;
  --f-buehne: #0e2c48;
  --f-flaeche: #ffffff;
  --f-vordergrund: #101216;
  --f-gedaempft: #576775;
  --f-rand: #ccd8e2;
  --f-marke: #ca701c;
  --f-marke-text: #101216;
  --f-radius: 2px;
  --f-abstand: 1.15rem;
  --f-titel-gewicht: 700;
  --f-titel-laufweite: -0.025em;
  --f-inhaltsbreite: 1140px;
  --f-titel-skala: 1;
  --f-schrift: var(--font-inter), system-ui, -apple-system, Segoe UI, Helvetica Neue, Arial, sans-serif;
  --f-akzent: var(--f-buehne);
  --f-akzent-farbe: #c2571f;
  --f-akzent-schrift: inherit;
  --f-akzent-stil: normal;
  --f-auge-von: var(--f-flaeche);
  --f-auge-bis: var(--f-flaeche);
}

.web-huelle[data-gestalt]{translate:var(--wg-x,0) var(--wg-y,0);rotate:var(--wg-dreh,0deg);width:var(--wg-breite,auto);z-index:var(--wg-ebene,auto);background:var(--wg-grund,transparent);padding:var(--wg-polster,0);border-radius:var(--wg-ecken,0);font-size:calc(1em * var(--wg-groesse,1))}
.web-huelle[data-textfarbe='true'],.web-huelle[data-textfarbe='true'] :is(h1,h2,h3,h4,p,li,span,a,strong,em,blockquote){color:var(--wg-text) !important}
.web-huelle[data-gewicht='fett'],.web-huelle[data-gewicht='fett'] :is(h1,h2,h3,h4,p,li,span,a,strong){font-weight:800 !important}
.web-huelle[data-gewicht='leicht'],.web-huelle[data-gewicht='leicht'] :is(h1,h2,h3,h4,p,li,span,a){font-weight:400 !important}
.web-huelle[data-kursiv='true'],.web-huelle[data-kursiv='true'] :is(h1,h2,h3,h4,p,li,span,a){font-style:italic !important}
.web-huelle[data-ausrichtung='links']{text-align:left !important}
.web-huelle[data-ausrichtung='mitte']{text-align:center !important}
.web-huelle[data-ausrichtung='rechts']{text-align:right !important}
@media (max-width:767px){.web-huelle[data-gestalt]{translate:none;rotate:none;width:auto}}

[data-frei]{box-sizing:border-box}
/* Die Kinder eines gestapelten Knotens teilen sich eine Rasterzelle. Wer
   oben liegt, entscheidet die Ebene (`z-index`) in ihrer Gestaltung.

   **Der zweite Selektor ist der noetige.** Ein `block` traegt
   `display: contents` — er erzeugt keine Box, seine Kinder werden die
   Rasterelemente des Knotens darueber. Der Selektor `> *` trifft dann
   trotzdem nur den Block selbst, und der hat keine Box, an der
   `grid-area` etwas bewirken koennte. Ohne die zweite Zeile stehen die
   Ebenen untereinander statt uebereinander — lautlos: es sieht aus wie ein
   Layout, nur nicht wie das gemeinte. */
[data-anordnung='gestapelt'] > *,
[data-anordnung='gestapelt'] > .web-block > *{grid-area:1/1}
[data-hg],[data-vg]{position:relative}
[data-hg]::before,[data-vg]::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}
[data-hg]::before{z-index:0}
[data-vg]::after{z-index:3}
/* Der Inhalt liegt zwischen den beiden Ebenen. Ohne diese Zeile stuende der
   Text hinter seinem eigenen Hintergrundbild — und zwar nur manchmal, je
   nachdem was sonst noch einen Stapelkontext aufmacht. */
[data-hg] > *,[data-vg] > *{position:relative;z-index:1}
/* Auf dem Telefon steht ein fixiertes Hintergrundbild still statt zu
   flackern: iOS setzt `fixed` ohnehin nicht um, und Android tut es
   ruckelnd. */
@media (max-width:767px){[data-hg]::before{background-attachment:scroll}}

@media (max-width:767px){[data-kstil][data-kstil][data-kstil]{translate:none !important;rotate:none !important;width:auto !important;max-width:100% !important}}


.zr { padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; }
.zr__mitte { max-width: var(--f-inhaltsbreite, 1120px); margin-inline: auto; }
.zr__ueber { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--f-akzent-farbe); margin: 0 0 .875rem; }
.zr__titel { font-family: var(--f-titel-schrift, inherit); font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1rem; }
.zr__text { font-size: 1.0625rem; line-height: 1.65; color: var(--f-gedaempft); margin: 0; max-width: 36rem; }
.zr__knopf { display: inline-block; padding: .9375rem 1.875rem; background: var(--f-akzent-farbe);
  color: #fff; text-decoration: none; border-radius: var(--f-radius); font-weight: 600; }
.zr__knopf--leer { background: transparent; color: var(--f-marke);
  box-shadow: inset 0 0 0 1px var(--f-rand); }
.zr-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* --- Der angeschnittene Kopf: die Neigung eines Satteldachs --- */
.zr-kopf { background: var(--f-buehne);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw)); padding-bottom: clamp(5rem, 10vw, 8rem); }
.zr-kopf__raster { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: 1fr; }
.zr-kopf__bild { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--f-radius); }
.zr-kopf__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 60rem) { .zr-kopf__raster { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; } }

/* Der Notdienst ganz oben — wer ein Loch im Dach hat, scrollt nicht. */
.zr-notdienst { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem;
  padding: .875rem 1.25rem; background: var(--f-marke); color: var(--f-marke-text);
  border-radius: var(--f-radius); margin-bottom: 2rem; font-size: .9375rem; }
.zr-notdienst strong { color: var(--f-akzent-farbe); }
.zr-notdienst a { color: inherit; font-weight: 600; margin-left: auto; }

/* --- Die Signatur: die Deckung ---
   Erst ab der zweiten Karte und nur breit: auf dem Telefon stehen sie
   untereinander, und dort waere ein negativer Abstand ein Stapel. */
.zr-deckung { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
.zr-ziegel { background: var(--f-flaeche); border: 1px solid var(--f-rand);
  border-radius: var(--f-radius); padding: 1.75rem; position: relative; }
.zr-ziegel h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.zr-ziegel p { margin: 0; color: var(--f-gedaempft); line-height: 1.6; font-size: .9375rem; }
@media (min-width: 62rem) {
  .zr-deckung { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .zr-ziegel + .zr-ziegel { margin-left: -1.5rem; }
  .zr-ziegel:nth-child(1) { z-index: 4; }
  .zr-ziegel:nth-child(2) { z-index: 3; }
  .zr-ziegel:nth-child(3) { z-index: 2; }
  .zr-ziegel:nth-child(4) { z-index: 1; }
  .zr-ziegel { box-shadow: -6px 0 16px -10px rgba(43,52,64,.35); }
}

.zr-referenzen { background: var(--f-buehne); }
.zr-raster { display: grid; gap: 1.25rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.zr-ref__bild { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--f-radius);
  margin-bottom: .875rem; }
.zr-ref__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zr-ref h3 { margin: 0 0 .25rem; font-size: 1rem; }
.zr-ref p { margin: 0; font-size: .9375rem; color: var(--f-gedaempft); }

.zr-zwei { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 60rem) { .zr-zwei { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.zr-feld { display: grid; gap: .375rem; margin-bottom: 1rem; font-size: .9375rem; font-weight: 500; }
.zr-feld input, .zr-feld textarea { font: inherit; font-weight: 400; padding: .8125rem 1rem;
  border: 1px solid var(--f-rand); border-radius: var(--f-radius); }
.zr-senden { border: 0; cursor: pointer; font: inherit; font-weight: 600; }