/* WORTLOTSE - Online-Uebersetzungsbuero (fiktive Demo)
   Ein Thema, hell, markengebunden. Radien-Regel:
   interaktiv = Pille, Karten/Flaechen = 28px, Bilder in Karten = 14px. */

:root{
  --rot:#E0033C;          /* Markenrot, traegt weissen Text (4,9:1) */
  --rot-tief:#A8002D;     /* Hover, Fokus, Tiefe */
  --rot-hell:#FF3B63;     /* nur Dekor: Verlaeufe, Schein, Linien */
  --tinte:#14121A;
  --tinte-70:#4A4753;
  --papier:#FBFAF9;
  --sand:#EBDCC0;
  --linie:#E7E2DF;
  --r-flaeche:28px;
  --r-bild:14px;
  --pille:999px;
  --takt:clamp(72px,8vw,124px);
  --rand:clamp(20px,5vw,56px);
  --kurve:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(15px,.42vw + 14px,17px);line-height:1.65;
  font-weight:450;overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:800;
  overflow-wrap:break-word;text-wrap:balance}
/* Trennstriche nur dort, wo lange deutsche Komposita sonst ueberlaufen. */
@media (max-width:560px){h1,h2,h3,h4{hyphens:auto}}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}

:focus-visible{outline:3px solid var(--rot-tief);outline-offset:3px;border-radius:6px}
.rot-flaeche :focus-visible{outline-color:#fff}

.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:fixed;top:10px;left:10px;z-index:120;background:var(--tinte);color:#fff;
  padding:10px 18px;border-radius:var(--pille);transform:translateY(-160%)}
.sprung:focus{transform:none}

.huelle{max-width:1320px;margin-inline:auto;padding-inline:var(--rand)}

/* ---------- Knoepfe ---------- */
.knopf{
  --k-bg:var(--rot);--k-text:#fff;
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:16px 30px;border:0;border-radius:var(--pille);
  background:var(--k-bg);color:var(--k-text);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;isolation:isolate;
  transition:transform .3s var(--kurve),box-shadow .3s var(--kurve),background-color .3s var(--kurve);
}
.knopf::after{content:"";width:16px;height:10px;background:currentColor;
  -webkit-mask:var(--pfeil) center/contain no-repeat;mask:var(--pfeil) center/contain no-repeat;
  transition:transform .3s var(--kurve)}
.knopf--schlicht::after{display:none}
:root{--pfeil:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6h16.5M12 1l5.5 5-5.5 5' stroke='black' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.knopf--gross{padding:20px 40px;font-size:.84rem}
.knopf--weiss{--k-bg:#fff;--k-text:var(--rot-tief)}
.knopf--linie{--k-bg:transparent;--k-text:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.knopf--tinte{--k-bg:var(--tinte)}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(224,3,60,.28)}
  .knopf:hover::after{transform:translateX(5px)}
  .knopf--weiss:hover{background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.22)}
  .knopf--linie:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px #fff}
}
.knopf:active{transform:translateY(0) scale(.985)}

.rundknopf{
  display:inline-grid;place-items:center;width:44px;height:44px;flex:0 0 auto;
  border:1.5px dashed var(--rot);border-radius:50%;background:transparent;color:var(--rot);
  cursor:pointer;text-decoration:none;
  transition:transform .3s var(--kurve),background-color .3s var(--kurve),color .3s var(--kurve);
}
.rundknopf svg{width:19px;height:19px}
@media (hover:hover) and (pointer:fine){
  .rundknopf:hover{background:var(--rot);color:#fff;transform:translateY(-2px) rotate(-6deg)}
}

/* ---------- Kopfzeile im Hero ---------- */
.marke{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.marke svg{width:38px;height:38px;flex:0 0 auto}
.marke b{font-size:.9rem;font-weight:800;letter-spacing:.2em}
.marke small{display:block;font-size:.56rem;font-weight:600;letter-spacing:.22em;
  color:var(--tinte-70);text-transform:uppercase}

.kopf{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,40px);
  padding-block:clamp(20px,3vw,34px)}
.kopf__daten{display:grid;gap:2px;font-size:.86rem;font-weight:600}
.kopf__daten a{text-decoration:none}
.kopf__daten a:hover{color:var(--rot)}
.kopf__ikonen{display:flex;gap:10px}
.sprachen{display:flex;align-items:center;gap:6px;margin-left:auto;
  font-size:.8rem;font-weight:700;letter-spacing:.1em}
.sprachen button{background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--tinte-70);
  text-transform:uppercase;transition:color .25s}
