/* Baukasten-Karten (flp): der echte Landingpage-Baukasten aus dem Dashboard (baukasten.js, editor.js, bausteine.js),
   oben die Leiste mit „Veröffentlichen“, links die Seite, rechts die Reiter Seite, Baukasten, Sektion.
   Die Demo-Seite ist Kessler Coaching (Petrol #17857D), wie auf der KI-Seite. */

/* ---------- Leiste oben (ed-top) ---------- */
.flp-bar{display:flex;align-items:center;gap:calc(8 * var(--e));height:calc(34 * var(--e));padding:0 calc(12 * var(--e));background:#0E0E10;border-bottom:1px solid rgba(244,243,240,.09)}
.flp-zur{display:flex;align-items:center;gap:calc(3 * var(--e));flex:none;font-size:calc(8.5 * var(--e));color:#A9A7A1}
.flp-bar svg,.flp-kb svg,.flp-tabs svg,.flp-bi svg,.flp-werk svg,.flp-seg svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flp-zur svg{width:calc(10 * var(--e));height:calc(10 * var(--e));stroke-width:2}
.flp-name{display:flex;flex-direction:column;min-width:0;margin-left:calc(4 * var(--e))}
.flp-name b{font-size:calc(9 * var(--e));font-weight:600;line-height:1.2;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flp-name i{font-style:normal;font-size:calc(7 * var(--e));line-height:1.3;color:#6F6D68;white-space:nowrap}
.flp-pille{flex:none;padding:calc(3 * var(--e)) calc(7 * var(--e));border-radius:999px;background:#1C1C1F;font-size:calc(7 * var(--e));line-height:1.2;color:#A9A7A1}
.flp-pub{flex:none;margin-left:auto;height:calc(21 * var(--e));padding:0 calc(10 * var(--e));font-size:calc(8.5 * var(--e))}

/* ---------- Editor: links die Seite, rechts die Reiter ---------- */
.fn-stat.flp-hero{padding:0}
.flp-ed{display:flex;height:calc(322 * var(--e))}
.flp-buehne{position:relative;flex:1;min-width:0;padding:calc(11 * var(--e)) calc(11 * var(--e)) 0;background:#0B0B0C;overflow:hidden}
.flp-buehne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(34 * var(--e));background:linear-gradient(rgba(11,11,12,0),#0B0B0C 92%);pointer-events:none}

/* ---------- Die Seite des Kunden (Kessler Coaching) ---------- */
.flp-seite{position:relative;border-radius:calc(8 * var(--e));background:#F4EFE7;color:#132523;font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;overflow:hidden}
.flp-nav{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--e));height:calc(25 * var(--e));padding:0 calc(12 * var(--e));border-bottom:1px solid rgba(19,37,35,.08)}
.flp-logo{display:flex;align-items:center;gap:calc(3 * var(--e));font-size:calc(8.5 * var(--e));line-height:1;letter-spacing:-.02em;color:#5A6663;white-space:nowrap}
.flp-logo svg{width:calc(11 * var(--e));height:calc(10 * var(--e));flex:none}
.flp-logo b{font-weight:700;color:#132523}
.flp-kb{display:inline-flex;align-items:center;gap:calc(3 * var(--e));height:calc(15 * var(--e));padding:0 calc(7 * var(--e));border-radius:999px;background:#17857D;color:#fff;font-size:calc(6.5 * var(--e));font-weight:600;line-height:1;white-space:nowrap}
.flp-kb svg{width:calc(7 * var(--e));height:calc(7 * var(--e));stroke-width:2.2}
.flp-kb2{height:calc(18 * var(--e));margin-top:calc(10 * var(--e));padding:0 calc(9 * var(--e));font-size:calc(7.5 * var(--e));box-shadow:0 calc(5 * var(--e)) calc(12 * var(--e)) calc(-5 * var(--e)) rgba(23,133,125,.55)}
.flp-kopf{display:grid;grid-template-columns:minmax(0,1fr) calc(86 * var(--e));gap:calc(14 * var(--e));align-items:center;padding:calc(13 * var(--e)) calc(13 * var(--e)) calc(13 * var(--e)) calc(14 * var(--e))}
.flp-h1{font-size:calc(14 * var(--e));font-weight:700;line-height:1.08;letter-spacing:-.035em;color:#132523}
.flp-p{margin-top:calc(6 * var(--e));font-size:calc(7 * var(--e));line-height:1.5;color:#5A6663}
.flp-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:calc(7 * var(--e))}
.flp-h2{font-size:calc(11.5 * var(--e));font-weight:700;line-height:1.12;letter-spacing:-.03em;color:#132523}

/* Platz zum Loslassen (ed-drop) und der neue Abschnitt */
.flp-slot{display:grid;place-items:center;height:calc(26 * var(--e));margin:calc(3 * var(--e)) calc(12 * var(--e)) calc(8 * var(--e));border:1.5px dashed #FF4800;border-radius:calc(7 * var(--e));background:rgba(255,72,0,.07);font-family:var(--body);font-size:calc(7.5 * var(--e));font-weight:600;color:#E64100}
.flp-neu{transition:grid-template-rows .7s var(--ease),opacity .45s ease}
.flp-stimmen{position:relative;padding:calc(26 * var(--e)) calc(12 * var(--e)) calc(15 * var(--e));background:#ECE5DA;text-align:center}
.flp-qs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(6 * var(--e));margin-top:calc(10 * var(--e));text-align:left}
.flp-q{display:flex;flex-direction:column;justify-content:space-between;padding:calc(8 * var(--e)) calc(8 * var(--e)) calc(7 * var(--e));border-radius:calc(6 * var(--e));background:#F9F6F1;box-shadow:0 0 0 1px rgba(19,37,35,.06),0 calc(8 * var(--e)) calc(16 * var(--e)) calc(-12 * var(--e)) rgba(19,37,35,.35)}
.flp-q p{font-size:calc(6.5 * var(--e));line-height:1.45;color:#132523}
.flp-q b{display:flex;align-items:center;gap:calc(4 * var(--e));margin-top:calc(7 * var(--e));font-size:calc(6.5 * var(--e));font-weight:600;line-height:1.2;white-space:nowrap}
.flp-q b i{display:grid;place-items:center;flex:none;width:calc(14 * var(--e));height:calc(14 * var(--e));border-radius:50%;background:rgba(23,133,125,.14);color:#17857D;font-style:normal;font-size:calc(5.5 * var(--e));font-weight:700}
.flp-ende{display:grid;grid-template-columns:minmax(0,1fr) calc(104 * var(--e));gap:calc(14 * var(--e));align-items:center;padding:calc(15 * var(--e)) calc(13 * var(--e)) calc(20 * var(--e)) calc(14 * var(--e))}
.flp-form{display:grid;gap:calc(5 * var(--e));padding:calc(9 * var(--e));border-radius:calc(7 * var(--e));background:#FBF8F3;box-shadow:0 0 0 1px rgba(19,37,35,.08)}
.flp-form i{display:block;height:calc(13 * var(--e));border-radius:calc(4 * var(--e));background:#EEE8DE}
.flp-form .flp-kb{justify-content:center}

/* Ausgewählter Abschnitt (ed-sel): orangener Rahmen, Schild oben links, Werkzeuge oben rechts */
.flp-stimmen::after,.flp-abs::after{content:"";position:absolute;inset:0;border:1.5px solid #FF4800;opacity:0;pointer-events:none;transition:opacity .3s ease}
.flp-stimmen.sel::after,.flp-abs.sel::after{opacity:1}
.flp-chip{position:absolute;z-index:1;left:calc(6 * var(--e));top:calc(6 * var(--e));display:flex;align-items:center;gap:calc(3 * var(--e));height:calc(15 * var(--e));padding:0 calc(7 * var(--e)) 0 calc(4 * var(--e));border-radius:calc(5 * var(--e));background:#FF4800;color:#fff;font-family:var(--body);font-size:calc(7 * var(--e));font-weight:600;line-height:1;white-space:nowrap;
  box-shadow:0 calc(3 * var(--e)) calc(8 * var(--e)) rgba(255,72,0,.3);opacity:0;transform:translateY(calc(-3 * var(--e)));transition:opacity .3s ease,transform .3s ease}
.flp-chip small{font-size:calc(6 * var(--e));font-weight:500;opacity:.85}
.flp-chip svg{width:calc(8 * var(--e));height:calc(8 * var(--e));fill:currentColor;stroke:none}
.sel>.flp-chip,.sel>.flp-werk{opacity:1;transform:none}

/* ---------- Reiter rechts (ed-rechts) ---------- */
.flp-panel{flex:none;width:calc(166 * var(--e));padding:calc(9 * var(--e)) calc(9 * var(--e)) 0;background:#111113;border-left:1px solid rgba(244,243,240,.09);overflow:hidden}
.flp-panel{position:relative}
.flp-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(44 * var(--e));background:linear-gradient(rgba(17,17,19,0),#111113 88%);pointer-events:none}
.flp-tabs{display:flex;gap:calc(2 * var(--e));padding:calc(2 * var(--e));border-radius:calc(8 * var(--e));background:#0B0B0C;border:1px solid rgba(244,243,240,.09)}
.flp-tabs span{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:calc(3 * var(--e));height:calc(21 * var(--e));padding:0 calc(4 * var(--e));border-radius:calc(6 * var(--e));font-size:calc(7 * var(--e));line-height:1;color:#A9A7A1;white-space:nowrap}
.flp-tabs span.an{background:#1F1F23;color:#F4F3F0}
.flp-tabs svg{width:calc(8 * var(--e));height:calc(8 * var(--e));flex:none}
.flp-hint{margin:calc(9 * var(--e)) calc(1 * var(--e)) calc(8 * var(--e));font-size:calc(6.5 * var(--e));line-height:1.5;color:#8A8882}
.flp-liste{display:grid;gap:calc(4 * var(--e))}
.flp-bs{display:flex;align-items:center;gap:calc(6 * var(--e));height:calc(28 * var(--e));padding:0 calc(6 * var(--e)) 0 calc(5 * var(--e));border-radius:calc(7 * var(--e));background:#151517;border:1px solid rgba(244,243,240,.09);transition:opacity .3s ease,border-color .25s ease,background .25s ease}
.flp-bs::after{content:"";flex:none;width:calc(5 * var(--e));height:calc(8 * var(--e));margin-left:auto;opacity:.55;background:radial-gradient(circle,#A9A7A1 0 32%,transparent 42%) 0 0/50% 33.34%}
.flp-bs.hov{border-color:rgba(255,72,0,.65);background:#1B1715}
.flp-bs.weg{opacity:.35}
.flp-bi{display:grid;place-items:center;flex:none;width:calc(17 * var(--e));height:calc(17 * var(--e));border-radius:calc(5 * var(--e));background:#1F1F23;color:#D6D4CE}
.flp-bi svg{width:calc(9 * var(--e));height:calc(9 * var(--e))}
.flp-bt{display:flex;flex-direction:column;min-width:0}
.flp-bt b{font-size:calc(7.5 * var(--e));font-weight:600;line-height:1.25;color:#F4F3F0;white-space:nowrap}
.flp-bt i{font-style:normal;font-size:calc(6 * var(--e));line-height:1.35;color:#8A8882;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Der Baustein, den Miriam zieht (hängt am Mauszeiger) */
.flp-hero .d-cur>svg{position:relative;z-index:1}
.flp-hero .d-cur>span{transition:opacity .2s ease}
.flp-hero .d-cur.zieht>span{opacity:0}
.flp-geist{position:absolute;left:calc(-108 * var(--e));top:calc(-12 * var(--e));display:flex;align-items:center;gap:calc(6 * var(--e));width:calc(118 * var(--e));height:calc(28 * var(--e));padding:0 calc(7 * var(--e)) 0 calc(5 * var(--e));border-radius:calc(7 * var(--e));background:#1F1F23;border:1px solid #FF4800;
  box-shadow:0 calc(12 * var(--e)) calc(26 * var(--e)) rgba(0,0,0,.55);opacity:0;transform:rotate(-4deg) scale(.9);transition:opacity .2s ease,transform .3s var(--ease)}
.flp-geist b{font-size:calc(7.5 * var(--e));font-weight:600;line-height:1;color:#F4F3F0;white-space:nowrap}
.d-cur .flp-geist svg{width:calc(9 * var(--e));height:calc(9 * var(--e))}
.flp-geist::after{content:"";flex:none;width:calc(5 * var(--e));height:calc(8 * var(--e));margin-left:auto;opacity:.55;background:radial-gradient(circle,#A9A7A1 0 32%,transparent 42%) 0 0/50% 33.34%}
.d-cur.zieht .flp-geist{opacity:1;transform:rotate(-4deg)}

/* ---------- S1: Reiter „Seite“ ---------- */
.flp-skopf{display:flex;align-items:center;gap:calc(10 * var(--e));padding-bottom:calc(12 * var(--e));margin-bottom:calc(3 * var(--e));border-bottom:1px solid rgba(244,243,240,.09)}
.flp-skopf .d-ic{width:calc(28 * var(--e));height:calc(28 * var(--e));border-radius:calc(8 * var(--e))}
.flp-skopf .d-ic svg{width:calc(13 * var(--e));height:calc(13 * var(--e))}
.flp-skopf .d-rm b{font-size:calc(11 * var(--e));font-weight:600}
.flp-surl em{font-style:normal}
.flp-lab{display:block;margin:calc(12 * var(--e)) 0 calc(6 * var(--e));font-size:calc(9 * var(--e));font-weight:500;line-height:1.3;color:#A9A7A1}
.flp-feld{position:relative;display:flex;align-items:center;height:calc(30 * var(--e));padding:0 calc(11 * var(--e));border-radius:calc(8 * var(--e));background:#141416;border:1px solid rgba(244,243,240,.09);font-size:calc(10 * var(--e));line-height:1;color:#F4F3F0;white-space:nowrap;overflow:hidden;transition:border-color .2s ease}
.flp-feld.fokus{border-color:rgba(244,243,240,.24)}
.flp-feld .flp-tx{border-radius:2px;transition:background .15s ease}
.flp-feld.mark .flp-tx{background:rgba(64,128,255,.45)}
.flp-car{display:none;width:1.5px;height:1.05em;margin-left:1px;background:#F4F3F0;flex:none}
.tippt .flp-car{display:inline-block}
.flp-sel{justify-content:space-between}
.flp-sel svg{flex:none;width:calc(8 * var(--e));height:calc(5 * var(--e));fill:none;stroke:#A9A7A1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flp-pre{font-style:normal;color:#6F6D68}
.flp-uel{transition:opacity .25s ease}
.flp-s1.ohne-el .flp-uel{display:none}
.flp-zeile{display:flex;align-items:center;justify-content:space-between;margin-top:calc(16 * var(--e));font-size:calc(10 * var(--e));color:#F4F3F0}
.flp-sch{position:relative;flex:none;width:calc(30 * var(--e));height:calc(17 * var(--e));border-radius:999px;background:#2A2A2E;transition:background .25s ease}
.flp-sch::after{content:"";position:absolute;left:calc(2.5 * var(--e));top:calc(2.5 * var(--e));width:calc(12 * var(--e));height:calc(12 * var(--e));border-radius:50%;background:#A9A7A1;transition:transform .3s var(--ease),background .25s ease}
.flp-sch.an{background:#F4F3F0}
.flp-sch.an::after{transform:translateX(calc(13 * var(--e)));background:#0B0B0C}
.flp-klein{margin-top:calc(10 * var(--e));font-size:calc(8.5 * var(--e));line-height:1.5;color:#8A8882}
.flp-navt{transition:opacity .35s ease}
.flp-s1.nav-aus .flp-navt{display:none}

/* ---------- S2: Abschluss direkt auf der Seite ändern ---------- */
.fn-dk.flp-s2{padding:calc(14 * var(--e))}
.flp-s2s{height:100%;border-radius:calc(10 * var(--e));background:#ECE5DA}
.flp-abs{position:relative;display:grid;grid-template-columns:minmax(0,1fr) calc(150 * var(--e));gap:calc(18 * var(--e));align-items:center;height:100%;padding:calc(30 * var(--e)) calc(22 * var(--e)) calc(22 * var(--e))}
.flp-werk{position:absolute;z-index:1;right:calc(8 * var(--e));top:calc(8 * var(--e));display:flex;gap:calc(1 * var(--e));padding:calc(2 * var(--e));border-radius:calc(7 * var(--e));background:#141416;color:#D6D4CE;box-shadow:0 calc(4 * var(--e)) calc(12 * var(--e)) rgba(0,0,0,.3);opacity:0;transform:translateY(calc(-3 * var(--e)));transition:opacity .3s ease,transform .3s ease}
.flp-werk svg{display:block;width:calc(18 * var(--e));height:calc(18 * var(--e));padding:calc(4 * var(--e));border-radius:calc(5 * var(--e))}
.flp-ah{position:relative;font-size:calc(20 * var(--e));line-height:1.1;border-radius:calc(2 * var(--e));outline:1.5px dashed transparent;outline-offset:calc(5 * var(--e))}
.flp-ah.edit{outline:1.5px dashed rgba(255,72,0,.75);outline-offset:calc(5 * var(--e))}
.flp-dat{border-radius:2px;transition:background .15s ease}
.flp-ah.mark .flp-dat{background:rgba(64,128,255,.35)}
.flp-ah .flp-car{background:#132523;height:.95em;vertical-align:-.08em}
.flp-ah.tippt .flp-car{display:inline-block}
.flp-at .flp-p{margin-top:calc(9 * var(--e));font-size:calc(8.5 * var(--e));max-width:calc(190 * var(--e))}
.flp-frei{margin-top:calc(9 * var(--e));font-size:calc(8 * var(--e));color:#5A6663}
.flp-af{display:grid;padding:calc(12 * var(--e));border-radius:calc(9 * var(--e));background:#F9F6F1;box-shadow:0 0 0 1px rgba(19,37,35,.08),0 calc(12 * var(--e)) calc(24 * var(--e)) calc(-16 * var(--e)) rgba(19,37,35,.35)}
.flp-af>b{font-size:calc(10.5 * var(--e));font-weight:700;letter-spacing:-.02em}
.flp-fl{margin:calc(9 * var(--e)) 0 calc(4 * var(--e));font-size:calc(7.5 * var(--e));color:#5A6663}
.flp-af>i{display:block;height:calc(18 * var(--e));border-radius:calc(5 * var(--e));background:#EEE8DE}
.flp-af .flp-kb{justify-content:center;height:calc(21 * var(--e));margin-top:calc(12 * var(--e));font-size:calc(8.5 * var(--e))}
.flp-af .flp-kb svg{width:calc(8 * var(--e));height:calc(8 * var(--e))}

/* ---------- S3: Rechner und Handy, dann veröffentlichen ---------- */
.fn-dk.flp-s3{display:flex;flex-direction:column;padding:0}
.flp-bar3{gap:calc(6 * var(--e));height:calc(40 * var(--e));padding:0 calc(12 * var(--e))}
.flp-bar3 .flp-name{margin-left:0;margin-right:auto}
.flp-seg{display:flex;flex:none;padding:calc(2 * var(--e));border-radius:calc(7 * var(--e));background:#0B0B0C;border:1px solid rgba(244,243,240,.09)}
.flp-seg>span{display:flex;align-items:center;gap:calc(3 * var(--e));height:calc(19 * var(--e));padding:0 calc(7 * var(--e));border-radius:calc(5 * var(--e));font-size:calc(8 * var(--e));line-height:1;color:#A9A7A1;transition:background .25s ease,color .25s ease}
.flp-seg>span.an{background:#1F1F23;color:#F4F3F0}
.flp-seg svg{width:calc(9 * var(--e));height:calc(9 * var(--e))}
.flp-bar3 .flp-pub{margin-left:0}
.flp-buehne3{position:relative;flex:1;min-height:0;overflow:hidden;background:#0B0B0C}
.flp-rahmen{position:absolute;left:50%;top:calc(14 * var(--e));bottom:calc(-30 * var(--e));width:calc(404 * var(--e));margin-left:calc(-202 * var(--e));border-radius:calc(10 * var(--e));overflow:hidden;background:#F4EFE7;
  transition:width .85s var(--ease),margin .85s var(--ease),border-radius .85s ease,box-shadow .85s ease}
.flp-buehne3[data-g="handy"] .flp-rahmen{width:calc(146 * var(--e));margin-left:calc(-73 * var(--e));border-radius:calc(18 * var(--e));box-shadow:0 0 0 calc(5 * var(--e)) #1C1C1F,0 calc(14 * var(--e)) calc(36 * var(--e)) rgba(0,0,0,.5)}
.flp-l{position:absolute;left:0;top:0;border-radius:0;opacity:0;transition:opacity .35s ease}
.flp-l[data-l="pc"]{width:calc(404 * var(--e))}
.flp-l[data-l="handy"]{width:calc(146 * var(--e))}
.flp-buehne3[data-g="pc"] [data-l="pc"],.flp-buehne3[data-g="handy"] [data-l="handy"]{opacity:1;transition:opacity .45s ease .35s}
.flp-l[data-l="pc"] .flp-kopf{grid-template-columns:minmax(0,1fr) calc(132 * var(--e));gap:calc(22 * var(--e));padding:calc(22 * var(--e)) calc(22 * var(--e)) calc(22 * var(--e)) calc(24 * var(--e))}
.flp-l[data-l="pc"] .flp-h1{font-size:calc(20 * var(--e))}
.flp-l[data-l="pc"] .flp-p{font-size:calc(8.5 * var(--e));margin-top:calc(8 * var(--e))}
.flp-l[data-l="pc"] .flp-kb2{height:calc(21 * var(--e));font-size:calc(8.5 * var(--e))}
.flp-l[data-l="handy"] .flp-nav{height:calc(26 * var(--e));padding:0 calc(10 * var(--e))}
.flp-burger{display:grid;gap:calc(3 * var(--e))}
.flp-burger i{display:block;width:calc(12 * var(--e));height:1.5px;border-radius:1px;background:#132523}
.flp-hk{padding:calc(13 * var(--e)) calc(11 * var(--e))}
.flp-hk .flp-h1{font-size:calc(13 * var(--e))}
.flp-hk .flp-p{font-size:calc(7.5 * var(--e))}
.flp-hk .flp-foto{margin-top:calc(12 * var(--e));aspect-ratio:1/1}
.flp-s3 .d-toast{left:50%;right:auto;transform:translate(-50%,calc(8 * var(--e)))}
.flp-s3 .d-toast.zeig{transform:translate(-50%,0)}

/* ---------- Handy ---------- */
@container (max-width:460px){
  .fn-stat.flp-hero{--e:calc(100cqw / 350)}
  .flp-hero .flp-zur,.flp-hero .flp-pille{display:none}
  .flp-hero .flp-name{margin-left:0}
  .flp-hero .flp-ed{height:calc(330 * var(--e))}
  .flp-hero .flp-buehne{padding:calc(9 * var(--e)) calc(9 * var(--e)) 0}
  .flp-hero .flp-panel{width:calc(116 * var(--e));padding:calc(8 * var(--e)) calc(7 * var(--e)) 0}
  .flp-hero .flp-tabs span:not(.an){display:none}
  .flp-hero .flp-hint{display:none}
  .flp-hero .flp-liste{margin-top:calc(7 * var(--e))}
  .flp-hero .flp-bs{height:calc(26 * var(--e))}
  .flp-hero .flp-bs::after,.flp-hero .flp-bt i{display:none}
  .flp-hero .flp-bt b{font-size:calc(7.5 * var(--e))}
  .flp-hero .flp-kopf{grid-template-columns:minmax(0,1fr) calc(62 * var(--e));gap:calc(10 * var(--e));padding:calc(11 * var(--e)) calc(10 * var(--e))}
  .flp-hero .flp-h1{font-size:calc(12 * var(--e))}
  .flp-hero .flp-p{display:none}
  .flp-hero .flp-nav{padding:0 calc(9 * var(--e))}
  .flp-hero .flp-nav .flp-kb{display:none}
  .flp-hero .flp-qs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flp-hero .flp-q:nth-child(3){display:none}
  .flp-hero .flp-q p{font-size:calc(7 * var(--e))}
  .flp-hero .flp-ende{grid-template-columns:minmax(0,1fr)}
  .flp-hero .flp-form{display:none}
}
@container (max-width:400px){
  .fn-dk.flp-s1,.fn-dk.flp-s2,.fn-dk.flp-s3{--e:calc(100cqw / 360);aspect-ratio:360/330}
  .flp-abs{grid-template-columns:minmax(0,1fr) calc(118 * var(--e));gap:calc(12 * var(--e));padding:calc(30 * var(--e)) calc(14 * var(--e)) calc(16 * var(--e))}
  .flp-ah{font-size:calc(15 * var(--e))}
  .flp-at .flp-p{font-size:calc(8 * var(--e))}
  .flp-rahmen,.flp-l[data-l="pc"]{width:calc(324 * var(--e))}
  .flp-rahmen{margin-left:calc(-162 * var(--e))}
  .flp-l[data-l="pc"] .flp-kopf{grid-template-columns:minmax(0,1fr) calc(104 * var(--e));gap:calc(14 * var(--e));padding:calc(16 * var(--e))}
  .flp-l[data-l="pc"] .flp-h1{font-size:calc(16 * var(--e))}
  .flp-bar3 .flp-name i{display:none}
}
@media (prefers-reduced-motion:reduce){.flp-neu,.flp-bs,.flp-geist,.flp-chip,.flp-werk,.flp-rahmen,.flp-l,.flp-sch,.flp-sch::after,.flp-seg>span{transition:none!important}}

/* Typo-Feinschliff (Typografie-Skill, 11.11.2026): nur Umbrüche in den Karten, Größen, Abstände und Laufweiten bleiben */
.flp-h1,.flp-h2{text-wrap:balance}
.flp-p,.flp-q p,.flp-hint,.flp-klein{text-wrap:pretty}
.flp-ah{font-size:calc(18.5 * var(--e))}  /* 20 → 18,5: zwei ruhige Zeilen statt drei kurzer */