/* Kuchenplatte.de - Desktop-Rebuild
 * Zusammengesetzt aus den Original-Regeln der Divhunt-Seite:
 *   - Reset-Regeln aus visitor.css (Engine-Basis)
 *   - Semantik- und t###-Regeln aus core.css (projekteigene, kompilierte Datei)
 *   - die zur Laufzeit injizierten Marquee-/Swiper-Styles aus dem DOM-Snapshot
 *
 * Bewusst NICHT uebernommen:
 *   - die alten Media Queries (480/767/991px). Mobile/Tablet wird in Phase 2
 *     als eigenstaendiges Design neu gebaut, nicht geklont.
 *   - Navigation, Chat-Widget und die auf Desktop per display:none versteckten
 *     Buttons. Siehe docs/kuchenplatte-rebuild-briefing-v2.md.
 *
 * <container> wurde zu <div class="container">, entsprechend der Selektor.
 */

/* ============================================================ Reset */

html body .dh-element-hidden {
  display:none!important;
}

body .b3c09ed17.color-2 {
  background:var(--dh-color-2)!important;
  border:1px solid var(--dh-color-2)!important;
}

body .b3c09ed17.color-3 {
  background:var(--dh-color-3)!important;
  border:1px solid var(--dh-color-3)!important;
}

body .b3c09ed17.color-4 {
  background:var(--dh-color-4)!important;
  border:1px solid var(--dh-color-4)!important;
}

body .b3c09ed17.red {
  background:var(--dh-red)!important;
  border:1px solid var(--dh-red)!important;
}

body .b3c09ed17.green {
  background:var(--dh-green)!important;
  border:1px solid var(--dh-green)!important;
}

body {
  --dh-color-1:rgb(24,24,24);
  --dh-color-2:#292929;
  --dh-color-3:#363636;
  --dh-color-4:#525252;
  --dh-text-1:rgb(158,158,158);
  --dh-text-2:rgb(255,255,255);
  --dh-brand:rgb(163,117,255);
  --dh-green:rgb(46,184,176);
  --dh-yellow:rgb(255,169,0);
  --dh-red:rgb(218,0,44);
  --dh-orange:rgb(255,155,115);
  --dh-blue:rgb(12,141,233);
  --dh-scrollbar:#363636;
  --dh-scrollbar-hover:#525252;
}

html {
  display:block;
  height:100vh;
}

body {
  margin:0 auto;
  height:100%;
  overflow-x:hidden;
  display:block;
  scroll-behavior:smooth;
  font-size:14px;
  line-height:1.6;
  font-weight:400;
}

body > div#dh-website {
  min-height:100vh;
}

[hidden] {
  display:none!important;
}

text {
  white-space:break-spaces;
}

* {
  box-sizing:border-box;
}

div#dh-website > main {
  min-height:100vh;
}

*:not(:has(*)):not(:empty) {
  white-space:break-spaces;
}

.dh-embed *:not(:has(*)):not(:empty) {
  white-space:normal;
}


/* ================================ Basis, Variablen, Semantik */

main {
  --Black:rgba(0,0,0,1.00);
  --Beige:#ffffff;
  --beigeBG:#f8debb;
  --greyTypo:#adadad;
  --DarkGreyTypo:rgb(97,97,97);
  --DKorange:rgb(229,142,27);
  --buttonhovergreen:rgb(46,188,94);
  --dkblue:#3d338b;
  --lilac:#5f62f0;
  --reddd:#f11312;
  --flyerwhite:rgb(255,253,242);
  --lightbeige:rgb(229,142,27);
  --lightbeige:#f8debb;
  --navbar:rgba(255,253,240,0.8);
}

main {
  color:rgba(0,0,0,1.00);
  font-size:18px;
  background:rgba(255,255,255,1.00);
  font-family:Outfit;
  font-weight:400;
  line-height:1.4;
}

main .container {
  width:100%;
  margin:0px auto 0px auto;
  display:block;
  padding:0px 20px 0px 20px;
  max-width:1120px;
}

main h2 {
  margin:0px 0px 0px 0px;
  font-size:3em;
  font-weight:400;
  line-height:1.1;
  background:;
  color:var(--dkblue);
  text-align:left;
  font-family:'Lilita One';
  margin-bottom:0.3em;
}

main h1 {
  margin:0px 0px 0px 0px;
  font-size:70px;
  font-weight:600;
  line-height:1.1;
}

main h3 {
  margin:0px 0px 0px 0px;
  font-size:1.6em;
  font-weight:600;
  line-height:1.1;
  color:var(--greyTypo);
  font-family:'Lilita One';
  text-transform:uppercase;
  letter-spacing:0.15em;
}

main h4 {
  margin:0px 0px 0px 0px;
  font-size:24px;
  font-weight:600;
  line-height:1.1;
}

main h5 {
  margin:0px 0px 0px 0px;
  font-size:20px;
  font-weight:400;
  font-family:'Lato';
  color:var(--DarkGreyTypo);
}

main h6 {
  margin:0px 0px 0px 0px;
  font-size:16px;
  font-weight:700;
}

main p {
  margin:0px 0px 0px 0px;
  background:rgb(255,255,255);
  color:rgb(0,0,0);
}

main ul {
  padding:0px 20px 0px 20px;
}

main ol {
  padding:0px 20px 0px 20px;
}

main img {
  display:block;
  max-width:100%;
}

main textarea {
  resize:vertical;
  font-family:Outfit;
}

main a {
  cursor:pointer;
  transition:all 200ms 0ms linear;
  text-decoration:none;
  color:var(--beigeBG);
}

main button {
  cursor:pointer;
  transform:;
  transition:all 200ms 0ms linear;
  font-family:Outfit;
}

main input {
  font-family:Outfit;
}

main select {
  font-family:Outfit;
}

main .sticky-nav {
  top:0;
  width:100%;
  z-index:100;
  position:sticky;
  transition:all 200ms 0ms linear;
}

main ._3stepbox {
  background:;
}

main .padding20 {
  padding-bottom:20px;
}

main .boxtext {
  font-family:'Lato';
  font-size:1em;
  text-align:justify;
  color:var(--DarkGreyTypo);
  font-weight:400;
  background:;
}

main ._3stepboxtext {
  font-family:'Lato';
  font-weight:400;
  font-size:1.0em;
  color:var(--DarkGreyTypo);
  text-align:justify;
  line-height:1.3;
}

main ._3stephead {
  color:var(--DarkGreyTypo);
  background:;
  text-align:justify;
  line-height:1.4em;
}

main .orangehead {
  font-family:'Lilita One';
  font-weight:400;
  background:;
  text-align:left;
  margin-bottom:20px;
  text-transform:uppercase;
  letter-spacing:0.1rem;
  -webkit-background-clip:text;
  color:var(--lilac);
  font-size:2.1em;
}

main .content_bg {
  margin-top:20px;
  margin-bottom:30px;
  /* Jens' Feedback 2026-09-21: die Boxen sassen auf Mobile teils genau an
     der Fensterkante (0px), teils mit Abstand (z.B. .t373 durch Verschachtelung
     in .t343 - kein eigener Wert, nur Nebeneffekt des Eltern-Paddings). Jetzt
     hat jede .content_bg-Box denselben eigenen Aussenabstand. `.container`
     setzt `width:100%` - ohne Korrektur wuerde das Margin die Box um genau
     den Margin-Betrag ueber den Elternrand hinausschieben (Margin liegt
     IMMER ausserhalb der Box, unabhaengig von box-sizing). Deshalb Breite
     um die 10px (5+5) reduziert. */
  width:calc(100% - 10px);
  margin-left:5px;
  margin-right:5px;
  padding-bottom:30px;
  padding-top:20px;
  border-radius:30px;
  background:var(--beigeBG);
}

main .place_facts {
  background:;
}

main .primary_button {
  text-transform:uppercase;
  border-radius:15px;
  padding-top:15px;
  padding-left:60px;
  padding-right:60px;
  padding-bottom:15px;
  font-family:'Lato';
  font-weight:900;
  font-size:1.3em;
  line-height:1.4em;
  color:var(--Beige);
  text-align:center;
  background:var(--lilac);
  letter-spacing:0.1rem;
}

main .primary_button:hover {
  color:var(--Beige);
  background:var(--buttonhovergreen);
}

main .form_label {
  font-family:'Lato';
  font-weight:900;
  color:var(--DarkGreyTypo);
  font-size:1em;
}

main .mt-40 {
  margin:40px 0px 0px 0px;
}

main .mt-30 {
  margin:30px 0px 0px 0px;
}

main .color-secondary {
  color:rgba(77,80,83,1.00);
}

main .text-18 {
  font-size:18px;
}

main .fw-700 {
  font-weight:700;
}

main .chat-widget-button {
  width:100px;
  height:100px;
}

main .hover {
  color:var(--greyTypo);
}

main .honeypot {
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
}


/* ======================================= Elementregeln (t###) */

