/* =========================================================================
   Lebenslicht Seniorenhilfe, Rona Raufi
   Der Flyer ist die Vorlage fuer Farben, Marke, Foto und Ton (Rosatoene,
   Schreibschrift fuer den Namen, Pinselstrich, Blattzweig, Sonne der Bildmarke),
   nicht fuer die Anordnung. Die Seite ist als Website gebaut und von Hand
   gemalt gedacht: Aquarellflecken, Pinselkanten, handschriftliche Randnotiz.
   Die gemalten Formen erzeugt src/aquarell.py.

   Schriften selbst gehostet (SIL OFL), Icons Phosphor (MIT). Kein JavaScript,
   kein fremder Server.

   Lesbarkeit geht vor: Grundschrift 20px, Fliesstext mindestens 6,8:1,
   Schaltflaechen mindestens 56px hoch, nichts unter 14px.
   ========================================================================= */

@font-face{font-family:"EB Garamond";src:url("../fonts/garamond.woff2?v=4b0a1fa5") format("woff2");
  font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("../fonts/garamond-kursiv.woff2?v=0e5371bc") format("woff2");
  font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree.woff2?v=c0818fa4") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Parisienne";src:url("../fonts/parisienne.woff2?v=3e0dee32") format("woff2");font-display:swap}
@font-face{font-family:"Kalam";src:url("../fonts/kalam.woff2?v=3564add3") format("woff2");font-display:swap}

:root{
  color-scheme:light;

  /* Farben am Flyer gemessen, Band und Text eine Stufe tiefer fuer die Lesbarkeit */
  --grund:#fffaf9;
  --blush:#fdf0f2;
  --kreis:#fce4e8;
  --karte:#fcecec;
  --rand:#efdfe2;
  --rose:#a82e57;        /* Weiss darauf 6,6:1 */
  --rose-tief:#8e1f49;
  --akzent:#c85474;
  --band:#b93e65;        /* Weiss darauf 5,4:1 */
  --haken:#d4788c;
  --navy:#363a4e;
  --text:#54586a;

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --hand:"Kalam","Segoe Print",cursive;
  --schatten:0 1.4rem 2.6rem -1.9rem rgb(142 31 73 / .5);
  /* Ecken wie mit der Schere geschnitten: keine zwei gleich */
  --ecken-a:1.8rem 1.25rem 1.9rem 1.15rem / 1.25rem 1.9rem 1.15rem 1.8rem;
  --ecken-b:1.15rem 1.9rem 1.25rem 1.8rem / 1.9rem 1.15rem 1.8rem 1.25rem;
  --t:160ms ease;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:125%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem}   /* 20px */
body{margin:0;background:var(--grund);color:var(--text);overflow-x:hidden;
  font:400 1rem/1.55 var(--sans);font-synthesis:none;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
strong,b{font-weight:700}

h1,h2{font-family:var(--serif);font-weight:600;color:var(--navy);line-height:1.08;
  letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.3rem,1.45rem + 3.5vw,4.1rem)}
h2{font-size:clamp(1.95rem,1.45rem + 2vw,2.9rem)}
/* Das betonte Wort: kursiv, rosa, darunter ein Pinselstrich */
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--rose);padding-inline:.04em;
  background:url("../img/strich.svg?v=fd7ba3e2") 0 88%/100% .4em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

a{color:var(--rose-tief);text-decoration:underline;text-decoration-thickness:.08em;
  text-underline-offset:.2em;transition:color var(--t),background-color var(--t)}
