/* Blumenwerft – Saisonaktionsflyer Herbst, DIN lang (99 × 210 mm), Vorder- und Rückseite als zwei Flächen.
   Gestaltungsvorschau: Typografie, Farben und Bildwelt der Beispiel-Website. Keine Beschnitt- oder
   Farbprofilprüfung. Schriften lokal (Fraunces, Karla – OFL, siehe ../LIZENZEN.md). */
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-full-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Karla';src:url('../fonts/karla-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{--papier:#f2ebe0;--papier-hell:#f9f5ee;--beere:#6b2138;--beere-tief:#4b1527;--rose:#d9a9a0;--gruen:#1f3d2e;--gruen-tief:#142a20;--honig:#c9a25a;--tinte:#231a1c;--tinte-weich:#574a4d;--tinte-leicht:#8b7d80;--linie:rgba(35,26,28,.16)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:#1b1a19}
body{font-family:'Karla',Arial,sans-serif;color:var(--tinte);background:#1b1a19;min-height:100vh;display:flex;flex-direction:column;align-items:center;gap:8mm;padding:12mm 8mm 0}
.fl-kopf{color:#cfc7bb;font-size:12px;text-align:center;line-height:1.6;max-width:520px}
.fl-kopf b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:18px;color:#f2ebe0;margin-bottom:2px}
.fl-buehne{display:flex;flex-wrap:wrap;justify-content:center;gap:10mm}
.fl-hinweis-fuss{color:#8f877c;font-size:12px;text-align:center;line-height:1.6;margin-top:4mm;padding-bottom:16mm}
.fl-hinweis-fuss a{color:#cfc7bb;text-decoration:underline}
.fl-demo{margin:10px 0 0;font-size:13px;line-height:1.6;color:#cfc7bb}
.fl-demo a{color:#f2ebe0}
@media (max-width:480px){body{padding:6mm 8px 0;gap:6mm}.fl-hinweis-fuss{padding-bottom:10mm}}
.fl-seite{position:relative;width:99mm;height:210mm;overflow:hidden;background:var(--papier);box-shadow:0 20px 60px -20px rgba(0,0,0,.8)}
.fl-seite img{display:block}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;line-height:1.06;letter-spacing:-.01em;font-variation-settings:'opsz' 120,'SOFT' 50}

/* ── Vorderseite ─────────────────────────────────────────────────────────────────────────────── */
.fl-vorn .fl-motiv{position:absolute;left:0;top:0;width:99mm;height:126mm;overflow:hidden;background:var(--gruen-tief)}
.fl-vorn .fl-motiv img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.fl-vorn .fl-motiv::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,42,32,.25) 0%,rgba(20,42,32,0) 32%,rgba(20,42,32,0) 70%,rgba(20,42,32,.35) 100%)}
.fl-vorn .fl-marke{position:absolute;left:7mm;top:7mm;display:flex;align-items:center;gap:2.6mm;color:#f9f5ee}
.fl-vorn .fl-marke svg{width:9mm;height:9mm;filter:drop-shadow(0 1mm 2mm rgba(0,0,0,.35))}
.fl-marke-wort{display:flex;flex-direction:column;line-height:1;text-shadow:0 .4mm 1.6mm rgba(0,0,0,.45)}
.fl-marke-wort b{font-family:'Fraunces',serif;font-weight:500;font-size:14pt;letter-spacing:-.01em;font-variation-settings:'opsz' 96,'SOFT' 50}
.fl-marke-wort small{font-size:5.6pt;letter-spacing:.16em;text-transform:uppercase;margin-top:1.1mm;opacity:.9}
.fl-vorn .fl-stempel{position:absolute;right:7mm;top:8mm;width:22mm;height:22mm;border-radius:50%;background:var(--beere);color:#f9f5ee;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(8deg);box-shadow:0 2mm 6mm rgba(0,0,0,.3)}
.fl-stempel b{font-family:'Fraunces',serif;font-weight:500;font-size:11.5pt;line-height:1}
.fl-stempel span{font-size:5.4pt;letter-spacing:.12em;text-transform:uppercase;margin-top:1mm;line-height:1.2}
.fl-vorn .fl-blatt{position:absolute;left:7mm;right:7mm;top:112mm;background:var(--papier);padding:8mm 8mm 7mm;box-shadow:0 -1mm 6mm rgba(20,42,32,.18)}
.fl-blatt .fl-zeit{display:inline-flex;align-items:center;gap:2mm;font-size:6.6pt;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--beere);margin-bottom:3.4mm}
.fl-blatt .fl-zeit::before{content:'';width:5mm;height:.3mm;background:currentColor}
.fl-blatt h1{font-size:23pt;margin-bottom:3.2mm;max-width:12ch;font-variation-settings:'opsz' 144,'SOFT' 60,'WONK' 1}
.fl-blatt h1 em{font-style:normal;color:var(--beere)}
.fl-blatt p{font-size:8.8pt;line-height:1.5;color:var(--tinte-weich)}
.fl-blatt .fl-klein{font-size:6.4pt;color:var(--tinte-leicht);margin-top:3mm;line-height:1.45}
.fl-vorn .fl-fuss{position:absolute;left:0;right:0;bottom:0;height:22mm;background:var(--gruen);color:#f9f5ee;display:flex;align-items:center;justify-content:space-between;padding:0 8mm;font-size:7.4pt;line-height:1.45}
.fl-vorn .fl-fuss b{display:block;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:6.2pt;color:var(--rose);margin-bottom:.8mm}
.fl-vorn .fl-fuss span{display:block}
.fl-vorn .fl-fuss div+div{text-align:right}

/* ── Rückseite ───────────────────────────────────────────────────────────────────────────────── */
.fl-hinten{display:flex;flex-direction:column}
.fl-hinten>*{flex-shrink:0} /* nichts stauchen – der Inhalt ist so gesetzt, dass er in 210 mm passt */
.fl-hinten .fl-band{background:var(--gruen);color:#f9f5ee;padding:6.5mm 8mm 5.5mm;position:relative;overflow:hidden}
.fl-hinten .fl-band::after{content:'';position:absolute;right:-14mm;top:-14mm;width:40mm;height:40mm;border-radius:50%;background:radial-gradient(closest-side,rgba(107,33,56,.55),rgba(107,33,56,0))}
.fl-hinten .fl-band .fl-marke{display:flex;align-items:center;gap:2.6mm;margin-bottom:3.5mm;position:relative}
.fl-hinten .fl-band .fl-marke svg{width:8mm;height:8mm}
.fl-hinten .fl-band .fl-marke-wort{text-shadow:none}
.fl-hinten .fl-band .fl-marke-wort b{font-size:12.5pt}
.fl-hinten .fl-band .fl-marke-wort small{font-size:5.4pt;opacity:.75}
.fl-hinten .fl-band h2{font-size:15pt;margin-bottom:1.5mm;position:relative}
.fl-hinten .fl-band p{font-size:7.5pt;line-height:1.45;color:rgba(250,246,239,.82);position:relative;max-width:80mm}
.fl-teil{padding:4mm 8mm 0}
.fl-teil h3{font-size:9pt;letter-spacing:.14em;text-transform:uppercase;font-family:'Karla',sans-serif;font-weight:700;color:var(--beere);margin-bottom:1.8mm;display:flex;align-items:center;gap:2mm}
.fl-teil h3::after{content:'';flex:1;height:.3mm;background:var(--linie)}
.fl-liste{list-style:none}
.fl-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:2mm;padding:1.1mm 0;border-bottom:.25mm solid var(--linie);font-size:7.8pt;line-height:1.25}
.fl-liste li:last-child{border-bottom:0}
.fl-liste b{font-family:'Fraunces',serif;font-weight:500;font-size:9pt;letter-spacing:-.005em}
.fl-liste small{display:block;font-size:6.3pt;color:var(--tinte-leicht);margin-top:.2mm}
.fl-liste em{font-style:normal;font-weight:700;color:var(--beere);white-space:nowrap;font-size:8pt}
.fl-liste em i{font-style:normal;font-weight:400;color:var(--tinte-leicht);font-size:6.4pt;margin-right:.8mm}
.fl-vb{display:grid;grid-template-columns:1fr 26mm;gap:4mm;align-items:start}
.fl-schritte{list-style:none;counter-reset:s}
.fl-schritte li{counter-increment:s;display:grid;grid-template-columns:5.5mm 1fr;gap:1.4mm;font-size:7.2pt;line-height:1.35;padding:.9mm 0;color:var(--tinte-weich)}
.fl-schritte li::before{content:counter(s,decimal-leading-zero);font-family:'Fraunces',serif;font-size:9.5pt;color:var(--beere);line-height:1.1}
.fl-schritte b{color:var(--tinte);font-weight:500;display:block}
.fl-bild{width:26mm;height:28mm;overflow:hidden;background:var(--papier-hell);padding:1.2mm 1.2mm 1.4mm;box-shadow:0 2mm 5mm -2mm rgba(35,26,28,.5);transform:rotate(2deg)}
.fl-bild img{width:100%;height:100%;object-fit:cover}
.fl-kontakt{margin-top:2mm;background:var(--papier-hell);border-left:.8mm solid var(--gruen);padding:2mm 3mm;font-size:7.2pt;line-height:1.45}
.fl-kontakt b{font-weight:700}
.fl-zeiten{display:grid;grid-template-columns:1fr 1fr;gap:3mm 5mm;align-items:start}
.fl-zeiten table{width:100%;border-collapse:collapse;font-size:7.6pt;line-height:1.3}
.fl-zeiten th{text-align:left;font-weight:500;padding:1.1mm 0;border-bottom:.25mm solid var(--linie);width:52%}
.fl-zeiten td{padding:1.1mm 0;border-bottom:.25mm solid var(--linie);color:var(--tinte-weich)}
.fl-zeiten tr:last-child th,.fl-zeiten tr:last-child td{border-bottom:0}
.fl-zeiten tr.zu td{color:var(--tinte-leicht)}
.fl-adresse{font-style:normal;font-size:7.6pt;line-height:1.5;color:var(--tinte-weich)}
.fl-adresse b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:9.5pt;color:var(--tinte);margin-bottom:.8mm}
.fl-adresse small{display:block;font-size:6.4pt;color:var(--tinte-leicht);margin-top:1.6mm;line-height:1.45}
.fl-hinten .fl-fuss{margin-top:auto;background:var(--beere);color:#f9f5ee;padding:0 8mm;height:12mm;display:flex;align-items:center;justify-content:space-between;font-size:6.6pt;letter-spacing:.06em}
.fl-hinten .fl-fuss b{font-family:'Fraunces',serif;font-weight:500;font-size:9pt;letter-spacing:0}

/* Smartphone-Bildschirm (< 768 px): Flyerfläche proportional auf die verfügbare Breite verkleinern.
   Die Fläche behält ihre 99 × 210 mm und damit jeden Umbruch; transform verkleinert nur die Darstellung,
   die negativen Außenabstände geben den eingesparten Platz im Dokumentfluss frei. Maßstab = Bühnenbreite
   (100cqw) / 99 mm, höchstens 1. Druck und Ansichten ab 768 px bleiben unberührt. */
@media screen and (max-width:767.98px){
  body{padding-left:16px;padding-right:16px}
  .fl-buehne{width:100%;container-type:inline-size;gap:24px}
  .fl-seite{--fl-mass:min(1,tan(atan2(100cqw,99mm)));flex:0 0 auto;transform:scale(var(--fl-mass));transform-origin:0 0;margin:0 calc(99mm * (var(--fl-mass) - 1)) calc(210mm * (var(--fl-mass) - 1)) 0}
}