body main .t339 {
  color:rgb(0,0,0);
  width:100%;
  display:block;
  position:static;
  font-size:16px;
  max-width:100%;
  min-width:100%;
  background:linear-gradient(181deg,var(--DKorange) 0%,var(--flyerwhite) 30%,rgb(229,142,27) 70%,#FFFFFF 80%);
  margin-top:0px;
  max-height:;
  min-height:;
  font-family:'Lato';
  font-weight:400;
  line-height:;
  margin-left:0px;
  padding-top:0px;
  margin-right:0px;
  padding-left:0px;
  margin-bottom:0px;
  padding-right:0px;
  letter-spacing:;
  padding-bottom:0px;
}

/* Der Header hatte im Divhunt-Original einen Sunburst als Hintergrund: die
   Regel bringt bis heute background-size/-repeat/-position dafuer mit, nur der
   Wert von background-image war leer - im Page-Builder verlorengegangen. Das
   Bild steckte zuletzt nur noch in einer Media Query fuer schmale Viewports
   (a557510e..._115873.png, bei uns als mobile-bg.png abgelegt).
   Wieder eingesetzt am 21.09.2026 auf Jens' Wunsch.
   sunburst.png statt mobile-bg.png: beide zeigen dieselbe Grafik, aber
   mobile-bg.png (2000x600) hat mit `cover` nur 192px Hoehenreserve. Das
   Strahlenzentrum liesse sich damit hoechstens bis y=221 schieben und saesse
   weiter mitten im Schriftzug. sunburst.png (2160x1215) rendert mit `cover`
   auf 1920x1080, also 696px Reserve.

   Position 26%: Das Zentrum der Grafik liegt bei (1141, 492), mit Faktor
   0.8889 also bei (1014, 437) im gerenderten Bild. 26% von -696px Versatz
   ergibt -181px, das Zentrum landet damit bei y=256 - direkt unter dem Claim
   "PLATTEN-BASAR MIT ...", dessen Unterkante bei y=240 liegt. */
body main .t340 {
  height:384px;
  position:static;
  transform:;
  background:;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:8px;
  background-size:cover;
  background-image:url(/assets/img/sunburst.png);
  background-repeat:no-repeat;
  background-position:50% 26%;
  /* Divhunt setzt hier -webkit-background-clip:text. Solange background-image
     leer war, blieb das folgenlos; mit Bild wird der Hintergrund auf
     Textglyphen beschnitten und man sieht gar nichts. Zurueckgesetzt. */
  -webkit-background-clip:border-box;
  background-clip:border-box;
}

body main .t341 {
  top:20px;
  left:0%;
  right:0%;
  bottom:0%;
  display:block;
  z-index:100;
  position:absolute;
  max-width:90%;
  object-fit:scale-down;
  overflow-y:hidden;
  margin-left:auto;
  margin-right:auto;
}

body main .t342 {
  max-width:1800px;
  margin-left:auto;
  padding-top:10px;
  margin-right:auto;
  padding-left:10px;
  border-radius:10px 10px 0px 0px;
  margin-bottom:40px;
  padding-right:10px;
}

body main .t343 {
  /* margin-left/right waren `auto` (zentriert eine Box, die eh schon
     100% ihres Elternelements einnimmt - ohne sichtbaren Effekt). Jetzt
     wie alle anderen .content_bg-Boxen ein echter 5px Aussenabstand,
     Breite entsprechend reduziert (Jens' Vorgabe 2026-09-21). */
  width:calc(100% - 10px);
  max-width:100vw;
  background:;
  margin-top:20px;
  margin-left:5px;
  padding-top:20px;
  margin-right:5px;
  padding-left:40px;
  border-radius:15px;
  margin-bottom:20px;
  padding-right:40px;
  padding-bottom:20px;
  text-transform:uppercase;
  -webkit-background-clip:border-box;
}

body main .t354 {
  color:#ffffff;
  display:block;
  background:#3d338b;
  font-family:'Bitter';
  padding-top:100px;
  padding-bottom:100px;
}

body main .t356 {
  display:flex;
  justify-content:space-between;
}

body main .t357 {
  display:flex;
  max-width:50%;
  align-items:stretch;
  flex-direction:column;
  justify-content:flex-start;
}

body main .t358 {
  font-weight:700;
  text-transform:uppercase;
}

body main .t359 {
  color:#ffffff;
  font-size:18px;
  margin-top:20px;
  -webkit-background-clip:text;
}

body main .t360 {
  border:1px solid rgba(102,102,102,1.00);
  display:flex;
  margin-top:40px;
  margin-left:10px;
  margin-right:10px;
}

body main .t361 {
  display:flex;
  background:#5f62f0;
  align-items:center;
  padding-left:20px;
  padding-right:20px;
  justify-content:center;
}

body main .t361:hover {
  background:rgba(52,52,52,1.00);
}

body main .t361:hover >img {
  transform:scale(1.2,1.2) rotate(20deg);
}

body main .t362 {
  color:#ffffff;
  font-size:60px;
}

body main .t363 {
  width:100%;
  border:1px none rgba(0,0,0,0.00);
  font-size:20px;
  background:#ffffff;
  font-family:'Bitter';
  font-weight:600;
  padding-top:20px;
  border-right:1px solid rgba(0,0,0,0.00);
  padding-left:20px;
  padding-bottom:20px;
}

body main .t364 {
  color:#ffffff;
  display:flex;
  column-gap:100px;
}

body main .t365 {
  display:flex;
  flex-direction:column;
}

body main .t366 {
  font-weight:700;
  text-transform:uppercase;
}

body main .t367 {
  display:flex;
  margin-top:20px;
  flex-direction:column;
}

body main .t368 {
  display:flex;
  row-gap:50px;
  margin-top:40px;
  text-align:right;
  align-items:center;
  flex-direction:column;
  justify-content:space-between;
}

body main .t369 {
  display:flex;
  column-gap:40px;
  margin-top:40px;
}

body main .t370 {
  color:var(--Beige);
  width:50px;
  height:50px;
  display:flex;
  background:rgba(148,148,148,1.00);
  box-shadow:;
  align-items:center;
  border-radius:100%;
  justify-content:center;
}

body main .t370:hover {
  box-shadow: 0px 0px 5px 2px rgba(5,5,5,1.00);
}

body main .t370:hover >img {
  transform:scale(1.2,1.2);
}

body main .t371 {
  display:flex;
  margin-top:100px;
  text-align:right;
  align-items:center;
  justify-content:center;
}

body main .t372 {
  color:var(--greyTypo);
  font-size:16px;
  letter-spacing:0.05em;
  -webkit-background-clip:text;
  text-align:center;
}

body main .t373 {
  color:var(--dkblue);
  display:grid;
  overflow:hidden;
  font-size:1.8em;
  width:100%;
  max-width:100%;
  background:;
  margin-top:0px;
  font-family:'Lilita One';
  font-weight:900;
  /* .t373 sitzt VERSCHACHTELT in .t343 (selbst schon eine .content_bg-Box
     mit eigenem 5px-Aussenabstand + Innenabstand). Ein zusaetzliches
     eigenes Margin wuerde sich mit dem der Elternbox aufaddieren - genau
     das Stacking-Problem, vor dem Jens gewarnt hat (2026-09-21). Deshalb
     hier bewusst 0 statt der 5px aus der Basisregel. */
  margin-left:0px;
  padding-top:20px;
  margin-right:0px;
  padding-left:0px;
  border-radius:10px 10px 0px 0px;
  margin-bottom:20px;
  padding-right:0px;
  letter-spacing:0.2em;
  padding-bottom:20px;
  text-transform:uppercase;
  grid-template-columns:1fr 1fr;
  -webkit-background-clip:content-box;
}

body main .t374 {
  width:100%;
  height:2em;
  background:var(--lilac);
  border-top:3px solid var(--dkblue);
  border-left:3px solid var(--dkblue);
  border-bottom:3px double var(--dkblue);
  border-radius:10px 0px 0px 0px;
}

body main .t375 {
  width:100%;
  height:2em;
  max-width:100%;
  background:var(--lilac);
  border-top:3px solid #3d338b;
  border-left:3px dotted #000000;
  border-right:3px solid var(--dkblue);
  border-bottom:3px double #000000;
  border-radius:0px 10px 0px 0px;
}

body main .t376 {
  color:var(--flyerwhite);
}

body main .t377 {
  color:var(--flyerwhite);
}

body main .t378 {
  color:var(--flyerwhite);
  order:0;
  width:100%;
  border:3px solid var(--dkblue);
  display:grid;
  overflow:visible;
  font-size:0.6em;
  max-width:100%;
  background:#9698ff;
  margin-top:-3px;
  font-family:'Lato';
  font-weight:900;
  grid-column:span 2;
  margin-left:auto;
  margin-right:auto;
  border-radius:0px;
  letter-spacing:0.05em;
  text-transform:capitalize;
  grid-template-rows:1fr;
  grid-template-columns:1fr 1fr;
}

body main .t379 {
  position:relative;
  padding-top:10px;
  padding-bottom:10px;
}

body main .t380 {
  position:relative;
  border-left:3px dotted var(--dkblue);
  padding-top:10px;
  padding-left:20px;
  padding-bottom:10px;
  text-transform:capitalize;
}

body main .t381 {
  background:;
}

body main .t382 {
  /* Eigene width:100% ueberschrieb die width:calc() aus .content_bg und
     liess die Box durch das neue 5px-Margin ueber den Rand hinauslaufen
     (Jens' Feedback 2026-09-21, Aussenabstaende vereinheitlichen). */
  width:calc(100% - 10px);
  display:block;
  max-width:100%;
  background:#f8ddba00;
  margin-top:-30px;
  /* Hatte anders als t548/t343/t510/t529/t585 KEIN eigenes padding-left/
     right - oberhalb von 1200px (ausserhalb der beiden Media-Query-
     Ausnahmen fuer 24px/16px) fiel die Box deshalb auf das ererbte
     20px von `.container` zurueck, statt auf 40px wie alle anderen
     .content_bg-Boxen. Gefunden beim Nachmessen ueber alle Breiten
     (Jens' Hinweis 2026-09-21: "verhaelt sich anders als die ersten
     zwei"). */
  padding-left:40px;
  padding-right:40px;
  -webkit-background-clip:content-box;
}

body main .t383 {
  color:var(--dkblue);
}

body main .t384 {
  font-size:1em;
  text-align:left;
  line-height:1.5;
  margin-bottom:30px;
  text-transform:none;
  -webkit-background-clip:text;
}

body main .t385 {
  display:grid;
  row-gap:24px;
  column-gap:24px;
  grid-template-columns:1fr 1fr;
}

body main .t386 {
  padding-left:0px;
  padding-right:0px;
}

body main .t387 {
  color:var(--dkblue);
  letter-spacing:0.06em;
}

body main .t388 {
  position:relative;
  background:;
  text-align:left;
  line-height:1.2;
  margin-right:20px;
  padding-bottom:20px;
  text-transform:none;
  -webkit-background-clip:text;
}

body main .t389 {
  padding-left:0px;
}

body main .t390 {
  position:relative;
  background:;
  text-align:left;
  line-height:1.2;
  margin-right:20px;
  padding-bottom:20px;
  text-transform:none;
  -webkit-background-clip:text;
}

body main .t391 {
  color:var(--dkblue);
  letter-spacing:0.06em;
}

body main .t392 {
  margin-top:10px;
  padding-bottom:5px;
}

body main .t393 {
  font-size:0.9em;
  font-family:'Lato';
  font-weight:400;
  line-height:1.1em;
  padding-left:10px;
}

body main .t394 {
  display:block;
  margin-left:auto;
  margin-right:auto;
  /* padding-left/right (je 20px) entfernt - Jens, 22.09.2026: ueberfluessige
     Ebene unter Headline und Subtext. Unterhalb von 1200px stand es ueber die
     Tablet-Regel ohnehin schon auf 0, oberhalb blieb es stehen. */
  grid-template-columns:1fr 1fr;
}

body main .t395 {
  margin-top:10px;
  padding-bottom:5px;
}

body main .t396 {
  font-size:0.9em;
  font-family:'Lato';
  font-weight:400;
  line-height:1.1em;
  padding-left:10px;
}

body main .t397 {
  display:grid;
  padding-left:0px;
  grid-template-rows:1fr 1fr;
  grid-template-columns:1fr;
}

body main .t398 {
  display:grid;
  padding-left:0px;
  grid-template-rows:1fr 1fr;
  grid-template-columns:1fr;
}

body main .t399 {
  display:grid;
  padding-left:0px;
  grid-template-rows:1fr 1fr;
  grid-template-columns:1fr;
}

body main .t400 {
  margin-top:10px;
  padding-bottom:5px;
}

body main .t401 {
  font-size:0.9em;
  font-family:'Lato';
  font-weight:400;
  line-height:1.1em;
  padding-left:10px;
}

body main .t402 {
  display:grid;
  padding-left:0px;
  grid-template-rows:1fr 1fr;
  grid-template-columns:1fr;
}

body main .t403 {
  margin-top:10px;
  padding-bottom:5px;
}

body main .t404 {
  font-size:0.9em;
  font-family:'Lato';
  font-weight:400;
  line-height:1.1em;
  padding-left:10px;
}

body main .t405 {
  display:grid;
  padding-left:0px;
  padding-right:0px;
  grid-template-rows:1fr 1fr;
  grid-template-columns:1fr;
}

body main .t406 {
  margin-top:10px;
  padding-bottom:5px;
}

body main .t407 {
  font-size:0.9em;
  font-family:'Lato';
  font-weight:400;
  line-height:1.1em;
  padding-left:10px;
}

body main .t408 {
  display:grid;
  padding-left:0px;
  padding-right:0px;
  grid-template-rows:1fr 1fr;
  grid-template-columns:1fr;
}

body main .t409 {
  margin-top:10px;
  padding-bottom:5px;
}

body main .t410 {
  font-size:0.9em;
  font-family:'Lato';
  font-weight:400;
  line-height:1.1em;
  padding-left:10px;
  padding-right:10px;
}

body main .t412 {
  margin-right:10px;
  padding-right:10px;
}

body main .t413 {
  display:grid;
  padding-left:0px;
  padding-right:0px;
  grid-template-rows:1fr 1fr;
  grid-template-columns:1fr;
}

body main .t414 {
  display:inline;
  align-self:flex-start;
  margin-top:10px;
  justify-self:flex-start;
  padding-bottom:5px;
}

body main .t415 {
  top:-10px;
  display:block;
  position:static;
  font-size:0.9em;
  margin-top:-4px;
  font-family:'Lato';
  font-weight:400;
  line-height:1.1em;
  padding-top:10px;
  padding-left:10px;
  grid-template-columns:1fr 1fr;
}

body main .t416 {
  color:var(--Black);
  display:flex;
  row-gap:10px;
  margin-top:20px;
  font-family:'Lato';
  flex-direction:column;
}

body main .t417 {
  display:flex;
  flex-wrap:wrap;
  column-gap:10px;
  margin-top:8px;
  align-items:center;
}

body main .t418 {
  width:25px;
  cursor:pointer;
  height:25px;
}

body main .t419 {
  color:var(--DarkGreyTypo);
  font-weight:900;
}

body main .t420 {
  border:1px none rgba(0,0,0,1);
  display:block;
  background:var(--dkblue);
  margin-top:40px;
  margin-left:auto;
  padding-top:3%;
  padding-left:15%;
  padding-right:15%;
  padding-bottom:3%;
}

body main .t420:hover {
  background:var(--buttonhovergreen);
}

body main .t449 {
  display:grid;
  padding-left:0px;
  padding-right:0px;
  grid-template-rows:1fr 1fr;
  grid-template-columns:1fr;
}

body main .t450 {
  margin-top:10px;
  padding-bottom:5px;
}

body main .t451 {
  font-size:0.9em;
  font-family:'Lato';
  font-weight:400;
  line-height:1.1em;
  padding-left:10px;
}

body main .t468 {
  transform:;
  transition:;
}

body main .t483 {
  font-size:2em;
  margin-left:auto;
  margin-right:auto;
  text-decoration:none;
}

body main .t484 {
  width:100%;
  max-width:100%;
  background:;
}

body main .t485 {
  width:109%;
  display:block;
  overflow:hidden;
  max-width:109%;
  transform:rotate(2grad);
  background:var(--Beige);
  margin-left:-4%;
  margin-right:auto;
  padding-left:0px;
  padding-right:0px;
}

body main .t487 {
  height:100%;
  display:block;
  position:static;
  margin-left:auto;
  margin-right:auto;
  /* Im Original lagen die 40px Differenz zwischen Band (.t485, 440px) und
     Bildern (400px) komplett als margin-bottom unten - die Bilder sassen
     buendig an der Oberkante des weissen Bands. Jetzt gleichmaessig verteilt,
     20px oben und unten (Jens, 21.09.2026). Bandhoehe bleibt 440px. */
  margin-top:20px;
  margin-bottom:20px;
  grid-template-columns:1fr 1fr;
}

body main .t488 {
  display:block;
}
body main .t488 > img {
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
}

/* WebP-Fallback via <picture>. Default: picture selbst raus aus dem
   Boxmodell, damit z.B. die Karte weiter genau die img trifft.
   Ausnahme .t488 (Swiper-Slides, Jens' Bugfund 22.09.2026): Swiper.js
   erkennt Slides an DIREKTEN Kindern von .swiper-wrapper mit der Klasse
   swiper-slide - lag die Klasse auf dem inneren img (hinter einem
   display:contents-picture), fand Swiper beim letzten Slide-Batch keine
   Slides mehr und der Swipe/Autoplay stand komplett still. Klasse liegt
   jetzt auf dem picture selbst, object-fit wandert aufs img (s.o.). */
picture {
  display:contents;
}

body main .t489 {
  display:flex;
  overflow:visible;
  position:static;
  max-width:400px;
}

body main .t490 {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

body main .t497 {
  top:251px;
  color:rgba(0,0,0,1.00);
  display:flex;
  z-index:50;
  position:relative;
  font-size:6rem;
  text-align:center;
  align-items:flex-end;
  line-height:90%;
  margin-left:auto;
  text-shadow:4px 4px 0px rgb(255,253,242),-4px -4px 0px rgb(255,253,242),-4px 4px 0px rgb(255,253,242),4px -4px 0px rgb(255,253,242);
  margin-right:auto;
  padding-left:50px;
  margin-bottom:0px;
  text-transform:uppercase;
  justify-content:center;
}

body main .t498 {
  top:271px;
  width:100%;
  height:4em;
  display:flex;
  z-index:10;
  position:relative;
  font-size:0.6em;
  max-width:100%;
  transform:rotate(-1grad);
  background:rgb(255,253,242);
  border-top:2px dashed rgb(97,97,97);
  margin-left:auto;
  margin-right:auto;
  border-bottom:2px dashed rgb(97,97,97);
  flex-direction:column;
  justify-content:center;
}

body main .t499 {
  color:#f11312;
  filter:;
  height:;
  display:block;
  font-size:2rem;
  transform:;
  background:;
  max-height:;
  min-height:;
  text-align:center;
  transition:;
  font-family:'Lilita One';
  font-weight:400;
  line-height:90%;
  padding-top:0.25rem;
  text-shadow:;
  text-transform:uppercase;
}

body main .t510 {
  /* Jens' Feedback 2026-09-21: einheitlicher 5px Aussenabstand wie bei den
     anderen .content_bg-Boxen statt hart auf 0 gesetzt. Innenabstand jetzt
     ebenfalls responsiv wie .t548/.t343/.t382 (40/24/16px, siehe Media
     Queries weiter unten) statt fest 20px von `.container` geerbt. */
  width:calc(100% - 10px);
  max-width:100%;
  background:;
  margin-top:20px;
  margin-left:5px;
  padding-top:20px;
  padding-left:40px;
  margin-right:5px;
  padding-right:40px;
  margin-bottom:20px;
  padding-bottom:20px;
  -webkit-background-clip:text;
}

body main .t511 {
  width:98%;
  display:grid;
  max-width:100vw;
  column-gap:30px;
  align-items:start;
  margin-left:auto;
  padding-top:20px;
  margin-right:auto;
  padding-left:20px;
  justify-items:start;
  padding-right:20px;
  grid-auto-flow:row;
  padding-bottom:20px;
  grid-template-columns:1fr 1fr;
}

body main .t513 {
  color:#3d338b;
  background:;
  text-transform:uppercase;
}

body main .t514 {
  -webkit-background-clip:text;
}

body main .t516 {
  padding-left:0px;
  padding-right:0px;
}

body main .t517 {
  color:#3d338b;
  font-size:1.9em;
  letter-spacing:0.09em;
}

body main .t518 {
  /* Jens' Feedback 2026-09-21: rechtsbuendig (war schon richtig so), kein
     Padding mehr (weder links noch rechts), Farbe wie die Partner-Logos
     im Footer statt dem alten Hellgrau. */
  color:rgba(0,0,0,0.55);
  width:100%;
  font-size:0.7em;
  text-align:right;
  font-family:'Lato';
  margin-bottom:10px;
  -webkit-background-clip:text;
}

body main .t519 {
  min-width:100%;
}

body main .t520 {
  font-size:1em;
  background:;
  padding-right:15px;
  padding-bottom:15px;
  -webkit-background-clip:text;
}

body main .t521 {
  width:97%;
  height:1.4em;
  display:flex;
  overflow:visible;
  position:relative;
  font-size:50px;
  background:#5f62f0;
  box-shadow:2px 3px 5px 0px rgba(0,0,0,0.15);
  column-gap:20%;
  align-items:center;
  border-radius:15px;
  margin-bottom:10px;
  justify-content:center;
}

body main .t522 {
  color:rgb(255,253,242);
  background:;
}

body main .t522:hover {
  color:#f8debb;
}

body main .t523 {
  width:50px;
  height:50px;
  overflow:visible;
  background:;
  text-align:center;
}

body main .t524 {
  color:rgb(255,253,242);
  background:;
}

body main .t524:hover {
  color:#f8debb;
  background:;
}

body main .t525 {
  width:50px;
  height:50px;
  overflow:visible;
  text-align:center;
}

body main .t526 {
  color:#ffffff;
}

body main .t526:hover {
  color:rgb(229,142,27);
}

body main .t527 {
  width:50px;
  height:50px;
  overflow:visible;
  background:;
  text-align:center;
}

body main .t528 {
  color:#3d338b;
  text-transform:uppercase;
}

body main .t529 {
  max-width:100%;
  background:;
  margin-top:30px;
  padding-top:40px;
  /* Innenabstand jetzt responsiv wie .t548/.t343/.t382 (Jens' Vorgabe
     2026-09-21), statt fest 20px von `.container` geerbt. */
  padding-left:40px;
  padding-right:40px;
  margin-bottom:20px;
  padding-bottom:20px;
  -webkit-background-clip:text;
}

body main .t530 {
  max-width:100vw;
  background:var(--beigeBG);
  padding-top:10px;
  border-radius:15px;
  padding-bottom:40px;
}

body main .t531 {
  display:grid;
  flex-wrap:nowrap;
  column-gap:1.5em;
  margin-top:10px;
  align-items:flex-start;
  flex-direction:row;
  justify-content:space-around;
  grid-template-columns:1fr 1fr 1fr;
}

body main .t532 {
  color:rgb(0,0,0);
  align-self:stretch;
  background:#f4d1a2;
  padding-top:20px;
  padding-left:20px;
  border-radius:20px;
  margin-bottom:20px;
  padding-right:20px;
  padding-bottom:20px;
}

body main .t533 {
  color:#3d338b;
  margin-top:20px;
  text-align:center;
  letter-spacing:0.09em;
}

body main .t534 {
  width:150px;
  height:150px;
  margin-left:auto;
  margin-right:auto;
  border-radius:200px;
}

body main .t535 {
  background:;
  -webkit-background-clip:text;
}

body main .t536 {
  color:rgb(0,0,0);
  align-self:stretch;
  background:#f4d1a2;
  padding-top:20px;
  padding-left:20px;
  border-radius:20px;
  margin-bottom:20px;
  padding-right:20px;
  padding-bottom:20px;
}

body main .t537 {
  color:#3d338b;
  margin-top:20px;
  text-align:center;
  letter-spacing:0.09em;
}

body main .t538 {
  width:150px;
  height:150px;
  margin-left:auto;
  margin-right:auto;
  border-radius:200px;
}

body main .t539 {
  background:;
  -webkit-background-clip:text;
}

body main .t540 {
  color:rgb(0,0,0);
  align-self:stretch;
  background:#f4d1a2;
  padding-top:20px;
  padding-left:20px;
  border-radius:20px;
  margin-bottom:20px;
  padding-right:20px;
  padding-bottom:20px;
}

body main .t541 {
  width:150px;
  height:150px;
  margin-left:auto;
  margin-right:auto;
  border-radius:200px;
}

body main .t542 {
  color:#3d338b;
  margin-top:20px;
  text-align:center;
  letter-spacing:0.09em;
}

body main .t543 {
  background:;
  -webkit-background-clip:text;
}

body main .t544 {
  padding-bottom:20px;
  -webkit-background-clip:text;
}

body main .t545 {
  color:#3d338b;
  margin:0px auto 0px auto;
  text-align:left;
  font-family:'Lilita One';
  font-weight:400;
  letter-spacing:0.1rem;
  text-transform:uppercase;
  /* Der `margin`-Shorthand oben setzt margin-bottom explizit auf 0 (Original
     hatte stattdessen ein separates padding-bottom:10px, das aber keinen
     sichtbaren Abstand erzeugte - vermutlich durch die Zeilenumbruch-/
     Hyphens-Behandlung dieser Ueberschrift ueberdeckt). Einheitlich mit den
     anderen H2 auf 0.3em, als eigene Deklaration NACH dem Shorthand. */
  margin-bottom:0.3em;
}

body main .t546 {
  color:#5f62f0;
  width:100%;
  font-size:5rem;
  max-width:100vw;
  margin-top:10px;
  font-family:'Lilita One';
  font-weight:400;
  line-height:1em;
  margin-left:auto;
  margin-right:auto;
  padding-left:30px;
  margin-bottom:10px;
  letter-spacing:0em;
}

body main .t547 {
  width:100%;
  max-width:100%;
  background:;
  padding-left:0px;
  padding-right:0px;
}

body main .t548 {
  /* margin-left/right waren `auto` (zentriert eine Box, die eh schon
     100% ihres Elternelements einnimmt - ohne sichtbaren Effekt). Jetzt
     wie alle anderen .content_bg-Boxen ein echter 5px Aussenabstand,
     Breite entsprechend reduziert (Jens' Vorgabe 2026-09-21). */
  width:calc(100% - 10px);
  max-width:100vw;
  background:;
  margin-top:20px;
  margin-left:5px;
  padding-top:20px;
  margin-right:5px;
  padding-left:40px;
  border-radius:15px;
  margin-bottom:20px;
  padding-right:40px;
  padding-bottom:20px;
  text-transform:uppercase;
  -webkit-background-clip:border-box;
}

body main .t549 {
  width:100%;
  display:flex;
  max-width:100vw;
  column-gap:2%;
  align-items:flex-start;
  margin-left:auto;
  margin-right:auto;
  padding-left:0px;
  padding-right:0px;
  flex-direction:row;
  justify-content:space-between;
  grid-template-columns:1fr 1fr;
}

body main .t550 {
  width:50%;
}

body main .t551 {
  padding-left:0px;
  padding-right:0px;
}

body main .t552 {
  width:100%;
  height:400px;
  position:relative;
  margin-top:-0.1em;
  border-radius:15px;
}

body main .t553 {
  text-align:left;
}

body main .t554 {
  width:50%;
}

body main .t557 {
  color:#5f62f0;
  font-size:1.1em;
}

body main .t558 {
  color:#5f62f0;
  font-size:1.1em;
  margin-top:5px;
}

body main .t559 {
  color:#5f62f0;
  font-size:1.8em;
  font-family:'Lilita One';
  font-weight:400;
  text-decoration:underline;
}

body main .t559:hover {
  color:#3537aa;
  transition:all 300ms 0ms ease;
  text-decoration:underline;
}

body main .t560 {
  color:#5f62f0;
  font-size:1.1em;
}

body main .t561 {
  color:#f11312;
  font-size:5rem;
  font-family:'Lilita One';
  font-weight:900;
  margin-bottom:-0.1em;
}

body main .t562 {
  width:100%;
  max-width:100vw;
  background:var(--beigeBG);
  margin-top:20px;
  margin-left:auto;
  padding-top:20px;
  margin-right:auto;
  padding-left:40px;
  border-radius:15px;
  margin-bottom:20px;
  padding-right:40px;
  padding-bottom:20px;
  text-transform:uppercase;
  -webkit-background-clip:border-box;
}

body main .t563 {
  width:100%;
  max-width:100vw;
  background:var(--beigeBG);
  margin-left:auto;
  padding-top:10px;
  margin-right:auto;
  border-radius:15px;
  padding-bottom:10px;
}

body main .t571 {
  color:var(--Beige);
  display:inline;
  font-size:1.1em;
  background:;
  /* `margin-top: 10px` entfernt (Jens, 22.09.2026). Zusammen mit dem
     ebenfalls entfernten `padding-top` stand der Rechtslink 17.2px unter
     seiner Ueberschrift, waehrend der Newsletter-Block auf 7.2px (0.3em)
     sitzt. Jetzt beide gleich. */
}

body main .t571:hover {
  color:rgba(145,145,145,1.00);
}

body main .t572 {
  display:flex;
  flex-direction:column;
}

body main .t573 {
  font-weight:700;
  text-transform:uppercase;
}

body main .t574 {
  display:flex;
  margin-top:20px;
  flex-direction:column;
}

body main .t575 {
  color:var(--Beige);
  cursor:pointer;
  display:inline;
  font-size:1.1em;
  background:;
  margin-top:10px;
  transition:all 200ms 0ms linear;
  -webkit-background-clip:text;
}

body main .t575:hover {
  color:rgba(145,145,145,1.00);
}

body main .t584 {
  color:#f11312;
  font-size:4rem;
  margin-top:-0.3em;
  font-family:'Lilita One';
  font-weight:900;
  margin-bottom:-0.1em;
}

body main .t585 {
  /* Jens' Feedback 2026-09-21: einheitlicher 5px Aussenabstand wie bei den
     anderen .content_bg-Boxen statt hart auf 0 gesetzt. Innenabstand jetzt
     ebenfalls responsiv wie .t548/.t343/.t382 statt fest 20px. */
  width:calc(100% - 10px);
  max-width:100%;
  background:;
  margin-top:20px;
  margin-left:5px;
  padding-top:20px;
  padding-left:40px;
  margin-right:5px;
  padding-right:40px;
  margin-bottom:20px;
  padding-bottom:20px;
  -webkit-background-clip:text;
}

body main .t586 {
  width:100%;
  max-width:100vw;
  background:#f8debb;
  margin-left:auto;
  padding-top:10px;
  margin-right:auto;
  border-radius:15px;
  padding-bottom:10px;
}

body main .t587 {
  width:98%;
  display:grid;
  max-width:100vw;
  column-gap:30px;
  align-items:start;
  margin-left:auto;
  padding-top:20px;
  margin-right:auto;
  padding-left:20px;
  justify-items:start;
  padding-right:20px;
  grid-auto-flow:row;
  padding-bottom:20px;
  grid-template-columns:1fr 1fr;
}

body main .t589 {
  padding-top:5px;
  -webkit-background-clip:text;
}

body main .t591 {
  width:;
  display:grid;
  row-gap:30px;
  flex-wrap:wrap;
  max-width:;
  column-gap:30px;
  align-items:center;
  padding-left:0px;
  justify-items:center;
  padding-right:0px;
  grid-auto-flow:row;
  justify-content:space-between;
  /* Jens' Vorgabe 2026-09-22: Bilder im Hochformat 9:16, nebeneinander in
     der linken Spalte (3er-Reihe), daneben die Tempo-K-Beschreibung (.t588).
     Erst faelschlich als 19:6-Querformat gebaut, war ein Typo von Jens. */
  grid-template-columns:1fr 1fr 1fr;
}

body main .t592 {
  width:100%;
  aspect-ratio:9/16;
  height:auto;
  object-fit:fill;
}

/* #artist-pics: die t592/t598/t599-Klasse sitzt hier auf dem <picture>
   selbst (nicht dem <img> wie sonst), weil die globale
   `picture{display:contents}`-Regel in Kombination mit CSS-Grid-Auto-Placement
   die Bilder falsch einsortiert hat (Bug gefunden 22.09.2026, 3 Bilder
   landeten auf 2 Zeilen statt einer 3er-Reihe). Deshalb hier picture wieder
   zu einer echten Grid-Zelle machen und object-fit ans img weiterreichen. */
#artist-pics picture {
  display:block;
}
#artist-pics picture > img {
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
}