.sprachen button[aria-pressed="true"]{color:var(--tinte);text-decoration:underline;
  text-underline-offset:5px;text-decoration-thickness:2px}
.sprachen button:hover{color:var(--rot)}
.sprachen span{color:#6E6A66}
.sprachen .nur-sr{color:inherit}

/* ---------- Hero ---------- */
.hero{position:relative}
.hero__gitter{display:grid;gap:clamp(28px,4vw,48px);align-items:stretch;
  padding-bottom:clamp(28px,4vw,52px)}
@media (min-width:1000px){
  .hero__gitter{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
    min-height:calc(100dvh - 40px)}
}
.hero__text{display:flex;flex-direction:column;
  padding-block:0 clamp(8px,2vw,28px);position:relative;z-index:1}
/* Kopfzeile bleibt oben, der Markenblock sitzt mittig in der Restflaeche. */
.hero__mitte{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(24px,4vw,56px)}
.hero__geist{position:absolute;top:-.24em;left:.05em;z-index:-1;
  font-size:var(--marke-groesse);font-weight:900;letter-spacing:-.035em;line-height:1;
  color:rgba(20,18,26,.06);pointer-events:none;user-select:none;white-space:nowrap}
.hero{--marke-groesse:12.2vw}
@media (min-width:1000px){.hero{--marke-groesse:min(6.1vw,5.9rem)}}
.hero h1{font-size:var(--marke-groesse);font-weight:900;letter-spacing:-.035em;
  white-space:nowrap;hyphens:none}
.hero h1 span{white-space:normal}
.hero__zeile2{display:block;font-size:clamp(1.15rem,3vw,2.1rem);font-weight:600;
  letter-spacing:-.01em;margin-top:.35em;color:var(--tinte-70)}
.hero__online{display:block;margin-top:.14em;color:var(--rot);
  font-size:clamp(2.4rem,7vw,5rem);font-weight:900;letter-spacing:-.04em;line-height:1}
.hero__sub{margin-top:14px;max-width:34ch;font-size:clamp(.98rem,1.6vw,1.12rem);
  color:var(--tinte-70);font-weight:500}
.hero__cta{margin-top:clamp(26px,3.4vw,40px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__cta .knopf{box-shadow:0 12px 40px rgba(224,3,60,.3)}

.tafel{
  position:relative;overflow:hidden;border-radius:var(--r-flaeche);
  background:var(--rot);color:#fff;
  display:flex;flex-direction:column;
  padding:clamp(22px,2.6vw,34px);min-height:clamp(360px,52vw,640px);
}
.tafel::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 6%,rgba(255,255,255,.10),transparent 58%);
  pointer-events:none}
.tafel__nav{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,34px);justify-content:center;
  position:relative;z-index:2}
.tafel__nav a{position:relative;text-decoration:none;font-size:.86rem;font-weight:600;
  letter-spacing:.02em;padding-block:6px}
.tafel__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--kurve)}
.tafel__nav a:hover::after,.tafel__nav a:focus-visible::after{transform:scaleX(1)}
@media (max-width:999px){.tafel__nav{display:none}}
.tafel__claim{text-align:center;margin-top:clamp(26px,4vw,54px);
  font-size:clamp(1.1rem,2.3vw,1.7rem);font-weight:400;letter-spacing:.14em;
  color:rgba(255,255,255,.94)}
.tafel__bild{flex:1;display:grid;place-items:center;margin-top:clamp(12px,2vw,20px);
  position:relative;z-index:1}
.tafel__bild img{width:min(76%,420px);filter:drop-shadow(0 26px 50px rgba(0,0,0,.28))}

