/* DER KREIS – Corporate Design.
   Header und Menü wie derkreis.at, Seiten wie die bisherige der-kreis.com. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100 700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/ibm-plex-serif-700.woff2) format("woff2")}

:root{
  --rot:#e60013; --rot-dunkel:#c40010; --grau:#676f6f; --hell:#f0f0f0; --linie:#b1b1b1; --tx:#000;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:"IBM Plex Serif",Georgia,serif;
  --kopf:120px; --leiste:120px; --leiste-klein:83px; --breite:1200px; --rand:27px; --menue-luft:93px;
}
@media (max-width:1199.98px){:root{--kopf:90px;--leiste:90px;--leiste-klein:77px;--breite:960px;--menue-luft:62px}}
@media (max-width:991.98px){:root{--kopf:75px;--leiste:75px;--leiste-klein:70px;--breite:720px;--menue-luft:62px}}
@media (max-width:767.98px){:root{--rand:20px;--leiste-klein:53px;--menue-luft:42px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf) + 20px)}
body{margin:0;background:#fff;color:var(--tx);font:400 16px/30px var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot)}
a:focus-visible,button:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
h1,h2,h3,h4{color:var(--rot);font-weight:700;margin:0;text-wrap:balance}
h1{font-size:clamp(44px,5vw,72px);line-height:1.2;letter-spacing:-.027em}
h2{font-size:clamp(32px,3.4vw,48px);line-height:1.175;letter-spacing:-.027em}
h2.serif{font-family:var(--serif)}
h3{font-size:24px;line-height:1.2;letter-spacing:-.027em}
p,ul,ol{margin:0}
.fliess>*+*{margin-top:16px}
.fliess ul{padding-left:1.2em}
.huelle{max-width:var(--breite);margin:0 auto;padding-inline:var(--rand)}
.sprung{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;padding:8px 14px;border-radius:40px}
.sprung:focus{left:16px}

/* ── Header wie derkreis.at ─────────────────────────────── */
.kopf{position:fixed;inset:0 0 auto 0;z-index:50;background:#fff}
.kopf__leiste{position:relative;z-index:10;height:var(--leiste);display:flex;align-items:center;justify-content:space-between;
  max-width:var(--breite);margin:0 auto;padding-inline:var(--rand);background:#fff;transition:height .2s}
.kopf__claim{position:relative;z-index:10;white-space:nowrap;font-size:16.875px;line-height:28px;color:var(--tx);text-decoration:none}
.kopf__logo{position:absolute;top:0;left:50%;z-index:9;transform:translateX(-50%) translateY(-19%);
  padding:65px 64px 39.4px;background:#fff;border-radius:48.99%;box-shadow:0 0 0 40px rgba(255,255,255,.333);transition:.2s}
.kopf__logo svg{display:block;height:150px;width:auto;aspect-ratio:1/1;transition:height .2s}
.kopf__logo .txt{transition:opacity .2s}
/* Animiertes Logo: läuft einmal über dem Signet, danach bleibt das statische SVG.
   Lage und Grösse aus dem letzten Lottie-Bild (720 × 550) auf das 150 × 150-Signet umgerechnet. */
.kopf__signet{position:relative;display:block}
.kopf__anim{position:absolute;left:-4.38%;top:8.13%;width:108.7%;height:83.07%}
.kopf__signet.spielt>svg{visibility:hidden}
.kopf.gescrollt .kopf__leiste{height:var(--leiste-klein)}
.kopf.gescrollt .kopf__logo{padding-top:35px;background:none;box-shadow:none}
.kopf.gescrollt .kopf__logo svg{height:100px}
.kopf.gescrollt .kopf__logo .txt{opacity:0}
.menueknopf{position:relative;z-index:10;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font:700 18px/1.2 var(--sans);
  color:#000;background:var(--hell);border:2px solid var(--hell);border-radius:40px;cursor:pointer;transition:.2s;text-decoration:none}
.menueknopf:hover{background:#e1e2e2;border-color:#e1e2e2}
.menueknopf svg{width:24px;height:24px;transition:transform .6s}
.menueknopf .zu,.menueknopf[aria-expanded="true"] .auf{display:none}
.menueknopf[aria-expanded="true"] .zu{display:inline;color:var(--grau)}
.menueknopf[aria-expanded="true"] svg{transform:rotate(90deg)}
@media (max-width:1199.98px){
  .kopf__logo{padding:50.6px 46px 41.4px;box-shadow:0 0 0 30px rgba(255,255,255,.333)}
  .kopf__logo svg{height:93px}
  .kopf.gescrollt .kopf__leiste{height:var(--leiste-klein)}
.kopf.gescrollt .kopf__logo{padding-top:33px}.kopf.gescrollt .kopf__logo svg{height:93px}
  .menueknopf{padding:6px 12px;font-size:13.5px}
}
@media (max-width:991.98px){
  .kopf__claim{font-size:16px;line-height:22px}
  .kopf__logo{padding:37.4px 34px 30.6px;box-shadow:0 0 0 23px rgba(255,255,255,.333)}
  .kopf__logo svg{height:75px}
  .kopf.gescrollt .kopf__leiste{height:var(--leiste-klein)}
.kopf.gescrollt .kopf__logo{padding-top:31px}.kopf.gescrollt .kopf__logo svg{height:70px}
}
@media (max-width:767.98px){
  .kopf__claim{font-size:13.5px;line-height:21px}
  .kopf__logo{padding:50px 32px 17px;box-shadow:0 0 0 20px rgba(255,255,255,.333)}
  .kopf.gescrollt .kopf__leiste{height:var(--leiste-klein)}
.kopf.gescrollt .kopf__logo{padding-top:22px}.kopf.gescrollt .kopf__logo svg{height:60px}
}
@media (max-width:575.98px){.kopf__claim{visibility:hidden}.menueknopf{transform:scale(.875);transform-origin:right center}}

/* Menü wie derkreis.ch: weisse Fläche mit runden unteren Ecken, so hoch wie ihr Inhalt; Gruppen in zwei Spalten
   (je Bild in der Grösse von dort, Titel, Linie, Punkte), Sprachwahl unten links. Masse von dort abgelesen. */
.menue{position:absolute;left:0;right:0;top:0;z-index:8;display:flex;flex-direction:column;background:#fff;border-radius:0 0 12px 12px;
  box-shadow:0 30px 60px rgba(0,0,0,.12);padding:calc(var(--kopf) + var(--menue-luft)) var(--rand) 20px;
  max-height:100dvh;overflow:auto;animation:menue-auf .3s both}
.menue[hidden]{display:none}
/* Offenes Menü: die Seite dahinter wird weichgezeichnet. Klicks gehen durch und schliessen das Menü (site.js). */
.kopf:has(.menue:not([hidden]))::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:weich .3s both}
@keyframes weich{from{opacity:0}}
/* Sprachwahl wie auf kongress.derkreis.ch: unten links im Menü und im Fuss. Feld mit Weltkugel, darunter die graue Liste. */
.menue__sprache{width:100%;max-width:calc(var(--breite) - 2*var(--rand));margin:0 auto;padding-top:88px;animation:menue-fall .3s cubic-bezier(.22,1,.36,1) .35s both}
.sprache{position:relative;width:133px;font-size:14px;line-height:18px}
.sprache summary{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;background:#fff;border:2px solid var(--hell);border-radius:8px;font-weight:300;color:var(--grau);cursor:pointer;list-style:none}
.sprache summary::-webkit-details-marker{display:none}
.sprache summary svg{width:20px;height:20px;flex:none}
.sprache summary svg:last-child{margin-left:auto}
.sprache[open] summary svg:last-child{transform:rotate(180deg)}
/* Aufgeklappt bilden Liste und Feld einen Kasten: die Liste sitzt über dem Feld, Einträge mit feiner Linie getrennt, die aktive Sprache fett */
.sprache[open] summary{border-radius:0 0 8px 8px}
.sprache div{position:absolute;left:0;right:0;bottom:100%;z-index:2;padding:3px 15px;background:#fff;border:2px solid var(--hell);border-bottom:0;border-radius:8px 8px 0 0}
.sprache div a{display:block;font-size:15px;line-height:32px;color:#000;text-decoration:none}
.sprache div a+a{border-top:1px solid var(--hell)}
.sprache div a[aria-current]{font-weight:700}
.sprache div a:hover{color:var(--rot)}
.menue>ul{list-style:none;width:100%;max-width:calc(var(--breite) - 2*var(--rand));margin:0 auto;padding:0;display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* Gruppen fallen gestaffelt ein, die Punkte darunter hinterher; --g und --i setzt site.js */
.menue li{animation:menue-fall .3s cubic-bezier(.22,1,.36,1) calc(.05s + var(--g,0)*.1s) both}
.menue li li{--weg:-10px;animation-delay:calc(.15s + var(--g,0)*.1s + var(--i,0)*.08s)}
@keyframes menue-auf{from{opacity:0;transform:translateY(-12px)}}
@keyframes menue-fall{from{opacity:0;transform:translateY(var(--weg,-30px))}}
.menue ul ul{list-style:none;margin:0;padding:0}
.menue__gruppe{display:block;padding:8px 0 14px;border-bottom:1px solid var(--grau);color:var(--rot);font-size:28px;line-height:40px;text-decoration:none}
.menue__gruppe img{display:block;width:275px;max-width:100%;aspect-ratio:275/142;object-fit:cover;border-radius:8px;margin-bottom:5px;background:var(--hell)}
.menue ul ul a{position:relative;display:block;padding:8px 0;font-size:20px;line-height:28px;letter-spacing:-.25px;color:var(--grau);
  text-decoration:none;border-bottom:1px solid var(--grau)}
.menue ul ul a::after{content:"";position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--rot);transition:width .5s}
.menue ul ul a:hover,.menue ul ul a[aria-current="page"]{color:var(--rot);border-bottom-color:transparent}
.menue ul ul a:hover::after,.menue ul ul a[aria-current="page"]::after{width:100%}
.menue .neu{font-size:12px;font-weight:700;color:var(--rot);vertical-align:super;margin-left:4px}
@media (max-width:1199.98px){.menue__gruppe{font-size:23px}.menue ul ul a{font-size:16px}}
@media (max-width:767.98px){.menue{padding-bottom:40px}.menue__sprache{padding-top:30px}.menue>ul{gap:15px}.menue__gruppe{font-size:19px;line-height:28px}.menue ul ul a{font-size:15px;line-height:21px}}

/* ── Seiten wie die bisherige der-kreis.com ───────────────── */
.held{background:var(--hell);border-radius:0 0 40px 40px;padding:calc(var(--kopf) + 120px) 0 100px}
.held h1{max-width:640px}
.held p{max-width:600px;margin-top:16px;font-size:20px;line-height:30px}
.held--mitte{text-align:center}
.held--mitte h1{max-width:780px;margin-inline:auto}
.held--mitte p{margin-inline:auto;max-width:620px}
.held .archiv{display:inline-block;margin-top:20px;font-size:14px;font-weight:700;color:var(--grau);background:#fff;border-radius:20px;padding:2px 12px}
@media (max-width:767.98px){.held{padding:calc(var(--kopf) + 80px) 0 64px;border-radius:0 0 24px 24px}.held p{font-size:18px;line-height:28px}}

.band{padding:50px 0}
.band--grau{background:var(--hell)}
.band--luft{padding:64px 0}
.zeile{max-width:var(--breite);margin:0 auto;padding-inline:var(--rand);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:80px;align-items:center}
.zeile--text-links{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.zeile__text{display:grid;gap:24px;align-content:start}
@media (max-width:767.98px){.zeile,.zeile--text-links{grid-template-columns:1fr;gap:32px}.zeile--text-links .zeile__bild{order:2}}
.bild{border-radius:12px;border:2px solid var(--hell);width:100%}
.band--grau .bild{border-color:#fff}
.mitte{max-width:var(--breite);margin:0 auto;padding-inline:var(--rand);text-align:center;display:grid;gap:24px;justify-items:center}

/* Download-Knöpfe wie bisher: rot, eckig gerundet, fett */
.downloads{display:grid;gap:24px;justify-items:start}
.mitte .downloads{justify-items:center}
.mitte>p,.mitte>.fliess{max-width:760px}
.dl{display:grid;gap:6px;justify-items:inherit}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-width:228px;max-width:100%;padding:17px 40px;
  background:var(--rot);color:#fff;border-radius:6px;font:700 15px/1.2 var(--sans);text-align:center;text-decoration:none;transition:background-color .15s}
.knopf:hover{background:var(--rot-dunkel)}
.knopf[aria-disabled="true"]{background:#c9cdcd;pointer-events:none}
.knopf--klein{min-width:0;padding:12px 40px;font-size:14px}
.dl__info{font-size:13px;line-height:18px;color:var(--grau);font-variant-numeric:tabular-nums}

/* Tabelle wie bisher */
.tabelle{border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabelle th,.tabelle td{border:1px solid var(--linie);padding:8px;text-align:left}
.tabelle th{background:var(--hell);color:var(--rot);font-weight:700}
.tabelle-huelle{overflow-x:auto}

/* Startseite */
.warum{max-width:var(--breite);margin:0 auto;padding:104px var(--rand);display:grid;gap:64px}
.warum__kopf{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:16px}
.warum__kopf p{color:#39374a}
.karten3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ikone{background:var(--hell);border-radius:24px;padding:32px;display:grid;gap:16px;align-content:start}
.ikone img{width:72px;height:72px;margin:10px 10px 40px}
.ikone h3{font-size:16px;line-height:19px;letter-spacing:-.015em}
.ikone p{line-height:28px}
@media (max-width:991.98px){.warum{padding:64px var(--rand)}.warum__kopf,.karten3{grid-template-columns:1fr}}

.richtlinien{max-width:var(--breite);margin:0 auto;padding:112px var(--rand);display:grid;gap:40px}
.richtlinien__kopf{text-align:center;display:grid;gap:12px;justify-items:center}
.augenbraue{font-size:16px;line-height:19px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#660000}
.richtlinien__kopf h2{max-width:780px}
.richtlinien__kopf p{max-width:500px;margin-top:12px}
.kacheln{display:grid;grid-template-columns:3fr 2fr;gap:32px}
.kacheln--umgekehrt{grid-template-columns:2fr 3fr}
.kachel{display:grid;grid-template-rows:auto 1fr;gap:24px;background:var(--hell);border-radius:20px;padding-top:40px;
  text-decoration:none;overflow:hidden;transition:box-shadow .15s}
.kachel:hover{box-shadow:0 0 0 2px var(--rot)}
.kachel h3{padding:0 40px;font-size:32px;line-height:38px;letter-spacing:-.015em}
.kachel__bild{display:grid;place-items:center;padding:0 40px 40px}
.kachel__bild img{max-height:310px;width:auto}
.kachel__bild--rund img{border-radius:18px;box-shadow:0 0 53px 18px rgba(43,69,95,.04)}
@media (max-width:767.98px){.kacheln,.kacheln--umgekehrt{grid-template-columns:1fr}.richtlinien{padding:72px var(--rand)}}

/* Farben */
.farben{max-width:var(--breite);margin:0 auto;padding:40px var(--rand) 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.farbe__feld{height:72px;border-radius:8px;margin-bottom:16px}
.farbe h2{font-size:24px;line-height:29px;margin-bottom:16px}
.farbe dl{margin:0}
.farbe div{padding:12px 0;border-bottom:1px solid var(--tx);font-size:14px;line-height:24px}
.farbe div:last-child{border-bottom:0}
.farbe dt{font-weight:700}
.farbe dd{margin:0}
@media (max-width:575.98px){.farben{grid-template-columns:1fr}}

/* Aura */
.bildpaar{max-width:var(--breite);margin:0 auto;padding:0 var(--rand) 40px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.textblock{max-width:var(--breite);margin:0 auto;padding:16px var(--rand) 64px;display:grid;gap:16px}
@media (max-width:767.98px){.bildpaar{grid-template-columns:1fr}}

/* Logo-Paket */
.paket{max-width:var(--breite);margin:0 auto;padding:40px var(--rand) 64px}
.paket__karte{background:var(--hell);border-radius:12px;overflow:hidden}
.paket__text{padding:32px 32px 40px;display:grid;gap:20px}
.paket__text h2{font-family:var(--serif)}

.lottie{aspect-ratio:1;width:100%;max-width:420px;border:2px solid var(--hell);border-radius:12px;background:#fff;display:grid;place-items:center}
.lottie>*{width:70%!important;height:auto!important}
video{width:100%;border-radius:12px;background:#000;display:block}
.adresse{font-style:normal}

/* Fuss gestaltet wie derkreis.ch, Inhalt von dieser Seite: grauer Grund, weisse Fläche (höchstens 1460 px) mit runden oberen Ecken,
   Logo mit Aura über der Kante, Kontakt mit Knöpfen, Menügruppen als Spalten, Schlusszeile rechts, roter Abschluss. Masse von dort abgelesen. */
.fuss{background:var(--hell);padding-top:60px;font-size:14px;line-height:22px;overflow:hidden}
.fuss__flaeche{max-width:1460px;margin:0 auto;padding-top:92px;background:#fff;border-radius:13px 13px 0 0;border-bottom:15px solid var(--rot)}
.fuss .huelle{position:relative}
.fuss__logo{position:absolute;left:calc(var(--rand) - 2px);top:-199px;width:156px;height:156px;border-radius:50%;background:var(--hell);box-shadow:0 0 0 25px rgba(240,240,240,.5)}
.fuss__logo svg{display:block;height:75px;width:auto;margin:49px auto 0}
.fuss__spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.fuss__kontakt p{margin-bottom:22px}
.fuss strong{font-weight:700}
.fuss__nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;align-content:start}
.fuss__gruppe strong{display:block;margin-bottom:5px}
.fuss__gruppe a,.fuss__unten a{color:var(--grau);text-decoration:none}
.fuss__gruppe a{display:block}
.fuss__gruppe a:hover,.fuss__unten a:hover{color:var(--rot)}
.fuss__knopf{display:flex;align-items:center;gap:10px;width:150px;height:32px;margin-top:14px;padding:0 8px;border-radius:8px;background:var(--rot);color:#fff;text-decoration:none;transition:background-color .15s}
.fuss__knopf:hover{background:var(--rot-dunkel)}
.fuss__knopf svg{width:20px;height:20px;flex:none}
.fuss .sprache{width:150px;margin-top:18px}
.fuss .sprache summary{height:32px}
.fuss__unten{margin-top:100px}
.fuss__unten .huelle{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 36px;padding-block:6px 7px;color:var(--grau)}
.fuss__unten span{margin-inline:-20px}
.fuss__unten .fuss__rand{padding:5px 8px;border:1px solid var(--rot);border-radius:8px;color:var(--rot)}
.fuss__unten .fuss__rand:hover{background:var(--rot);color:#fff}
@media (max-width:991.98px){.fuss__spalten{grid-template-columns:1fr 1fr}.fuss__nav{grid-template-columns:1fr 1fr;row-gap:24px}}
@media (max-width:767.98px){.fuss__spalten{grid-template-columns:1fr;row-gap:48px}.fuss__unten{margin-top:48px}.fuss__unten .huelle{justify-content:flex-start;gap:8px 28px}}
/* Schwarze Leiste: nur noch in der Verwaltung */
.fuss__leiste{background:#000;color:#fff;font-size:14px;line-height:24px}
.fuss__leiste .huelle{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;padding-block:26px}
.fuss__leiste a{color:#fff;text-decoration:none;opacity:.75}
.fuss__leiste a:hover{opacity:1}
.fuss__leiste .luecke{flex:1}

/* Wie derkreis.ch: Inhalte steigen beim Scrollen ein. Die Klasse «js» setzt der Seitenkopf, «da» setzt site.js (gleiche Liste dort).
   ponytail: lädt site.js nicht, bleiben die Blöcke unsichtbar. Falls das je vorkommt, hier eine Zeitanimation als Rückfall ergänzen. */
@media (prefers-reduced-motion:no-preference){
  .js :is(.held .huelle>*,.warum__kopf,.ikone,.richtlinien__kopf,.kachel,.zeile>*,.mitte,.farbe,.bildpaar>*,.textblock,.paket__karte){
    opacity:0;transform:translateY(50px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),box-shadow .15s}
  .js .da.da{opacity:1;transform:none}
}
/* Platzhalter, solange Bilder und Download-Angaben laden; «geladen» setzt site.js */
.js main img:not(.geladen),.js .dl__info:empty{background:linear-gradient(90deg,#e4e5e5 25%,#f6f6f6 50%,#e4e5e5 75%) 0 0/200% 100%;animation:schimmer 1.4s linear infinite}
.js .dl__info:empty{width:170px;height:18px;border-radius:4px}
@keyframes schimmer{to{background-position:-200% 0}}

/* ── Anmeldung: Website (anmelden/) und Verwaltung teilen sich Hintergrund und Box ── */
.torseite{min-height:100svh;display:grid;place-items:center;background:#e5e5e5 url(/assets/bilder/hintergrund.webp?v=2) center/cover;padding:40px var(--rand)}
/* Grosse und hochauflösende Bildschirme (bis 6K) bekommen die Fassung mit 6016 px Breite */
@media (min-width:1600px) and (min-resolution:1.5dppx),(min-width:3100px){.torseite{background-image:url(/assets/bilder/hintergrund-gross.webp?v=2)}}
/* Box wie ein Modal; oben die Aura nach Vorgabe: weisses Band, Kreis ragt mit hellem Ring in die Fläche */
.tor{width:100%;max-width:460px;text-align:center;background:var(--hell);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.3);animation:auf .6s cubic-bezier(.22,1,.36,1) both}
.tor__aura{position:relative;height:100px;background:#fff}
.tor__aura::before{content:"";position:absolute;left:50%;bottom:-67px;width:220px;height:220px;margin-left:-110px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 34px rgba(255,255,255,.35)}
.tor__logo{position:absolute;left:50%;bottom:-34px;width:118px;height:118px;margin-left:-59px}
.tor__logo img{width:100%;height:100%;object-fit:contain}
.tor__logo span{position:absolute;left:-4.38%;top:8.13%;width:108.7%;height:83.07%} /* Lage wie .kopf__anim in site.css */
.tor__logo.spielt img{visibility:hidden}
.tor__inhalt{padding:132px 36px 40px}
.tor h1{font-size:clamp(28px,6vw,36px)}
.tor p{margin-top:10px;color:var(--grau)}
.tor h1,.tor p,.tor form{animation:hoch .7s .3s both}
.tor form{display:flex;gap:8px;margin-top:28px;animation-delay:.45s}
@media (max-width:479.98px){.tor__inhalt{padding-inline:20px}.tor form{flex-direction:column}}
.tor input{flex:1;min-width:0;padding:12px 22px;font:400 18px/1.4 var(--sans);background:#fff;border:2px solid #fff;border-radius:40px}
.tor input:focus-visible{outline:none;border-color:var(--rot)}
.tor button{padding:12px 26px;font:700 18px/1.4 var(--sans);color:#fff;background:var(--rot);border:0;border-radius:40px;cursor:pointer;transition:background .2s}
.tor button:hover{background:var(--rot-dunkel)}
.tor .fehler{margin-top:14px;color:var(--rot);font-weight:700;animation:none}
.tor form.falsch{animation:ruetteln .4s}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes auf{from{transform:translateY(24px) scale(.96);opacity:0}}
@keyframes hoch{from{transform:translateY(14px);opacity:0}}
@keyframes ruetteln{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
.tor form.tor__stapel{flex-direction:column}
/* Kästchen «Angemeldet bleiben» in der Anmeldung der Verwaltung */
.tor__haken{display:flex;gap:8px;align-items:center;justify-content:center;margin:4px 0;font-size:14px;color:var(--grau)}
.tor input[type=checkbox]{flex:none;width:16px;height:16px;padding:0;border:0;accent-color:var(--rot)}
/* Sprachwahl im Anmeldefenster: gleiches Feld wie im Menü, mittig unter dem Formular */
.tor .sprache{margin:24px auto 0;text-align:left}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}