body main .t593 {
  color:#3d338b;
  font-size:1.9em;
  padding-top:20px;
  letter-spacing:0.09em;
}

body main .t594 {
  color:var(--DarkGreyTypo);
  font-size:3em;
  align-self:auto;
  padding-top:10px;
}

body main .t594:hover {
  color:rgb(229,142,27);
}

body main .t595 {
  color:var(--dkblue);
  display:block;
  overflow:visible;
  background:;
  text-align:center;
}

body main .t595:hover {
  color:var(--Beige);
  transition:all 200ms 0ms linear;
}

body main .t596 {
  color:#3d338b;
  padding-left:20px;
  text-transform:uppercase;
}

body main .t597 {
  display:flex;
  column-gap:30px;
  align-items:center;
  justify-content:center;
}

body main .t598 {
  width:100%;
  aspect-ratio:9/16;
  height:auto;
  object-fit:fill;
}

body main .t599 {
  width:100%;
  aspect-ratio:9/16;
  height:auto;
  object-fit:fill;
}


/* ========================================= Marquee (Laufschrift) */
/* Original von Divhunt zur Laufzeit injiziert, <style id="marquee-498"> */

.t498 {
  overflow:hidden;
  position:relative;
  width:100%;
}

.t498 > div {
  display:flex;
  position:absolute;
  gap:20px;
  width:max-content;
  animation:plugin_marquee 200s linear infinite;
}