/* Laufband */
.laufband{background:var(--sand);color:var(--tinte);overflow:hidden;
  padding-block:clamp(12px,1.4vw,18px);border-block:1px solid rgba(20,18,26,.08)}
.laufband__spur{display:flex;width:max-content;gap:0;
  animation:ziehen 42s linear infinite}
.laufband:hover .laufband__spur{animation-play-state:paused}
.laufband__satz{display:flex;gap:clamp(20px,3vw,44px);padding-right:clamp(20px,3vw,44px);
  font-size:clamp(1rem,2.4vw,1.6rem);font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.laufband__satz span::after{content:"|";margin-left:clamp(20px,3vw,44px);color:rgba(20,18,26,.3)}
@keyframes ziehen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Leistungen ---------- */
.leistungen{
  background:linear-gradient(180deg,var(--papier) 0%,#FFE3E9 14%,var(--rot-hell) 30%,var(--rot) 46%,var(--rot) 100%);
  padding-block:var(--takt) calc(var(--takt) * .9);color:#fff}
.leistungen__kopf{text-align:center;max-width:44ch;margin-inline:auto;color:var(--tinte)}
.leistungen__kopf h2{font-size:clamp(2rem,5.2vw,3.5rem)}
.leistungen__kopf p{margin-top:16px;color:var(--tinte-70);font-weight:500}
.karten{display:grid;gap:clamp(20px,2.4vw,30px);margin-top:clamp(44px,6vw,84px)}
@media (min-width:760px){.karten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.karten{grid-template-columns:repeat(3,1fr)}}
.karte{
  background:#fff;color:var(--tinte);border-radius:var(--r-flaeche);
  padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column;
  box-shadow:0 22px 60px rgba(90,0,24,.22);
  transition:transform .45s var(--kurve),box-shadow .45s var(--kurve);
}
.karte__innen{border:1.5px dashed rgba(224,3,60,.55);border-radius:20px;
  padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;flex:1}
.karte h3{font-size:clamp(1.15rem,2vw,1.42rem);font-weight:700;letter-spacing:-.01em}
.karte ul{margin-top:16px;display:grid;gap:9px;font-size:.94rem;color:var(--tinte-70)}
.karte li{position:relative;padding-left:18px}
.karte li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--rot)}
.karte__bildrahmen{margin-top:auto;padding-top:20px;overflow:hidden;border-radius:var(--r-bild)}
.karte__bildrahmen img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:var(--r-bild);
  transition:transform .6s var(--kurve)}
.karte__preis{margin-top:16px;align-self:flex-start;background:#FFF0F3;color:var(--rot-tief);
  border-radius:var(--pille);padding:8px 16px;font-size:.78rem;font-weight:700;letter-spacing:.04em}
@media (hover:hover) and (pointer:fine){
  .karte:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(90,0,24,.3)}
  .karte:hover .karte__bildrahmen img{transform:scale(1.06)}
}
.leistungen__fuss{margin-top:clamp(38px,5vw,60px);text-align:center}
.leistungen__fuss p{color:rgba(255,255,255,.9);margin-bottom:20px;font-weight:500}

/* Karten fliegen beim Scrollen in die Reihe */
.js .karte{opacity:0;transform:translateY(46px) rotate(var(--dreh,0deg))}
/* Einspaltig ist die Karte fast so breit wie der Schirm: gedreht ragt sie heraus. */
@media (max-width:660px){.js .karte{transform:translateY(38px)}}
.js .karten.zeigen .karte{opacity:1;transform:none;
  transition:opacity .7s var(--kurve) var(--verzug,0s),transform .8s var(--kurve) var(--verzug,0s),
             box-shadow .45s var(--kurve)}

