/* ═══════════════════════════════════════════════════════════════
   padelcore Shop — Banner-Register (.bn-), angelegt 06.10.2026
   ───────────────────────────────────────────────────────────────
   Banner für Startseite, Shop und Social Media. Volle Flächen aus
   der Palette, ein Schnittwinkel (18°, die Neigung der Zierstreifen
   und der Skala), Ware freigestellt davor, Text als echter Text.

   Jedes Banner ist ein Container (container: bn). Alle Maße laufen
   über --u = 1 Entwurfspixel des Formats in cqw — ein Banner skaliert
   also mit seiner Breite und behält sein Seitenverhältnis. Webformate
   haben Untergrenzen für Lesetext und Handlung, Social-Formate nicht
   (sie werden als Bild exportiert).

   GELB ALS FLÄCHE gibt es nur hier, und nur mit Tusche-Schrift. In
   Schnitt und Block steht ihm immer eine dunkle Fläche gegenüber;
   im Raster steht die gelbe Kachel auf Weiß. Gelbe Schrift bleibt
   auf Dunkel.

   Vier Ausführungen: Schnitt, Block, Raster und Galerie (Fächer aus
   fünf Schrägaufnahmen vor Fläche B).

   Diese Datei wird von scraps/banner-gen.txt geschrieben. Lagen ändern
   dort, nicht hier.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bn-kohle:  var(--pc-kohle);
  --bn-nacht:  var(--pc-core-950);
  --bn-marine: var(--pc-brand);
  --bn-blau:   var(--pc-core-600);
  --bn-gelb:   var(--pc-signal);
  --bn-grund:  #0b0d0f;            /* Fuge der Raster-Leiste */
  --bn-winkel: 18deg; /* @kind other */
}

/* ═══ Rahmen ═════════════════════════════════════════════════════ */
.bn{--u:calc(100cqw / var(--W));container:bn / inline-size;position:relative;overflow:hidden;width:100%;aspect-ratio:var(--W) / var(--H);background:var(--bn-a);color:var(--bn-text);font-family:var(--pc-font);line-height:1.4;text-align:left;-webkit-font-smoothing:antialiased;isolation:isolate}
.bn *,.bn *::before,.bn *::after{box-sizing:border-box}
.bn-f-hero{
  --W:1440; /* @kind other */ --H:600; /* @kind other */ 
  --fs-bez:15; /* @kind other */ --fs-schlag:96; /* @kind other */ --fs-zeile:19; /* @kind other */ --fs-tat:15; /* @kind other */ --htat:56; /* @kind other */ 
  --fs-zus:14; /* @kind other */ --fs-riesig:176; /* @kind other */ --e:16; /* @kind other */ --fs-name:30; /* @kind other */ 
}
.bn-f-mobil{
  --W:390; /* @kind other */ --H:760; /* @kind other */ 
  --fs-bez:12; /* @kind other */ --fs-schlag:46; /* @kind other */ --fs-zeile:15; /* @kind other */ --fs-tat:14; /* @kind other */ --htat:48; /* @kind other */ 
  --fs-zus:12; /* @kind other */ --fs-riesig:64; /* @kind other */ --e:12; /* @kind other */ --fs-name:22; /* @kind other */ 
}
.bn-f-kachel{
  --W:480; /* @kind other */ --H:600; /* @kind other */ 
  --fs-bez:13; /* @kind other */ --fs-schlag:52; /* @kind other */ --fs-zeile:15; /* @kind other */ --fs-tat:13; /* @kind other */ --htat:44; /* @kind other */ 
  --fs-zus:12; /* @kind other */ --fs-riesig:84; /* @kind other */ --e:16; /* @kind other */ --fs-name:20; /* @kind other */ 
}
.bn-f-leiste{
  --W:1440; /* @kind other */ --H:120; /* @kind other */ 
  --fs-bez:12; /* @kind other */ --fs-schlag:40; /* @kind other */ --fs-zeile:15; /* @kind other */ --fs-tat:13; /* @kind other */ --htat:44; /* @kind other */ 
  --fs-zus:12; /* @kind other */ --fs-riesig:84; /* @kind other */ --e:12; /* @kind other */ --fs-name:22; /* @kind other */ 
}
.bn-f-quadrat{
  --W:1080; /* @kind other */ --H:1080; /* @kind other */ 
  --fs-bez:26; /* @kind other */ --fs-schlag:104; /* @kind other */ --fs-zeile:30; /* @kind other */ --fs-tat:26; /* @kind other */ --htat:84; /* @kind other */ 
  --fs-zus:26; /* @kind other */ --fs-riesig:196; /* @kind other */ --e:24; /* @kind other */ --fs-name:40; /* @kind other */ 
}
.bn-f-hoch{
  --W:1080; /* @kind other */ --H:1350; /* @kind other */ 
  --fs-bez:26; /* @kind other */ --fs-schlag:112; /* @kind other */ --fs-zeile:30; /* @kind other */ --fs-tat:26; /* @kind other */ --htat:84; /* @kind other */ 
  --fs-zus:26; /* @kind other */ --fs-riesig:210; /* @kind other */ --e:24; /* @kind other */ --fs-name:44; /* @kind other */ 
}
/* Webformate: Untergrenzen, damit Lesetext und Handlung beim Verkleinern nicht unter 11–13 px und 40 px fallen. */
.bn-f-hero,.bn-f-mobil,.bn-f-kachel,.bn-f-leiste{
  --min-klein:11px; /* @kind font */ --min-text:13px; /* @kind font */ --min-tat:12px; /* @kind font */ --min-htat:40px; /* @kind spacing */
}

/* ═══ Farben ═════════════════════════════════════════════════════
   Fünf Paare. A trägt den Text, B die Ware. Kontraste gegen A:
   Kohle 17,5 / Gelb 12,8 · Nacht 18,2 / 13,3 · Marine 14,2 / 10,3 ·
   Blau 7,0 / 5,1 · Gelb mit Tusche 13,1. */