@keyframes plugin_marquee{
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ================================== Rebuild-Anpassungen */
/* Notwendig, weil die Divhunt-Engine durch das offizielle Swiper ersetzt wird.
   Im Original bekamen die Slides per Inline-Style 481.25px und wurden durch
   max-width des Wrappers (400px) auf 400px geklemmt - gerendert waren es also
   400x400 mit 5px Abstand. Das wird hier direkt so gesetzt, statt sich auf
   das Klemmen zu verlassen. */
.t489.swiper-wrapper {
  max-width: none;
}
.t488.swiper-slide {
  flex: 0 0 400px;
  width: 400px;
  height: 400px;
}

/* Das Original scrollt horizontal nicht, weil body overflow-x:hidden hat -
   .t485 ist 109% breit. Bleibt so. */

/* Statusmeldung unter dem Formular (im Original nicht vorhanden, dort lief
   die Rueckmeldung ueber das Divhunt-Form-Widget). */
#form-status {
  text-align: left;
}

/* ===================================== Karte (statt Maps-iframe) */
/* .t552 behaelt seine 400px Hoehe und den Radius aus dem Original;
   Bild fuellt den Rahmen, die ODbL-Namensnennung liegt darueber. */
.t552 > a {
  display: block;
  width: 100%;
  height: 100%;
}
.t552 .karte {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 15px;
}
/* ========================================== Mailchimp-Badge */
/* Das Badge liegt lokal (assets/img/mailchimp-badge.svg), die helle Variante,
   weil der Footer dunkelblau ist. Klein und zurueckhaltend unter dem Feld. */