a[href^="tel:"]{white-space:nowrap}
:focus-visible{outline:4px solid var(--rose-tief);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

.ic{width:1em;height:1em;flex:none;fill:currentColor}
.skip{position:absolute;top:0;left:0;z-index:99;transform:translateY(-100%);background:var(--rose-tief);
  color:#fff;padding:1rem 1.5rem;text-decoration:none;border-radius:0 0 14px 0}
.skip:focus{transform:none}
main:focus{outline:none}
.wrap{width:min(100% - 2.5rem,68rem);margin-inline:auto}

/* ---------- Leiste -------------------------------------------------------- */

.leiste{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.1rem 1.7rem;background:#fff;
  padding:.5rem max(1.25rem,calc(50% - 34rem));border-bottom:1px solid var(--rand)}
.leiste .marke{margin-right:auto}
.leiste .marke img{height:72px;width:auto}
.leiste nav{display:flex;flex-wrap:wrap;gap:0 1.6rem}
.weg{display:inline-block;padding-block:.75rem;font-weight:600;color:var(--navy);text-decoration:none}
.weg:hover{color:var(--rose)}
.weg[aria-current]{color:var(--rose);text-decoration:underline}

.ruf{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:3rem;
  padding:.5rem 1.4rem .5rem 1.15rem;border-radius:999px;border:2px solid var(--rose);
  background:var(--rose);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.ruf .ic{font-size:1.35rem}
.ruf:hover{background:var(--rose-tief);border-color:var(--rose-tief)}
.ruf--rand{background:#fff;color:var(--rose-tief);padding-inline:1.4rem}
.ruf--rand:hover{color:#fff}
.anruf{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- Aufmacher ----------------------------------------------------- */

.held{position:relative;overflow:hidden;padding-block:clamp(2.2rem,5vw,4.6rem) clamp(3.4rem,7vw,6rem);
  background:radial-gradient(52rem 30rem at 88% 4%,#fde9ed 0,rgb(253 233 237 / 0) 70%)}
.held-in{display:grid;gap:2.6rem;align-items:center}
.held-in>*{min-width:0}
.lead{font-size:1.15rem;max-width:27em;margin-top:1rem;text-wrap:balance}
.held .lead{margin-bottom:1.7rem}
/* Randnotiz von Hand, der Pfeil zeigt auf die Telefonnummer */
.notiz{display:inline-block;margin:.5rem 0 0 1.6rem;padding:1.5rem 0 0 3.3rem;min-height:3.6rem;
  font:400 1.2rem/1.2 var(--hand);color:var(--rose-tief);transform:rotate(-3deg);transform-origin:0 0;
  background:url("../img/pfeil.svg?v=f5033f1e") 0 0/2.9rem auto no-repeat}

.held-bild{justify-self:center;width:min(100%,25rem)}
.rahmen{position:relative;margin:1.2rem 1.4rem 0 1.6rem}
/* Aquarellfleck hinter dem Portraet, die Sonne der Bildmarke lugt rechts oben hervor */
.rahmen::before{content:"";position:absolute;z-index:0;inset:-21% -25% -19% -28%;transform:rotate(-24deg);
  background:url("../img/klecks-tief.svg?v=231bda9c") center/100% 100% no-repeat;opacity:.85}
.sonne{position:absolute;z-index:0;width:52%;right:-17%;top:-7%;transform:rotate(16deg)}
.portraet{position:relative;z-index:1;aspect-ratio:1;overflow:hidden;
  border-radius:54% 46% 52% 48% / 50% 55% 45% 50%;
  box-shadow:0 0 0 .45rem #fff,0 1.8rem 3rem -1.7rem rgb(142 31 73 / .55)}
.portraet img{width:100%;height:100%;object-fit:cover}
.pinselwort{position:absolute;z-index:3;left:-12%;bottom:-9%;width:104%;padding:1.05rem 1.9rem 1.15rem 1.3rem;
  font:400 clamp(.86rem,4.3vw,1.12rem)/1.3 var(--hand);color:var(--rose-tief);text-align:center;transform:rotate(-6deg);
  background:url("../img/pinsel.svg?v=202f0ca1") center/100% 100% no-repeat}
.zweig{position:absolute;z-index:2;width:21%;right:-9%;bottom:8%;transform:rotate(16deg)}
.pinselwort span{display:block}
.namenszug{position:relative;z-index:2;text-align:center;margin-top:2.3rem}
.namenszug .name{display:block;font:400 2.7rem/1.1 "Parisienne",cursive;color:var(--rose)}
.namenszug .rolle{display:block;margin-top:.2rem;font:600 .72rem/1.5 var(--sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--text)}

/* ---------- Abschnitte ---------------------------------------------------- */

.sec{position:relative;padding-block:clamp(3.2rem,6.5vw,5.8rem)}
.sec--blush{background:var(--blush)}
/* Gemalte Kante statt gerader Linie zwischen den Flaechen */
.sec--blush::before,.band::before,.band::after{content:"";position:absolute;left:0;right:0;z-index:1;
  height:clamp(1.3rem,3vw,2.4rem);background:center/100% 100% no-repeat}
.sec--blush::before{bottom:calc(100% - 1px);background-image:url("../img/kante-blush.svg?v=9fa0c165")}
.sec--nach-band::before{display:none}
.kopf{margin-bottom:clamp(2rem,4vw,3rem)}
.kopf--mitte{text-align:center}

/* Leistungen: acht Karten, das Icon im Aquarellfleck mit Ring */
.leist{display:grid;gap:1.1rem}
.leist>li{background:#fff;border-radius:var(--ecken-a);box-shadow:var(--schatten);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:center;padding:1rem 1.15rem}
.leist>li:nth-child(even){border-radius:var(--ecken-b)}
.leist h3{font:700 1.05rem/1.25 var(--sans);color:var(--navy);margin-bottom:.25rem}
.leist p{font-size:.92rem;line-height:1.4}
.leist>li.betont{background:var(--band)}
.leist>li.betont h3,.leist>li.betont p{color:#fff}
.kreis{position:relative;display:grid;place-items:center;width:3.7rem;height:3.7rem;color:#b93f65;font-size:1.95rem}
.kreis::before,.kreis::after{content:"";position:absolute;background:center/100% 100% no-repeat}
.kreis::before{inset:-6%;background-image:url("../img/klecks.svg?v=b38fb4e2")}
.kreis::after{inset:-12%;background-image:url("../img/ring.svg?v=a4c5505c")}
.kreis .ic{position:relative;z-index:1}
/* Phosphor Duotone hat eine zarte Fuellung; hier etwas kraeftiger, wie die Zeichen des Flyers */
.kreis .ic [opacity]{opacity:.42}
.leist>li:nth-child(3n+2) .kreis::before{transform:rotate(95deg)}
.leist>li:nth-child(3n) .kreis::before{transform:rotate(200deg)}
.leist>li:nth-child(even) .kreis::after{transform:rotate(140deg)}
.leist>li:nth-child(4n+3) .kreis::after{transform:rotate(250deg)}

/* Ablauf: drei Schritte, die Ziffer im Fleck, dazwischen ein gestrichelter Faden */
.schritte{position:relative;display:grid;gap:2.2rem;counter-reset:s}
.schritte>li{position:relative;text-align:center;counter-increment:s}
.schritte>li::before{content:counter(s);display:grid;place-items:center;width:5.2rem;height:5.2rem;margin:0 auto .8rem;
  font:italic 500 2.7rem/1 var(--serif);color:var(--rose-tief);padding-bottom:.25rem;
  background:url("../img/klecks.svg?v=b38fb4e2") center/100% 100% no-repeat}
.schritte>li:nth-child(2)::before{background-image:url("../img/klecks-gold.svg?v=0ebbcc67")}
.schritte h3{font:700 1.15rem/1.25 var(--sans);color:var(--navy);margin-bottom:.3rem}
.schritte p{max-width:19em;margin-inline:auto;font-size:.95rem}

/* Band: der Name in Schreibschrift auf Rosa, wie auf dem Flyer */
.band{position:relative;overflow-x:clip;background:var(--band);color:#fff;padding-block:clamp(3.4rem,7vw,5.6rem)}
.band::before{bottom:calc(100% - 1px);background-image:url("../img/kante-band.svg?v=c5645231")}
.band::after{top:calc(100% - 1px);background-image:url("../img/kante-band.svg?v=c5645231");transform:scaleY(-1)}
.band-in{position:relative;display:grid;gap:2.4rem;align-items:center}
.band-in::after{content:"";position:absolute;right:-1rem;bottom:calc(100% - 1.2rem);width:5.5rem;aspect-ratio:170/250;opacity:.3;
  transform:rotate(24deg);background:url("../img/zweig-weiss.svg?v=8c3a4073") center/contain no-repeat}
.band-in>*{min-width:0}
.band .name{font:400 clamp(3.1rem,2rem + 4.4vw,4.8rem)/1.08 "Parisienne",cursive;color:#fff;letter-spacing:0}
.band .rolle{font:600 clamp(.74rem,3.6vw,.82rem)/1.45 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  margin:.35rem 0 1.2rem}
.band .rolle span{display:block}
.band p{font-weight:500;max-width:30em}
.band p+p{margin-top:.8rem}

.karte{background:var(--karte);color:var(--text);border-radius:var(--ecken-a);padding:1.5rem 1.4rem 1.6rem;
  box-shadow:0 1.6rem 2.6rem -1.8rem rgb(60 10 30 / .7)}
.karte--rand{background:#fff;border:1.5px solid var(--rand);border-radius:var(--ecken-b);box-shadow:var(--schatten)}
.karte--rosa{box-shadow:var(--schatten)}
.karte h2,.karte h3{font:700 clamp(.92rem,4.4vw,1.1rem)/1.2 var(--sans);letter-spacing:.08em;overflow-wrap:anywhere;text-transform:uppercase;color:var(--rose);
  text-align:center;padding-bottom:.75rem;margin-bottom:1rem;border-bottom:1px solid #f1cfd6}
.haken{display:grid;gap:.8rem}
.haken>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:start;
  color:#44475a;font-size:.98rem;line-height:1.36}
.haken .ic{width:1.5em;height:1.5em;padding:.33em;border-radius:50%;background:var(--haken);color:#fff}

/* Preise: zwei Schilder, leicht schief aufgehaengt */
.schilder{display:grid;gap:1.3rem;max-width:44rem;margin-inline:auto}
.schild{position:relative;background:#fff;border-radius:var(--ecken-a);box-shadow:var(--schatten);padding:2.3rem 1.2rem 1.4rem;text-align:center}
.schild::before{content:"";position:absolute;left:50%;top:.75rem;width:.85rem;height:.85rem;margin-left:-.42rem;border-radius:50%;
  background:var(--blush);box-shadow:inset 0 0 0 2px #e3a1b0}
.schild::after{content:"";position:absolute;left:50%;bottom:calc(100% - 1.1rem);height:2.6rem;border-left:2px dotted #dc8fa3}
.schild+.schild{border-radius:var(--ecken-b)}
.schild h3{font:700 1.1rem/1.25 var(--sans);color:var(--navy)}
.betrag{font:600 clamp(2.5rem,1.9rem + 2.2vw,3.3rem)/1.1 var(--serif);color:var(--rose);margin-top:.3rem}
.je{font-size:.95rem}
.fussnote{max-width:37rem;margin:1.6rem auto 0;text-align:center;font-size:.95rem}
/* 131 Euro Entlastungsbetrag: der Betrag gross im goldenen Fleck, daneben der Text */
.entlastung{display:grid;gap:1.1rem 2.2rem;align-items:center;max-width:54rem;margin:3rem auto 0;background:#fff;
  border-radius:var(--ecken-b);box-shadow:var(--schatten);padding:1.6rem 1.35rem 1.7rem}
.entlastung>*{min-width:0}
.entlastung h3{font:600 clamp(1.4rem,1.1rem + 1.1vw,1.8rem)/1.18 var(--serif);color:var(--navy);margin-bottom:.75rem;text-wrap:balance}
.entlastung p{font-size:.98rem}
.entlastung p+p{margin-top:.55rem}
.entlastung .entlastung-betrag{display:grid;place-items:center;width:9.4rem;height:9.4rem;margin:0 auto;white-space:nowrap;
  font:600 2.3rem/1 var(--serif);color:var(--rose-tief);background:url("../img/klecks-gold.svg?v=0ebbcc67") center/100% 100% no-repeat}
.mehr{text-align:center;margin-top:1.3rem}
.mehr a{display:inline-flex;align-items:center;min-height:3rem;padding:.5rem 1.6rem;border-radius:999px;
  border:1.5px solid var(--akzent);background:#fff;font-weight:700;text-decoration:none}
.mehr a:hover{background:var(--kreis)}

/* Kontakt: die Nummer gross, sonst fast nichts */
.kontakt{text-align:center}
.kontakt .lead{margin-inline:auto}
.gross-tel{display:inline-block;margin-top:1.3rem;padding:.1rem .35rem .45rem;text-decoration:none;
  font:600 clamp(2.5rem,1.5rem + 4.6vw,4.4rem)/1.1 var(--serif);color:var(--rose-tief);
  background:url("../img/strich.svg?v=fd7ba3e2") 0 100%/100% .34em no-repeat}
.gross-tel:hover{color:var(--rose)}
.wege{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 2.2rem;margin-top:1.5rem}
.wege>li{display:flex;align-items:center;gap:.75rem;color:var(--navy);font-weight:500;text-align:left}
.punkt{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--akzent);color:#fff;font-size:1.35rem}
.wege a{display:inline-block;padding-block:.6rem;color:var(--navy);text-decoration:none;overflow-wrap:anywhere}
.wege a:hover{text-decoration:underline}

/* ---------- Schlussband: die Sonne geht ueber Muenchen auf ---------------- */

.schluss{text-align:center;background:linear-gradient(180deg,var(--grund),#fde3e8 38%,#fcd2da);padding:0 1.25rem 2.2rem}
.horizont{height:clamp(8rem,21vw,14rem);border-bottom:2px solid #e9a3b3;margin:0 auto 1.6rem;max-width:56rem;
  background:url("../img/muenchen.svg?v=15818c66") center bottom/auto 64% no-repeat,
             url("../img/sonne-auf.svg?v=abf68c03") center bottom/auto 100% no-repeat}
.schluss p{font:italic 500 clamp(1.25rem,1rem + 1.2vw,1.75rem)/1.3 var(--serif);color:var(--rose-tief)}
.fuss{padding:1rem 1.25rem 1.5rem;text-align:center;font-size:.85rem;background:#fcd2da}
.fuss nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.5rem;margin-bottom:.2rem}
.fuss a{display:inline-block;padding-block:.65rem}

/* ---------- Unterseiten --------------------------------------------------- */

.seite{width:min(100% - 2.5rem,68rem);margin-inline:auto;padding-block:clamp(2rem,4vw,3.4rem) clamp(2.6rem,5vw,4rem)}
.auftakt{padding-block:clamp(2rem,4vw,3.4rem) .2rem}
.auftakt+.sec{padding-top:1.2rem}
.seite h1,.auftakt h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.2rem);color:var(--rose)}
.angebote{display:grid;gap:1.3rem;margin:1.8rem 0 1.6rem}
.angebote .karte{display:grid;grid-template-rows:auto 1fr auto;font-size:.98rem;min-width:0}
.preis{font:600 2rem/1.2 var(--serif);color:var(--rose);margin-top:1rem;text-align:center}
.preis span{font:500 .95rem var(--sans);color:var(--text)}
.seite .anruf{margin-top:2rem}
.seite .lead,.auftakt .lead{max-width:38em;text-wrap:pretty}

.punkte{--kr:3.7rem;--sp:1.1rem}
.punkte>li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp);
  align-items:center;padding:.9rem 0 .9rem .4rem}
.punkte>li+li::before{content:"";position:absolute;top:0;right:0;left:calc(.4rem + var(--kr) + var(--sp));
  border-top:1px solid var(--rand)}
.punkte h3{font:700 1.05rem/1.25 var(--sans);color:var(--navy);margin-bottom:.15rem}
.punkte p{font-size:.95rem;line-height:1.4}
.punkte p+p{margin-top:.45rem}

.prosa{max-width:40em}
.prosa h2{font:600 1.6rem/1.15 var(--serif);color:var(--rose);margin:2rem 0 .6rem}
.prosa>:first-child{margin-top:0}
.prosa p,.prosa ul{margin-bottom:1rem}
.prosa ul:not(.haken){list-style:disc;padding-left:1.2rem}
.prosa li{margin-bottom:.4rem}
.prosa address a{display:inline-block;padding-block:.55rem}
.hinweis{background:#fce8e8;border-radius:var(--ecken-b);padding:1rem 1.1rem;margin-bottom:1rem}
.hinweis p{margin:0}
/* Gelb markiert: Angabe fehlt noch und muss vor dem Start eingetragen werden. */
mark{background:#ffe9a8;color:var(--navy);padding:.1em .35em;border-radius:4px}

/* ---------- Breiten ------------------------------------------------------- */

@media(max-width:55.99rem){
  .leiste{gap:0 1rem}
  .leiste nav{order:3;flex-basis:100%}
}

@media(max-width:39.99rem){
  html{font-size:118.75%}                 /* 19px, darunter wird es zu klein */
  h1{font-size:2.1rem}
  h1,h2{overflow-wrap:break-word}
  .leiste nav{gap:0 1.05rem;font-size:.92rem}
  .leiste .marke img{height:62px}
  .nur-breit{display:none}
  .ruf{width:100%}
  .leiste .ruf{width:auto}
  .leist h3{overflow-wrap:break-word}
  .schluss p span{display:inline}
}

@media(min-width:40rem){
  .leist{grid-template-columns:1fr 1fr}
  .schilder{grid-template-columns:1fr 1fr;gap:2rem}
  .schild{transform:rotate(-1.4deg)}
  .schild+.schild{transform:rotate(1.1deg);margin-top:.9rem}
  .angebote{grid-template-columns:1fr 1fr}
  .schluss p span{display:block}
}

@media(min-width:52rem){
  .entlastung{grid-template-columns:auto minmax(0,1fr);padding:2.1rem 2.4rem}
  .entlastung .entlastung-betrag{width:11.5rem;height:11.5rem;font-size:2.9rem}
  .schritte{grid-template-columns:repeat(3,1fr);gap:2.6rem}
  .schritte::before{content:"";position:absolute;left:17%;right:17%;top:1rem;height:3.2rem;
    background:url("../img/faden.svg?v=dff0b5b7") center/100% 100% no-repeat}
  .band-in{grid-template-columns:1.05fr .95fr;gap:3.4rem}
}

@media(min-width:56rem){
  .leiste .marke{align-self:flex-start;margin-block:-.5rem -3.4rem;padding:.7rem 1rem .8rem;background:#fff;
    border-radius:0 0 1.4rem 1.1rem;box-shadow:0 1.1rem 1.8rem -1.2rem rgb(142 31 73 / .45)}
  .leiste .marke img{height:112px}
  .held-in{grid-template-columns:1.08fr .92fr;gap:3rem}
  .held-bild{width:min(100%,27rem)}
  .pinselwort{left:-16%;bottom:-4%;width:78%;padding:1.25rem 2.3rem 1.35rem 1.7rem}
  .zweig{bottom:-3%}
}

@media(min-width:64rem){
  /* Vier Spalten, das Icon ueber dem Text */
  .leist{grid-template-columns:repeat(4,1fr);gap:1.3rem}
  .leist{padding-bottom:1.6rem}
  .leist>li{display:block;padding:1.6rem 1.3rem 1.5rem}
  .leist>li:nth-child(even){transform:translateY(1.6rem)}
  .kreis{width:4.5rem;height:4.5rem;font-size:2.35rem;margin-bottom:1.1rem}
}

@media (forced-colors:active){
  .ruf,.mehr a{border:2px solid ButtonText}
  .karte,.leist>li,.schild{border:1px solid CanvasText}
}

@media print{
  .skip,.leiste nav,.mehr,.notiz,.horizont,.sonne,.zweig,.rahmen::before{display:none!important}
  body,.sec--blush,.band,.schluss,.fuss{background:#fff!important;color:#000!important}
  .band .name,.band p,.band .rolle{color:#000!important}
  a[href^="tel:"]{font-weight:700}
}