/* ---------- Garantien ---------- */
.garantien{padding-block:var(--takt)}
.garantien__gitter{display:grid;gap:clamp(30px,4vw,60px);align-items:center}
@media (min-width:940px){.garantien__gitter{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}}
.garantien__bild{border-radius:var(--r-flaeche);overflow:hidden;position:relative}
.garantien__bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.garantien h2{font-size:clamp(1.9rem,4.6vw,3.1rem)}
.garantien__liste{margin-top:clamp(26px,3vw,38px);display:grid;gap:clamp(20px,2.4vw,28px)}
@media (min-width:620px){.garantien__liste{grid-template-columns:repeat(2,1fr)}}
.garantie{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.garantie__haken{width:34px;height:34px;border-radius:50%;background:var(--rot);display:grid;
  place-items:center;color:#fff}
.garantie__haken svg{width:16px;height:16px}
.garantie h3{font-size:1.03rem;font-weight:700}
.garantie p{margin-top:6px;font-size:.94rem;color:var(--tinte-70)}

/* ---------- Ablauf ---------- */
.ablauf{padding-block:0 var(--takt);text-align:center}
.ablauf h2{font-size:clamp(1.9rem,4.6vw,3.1rem)}
.schritte{margin-top:clamp(40px,5vw,68px);display:grid;gap:clamp(28px,3vw,20px);
  position:relative}
@media (min-width:820px){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritt{position:relative;padding-inline:8px}
.schritt__ring{width:88px;height:88px;margin-inline:auto;border-radius:50%;
  border:2px solid var(--rot);display:grid;place-items:center;background:var(--papier);
  transition:transform .4s var(--kurve),background-color .4s var(--kurve),color .4s var(--kurve)}
.schritt__ring svg{width:36px;height:36px;color:var(--tinte)}
.schritt h3{margin-top:18px;font-size:1.02rem;font-weight:700}
.schritt p{margin-top:8px;font-size:.92rem;color:var(--tinte-70);max-width:30ch;
  margin-inline:auto}
@media (min-width:820px){
  .schritt:not(:last-child)::after{content:"";position:absolute;top:44px;left:calc(50% + 60px);
    right:calc(-50% + 60px);height:2px;
    background:repeating-linear-gradient(90deg,var(--rot) 0 4px,transparent 4px 12px);opacity:.65}
}
@media (hover:hover) and (pointer:fine){
  .schritt:hover .schritt__ring{transform:translateY(-4px);background:var(--rot);color:#fff}
  .schritt:hover .schritt__ring svg{color:#fff}
}

/* ---------- Kontakt ---------- */
.kontakt{
  position:relative;background:var(--rot);color:#fff;
  padding-block:calc(var(--takt) * 1.1) var(--takt);
  border-radius:56% 56% 0 0 / 9% 9% 0 0;margin-top:clamp(30px,5vw,70px);
  transition:border-radius 1.1s var(--kurve);
}
.js .kontakt.zeigen{border-radius:0}
.kontakt__gitter{display:grid;gap:clamp(34px,4vw,60px);align-items:start}
@media (min-width:940px){.kontakt__gitter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.kontakt h2{font-size:clamp(1.9rem,4.6vw,3.1rem)}
.plakette{display:inline-block;border:1.5px dotted rgba(255,255,255,.75);border-radius:var(--pille);
  padding:8px 20px;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  transform:rotate(-3deg);margin-bottom:22px}
.karte-kontakt{margin-top:clamp(26px,3vw,36px);background:#fff;color:var(--tinte);
  border-radius:var(--r-flaeche);padding:clamp(22px,2.6vw,32px);display:grid;gap:18px;
  max-width:440px;box-shadow:0 24px 60px rgba(90,0,24,.26)}
.karte-kontakt a{display:flex;align-items:center;gap:16px;text-decoration:none;font-weight:600;
  font-size:1.02rem}
.karte-kontakt a svg{width:22px;height:22px;flex:0 0 auto;color:var(--rot)}
.karte-kontakt a:hover{color:var(--rot)}
.karte-kontakt__zeit{border-top:1px solid var(--linie);padding-top:16px;font-size:.9rem;
  color:var(--tinte-70)}
.kontakt__hand{margin-top:-14px;max-width:340px}
.kontakt__hand img{width:100%}

/* ---------- Formulare ---------- */
.formular{display:grid;gap:18px}
.feld{display:grid;gap:7px}
.feld > label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.feld input,.feld textarea,.feld select{
  width:100%;padding:15px 20px;border-radius:var(--pille);border:1.5px solid var(--linie);
  background:#fff;color:var(--tinte);transition:border-color .25s,box-shadow .25s}
.feld textarea{border-radius:22px;min-height:110px;resize:vertical}
.feld input::placeholder,.feld textarea::placeholder{color:#6E6A76}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--rot);
  box-shadow:0 0 0 3px rgba(224,3,60,.18)}
.rot-flaeche .feld input:focus,.rot-flaeche .feld textarea:focus{border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.45)}
.feld__hilfe{font-size:.8rem;opacity:.85}
.feld__fehler{font-size:.82rem;font-weight:600;color:var(--rot-tief)}
.feld__fehler:empty{display:none}
.rot-flaeche .feld__fehler{color:#fff;background:var(--rot-tief);border-radius:var(--pille);
  padding:4px 14px;justify-self:start}
.feld[data-fehler] input,.feld[data-fehler] textarea{border-color:var(--rot-tief)}
fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
legend{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:0;
  margin-bottom:4px}
.wahl{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:.95rem;font-weight:500}
.wahl input{appearance:none;width:22px;height:22px;flex:0 0 auto;border-radius:50%;
  border:1.5px solid currentColor;display:grid;place-items:center;background:transparent;padding:0;
  transition:background-color .2s}
.wahl input::after{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;
  transform:scale(0);transition:transform .2s var(--kurve)}
.wahl input:checked::after{transform:scale(1)}
.wahl input:checked{border-color:var(--rot)}
.rot-flaeche .wahl input:checked{border-color:#fff}
.datei{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.datei input{position:absolute;width:1px;height:1px;opacity:0}
.datei__name{font-size:.86rem;opacity:.9}
.hinweis{font-size:.78rem;line-height:1.5;opacity:.92}
.hinweis a{font-weight:600}
.formular__fuss{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.knopf[aria-busy="true"]{pointer-events:none;opacity:.75}
.danke{border-radius:var(--r-flaeche);padding:clamp(24px,3vw,34px);background:#fff;color:var(--tinte);
  display:grid;gap:12px;justify-items:start;box-shadow:0 24px 60px rgba(90,0,24,.22)}
.danke h3{font-size:1.35rem}
.danke p{color:var(--tinte-70)}
[hidden]{display:none !important}

/* ---------- Fusszeile mit Riesenknopf ---------- */
.fuss{position:relative;background:var(--rot);color:#fff;overflow:hidden;
  padding-block:clamp(40px,6vw,80px) clamp(28px,3vw,40px)}
.fuss__bild{position:absolute;inset:0;z-index:0}
.fuss__bild img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  opacity:.32;mix-blend-mode:luminosity}
.fuss__bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--rot) 0%,rgba(224,3,60,.74) 45%,var(--rot) 100%)}
.fuss__inhalt{position:relative;z-index:1}
.hoch{display:grid;justify-items:center;gap:6px;background:none;border:0;color:#fff;
  width:100%;cursor:pointer;padding:0}
.hoch__klein{font-size:clamp(.9rem,2vw,1.3rem);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase}
.hoch__gross{font-size:clamp(3.2rem,15vw,11rem);font-weight:900;letter-spacing:-.04em;line-height:.9}
.hoch__gross,.hoch__klein{transition:transform .5s var(--kurve)}
@media (hover:hover) and (pointer:fine){
  .hoch:hover .hoch__gross{transform:translateY(-10px)}
  .hoch:hover .hoch__klein{transform:translateY(-4px)}
}
.fuss__zeile{margin-top:clamp(36px,5vw,64px);display:flex;flex-wrap:wrap;gap:20px 34px;
  align-items:center;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.28);padding-top:24px;font-size:.86rem}
.fuss__marke{display:flex;align-items:center;gap:12px}
.fuss__marke svg{width:40px;height:40px}
.fuss__marke b{display:block;font-weight:800;letter-spacing:.2em;font-size:.92rem}
.fuss__marke small{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.fuss__rechts{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.fuss__rechts a{text-decoration:none;position:relative}
.fuss__rechts a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--kurve)}
.fuss__rechts a:hover::after{transform:scaleX(1)}
.fuss__demo{opacity:.85}

/* ---------- Menue ---------- */
.brenner{position:fixed;top:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);z-index:70;
  width:52px;height:52px;border-radius:50%;border:0;background:#4B4954;color:#fff;
  display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;
  transform:scale(.7);transition:opacity .35s var(--kurve),transform .35s var(--kurve),
    background-color .3s}
.brenner.sichtbar{opacity:1;pointer-events:auto;transform:none}
.brenner:hover{background:var(--tinte)}
.brenner span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;
  position:relative;transition:background-color .2s}
.brenner span::before,.brenner span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:currentColor;border-radius:2px;transition:transform .3s var(--kurve)}
.brenner span::before{top:-6px}.brenner span::after{top:6px}
.brenner[aria-expanded="true"] span{background:transparent}
.brenner[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.brenner[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.menue{position:fixed;inset:0;z-index:65;background:var(--rot);color:#fff;
  display:grid;place-items:center;opacity:0;pointer-events:none;
  transition:opacity .4s var(--kurve)}
.menue.offen{opacity:1;pointer-events:auto}
.menue nav{display:grid;gap:clamp(14px,2.4vw,26px);text-align:center;padding:24px}
.menue a{text-decoration:none;font-size:clamp(1.8rem,6vw,3.4rem);font-weight:800;
  letter-spacing:-.02em;opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--kurve),transform .5s var(--kurve),color .25s}
.menue.offen a{opacity:1;transform:none}
.menue.offen a:nth-child(1){transition-delay:.06s}
.menue.offen a:nth-child(2){transition-delay:.12s}
.menue.offen a:nth-child(3){transition-delay:.18s}
.menue.offen a:nth-child(4){transition-delay:.24s}
.menue a:hover{color:rgba(255,255,255,.72)}

/* ---------- Dialog ---------- */
.dialog{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;
  background:rgba(20,18,26,.62);opacity:0;pointer-events:none;transition:opacity .3s var(--kurve)}
.dialog.offen{opacity:1;pointer-events:auto}
.dialog__blatt{background:#fff;color:var(--tinte);border-radius:var(--r-flaeche);
  width:min(620px,100%);max-height:min(88dvh,900px);overflow-y:auto;
  padding:clamp(26px,3.4vw,44px);position:relative;transform:translateY(22px) scale(.98);
  transition:transform .35s var(--kurve)}
.dialog.offen .dialog__blatt{transform:none}
.dialog__zu{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;
  border:0;background:transparent;color:var(--rot);cursor:pointer;display:grid;place-items:center;
  transition:transform .3s var(--kurve),background-color .3s}
.dialog__zu svg{width:20px;height:20px}
.dialog__zu:hover{background:#FFF0F3;transform:rotate(90deg)}
.dialog h2{font-size:clamp(1.5rem,3.4vw,2.1rem);text-align:center;padding-inline:40px}
.dialog__vor{margin-top:12px;text-align:center;color:var(--tinte-70);font-size:.96rem}
.dialog .formular{margin-top:26px}

/* ---------- Einblenden ---------- */
.js .weich{opacity:0;transform:translateY(30px)}
.js .weich.zeigen{opacity:1;transform:none;
  transition:opacity .75s var(--kurve),transform .75s var(--kurve)}

/* ---------- Rechtstexte ---------- */
.recht{padding-block:clamp(40px,6vw,80px)}
.recht h1{font-size:clamp(1.9rem,5vw,3rem)}
.recht h2{font-size:clamp(1.2rem,2.6vw,1.6rem);margin-top:40px}
.recht p,.recht li{margin-top:14px;color:var(--tinte-70);max-width:72ch}
.recht ul{list-style:disc;padding-left:22px}
.recht p a,.recht li a{color:var(--rot-tief);font-weight:600}
.recht__zurueck{display:inline-flex;margin-top:44px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .weich,.js .karte{opacity:1 !important;transform:none !important}
  .kontakt{border-radius:0}
}