.mc-badge {
  margin: 14px 10px 0 10px;
  background: none;
}
.mc-badge img {
  /* Diese Regel (Klasse, schlaegt das HTML-width-Attribut) hat die
     tatsaechliche Groesse bestimmt - das width/height auf dem <img> selbst
     war wirkungslos. Jens' Vorgabe 2026-09-21: halb so gross wie vorher
     (150px), auf allen Breiten inkl. Mobile. */
  width: 75px;
  height: auto;
  opacity: 0.65;
  transition: opacity 200ms linear;
}
.mc-badge a:hover img {
  opacity: 1;
}

/* ======================================================================
   Rechtstexte (impressum-datenschutz.html)
   Eigene Klassen statt t###: die Divhunt-Klassen beschreiben Positionen
   der Startseite, hier braucht es eine simple Lesespalte. Farben und
   Schriften kommen aus denselben Variablen, damit die Seite nicht wie ein
   Fremdkoerper wirkt.
   ====================================================================== */

/* Gleiche Breite wie der Content der Startseite: .t342 begrenzt dort auf
   1800px mit 10px Innenabstand, die Beige-Boxen (.t548, .t343, .t382) liegen
   damit bei 1780px und x70..1850. Hier derselbe Aufbau, damit die Seite
   buendig zur Startseite steht. */
body main .legal-wrap {
  max-width:1800px;
  margin:0 auto;
  padding:50px 10px 90px;
}

body main .legal {
  width:100%;
  background:var(--flyerwhite);
  border-radius:15px;
  padding:48px 40px 56px;
}

body main .legal h1 {
  font-family:"Lilita One";
  font-size:48px;
  line-height:52.8px;
  color:var(--dkblue);
  margin:0 0 6px;
}

body main .legal h2 {
  font-family:"Lilita One";
  font-size:32px;
  line-height:38px;
  color:var(--dkblue);
  margin:44px 0 14px;
}

body main .legal h3 {
  font-family:Lato,sans-serif;
  font-weight:900;
  font-size:17px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--dkblue);
  margin:26px 0 6px;
}

body main .legal p,
body main .legal li {
  font-family:Lato,sans-serif;
  font-size:16px;
  line-height:24px;
  color:var(--DarkGreyTypo);
  /* core.css setzt `main p { background:#fff }` - auf dem cremefarbenen
     Lesefeld ergibt das weisse Kaesten hinter jeder Zeile. */
  background:transparent;
}

/* visitor.css setzt `*:not(:has(*)):not(:empty){white-space:break-spaces}`.
   Auf der Startseite ist das gewollt (Ticker, Kuenstlerabsatz), hier macht es
   die Einrueckung aus dem HTML-Quelltext sichtbar - Absaetze ohne Kindelement
   ruecken dann ein, Absaetze mit Link nicht. */
body main .legal h1,
body main .legal h2,
body main .legal h3,
body main .legal p,
body main .legal li {
  white-space:normal;
}

body main .legal p { margin:0 0 14px; }
body main .legal ul { margin:0 0 14px 22px; list-style:disc; }
body main .legal li { margin:0 0 6px; }

body main .legal a {
  color:var(--dkblue);
  text-decoration:underline;
}

body main .legal a:hover { color:var(--reddd); }

body main .legal .legal-lead {
  font-size:17px;
  margin-bottom:26px;
}

body main .legal .legal-updated {
  font-size:14px;
  color:var(--greyTypo);
  margin-top:40px;
}

/* Rot markierte Luecke: muss vor dem Go-Live raus. Absichtlich auffaellig,
   damit sie niemandem durchrutscht. */
body main .legal .legal-todo {
  background:#ffe9e8;
  border-left:5px solid var(--reddd);
  padding:12px 16px;
  margin:0 0 16px;
  font-family:Lato,sans-serif;
  font-size:15px;
  line-height:22px;
  color:#8c1512;
}

body main .legal-back {
  display:flex;
  justify-content:center;
  padding:0 20px 60px;
}

body main .legal-back a {
  font-family:"Lilita One";
  font-size:20px;
  color:var(--dkblue);
  text-decoration:none;
  background:var(--flyerwhite);
  border-radius:15px;
  padding:12px 26px;
}

body main .legal-back a:hover { color:var(--reddd); }

/* Headline der Terminspalte. Uebernimmt die Basiswerte von `main h2`
   (Lilita One, 3em, --dkblue) wie ihr Gegenstueck .t553 in der Kartenspalte. */
body main .termin-head {
  text-align:left;
}

/* H1 steht im Kasten ueber den beiden Spalten statt ausserhalb darueber
   (Jens, 21.09.2026). Groesse bleibt bei den originalen 80px, nur das
   `padding-left:30px` der Originalregel muss weg: das war fuer die volle
   Seitenbreite gedacht und wuerde die H1 hier 30px gegen die Spalten darunter
   versetzen. */
body main .t546-in-box {
  padding-left:0;
  margin-top:0;
  margin-bottom:20px;
  /* Luft zwischen H1 und der Spaltenreihe darunter (Jens, 21.09.2026).
     Zusammen mit margin-bottom ergibt das 40px Abstand. */
  padding-bottom:20px;
}


/* Abschluss-Button der linken Spalte. Erbt Farbe, Radius und Innenabstaende
   von `main .primary_button`; hier nur, was ein <a> zusaetzlich braucht. */