.bn-c-kohle,.bn-c-nacht,.bn-c-marine,.bn-c-blau{--bn-text:#fff;--bn-text-2:rgba(255,255,255,.8);--bn-akzent:var(--pc-signal);--bn-tat:var(--pc-signal);--bn-tat-ink:#101215;--bn-tat-hover:#fff;--bn-rand:rgba(255,255,255,.55);--bn-flagge:var(--pc-signal);--bn-flagge-ink:#101215}
.bn-c-kohle{--bn-a:var(--bn-kohle);--bn-b:var(--bn-gelb)}
.bn-c-nacht{--bn-a:var(--bn-nacht);--bn-b:var(--bn-blau)}
.bn-c-marine{--bn-a:var(--bn-marine);--bn-b:var(--bn-gelb)}
.bn-c-blau{--bn-a:var(--bn-blau);--bn-b:var(--bn-nacht);--bn-text-2:rgba(255,255,255,.88)}
.bn-c-gelb{--bn-a:var(--bn-gelb);--bn-b:var(--bn-kohle);--bn-text:var(--pc-ink);--bn-text-2:rgba(20,23,26,.84);--bn-akzent:var(--pc-ink);--bn-tat:var(--pc-ink);--bn-tat-ink:var(--pc-signal);--bn-tat-hover:#2b3037;--bn-rand:rgba(20,23,26,.6);--bn-flagge:var(--pc-ink);--bn-flagge-ink:var(--pc-signal)}

/* ═══ Hell ═══════════════════════════════════════════════════════
   Heller Grund, Farbe nur als Akzent — für helle Ware und ruhigere
   Abschnitte. Wie das helle Shop-Register: Tusche-Text, Marine als
   Akzent (Beschriftung, Hervorhebung), Handlung in Tusche. Gelb nur
   als Zierstreifen und in der Flagge (Kohle mit Gelb, wie die
   Aktionsflagge des Shops). Hell-Paare: Weiß/Platte, Platte/Weiß,
   Weiß/Zartblau, Platte/Zartblau (Block). Fotos mit weißem Grund (.bn-foto) liegen per
   multiply auf, ihr Weiß verschwindet — so gehen auch helle Schläger. */
.bn-c-hell,.bn-c-platte,.bn-c-zart,.bn-c-nebel{--bn-text:var(--pc-ink);--bn-text-2:var(--pc-mut);--bn-akzent:var(--pc-brand);--bn-streif:var(--pc-signal);--bn-tat:var(--pc-ink);--bn-tat-ink:#fff;--bn-tat-hover:var(--pc-tat-hover);--bn-rand:#868c93;--bn-flagge:var(--pc-kohle);--bn-flagge-ink:var(--pc-signal)}
.bn-c-hell{--bn-a:#fff;--bn-b:var(--sh-platte)}
.bn-c-platte{--bn-a:var(--sh-platte);--bn-b:#fff}
.bn-c-zart{--bn-a:#fff;--bn-b:var(--pc-core-100)}
.bn-c-nebel{--bn-a:var(--sh-platte);--bn-b:var(--pc-core-100)}
.bn-foto{mix-blend-mode:multiply}

/* ═══ Flächen und Ware ═══════════════════════════════════════════ */
.bn-feld-b,.bn-streif{position:absolute;inset:0;z-index:0;pointer-events:none}
.bn-feld-b{background:var(--bn-b)}
.bn-streif{background:var(--bn-streif,var(--bn-akzent))}
.bn-ware{position:absolute;z-index:2;pointer-events:none}
.bn-ware img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.bn-ware img.bn-gross{transform:scale(1.55)}
.bn-marke{position:absolute;z-index:4;display:block;width:auto;height:calc(var(--u)*44)}

/* ═══ Galerie: Fächer ════════════════════════════════════════════
   Fünf Schrägaufnahmen, nebeneinander und überlappend, Drehpunkt am
   Griff. Winkel höchstens ±18°, damit der Fächer den Schnitt aufnimmt. */
.bn-faecher{position:absolute;pointer-events:none}
.bn-fw{position:absolute;z-index:2;bottom:0;height:100%;transform-origin:50% 94%}
/* Helle Fotos (multiply) liegen unter ihren Nachbarn: ihr Weiß würde sonst die Ware darunter durchscheinen lassen. */
.bn-fw:has(.bn-foto){z-index:1;mix-blend-mode:multiply}
.bn-ware:has(.bn-foto){z-index:1;mix-blend-mode:multiply}
.bn-fw img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%}

/* ═══ Schrift ════════════════════════════════════════════════════ */
.bn-text{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:flex-start}
.bn-bez{display:flex;align-items:center;gap:.8em;margin:0 0 calc(var(--u)*var(--fs-schlag)*.2);font-size:max(var(--min-klein,0px),calc(var(--u)*var(--fs-bez)));line-height:1.2;font-weight:var(--pc-gewicht-bez);font-stretch:var(--pc-breite-bez);letter-spacing:var(--pc-sperrung-bez);text-transform:uppercase;color:var(--bn-akzent)}
.bn-flagge{display:inline-flex;align-items:center;height:1.9em;padding:0 .7em;background:var(--bn-flagge);color:var(--bn-flagge-ink);font-weight:760;font-stretch:88%;letter-spacing:.08em;clip-path:polygon(0 0,100% 0,100% calc(100% - .55em),calc(100% - .55em) 100%,0 100%)}
.bn-schlag{margin:0;font-size:calc(var(--u)*var(--fs-schlag)*var(--bn-lang-s,1));line-height:.88;font-weight:var(--pc-gewicht-sport);font-stretch:var(--pc-breite-sport);letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
.bn-riesig{position:absolute;z-index:1;margin:0;font-size:calc(var(--u)*var(--fs-riesig)*var(--bn-lang,1));line-height:.9;font-weight:var(--pc-gewicht-sport);font-stretch:var(--pc-breite-sport);letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.bn-schlag em,.bn-riesig em{font-style:normal;color:var(--bn-akzent)}
.bn-c-gelb .bn-schlag em,.bn-c-gelb .bn-riesig em{color:var(--pc-signal);background:var(--pc-ink);padding:0 .07em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bn-zeile{margin:calc(var(--u)*var(--fs-schlag)*.26) 0 0;max-width:46ch;font-size:max(var(--min-text,0px),calc(var(--u)*var(--fs-zeile)));line-height:1.45;color:var(--bn-text-2);text-wrap:pretty}

/* ═══ Handlung ═══════════════════════════════════════════════════
   Der Schnitt des Shops. Auf Dunkel gelb, auf Gelb Tusche. */
.bn-tun{display:flex;flex-wrap:wrap;gap:calc(var(--u)*var(--fs-tat)*.8);margin-top:calc(var(--u)*var(--fs-zeile)*1.5)}
.bn-tat,.bn-tat-neben{position:relative;display:inline-flex;align-items:center;gap:.6em;min-height:max(var(--min-htat,0px),calc(var(--u)*var(--htat)));padding:0 1.9em;font-size:max(var(--min-tat,0px),calc(var(--u)*var(--fs-tat)));line-height:1.1;font-weight:var(--pc-gewicht-bez);font-stretch:var(--pc-breite-sport-sub);letter-spacing:var(--pc-sperrung-tat);text-transform:uppercase;text-decoration:none;white-space:nowrap;clip-path:polygon(0 0,100% 0,100% calc(100% - .8em),calc(100% - .8em) 100%,0 100%);transition:background-color .16s ease}
.bn-tat{background:var(--bn-tat);color:var(--bn-tat-ink)}
.bn-tat:hover{background:var(--bn-tat-hover)}
.bn-tat:focus-visible{outline:2px solid var(--bn-tat-ink);outline-offset:-6px}
.bn-tat-neben{border:1px solid var(--bn-rand);color:var(--bn-text)}
.bn-tat-neben::after{content:'';position:absolute;right:-1px;bottom:-1px;width:.8em;height:.8em;background:linear-gradient(to top left,transparent calc(50% - .75px),var(--bn-rand) calc(50% - .75px) calc(50% + .75px),transparent calc(50% + .75px))}
.bn-tat-neben:focus-visible{outline:2px solid var(--bn-akzent);outline-offset:-6px}
.bn-tat svg,.bn-zelle-tat svg{width:1.35em;height:1.35em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}

/* ═══ Zusagen ════════════════════════════════════════════════════
   Genau drei, immer zusammen, immer wörtlich: Versand frei ab 150 €,
   Lieferzeit 4–6 Werktage, 14 Tage Widerruf. Nur im Web, als Zeile;
   Social-Formate tragen keine Zusagen. */
.bn-zusagen{margin:0;font-weight:var(--pc-gewicht-halb);line-height:1.35}
.bn-zusagen{position:absolute;z-index:3;display:flex;flex-wrap:wrap;gap:.35em 1.6em;font-size:max(var(--min-klein,0px),calc(var(--u)*var(--fs-zus)));color:var(--bn-text-2)}
.bn-zusagen span{display:inline-flex;align-items:center;gap:.6em;white-space:nowrap}
.bn-zusagen span::before{content:'';flex:none;width:.5em;height:.5em;background:var(--bn-akzent)}

/* ═══ Raster ═════════════════════════════════════════════════════
   Kacheln auf Weiß mit weißer Fuge. Die Textkachel trägt Fläche A,
   jede Warenkachel eine eigene Palettenfarbe oder die Platte. */
.bn-v-raster{background:#fff}
/* Die Leiste steht als Band zwischen hellen Abschnitten: dort bleibt der dunkle Grund mit Rand. */
.bn-v-raster.bn-f-leiste{background:var(--bn-grund)}
.bn-v-raster.bn-f-leiste .bn-gitter{inset:calc(var(--u)*var(--gap))}
.bn-z-weiss{--z-bg:#fff;--z-text:var(--pc-ink)}
.bn-gitter{position:absolute;inset:0;display:grid;gap:calc(var(--u)*var(--gap))}
.bn-zelle{position:relative;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:flex-start;padding:calc(var(--u)*var(--pad));background:var(--z-bg);color:var(--z-text);text-decoration:none;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--u)*var(--e)),calc(100% - var(--u)*var(--e)) 100%,0 100%)}
.bn-z-a{--z-bg:var(--bn-a);--z-text:var(--bn-text)}
.bn-z-platte{--z-bg:var(--sh-platte);--z-text:var(--pc-ink)}
.bn-z-gelb{--z-bg:var(--bn-gelb);--z-text:var(--pc-ink)}
.bn-z-blau{--z-bg:var(--bn-blau);--z-text:#fff}
.bn-z-marine{--z-bg:var(--bn-marine);--z-text:#fff}
.bn-z-nacht{--z-bg:var(--bn-nacht);--z-text:#fff}
.bn-z-kohle{--z-bg:var(--bn-kohle);--z-text:#fff}
.bn-z-zart{--z-bg:var(--pc-core-100);--z-text:var(--pc-ink)}
.bn-v-raster .bn-text{position:static;margin-top:auto}
.bn-v-raster .bn-marke{position:static;flex:none;margin-bottom:calc(var(--u)*28)}
.bn-v-raster .bn-zusagen{position:static;margin-top:calc(var(--u)*var(--fs-zus)*1.8)}
.bn-zelle-name{position:relative;z-index:1;margin:0;max-width:11ch;font-size:max(var(--min-text,0px),calc(var(--u)*var(--fs-name)));line-height:.92;font-weight:var(--pc-gewicht-sport);font-stretch:var(--pc-breite-sport);text-transform:uppercase;text-wrap:balance}
.bn-zelle-ware{position:absolute;left:7%;right:7%;top:22%;bottom:5%}
.bn-zelle-ware img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.bn-zelle-ware img.bn-schlaeger{transform:rotate(var(--bn-winkel))}
.bn-zelle-gross{margin:auto 0 calc(var(--u)*var(--fs-name)*.35);font-size:calc(var(--u)*var(--fs-name)*3);line-height:.8;font-weight:var(--pc-gewicht-sport);font-stretch:var(--pc-breite-sport);font-variant-numeric:tabular-nums}
.bn-zelle-tat{flex-direction:row;align-items:center;justify-content:space-between;gap:1em;font-size:max(var(--min-tat,0px),calc(var(--u)*var(--fs-tat)));font-weight:var(--pc-gewicht-bez);font-stretch:var(--pc-breite-sport-sub);letter-spacing:var(--pc-sperrung-tat);text-transform:uppercase}

/* ═══ Formatregeln ═══════════════════════════════════════════════ */
.bn-f-leiste .bn-text{flex-direction:row;align-items:center;gap:calc(var(--u)*28)}
.bn-f-leiste .bn-bez{display:none}
.bn-f-leiste .bn-schlag,.bn-f-leiste .bn-riesig{white-space:nowrap;text-wrap:nowrap}
.bn-f-leiste .bn-zeile{flex:1 1 0;min-width:0;max-width:none;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bn-f-leiste .bn-tun{flex-wrap:nowrap;margin:0 0 0 auto}
.bn-f-leiste.bn-v-block .bn-zeile{display:none}
.bn-f-leiste .bn-zelle{flex-direction:row;align-items:center}
.bn-f-leiste .bn-zelle-name{max-width:8ch}
.bn-f-leiste .bn-zelle-ware{left:46%;right:4%;top:6%;bottom:6%}
.bn-f-leiste .bn-zelle-ware img.bn-schlaeger{transform:rotate(72deg) scale(1.45)}
.bn-f-leiste .bn-t1 .bn-text{margin:0;width:100%}
.bn-f-leiste.bn-v-raster .bn-zeile,.bn-f-leiste.bn-v-raster .bn-tun{display:none}
.bn-f-quadrat .bn-zeile{display:none}

/* Lange Schlagzeile (mehr als drei Wörter): die Blockschrift eine Stufe kleiner. */
.bn-lang{--bn-lang:.78; /* @kind other */ --bn-lang-s:.86; /* @kind other */}

/* Kachel im Startseiten-Raster: kleine Zellen werfen erst den
   Lesetext, dann Beschriftung und Handlung ab — die Zelle selbst
   ist das Ziel. */
@container bn (max-width: 360px){.bn-f-kachel .bn-zeile{display:none}}
@container bn (max-width: 240px){.bn-f-kachel .bn-bez,.bn-f-kachel .bn-tun,.bn-f-kachel .bn-zelle-name{display:none}.bn-f-kachel .bn-schlag{font-size:calc(var(--u)*62)}}

/* ═══ Startseiten-Raster ═════════════════════════════════════════
   Große und kleine Kacheln: die erste Kachel nimmt 2 × 2 Felder. */
.bn-startraster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:32px;background:#fff}
.bn-startraster > .bn:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%}
.bn-startraster-mobil{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:16px}
.bn-startraster-mobil > .bn:first-child{grid-row:auto;aspect-ratio:var(--W) / var(--H);height:auto}

/* ═══ Vorschau (nur Karten, nicht Website) ═══════════════════════ */
.bn-vorschau-kopf{max-width:76ch;margin:0 0 28px}
.bn-vorschau-reihe{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px;margin:0 0 40px}
.bn-vorschau-rahmen{flex:none;display:flex;flex-direction:column;gap:10px;margin:0}
.bn-vorschau-rahmen .bez{display:block}

/* ═══ Lagen je Ausführung und Format (erzeugt) ═══════════════════ */
.bn-v-schnitt.bn-f-hero .bn-feld-b{clip-path:polygon(61.806% 0%,100% 0%,100% 100%,48.264% 100%)}
.bn-v-schnitt.bn-f-hero .bn-streif{clip-path:polygon(58.75% 0%,59.722% 0%,46.181% 100%,45.208% 100%)}
.bn-v-schnitt.bn-f-hero .bn-text{left:5%;width:43.056%;bottom:14%;}
.bn-v-schnitt.bn-f-hero .bn-zusagen{left:5%;bottom:6.667%;}
.bn-v-schnitt.bn-f-hero .bn-w1{left:47.917%;width:22.917%;top:8.333%;height:86.667%;}
.bn-v-schnitt.bn-f-hero .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-schnitt.bn-f-hero .bn-w2{left:70.139%;width:22.917%;top:3.333%;height:86.667%;}
.bn-v-schnitt.bn-f-hero .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-schnitt.bn-f-hero .bn-w3{left:79.861%;width:18.056%;top:55%;height:40%;}
.bn-v-schnitt.bn-f-mobil .bn-feld-b{clip-path:polygon(43.59% 0%,100% 0%,100% 50%,12.051% 50%)}
.bn-v-schnitt.bn-f-mobil .bn-streif{display:none}
.bn-v-schnitt.bn-f-mobil .bn-text{left:6.154%;width:87.692%;bottom:10%;}
.bn-v-schnitt.bn-f-mobil .bn-zusagen{left:6.154%;width:87.692%;bottom:2.632%;}
.bn-v-schnitt.bn-f-mobil .bn-w1{left:25.641%;width:46.154%;top:3.158%;height:44.737%;}
.bn-v-schnitt.bn-f-mobil .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-schnitt.bn-f-mobil .bn-w2{left:56.41%;width:42.564%;top:1.316%;height:42.105%;}
.bn-v-schnitt.bn-f-mobil .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-schnitt.bn-f-mobil .bn-w3{left:67.179%;width:29.744%;top:32.895%;height:18.421%;}
.bn-v-schnitt.bn-f-kachel .bn-feld-b{clip-path:polygon(41.667% 0%,100% 0%,100% 53.333%,20% 53.333%)}
.bn-v-schnitt.bn-f-kachel .bn-streif{display:none}
.bn-v-schnitt.bn-f-kachel .bn-text{left:5%;width:90%;bottom:4%;}
.bn-v-schnitt.bn-f-kachel .bn-w1{left:29.167%;width:34.583%;top:2.333%;height:50%;}
.bn-v-schnitt.bn-f-kachel .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-schnitt.bn-f-kachel .bn-w2{left:57.917%;width:34.583%;top:0.667%;height:50%;}
.bn-v-schnitt.bn-f-kachel .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-schnitt.bn-f-kachel .bn-w3{left:70%;width:27.083%;top:32.667%;height:21.667%;}
.bn-v-schnitt.bn-f-leiste .bn-feld-b{clip-path:polygon(73.611% 0%,100% 0%,100% 100%,70.903% 100%)}
.bn-v-schnitt.bn-f-leiste .bn-streif{clip-path:polygon(71.528% 0%,72.222% 0%,69.514% 100%,68.819% 100%)}
.bn-v-schnitt.bn-f-leiste .bn-text{left:3.333%;width:64.583%;top:0%;height:100%;}
.bn-v-schnitt.bn-f-leiste .bn-w1{left:75%;width:11.806%;top:-41.667%;height:183.333%;}
.bn-v-schnitt.bn-f-leiste .bn-w1 img.bn-schlaeger{transform:rotate(72deg)}
.bn-v-schnitt.bn-f-leiste .bn-w2{left:86.111%;width:11.806%;top:-41.667%;height:183.333%;}
.bn-v-schnitt.bn-f-leiste .bn-w2 img.bn-schlaeger{transform:rotate(108deg)}
.bn-v-schnitt.bn-f-leiste .bn-w3{left:93.75%;width:5.556%;top:8.333%;height:83.333%;}
.bn-v-schnitt.bn-f-quadrat .bn-feld-b{clip-path:polygon(40.741% 0%,100% 0%,100% 51.852%,23.889% 51.852%)}
.bn-v-schnitt.bn-f-quadrat .bn-streif{display:none}
.bn-v-schnitt.bn-f-quadrat .bn-text{left:5.926%;width:88.148%;bottom:6.667%;}
.bn-v-schnitt.bn-f-quadrat .bn-marke{left:5.926%;top:5.926%}
.bn-v-schnitt.bn-f-quadrat .bn-w1{left:36.111%;width:29.63%;top:3.704%;height:51.852%;}
.bn-v-schnitt.bn-f-quadrat .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-schnitt.bn-f-quadrat .bn-w2{left:60.185%;width:29.63%;top:1.852%;height:51.852%;}
.bn-v-schnitt.bn-f-quadrat .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-schnitt.bn-f-quadrat .bn-w3{left:73.148%;width:23.148%;top:36.111%;height:23.148%;}
.bn-v-schnitt.bn-f-hoch .bn-feld-b{clip-path:polygon(40.741% 0%,100% 0%,100% 51.852%,19.722% 51.852%)}
.bn-v-schnitt.bn-f-hoch .bn-streif{display:none}
.bn-v-schnitt.bn-f-hoch .bn-text{left:5.926%;width:88.148%;bottom:5.333%;}
.bn-v-schnitt.bn-f-hoch .bn-marke{left:5.926%;top:4.741%}
.bn-v-schnitt.bn-f-hoch .bn-w1{left:31.481%;width:35.185%;top:4.444%;height:48.889%;}
.bn-v-schnitt.bn-f-hoch .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-schnitt.bn-f-hoch .bn-w2{left:60.185%;width:35.185%;top:2.222%;height:48.889%;}
.bn-v-schnitt.bn-f-hoch .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-schnitt.bn-f-hoch .bn-w3{left:73.148%;width:23.148%;top:32.593%;height:18.519%;}
.bn-v-block.bn-f-hero .bn-feld-b{clip-path:polygon(72.569% 100%,86.111% 0%,100% 0%,100% 100%)}
.bn-v-block.bn-f-hero .bn-streif{clip-path:polygon(69.514% 100%,70.486% 100%,84.028% 0%,83.056% 0%)}
.bn-v-block.bn-f-hero .bn-riesig{left:3.889%;width:76.389%;top:6.667%;}
.bn-v-block.bn-f-hero{--fs-riesig:144; /* @kind other */}
.bn-v-block.bn-f-hero .bn-text{left:4.444%;width:43.056%;bottom:15.333%;}
.bn-v-block.bn-f-hero .bn-zusagen{left:4.444%;bottom:6.667%;}
.bn-v-block.bn-f-hero .bn-w1{left:63.889%;width:22.917%;top:3.333%;height:93.333%;}
.bn-v-block.bn-f-hero .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-block.bn-f-hero .bn-w2{left:77.778%;width:20.833%;top:8.333%;height:86.667%;}
.bn-v-block.bn-f-hero .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-block.bn-f-hero .bn-w3{left:86.806%;width:12.5%;top:63.333%;height:30%;}
.bn-v-block.bn-f-mobil .bn-feld-b{clip-path:polygon(76.923% 100%,100% 63.553%,100% 100%)}
.bn-v-block.bn-f-mobil .bn-streif{display:none}
.bn-v-block.bn-f-mobil .bn-riesig{left:5.128%;width:89.744%;top:2.895%;}
.bn-v-block.bn-f-mobil .bn-text{left:6.154%;width:69.231%;bottom:12.105%;}
.bn-v-block.bn-f-mobil .bn-zusagen{left:6.154%;width:66.667%;bottom:2.632%;}
.bn-v-block.bn-f-mobil .bn-w1{left:17.949%;width:46.154%;top:25%;height:43.421%;}
.bn-v-block.bn-f-mobil .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-block.bn-f-mobil .bn-w2{left:48.718%;width:46.154%;top:26.316%;height:42.105%;}
.bn-v-block.bn-f-mobil .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-block.bn-f-mobil .bn-w3{left:64.103%;width:30.769%;top:53.947%;height:15.789%;}
.bn-v-block.bn-f-kachel .bn-feld-b{clip-path:polygon(79.167% 100%,100% 48.667%,100% 100%)}
.bn-v-block.bn-f-kachel .bn-streif{display:none}
.bn-v-block.bn-f-kachel .bn-riesig{left:4.167%;width:91.667%;top:3.333%;}
.bn-v-block.bn-f-kachel .bn-text{left:5%;width:70.833%;bottom:4%;}
.bn-v-block.bn-f-kachel .bn-w1{left:27.083%;width:37.5%;top:34.167%;height:42.5%;}
.bn-v-block.bn-f-kachel .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-block.bn-f-kachel .bn-w2{left:53.125%;width:37.5%;top:35.333%;height:41.333%;}
.bn-v-block.bn-f-kachel .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-block.bn-f-kachel .bn-w3{left:75%;width:22.917%;top:61.667%;height:16.667%;}
.bn-v-block.bn-f-leiste .bn-feld-b{clip-path:polygon(95.139% 100%,97.847% 0%,100% 0%,100% 100%)}
.bn-v-block.bn-f-leiste .bn-streif{display:none}
.bn-v-block.bn-f-leiste .bn-riesig{left:2.778%;width:62.5%;top:18.333%;}
.bn-v-block.bn-f-leiste{--fs-riesig:68; /* @kind other */}
.bn-v-block.bn-f-leiste .bn-text{left:80.556%;width:13.889%;top:0%;height:100%;}
.bn-v-block.bn-f-leiste .bn-w1{left:61.111%;width:11.806%;top:-41.667%;height:183.333%;}
.bn-v-block.bn-f-leiste .bn-w1 img.bn-schlaeger{transform:rotate(72deg)}
.bn-v-block.bn-f-leiste .bn-w2{left:68.75%;width:11.806%;top:-41.667%;height:183.333%;}
.bn-v-block.bn-f-leiste .bn-w2 img.bn-schlaeger{transform:rotate(108deg)}
.bn-v-block.bn-f-quadrat .bn-feld-b{clip-path:polygon(79.63% 100%,100% 37.315%,100% 100%)}
.bn-v-block.bn-f-quadrat .bn-streif{display:none}
.bn-v-block.bn-f-quadrat .bn-riesig{left:5.185%;width:89.63%;top:12.963%;}
.bn-v-block.bn-f-quadrat{--fs-riesig:150; /* @kind other */}
.bn-v-block.bn-f-quadrat .bn-text{left:5.926%;width:37.037%;bottom:6.667%;}
.bn-v-block.bn-f-quadrat .bn-marke{left:5.926%;top:5.926%}
.bn-v-block.bn-f-quadrat .bn-w1{left:51.852%;width:25.926%;top:43.519%;height:45.37%;}
.bn-v-block.bn-f-quadrat .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-block.bn-f-quadrat .bn-w2{left:70.37%;width:25.926%;top:41.667%;height:46.296%;}
.bn-v-block.bn-f-quadrat .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-block.bn-f-quadrat .bn-w3{left:81.481%;width:14.815%;top:70.37%;height:16.667%;}
.bn-v-block.bn-f-hoch .bn-feld-b{clip-path:polygon(79.63% 100%,100% 49.852%,100% 100%)}
.bn-v-block.bn-f-hoch .bn-streif{display:none}
.bn-v-block.bn-f-hoch .bn-riesig{left:5.185%;width:89.63%;top:11.111%;}
.bn-v-block.bn-f-hoch{--fs-riesig:170; /* @kind other */}
.bn-v-block.bn-f-hoch .bn-text{left:5.926%;width:35.185%;bottom:5.333%;}
.bn-v-block.bn-f-hoch .bn-marke{left:5.926%;top:4.741%}
.bn-v-block.bn-f-hoch .bn-w1{left:48.148%;width:27.778%;top:40%;height:44.444%;}
.bn-v-block.bn-f-hoch .bn-w1 img.bn-schlaeger{transform:rotate(18deg)}
.bn-v-block.bn-f-hoch .bn-w2{left:68.519%;width:27.778%;top:38.519%;height:45.926%;}
.bn-v-block.bn-f-hoch .bn-w2 img.bn-schlaeger{transform:rotate(-18deg)}
.bn-v-block.bn-f-hoch .bn-w3{left:80.556%;width:15.741%;top:69.63%;height:14.815%;}
.bn-v-raster.bn-f-hero{--fs-schlag:80; /* @kind other */ --gap:8; /* @kind other */ --pad:56; /* @kind other */}
.bn-v-raster.bn-f-hero .bn-gitter{grid-template-columns:7fr 4fr 4fr;grid-template-rows:1fr 1fr;}
.bn-v-raster.bn-f-hero .bn-t1{grid-area:1/1/3/2}
.bn-v-raster.bn-f-hero .bn-t2{grid-area:1/2/2/3}
.bn-v-raster.bn-f-hero .bn-t3{grid-area:1/3/2/4}
.bn-v-raster.bn-f-hero .bn-t4{grid-area:2/2/3/4}
.bn-v-raster.bn-f-mobil{--fs-schlag:42; /* @kind other */ --gap:6; /* @kind other */ --pad:24; /* @kind other */}
.bn-v-raster.bn-f-mobil .bn-gitter{grid-template-columns:1fr 1fr;grid-template-rows:400fr 174fr 174fr;}
.bn-v-raster.bn-f-mobil .bn-t1{grid-area:1/1/2/3}
.bn-v-raster.bn-f-mobil .bn-t2{grid-area:2/1/3/2}
.bn-v-raster.bn-f-mobil .bn-t3{grid-area:2/2/3/3}
.bn-v-raster.bn-f-mobil .bn-t4{grid-area:3/1/4/3}
.bn-v-raster.bn-f-kachel{--fs-schlag:44; /* @kind other */ --gap:6; /* @kind other */ --pad:22; /* @kind other */}
.bn-v-raster.bn-f-kachel .bn-gitter{grid-template-columns:1fr 1fr;grid-template-rows:264fr 324fr;}
.bn-v-raster.bn-f-kachel .bn-t1{grid-area:2/1/3/3}
.bn-v-raster.bn-f-kachel .bn-t2{grid-area:1/1/2/2}
.bn-v-raster.bn-f-kachel .bn-t3{grid-area:1/2/2/3}
.bn-v-raster.bn-f-leiste{--fs-schlag:36; /* @kind other */ --gap:6; /* @kind other */ --pad:24; /* @kind other */}
.bn-v-raster.bn-f-leiste .bn-gitter{grid-template-columns:618fr 247fr 247fr 290fr;grid-template-rows:1fr;}
.bn-v-raster.bn-f-leiste .bn-t1{grid-area:1/1/2/2}
.bn-v-raster.bn-f-leiste .bn-t2{grid-area:1/2/2/3}
.bn-v-raster.bn-f-leiste .bn-t3{grid-area:1/3/2/4}
.bn-v-raster.bn-f-leiste .bn-tc{grid-area:1/4/2/5}
.bn-v-raster.bn-f-quadrat{--fs-schlag:72; /* @kind other */ --gap:10; /* @kind other */ --pad:48; /* @kind other */}
.bn-v-raster.bn-f-quadrat .bn-gitter{grid-template-columns:1.15fr 1fr;grid-template-rows:1.12fr 1fr;}
.bn-v-raster.bn-f-quadrat .bn-t1{grid-area:1/1/2/2}
.bn-v-raster.bn-f-quadrat .bn-t2{grid-area:1/2/2/3}
.bn-v-raster.bn-f-quadrat .bn-t3{grid-area:2/1/3/2}
.bn-v-raster.bn-f-quadrat .bn-t4{grid-area:2/2/3/3}
.bn-v-raster.bn-f-hoch{--fs-schlag:96; /* @kind other */ --gap:10; /* @kind other */ --pad:56; /* @kind other */}
.bn-v-raster.bn-f-hoch .bn-gitter{grid-template-columns:1fr 1fr;grid-template-rows:540fr 339fr 339fr;}
.bn-v-raster.bn-f-hoch .bn-t1{grid-area:1/1/2/3}
.bn-v-raster.bn-f-hoch .bn-t2{grid-area:2/1/3/2}
.bn-v-raster.bn-f-hoch .bn-t3{grid-area:2/2/3/3}
.bn-v-raster.bn-f-hoch .bn-t4{grid-area:3/1/4/3}
.bn-v-galerie.bn-f-hero .bn-feld-b{clip-path:polygon(61.806% 0%,100% 0%,100% 100%,48.264% 100%)}
.bn-v-galerie.bn-f-hero .bn-streif{clip-path:polygon(58.75% 0%,59.722% 0%,46.181% 100%,45.208% 100%)}
.bn-v-galerie.bn-f-hero .bn-text{left:5%;width:43.056%;bottom:14%;}
.bn-v-galerie.bn-f-hero .bn-zusagen{left:5%;bottom:6.667%;}
.bn-v-galerie.bn-f-hero .bn-faecher{left:54.167%;width:44.444%;top:6%;height:90%;}
.bn-v-galerie.bn-f-hero .bn-fw:nth-child(1){left:0%;width:42%;transform:translateY(6%) rotate(-18deg)}
.bn-v-galerie.bn-f-hero .bn-fw:nth-child(2){left:14.5%;width:42%;transform:translateY(2%) rotate(-9deg)}
.bn-v-galerie.bn-f-hero .bn-fw:nth-child(3){left:29%;width:42%;transform:translateY(0%) rotate(0deg)}
.bn-v-galerie.bn-f-hero .bn-fw:nth-child(4){left:43.5%;width:42%;transform:translateY(2%) rotate(9deg)}
.bn-v-galerie.bn-f-hero .bn-fw:nth-child(5){left:58%;width:42%;transform:translateY(6%) rotate(18deg)}
.bn-v-galerie.bn-f-mobil .bn-feld-b{clip-path:polygon(43.59% 0%,100% 0%,100% 50%,12.051% 50%)}
.bn-v-galerie.bn-f-mobil .bn-streif{display:none}
.bn-v-galerie.bn-f-mobil .bn-text{left:6.154%;width:87.692%;bottom:10%;}
.bn-v-galerie.bn-f-mobil .bn-zusagen{left:6.154%;width:87.692%;bottom:2.632%;}
.bn-v-galerie.bn-f-mobil .bn-faecher{left:4.103%;width:91.795%;top:2.632%;height:48.684%;}
.bn-v-galerie.bn-f-mobil .bn-fw:nth-child(1){left:0%;width:42%;transform:translateY(6%) rotate(-18deg)}
.bn-v-galerie.bn-f-mobil .bn-fw:nth-child(2){left:14.5%;width:42%;transform:translateY(2%) rotate(-9deg)}
.bn-v-galerie.bn-f-mobil .bn-fw:nth-child(3){left:29%;width:42%;transform:translateY(0%) rotate(0deg)}
.bn-v-galerie.bn-f-mobil .bn-fw:nth-child(4){left:43.5%;width:42%;transform:translateY(2%) rotate(9deg)}
.bn-v-galerie.bn-f-mobil .bn-fw:nth-child(5){left:58%;width:42%;transform:translateY(6%) rotate(18deg)}
.bn-v-galerie.bn-f-kachel .bn-feld-b{clip-path:polygon(41.667% 0%,100% 0%,100% 53.333%,20% 53.333%)}
.bn-v-galerie.bn-f-kachel .bn-streif{display:none}
.bn-v-galerie.bn-f-kachel .bn-text{left:5%;width:90%;bottom:4%;}
.bn-v-galerie.bn-f-kachel .bn-faecher{left:5%;width:91.667%;top:2%;height:53.333%;}
.bn-v-galerie.bn-f-kachel .bn-fw:nth-child(1){left:0%;width:40.727%;transform:translateY(6%) rotate(-18deg)}
.bn-v-galerie.bn-f-kachel .bn-fw:nth-child(2){left:14.818%;width:40.727%;transform:translateY(2%) rotate(-9deg)}
.bn-v-galerie.bn-f-kachel .bn-fw:nth-child(3){left:29.636%;width:40.727%;transform:translateY(0%) rotate(0deg)}
.bn-v-galerie.bn-f-kachel .bn-fw:nth-child(4){left:44.455%;width:40.727%;transform:translateY(2%) rotate(9deg)}
.bn-v-galerie.bn-f-kachel .bn-fw:nth-child(5){left:59.273%;width:40.727%;transform:translateY(6%) rotate(18deg)}
.bn-v-galerie.bn-f-leiste .bn-feld-b{clip-path:polygon(73.611% 0%,100% 0%,100% 100%,70.903% 100%)}
.bn-v-galerie.bn-f-leiste .bn-streif{clip-path:polygon(71.528% 0%,72.222% 0%,69.514% 100%,68.819% 100%)}
.bn-v-galerie.bn-f-leiste .bn-text{left:3.333%;width:64.583%;top:0%;height:100%;}
.bn-v-galerie.bn-f-leiste .bn-faecher{left:72.917%;width:25.694%;top:5%;height:90%;}
.bn-v-galerie.bn-f-leiste .bn-fw:nth-child(1){left:0%;width:16.346%;transform:translateY(6%) rotate(-18deg)}
.bn-v-galerie.bn-f-leiste .bn-fw:nth-child(2){left:20.914%;width:16.346%;transform:translateY(2%) rotate(-9deg)}
.bn-v-galerie.bn-f-leiste .bn-fw:nth-child(3){left:41.827%;width:16.346%;transform:translateY(0%) rotate(0deg)}
.bn-v-galerie.bn-f-leiste .bn-fw:nth-child(4){left:62.741%;width:16.346%;transform:translateY(2%) rotate(9deg)}
.bn-v-galerie.bn-f-leiste .bn-fw:nth-child(5){left:83.654%;width:16.346%;transform:translateY(6%) rotate(18deg)}
.bn-v-galerie.bn-f-quadrat .bn-feld-b{clip-path:polygon(40.741% 0%,100% 0%,100% 51.852%,23.889% 51.852%)}
.bn-v-galerie.bn-f-quadrat .bn-streif{display:none}
.bn-v-galerie.bn-f-quadrat .bn-text{left:5.926%;width:88.148%;bottom:6.667%;}
.bn-v-galerie.bn-f-quadrat .bn-marke{left:5.926%;top:5.926%}
.bn-v-galerie.bn-f-quadrat .bn-faecher{left:13.889%;width:81.481%;top:3.333%;height:51.852%;}
.bn-v-galerie.bn-f-quadrat .bn-fw:nth-child(1){left:0%;width:35.636%;transform:translateY(6%) rotate(-18deg)}
.bn-v-galerie.bn-f-quadrat .bn-fw:nth-child(2){left:16.091%;width:35.636%;transform:translateY(2%) rotate(-9deg)}
.bn-v-galerie.bn-f-quadrat .bn-fw:nth-child(3){left:32.182%;width:35.636%;transform:translateY(0%) rotate(0deg)}
.bn-v-galerie.bn-f-quadrat .bn-fw:nth-child(4){left:48.273%;width:35.636%;transform:translateY(2%) rotate(9deg)}
.bn-v-galerie.bn-f-quadrat .bn-fw:nth-child(5){left:64.364%;width:35.636%;transform:translateY(6%) rotate(18deg)}
.bn-v-galerie.bn-f-hoch .bn-feld-b{clip-path:polygon(40.741% 0%,100% 0%,100% 51.852%,19.722% 51.852%)}
.bn-v-galerie.bn-f-hoch .bn-streif{display:none}
.bn-v-galerie.bn-f-hoch .bn-text{left:5.926%;width:88.148%;bottom:5.333%;}
.bn-v-galerie.bn-f-hoch .bn-marke{left:5.926%;top:4.741%}
.bn-v-galerie.bn-f-hoch .bn-faecher{left:10.185%;width:85.185%;top:4.148%;height:51.111%;}
.bn-v-galerie.bn-f-hoch .bn-fw:nth-child(1){left:0%;width:42%;transform:translateY(6%) rotate(-18deg)}
.bn-v-galerie.bn-f-hoch .bn-fw:nth-child(2){left:14.5%;width:42%;transform:translateY(2%) rotate(-9deg)}
.bn-v-galerie.bn-f-hoch .bn-fw:nth-child(3){left:29%;width:42%;transform:translateY(0%) rotate(0deg)}
.bn-v-galerie.bn-f-hoch .bn-fw:nth-child(4){left:43.5%;width:42%;transform:translateY(2%) rotate(9deg)}
.bn-v-galerie.bn-f-hoch .bn-fw:nth-child(5){left:58%;width:42%;transform:translateY(6%) rotate(18deg)}