body main .cta-mitmachen {
  display:inline-block;
  margin-top:30px;
  text-decoration:none;
  cursor:pointer;
  transition:background 200ms linear;
  /* Gleiche Hoehe und Farbe wie der Submit-Button unter dem Formular
     (Jens, 21.09.2026). Dessen .t420 rechnet mit Prozentwerten des
     Formularkastens; gemessen sind das 23.94px oben und unten, zusammen mit
     der Zeilenhoehe von 29.12px ergibt das die 77px Gesamthoehe. */
  background:var(--dkblue);
  padding-top:23.94px;
  padding-bottom:23.94px;
}

/* Zweiter CTA unter den drei Schritten. Dort steht er mittig, waehrend der
   erste linksbuendig die Terminspalte abschliesst - deshalb die Zeile als
   eigener Flex-Container und der margin-top des Buttons hier zurueckgesetzt. */
body main .cta-zeile {
  display:flex;
  justify-content:center;
  margin-top:50px;
}

body main .cta-zeile .cta-mitmachen {
  margin-top:0;
}

/* Weiches Scrollen fuer den Sprung zum Formular. Wer Bewegung reduziert haben
   will, bekommt den harten Sprung - sonst kann das Scrollen Uebelkeit
   ausloesen. */
html {
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}

/* Sprungziel nicht buendig an die Fensterkante setzen. */
body main #merchant_form {
  scroll-margin-top:20px;
}

/* Bilderslider ueber die volle Fensterbreite.

   Im Original ist `.t485` auf `width:109%` gesetzt - 109% aber vom
   Elternelement `.t342`, das bei 1800px gedeckelt ist. Der Streifen war damit
   immer rund 1962px breit, unabhaengig vom Fenster: bei 1920px faellt das nicht
   auf, ab etwa 2000px bleibt links und rechts Hintergrund stehen (bei 2560px
   je rund 295px). Deshalb jetzt fensterbezogen statt elternbezogen.

   Die 120px Zugabe sind Ueberhang: der Streifen ist um 2grad gedreht, ohne
   Zugabe wuerden an den Ecken Dreiecke des Hintergrunds durchscheinen.

   `overflow-x:clip` am Seitenwrapper faengt den Ueberhang ab, sonst liesse sich
   die Seite seitlich scrollen. Bewusst `clip` und nicht `hidden`: `hidden`
   erzeugt einen Scroll-Container und wuerde `position:sticky` im Inneren
   ausser Kraft setzen - relevant fuer Phase 2, wo die mobile Navigation
   sticky werden koennte. */
body main .t339 {
  overflow-x:clip;
}

body main .t485 {
  width:calc(100vw + 120px);
  max-width:none;
  margin-left:calc(50% - 50vw - 60px);
  margin-right:0;
}

/* ==========================================================================
   Partner-Leiste (21.09.2026)

   Gleiche Breite wie die Rechtsseite/H1-Kasten: .legal-wrap begrenzt auf
   1800px mit 10px Innenabstand, die Box selbst liegt damit bei 1780px -
   hier derselbe Aufbau (siehe Kommentar bei .legal-wrap weiter unten in
   dieser Datei). Jens' Vorgabe: statisch, pro Kuchenplatte von Hand
   ausgetauscht (nur Fass Brause bleibt immer), Logos NICHT klickbar,
   Hintergrund im Marken-Creme, Logos einheitlich dunkel/halbtransparent
   trotz völlig unterschiedlicher Quellfarben (Fass Brause farbig, Kramkultur
   ein sattes Gruen, Tempo K reines Schwarz) - deshalb `filter:brightness(0)`
   (zwingt jeden sichtbaren Pixel auf Schwarz, laesst Transparenz unberuehrt)
   plus reduzierte Opacity, statt jede Datei einzeln einzufaerben.

   Formate sind extrem unterschiedlich (Fass Brause hochkant 370x563,
   Tempo K und Kramkultur breit/quer) - deshalb feste HOEHE statt fester
   Breite pro Logo, Fass Brause als "staendiger Partner" groesser und in
   der Mitte, die beiden anderen kleiner und flankierend. */
.partner-leiste-wrap {
  max-width:1800px;
  margin:40px auto 0;
  padding:0 10px;
}

.partner-leiste {
  /* Aussenabstand wie bei den .content_bg-Boxen: die tragen margin 5px und
     eine um 10px reduzierte Breite. Ohne das sass die Leiste 5px weiter
     aussen als jede Box darueber (gemessen 10px statt 5px bei 440px,
     70px statt 75px bei 1920px). Jens, 22.09.2026. */
  width:calc(100% - 10px);
  margin-left:5px;
  margin-right:5px;
  background:var(--flyerwhite);
  border-radius:15px;
  padding:32px 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:56px;
}

.partner-logo {
  display:block;
  width:auto;
  filter:brightness(0);
  opacity:0.55;
}

.partner-logo--fassbrause {
  height:120px;
  order:1;
}

.partner-logo--tempo-k {
  /* Der Ausschnitt ist extrem breit (1160x245, Wortmarke + Unterzeile) -
     bei gleicher Boxhoehe wie Kramkultur wirkt er dadurch viel zu breit.
     Kleinere Hoehe, damit die Wortmarke optisch auf Augenhoehe mit den
     anderen beiden Logos steht (Jens' Feedback 2026-09-21). */
  height:34px;
  order:2;
}

.partner-logo--kramkultur {
  height:46px;
  order:3;
}

/* ==========================================================================
   Phase 2 - Tablet und Mobile (21.09.2026)

   Grundsatz aus dem Briefing: Farben und Schriften kommen unveraendert vom
   Desktop, angepasst werden nur Layout, Abstaende und Groessenverhaeltnisse.

   Zwei Wege, bewusst gemischt:

   1. Displaytypografie ueber `clamp()` statt Stufen in Media Queries. Die
      Divhunt-Werte sind feste Pixel- bzw. rem-Groessen; mit clamp skalieren
      sie stufenlos mit der Fensterbreite, statt an zwei Punkten zu springen.
      Alle Obergrenzen sind so gewaehlt, dass bei 1920px exakt der
      Originalwert herauskommt - die Pixelpruefung bleibt damit gueltig.

   2. Strukturbrueche in zwei Media Queries: unter 1200px kippen die
      zweispaltigen Bloecke untereinander, unter 768px alles Weitere.

   Fliesstext bleibt ueberall bei 16px (`.t339` als Anker der em-Kette). Er
   wird bewusst NICHT mitskaliert - kleiner waere er auf dem Handy unlesbar.
   ========================================================================== */

/* -- Displaytypografie, stufenlos ----------------------------------------- */

/* Hero-Datum. Die Obergrenze ist mit 8vw so gewaehlt, dass sie bereits bei
   1200px erreicht ist - ab dort sind Schriftgroesse und damit die Flusshoehe
   im Kopf identisch zum Desktop, und die festen `top`-Offsets von Datum und
   Laufschrift passen wieder zueinander.

   Die Untergrenze ist mit 20px so tief angesetzt, dass der vw-Anteil bis zur
   Mindestbreite von 250px aktiv bleibt (8vw von 250px = 20px). Eine hoehere
   Untergrenze liess das Datum ab etwa 500px stehenbleiben, waehrend die
   Wortmarke weiter schrumpfte - der Zifferblock lief dann zunehmend in die
   Maskottchen hinein (bei 250px 84px je Seite statt der ueblichen 43). */
body main .t497 { font-size:clamp(20px, 8vw, 96px); }

/* H1 "Die Kuchenplatte Koeln": muss mindestens so gross sein wie das
   Hero-Datum .t497 (Jens' Vorgabe 2026-09-21) - deshalb dieselbe Formel wie
   .t497 (8vw, Ceiling 96px), nur mit hoeherer Untergrenze (30 statt 20px).
   Ab 375px Breite laufen beide exakt gleich (H1 nie kleiner, oft gleich
   gross), darunter ist H1 durch die hoehere Untergrenze sogar groesser. */
body main .t546 { font-size:clamp(30px, 8vw, 96px); }
body main .t561 { font-size:clamp(34px, 4.2vw, 80px); }

/* Uhrzeit: 64px bei 1920 */
body main .t584 { font-size:clamp(24px, 3.4vw, 64px); }

/* Laufschrift: 32px bei 1920 */
body main .t499 { font-size:clamp(18px, 1.7vw, 32px); }

/* Sektions-H2: 48px bei 1920 (main h2 = 3em). Ueber das Element statt ueber
   einzelne t###-Klassen, sonst bleibt bei jeder neuen Ueberschrift eine
   ungeskalierte zurueck - genau das war bei .t596 ("Kunst von Tempo K
   Kunstkollektiv") der Fall. Das Hero-Datum .t497 hat weiter seine eigene
   Regel, es ist deutlich groesser als die uebrigen H2. */
body main h2 { font-size:clamp(24px, 2.6vw, 48px); }

/* Sektions-H3: fehlte hier komplett - core.css lieferte nur die alte,
   ungeklammerte Kette (main h3 = 1.6em relativ zum jeweiligen Container)
   PLUS eine eigene Media Query `@480px main h3{font-size:32px}`. Ergebnis
   auf echten Handys (Jens' Fund 2026-09-21, Samsung S24): H3 landete durch
   die feste 32px-Regel groesser als H2 (welches bei schmalen Breiten auf
   seiner 24px-Untergrenze steht) - "H2 steht unter H3, die groesser
   aussieht". Gleiches Prinzip wie bei H2 direkt: 0,0,0,3 Spezifitaet schlaegt
   sowohl die alte 1.6em-Regel als auch deren 480px-Ausnahme (je 0,0,0,2),
   unabhaengig von der Reihenfolge. Verhaeltnis zum H2-Clamp identisch zum
   urspruenglichen Groessenverhaeltnis 1.6em:3em = 0,533. */
body main h3 {
  font-size:clamp(18px, 1.4vw, 25.6px);
  /* core.css gibt H3 keinen margin-bottom mit (nur H2 hat 0.3em) - dadurch
     hingen viele H3 direkt am folgenden Text, waehrend andere ueber eigene
     t###-Overrides feste 10px hatten. Gleiche Formel wie bei H2, skaliert
     mit der jeweils eigenen Schriftgroesse (Jens' Vorgabe 2026-09-21:
     Abstaende nach Ueberschriften konsistent machen). */
  margin-bottom:0.3em;
}

/* .t517/.t593 hatten zusaetzlich ihr eigenes `font-size:1.9em` (Klasse
   schlaegt die Element-Regel oben) - bewusst etwas groesser als normale H3,
   deshalb nicht einfach entfernt, sondern im selben Verhaeltnis (1.9em:3em
   = 0,633) skaliert weitergefuehrt statt em-basiert (sonst dasselbe
   Kontext-Problem wie beim generischen H3). */
body main .t517,
body main .t593 { font-size:clamp(21px, 1.65vw, 30.4px); }

/* Lange deutsche Komposita ("Kunstkollektiv", "Teilnehmerliste") sind in
   Lilita One breiter als eine schmale Spalte und ragen sonst aus ihrem Kasten
   heraus. Umbruch im Wort ist hier das kleinere Uebel. */
body main h1,
body main h2,
body main h3,
body main .legal h1,
body main .legal h2,
body main .legal h3 {
  /* `hyphens` zuerst: der Browser trennt an gueltigen Stellen (die Seite ist
     `lang="de"`). `overflow-wrap` bleibt als Notnagel fuer Woerter, die auch
     getrennt nicht passen - ohne das ragt z.B. "Verbraucherstreitbeilegung"
     aus der Spalte. */
  hyphens:auto;
  overflow-wrap:break-word;
}

/* Teilnehmertabelle: 28.8px bei 1920 (1.8em). Die Zeilen darin rechnen mit
   0.6em weiter, skalieren also mit. */
body main .t373 { font-size:clamp(19px, 1.5vw, 28.8px); }

/* Mindestbreite: darunter wird nicht weiter zusammengeschoben, die Seite
   bekommt dann einen horizontalen Scrollbalken (Jens, 21.09.2026). 250px
   liegt unter jedem gaengigen Geraet - der schmalste ernstzunehmende Fall ist
   der iPhone SE mit 375px. */
body {
  min-width:250px;
}

/* Abstand zwischen Laufschrift und erstem Inhaltskasten.

   Er setzte sich aus drei festen Pixelwerten zusammen (`.t340` 8px
   margin-bottom, `.t342` 10px padding-top, `.t548` 20px margin-top) und blieb
   deshalb gleich, waehrend ringsum alles kleiner wurde - auf schmalen
   Schirmen wirkte er dadurch immer groesser. Jetzt haengt er an einem
   einzigen, mitskalierenden Wert; bei 1920px kommen weiterhin exakt 20px
   heraus (1.04vw * 19.2). */
body main .t548 {
  margin-top:clamp(12px, 1.04vw, 20px);
}

/* Die Wortmarke traegt `height="374"` als Attribut. Ohne `height:auto` gilt
   das auch dann, wenn `max-width:90%` die Breite stauchte - zwischen 1200 und
   etwa 1556px war sie dadurch verzerrt UND ragte aus dem Kopf heraus, weil
   sie absolut positioniert ist. Bei 1920px aendert die Regel nichts, dort ist
   die Grafik ohnehin in Originalgroesse. */
body main .t341 { height:auto; }

/* Kopfhoehe und die Position des Datums bleiben ab 1200px bei den festen
   Originalwerten (384px bzw. top:251px). Ein frueherer Versuch, beide per
   clamp mitzuskalieren, zog den Kopf auf bis zu 240px zusammen, waehrend die
   absolut positionierte Wortmarke ihre 374px behielt - sie ragte dann in
   Laufschrift und H1 hinein. Unterhalb von 1200px greift ohnehin der
   Flusslayout-Block weiter unten. */

/* -- Tablet und schmaler: zweispaltige Bloecke kippen --------------------- */

@media (max-width: 1199px) {
  /* Kopfbereich auf normalen Fluss umstellen.

     Im Original ist die Wortmarke absolut positioniert und Datum und
     Laufschrift sind per `top` um feste Pixelwerte verschoben (251px bzw.
     271px). Diese Offsets passen nur zur Desktop-Hoehe: schon bei 768px
     rutscht die Laufschrift unter den Kopf und legt sich ueber den Text
     darunter. Statt die Offsets mitzuskalieren - was bei jeder Aenderung der
     Schriftgroessen neu justiert werden muesste - stapeln die drei Elemente
     hier einfach untereinander.

     `height:auto` an der Wortmarke ist dabei ein echter Fehlerfix: das <img>
     traegt `height="374"` als Attribut, das ohne diese Regel auch dann gilt,
     wenn `max-width` die Breite zusammenstaucht - die Marke wird also
     verzerrt. Betrifft den Desktop nicht, dort ist sie ohnehin 1400x374. */
  body main .t340 {
    height:auto;
    padding-top:20px;
    padding-bottom:0;
  }

  body main .t490 {
    display:flex;
    flex-direction:column;
    align-items:center;
    row-gap:16px;
  }

  body main .t341 {
    position:static;
    height:auto;
    max-width:90%;
  }

  body main .t497,
  body main .t498 { top:0; }

  /* Datum zwischen die Maskottchen ziehen, statt unter die ganze Grafik.

     Gemessen an `logo-wortmarke.png` (1400x374): die Lettern enden bei y=241,
     die Maskottchen reichen bis y=371. Unter dem Schriftzug haengen also rund
     35% der Bildhoehe reine Figur - stapelt man das Datum einfach darunter,
     klafft genau diese Luecke. Der Desktop macht es richtig: dort ueberlappt
     das Datum die Grafik und sitzt in der Luecke zwischen den Figuren, bei
     61,8% der Logohoehe.

     Dieselbe Position hier nachgebaut. Die Logohoehe ergibt sich aus der
     Breite (90vw) mal Seitenverhaeltnis 374/1400 = 24,04vw; 38,2% davon sind
     9,19vw. Die 16px heben zusaetzlich den row-gap des Stapels auf.

     Das Datum steht dabei geometrisch mittig. Ein Versuch, es auf die Mitte
     der Figurenluecke zu schieben (die liegt 2,64% rechts der Bildmitte),
     wurde verworfen - Jens will es mittig, 21.09.2026. */
  body main .t497 {
    margin-top:calc(-9.19vw - 16px);
    /* Das Original setzt `padding-left: 50px`. Die Box ist zentriert, das
       Padding sitzt aber nur links - die Ziffern stehen dadurch 25px rechts
       der Boxmitte. Auf dem Desktop faellt das bei 96px Schrift kaum auf,
       auf schmalen Schirmen schon. Auf 20px reduziert (Jens, 21.09.2026),
       damit bleiben 10px Versatz - optisch mittig. */
    padding-left:20px;
  }

  /* Die beiden uebrigen festen Anteile am Abstand unter der Laufschrift
     entfallen hier, damit nur noch der fluide margin-top von .t548 zaehlt. */
  body main .t340 { margin-bottom:0; }
  body main .t342 { padding-top:4px; }

  /* Termin und Karte untereinander */
  body main .t549 { flex-direction:column; row-gap:40px; }
  body main .t554,
  body main .t550 { width:100%; }

  /* Formular: die beiden Spalten untereinander */
  body main .t385 { grid-template-columns:1fr; }

  /* Die beiden weiteren Zweispalter: "Wir machen das..." / "Ein Event fuer
     alle" (.t511) und der Kunst-Block (.t587). */
  body main .t511,
  body main .t587 {
    grid-template-columns:1fr;
    row-gap:30px;
    width:100%;
  }

  /* Footer: Rechtliches und Newsletter untereinander */
  body main .t356 { flex-direction:column; row-gap:40px; }
  body main .t357 { max-width:100%; }

  /* Die Eingabefelder tragen feste Breiten aus dem Divhunt-Dump (328 bzw.
     348px) und ragen damit unter etwa 430px Fensterbreite aus ihrem Kasten
     heraus. Hier an den Container binden. */
  body main #anmeldung input:not([type="checkbox"]),
  body main #anmeldung select,
  body main #anmeldung textarea {
    width:100%;
    max-width:100%;
  }

  /* Vier Ebenen Innenabstand (Kasten 40px, Formular 20px, Feldwrapper 20px)
     fressen zusammen fast 100px von 390px Fensterbreite. Auf schmalen
     Schirmen deshalb zurueckgenommen. */
  body main .t562 { padding-left:20px; padding-right:20px; }
  body main .t394 { padding-left:0; padding-right:0; }
  body main #anmeldung .container { padding-left:0; padding-right:0; }

  body main .t548,
  body main .t343,
  body main .t382,
  body main .t510,
  body main .t529,
  body main .t585 { padding-left:24px; padding-right:24px; }
}

/* -- Mobile --------------------------------------------------------------- */

@media (max-width: 767px) {
  /* Partner-Leiste: kleinere Logos, Abstaende und Innenabstand, damit alle
     drei bei ca. 390px Fensterbreite in einer Reihe bleiben statt zu
     umbrechen (Jens' Vorgabe 2026-09-21: nebeneinander bei ca. 400px). Tempo
     K ist mit Abstand am breitesten (1160x245) und bestimmt hier das Mass -
     bei den unten stehenden Werten kommen alle drei zusammen mit Gaps und
     Innenabstand auf rund 340px, passt also auch auf ein iPhone SE (375px). */
  /* `.t342` gibt sein 10px-Padding unterhalb von 768px ab (siehe unten).
     Der Wrapper der Partner-Leiste muss mitziehen, sonst staende sie hier
     als einzige Box bei 15px statt bei 5px. */
  .partner-leiste-wrap { padding-left:0; padding-right:0; }
  .partner-leiste { padding:20px 16px; gap:20px; }
  .partner-logo--fassbrause { height:76px; }
  .partner-logo--tempo-k { height:32px; }
  .partner-logo--kramkultur { height:32px; }

  /* 3 Steps untereinander */
  body main .t531 { grid-template-columns:1fr; row-gap:20px; }

  /* Kunstbilder: drei nebeneinander waeren hier je rund 57px breit. Sobald
     `artist_pic_urls` gefuellt ist, stehen sie untereinander. */
  body main .t591 { grid-template-columns:1fr; row-gap:16px; }

  /* Teilnehmerliste: aus dem Zweispalter wird eine Liste. Der Genre-Kopf
     entfaellt, weil ueber einer einspaltigen Liste zwei Kopfzellen keinen
     Sinn ergeben; das Genre steht ab hier unter dem Namen. */
  body main .t373 { grid-template-columns:1fr; }
  body main .t375 { display:none; }
  body main .t378 { grid-column:span 1; grid-template-columns:1fr; }
  body main .t380 {
    border-left:none;
    border-top:2px dotted var(--dkblue);
    padding-left:0;
  }


  /* Buttons ueber die volle Breite, damit sie nicht verloren wirken */
  body main .cta-mitmachen,
  body main .t420 {
    display:block;
    width:100%;
    padding-left:0;
    padding-right:0;
  }

  /* Karte: feste 400px Hoehe schneiden das Bild auf schmalen Schirmen ins
     Hochformat. Stattdessen Seitenverhaeltnis, dann bleibt der Ausschnitt
     derselbe wie auf dem Desktop. 1200x829 ist das Quellmass des Bildes. */
  body main .t552 {
    height:auto;
    aspect-ratio:1200 / 829;
  }

  /* Slider: die Slides sind 412px breit und damit breiter als das Fenster -
     sichtbar ist dann weniger als ein Bild. Kleiner gesetzt, damit rund 1,3
     Slides ins Bild passen und erkennbar ist, dass es weitergeht. Das weisse
     Band darunter richtet sich nach der Slidehoehe und schrumpft mit. */
  body main .t488.swiper-slide {
    /* Muss `.t488.swiper-slide` treffen: die Regel weiter oben setzt
       `flex: 0 0 400px` und gewinnt sonst ueber die Spezifitaet. */
    flex:0 0 280px;
    width:280px;
    height:280px;
  }

  body main .t548,
  body main .t343,
  body main .t382,
  body main .t530,
  body main .t510,
  body main .t529,
  body main .t585 { padding-left:16px; padding-right:16px; }
  body main .t342 { padding-left:0; padding-right:0; }
}

/* -- Touch-Geraete, unabhaengig von der Fensterbreite --------------------- */

/* Diese Regeln haengen bewusst an `pointer: coarse` statt an einer Breite.
   Das Briefing nennt sie unter "Mobile", aber die Breite ist hier das falsche
   Kriterium: ein iPad Pro im Querformat ist 1366px breit und faellt damit in
   den Desktop-Bereich - iOS zoomt dort beim Fokus trotzdem in die Seite, wenn
   ein Feld unter 16px liegt, und Finger werden auch nicht kleiner. Umgekehrt
   braucht ein schmales Desktop-Fenster mit Maus keine 44px-Ziele. */

@media (pointer: coarse) {
  /* Unter 16px zoomt iOS Safari beim Fokussieren ungefragt hinein. Ueber
     `#anmeldung` adressiert, weil die Divhunt-Klassenregeln (.t396 & Co.)
     sonst ueber die Spezifitaet gewinnen. */
  body main #anmeldung input:not([type="checkbox"]),
  body main #anmeldung select,
  body main #anmeldung textarea,
  body main #newsletter input { font-size:16px; }

  /* Touch-Ziele mindestens 44px */
  body main #anmeldung input:not([type="checkbox"]),
  body main #anmeldung select,
  body main #newsletter input { min-height:44px; }

  /* Die Checkbox bleibt ausdruecklich klein und steht inline neben ihrem Text
     (Jens, 21.09.2026). Ohne die Ausnahmen oben wurde sie so breit und hoch
     wie ein Eingabefeld, wodurch der Satz daneben in die naechste Zeile
     rutschte und die Box darueber zentriert wirkte.

     Das Touch-Ziel leidet nicht: das <label> traegt `for="checkbox"` und ist
     damit selbst anklickbar - die Trefferflaeche ist die ganze Textzeile. */
  body main .t418 {
    width:25px;
    height:25px;
    min-height:0;
    flex:0 0 auto;
  }

  /* Der Satz ist laenger als der Platz neben der Box. Ohne `flex:1 1 0` gilt
     seine volle Breite als Mindestbreite, `flex-wrap` schiebt ihn komplett in
     die naechste Zeile - und die Box steht allein darueber. So nimmt er den
     Rest der Zeile und bricht innerhalb um. */
  body main .t419 {
    cursor:pointer;
    flex:1 1 0;
    min-width:0;
  }

  /* Bei mehrzeiligem Text gehoert die Box auf die Hoehe der ersten Zeile,
     nicht in die Mitte des Absatzes. */
  body main .t417 { align-items:flex-start; }
  body main .t418 { margin-top:2px; }

  body main .t370,
  body main .t361 { min-width:44px; min-height:44px; }

  /* Reine Textlinks: `.t559` ist der Ort im Terminblock, `.t571` der
     Rechtslink im Footer - als Textzeilen nur 25 bis 33px hoch.
     `padding-top` ist am 22.09.2026 auf Jens' Vorgabe entfallen: es schob den
     Link gegenueber seiner Ueberschrift nach unten, wodurch der Abstand nicht
     mehr zu dem im Newsletter-Block passte. */
  body main .t559,
  body main .t571 {
    display:inline-block;
    padding-bottom:10px;
  }
}

/* -- Newsletter-Button im Footer ------------------------------------------ */

/* Hatte als einziger Button noch das Lila aus dem Divhunt-Original, waehrend
   der Submit unter dem Formular und die beiden CTAs auf Dunkelblau mit gruenem
   Hover laufen. Angeglichen (Jens, 21.09.2026). */
body main .t361 {
  background:var(--dkblue);
  cursor:pointer;
  transition:background 200ms linear;
}

body main .t361:hover {
  background:var(--buttonhovergreen);
}

/* -- Haendlertabelle ------------------------------------------------------ */

/* Die Tabelle rechnet in em-Ketten: `.t373` ist die Wurzel, die Zeilen `.t378`
   stehen auf 0.6em davon. Mit der mitskalierenden Wurzel landeten die Zeilen
   unterhalb von 1200px bei 11,4px - zu klein zum Lesen. Ab 1500px abwaerts
   deshalb fest auf 1em (Jens, 21.09.2026):

     .t373  1em   = 16px   (Wurzel, erbt von .t339)
     .t378  1em   = 16px   (Zeilen, statt 0.6em)
     .t376  1.6em = 25.6px (Spaltenkoepfe, unveraendert relativ zur Wurzel)

   Oberhalb von 1500px bleibt alles wie gehabt, bei 1920px also 28.8/17.28px.
   Die Regeln stehen am Dateiende, weil sie dieselbe Spezifitaet haben wie die
   clamp-Regel weiter oben und sie ueberschreiben muessen. */

@media (max-width: 1500px) {
  body main .t373 { font-size:1em; }
  body main .t378 { font-size:1em; }
}


/* -- Umlaufendes padding der sichtbaren Kaesten --------------------------- */

/* Jens' Vorgabe 22.09.2026: jeder Kasten, den man als Flaeche sieht, hat
   umlaufend 20px padding. Reine Wrapper ohne eigenen Hintergrund steuern
   nichts bei - deren Abstand trug bisher der Kasten darueber oder darunter,
   je nach Verschachtelung, was die Werte auseinanderlaufen liess.

   Sichtbar (eigener Hintergrund):  .t563 .t586 .t530 .t562 .t373
                                    .t532 .t536 .t540  (3 Steps, schon 20)
   Reine Wrapper (transparent):     .t511 .t587 .t549

   `.t511`/`.t587` sind zweispaltige Grids. Nur ihr padding geht auf 0 -
   `margin-left/right` (je 17px) bleibt, das ist ihr Spaltenversatz. */

body main .t563,
body main .t586,
body main .t530,
body main .t562 {
  padding:20px;
}

body main .t511,
body main .t587 {
  padding:0;
}

/* Die Tabelle schob per margin-bottom nochmal 20px nach (Jens, 22.09.2026).
   Ihr horizontales padding bleibt bei 0: die Zeilen `.t374`/`.t375`/`.t378`
   tragen selbst je 20px links/rechts und sollen als Baender ueber die volle
   Kastenbreite laufen. */
body main .t373 {
  margin-bottom:0;
}

/* -- Footer: Abstaende wie im Content ------------------------------------- */

/* Jens, 22.09.2026: Im Content traegt die Ueberschrift den Abstand nach unten
   (`margin-bottom: 0.3em`, skaliert also mit der Schriftgroesse). Im Footer
   lag er stattdessen als fester `margin-top: 20px` am Folgeelement - bei 24px
   Ueberschrift sind das 0.83em statt 0.3em, knapp das Dreifache.
   Jetzt dasselbe Muster wie oben. */

body main .t358,
body main .t366 {
  margin-bottom:0.3em;
}

body main .t359,
body main .t367 {
  margin-top:0;
}

/* Mailchimp-Formular und -Badge standen 10px weiter rechts als die
   Ueberschrift und der Text darueber (eigenes `margin-left/right: 10px`).
   Jetzt in einer Flucht. */
body main .t360 {
  margin-left:0;
  margin-right:0;
  /* War 40px. Jens, 22.09.2026: derselbe Abstand wie Headline -> Content,
     also 7.2px. Das sind dort 0.3em von 24px Ueberschrift; `.t360` selbst
     steht auf 16px, deshalb 0.45em statt 0.3em - gleiche Pixelzahl, und
     weiterhin an die eigene Schriftgroesse gekoppelt. */
  margin-top:0.45em;
}

.mc-badge {
  margin-left:0;
  margin-right:0;
}

/* `.t596` trug als einzige Ueberschrift ein eigenes `padding-left: 20px` und
   stand dadurch gegen den Text darunter versetzt (Jens, 22.09.2026). */
body main .t596 {
  padding-left:0;
}