/* ==========================================================================
   Verkaufs- und Inhaltsseiten – 120 Designs über CSS-Variablen
   Variablen je Design: --bg --surface --ink --muted --line --primary --on-primary
   --accent --hero --on-hero --font-h --font-b  (werden inline gesetzt)
   Körper-Klassen: L-<aufbau> B-<hintergrund> S-<form> M-sale|M-content is-dark
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--font-b);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
a{color:var(--primary);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em;color:var(--ink)}
h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
.S-sharp{--r:4px;--rb:3px;--rs:2px}
.S-soft{--r:16px;--rb:12px;--rs:8px}
.S-round{--r:26px;--rb:999px;--rs:14px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 22px}
.narrow{max-width:820px}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.small{font-size:.86rem;color:var(--muted)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:var(--surface);padding:8px 12px}
.preview-bar{background:#111;color:#fff;text-align:center;font:500 13px/1.4 system-ui,sans-serif;padding:9px 12px}
.preview-bar a{color:#9fd3ff}
:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:2px}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 1rem/1.2 var(--font-b);padding:.8em 1.3em;border-radius:var(--rb);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--primary);color:var(--on-primary);box-shadow:0 8px 22px -10px var(--primary)}
.btn-p:hover{box-shadow:0 12px 26px -10px var(--primary)}
.btn-s{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-s:hover{border-color:var(--primary);color:var(--primary)}
.btn-lg{font-size:1.08rem;padding:.95em 1.4em}
.btn-sm{font-size:.9rem;padding:.55em 1em}
.btn-block{display:flex;width:100%}

/* Kopfzeile */
.lh{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.lh-in{display:flex;align-items:center;gap:22px;min-height:68px}
.lh-logo{display:flex;align-items:center;text-decoration:none;color:var(--ink);min-width:0}
.lh-logo svg,.lh-logo img{height:40px;width:auto;max-width:260px;display:block;object-fit:contain}
.lh-title{font:700 1.15rem var(--font-h)}
.lh-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.lh-nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem;padding:.45em .8em;border-radius:var(--rb)}
.lh-nav a:hover,.lh-nav a.active{color:var(--ink);background:color-mix(in srgb,var(--primary) 10%,transparent)}
.lh-cta{margin-left:8px}
.lh-nav+.lh-cta{margin-left:0}
.lh-in>.lh-cta:nth-child(2),.lh-score+.lh-cta{margin-left:auto}
.lh-lang{display:flex;gap:2px;margin-left:6px;flex:0 0 auto}
.lh-lang a{font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--muted);text-decoration:none;padding:.35em .45em;border-radius:6px}
.lh-lang a[aria-current]{color:var(--ink);background:color-mix(in srgb,var(--primary) 12%,transparent)}
.lh-score{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:999px;background:var(--surface);white-space:nowrap;flex:0 0 auto}
.lh-score:hover{border-color:var(--primary)}
.lh-score-ring{--p:50;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) calc(var(--p)*1%),color-mix(in srgb,var(--primary) 14%,transparent) 0)}
.lh-score-ring b{width:30px;height:30px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:.78rem;font-weight:800;color:var(--ink)}
.lh-score-t{display:flex;flex-direction:column;line-height:1.15;font-size:.8rem;color:var(--muted)}
.lh-score-t small{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--primary)}
.hero-home .hero-grid{align-items:start}
.lh-burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer}
.lh-burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* Hero */
.hero{position:relative;padding:clamp(40px,7vw,96px) 0 clamp(36px,6vw,72px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:clamp(28px,5vw,64px);align-items:center}
.kicker{display:inline-flex;align-items:center;gap:.55em;font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);margin-bottom:1.1em}
.kicker .dot{width:.55em;height:.55em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
.dn{font-size:clamp(2.6rem,7.2vw,5.4rem);font-weight:800;line-height:1;letter-spacing:-.035em;margin:0 0 .35em;word-break:break-word}
.dn[data-long]{font-size:clamp(2.1rem,5.2vw,4rem)}
.dn[data-xlong]{font-size:clamp(1.7rem,4vw,3rem)}
.dn-tld{color:var(--primary)}
.lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--muted);max-width:40em;margin-bottom:1.2em}
.desc{color:var(--ink);max-width:42em;margin-bottom:1.2em}
.trust{list-style:none;margin:1.4em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.93rem;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:.45em}
.trust .ic{color:var(--primary)}

/* Hintergründe des Hero-Bereichs */
.B-gradient .hero{background:radial-gradient(1100px 520px at 85% -10%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 65%),radial-gradient(700px 420px at -10% 110%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%)}
.B-mesh .hero{background:radial-gradient(420px 320px at 12% 20%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),radial-gradient(520px 380px at 88% 30%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 70%),radial-gradient(480px 360px at 50% 110%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 70%)}
.B-grid .hero{background-image:linear-gradient(color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 1px);background-size:44px 44px;background-position:center}
.B-grid .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,var(--bg) 78%);pointer-events:none}
.B-dots .hero{background-image:radial-gradient(color-mix(in srgb,var(--primary) 28%,transparent) 1.4px,transparent 1.6px);background-size:22px 22px}
.B-dots .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 20%,transparent 60%,var(--bg) 100%);pointer-events:none}
.B-waves .hero::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;background:var(--surface);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40c240 40 480 40 720 10s480-40 720 0v80H0z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 40c240 40 480 40 720 10s480-40 720 0v80H0z'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.9}
.B-waves .hero{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 9%,var(--bg)),var(--bg))}
.hero>.wrap{position:relative;z-index:1}

/* Kaufbox */
.sc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.6vw,30px);box-shadow:0 30px 60px -35px color-mix(in srgb,var(--ink) 45%,transparent),0 2px 6px -2px color-mix(in srgb,var(--ink) 12%,transparent)}
.sc::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(90deg,var(--primary),var(--accent))}
.S-sharp .sc::before{border-radius:0}
.sc-domain{font:800 1.25rem/1.2 var(--font-h);margin:0 0 .6em;word-break:break-word}
.sc-label{display:flex;align-items:center;gap:.4em;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .2em}
.sc-price{font:800 clamp(2rem,3.4vw,2.7rem)/1.1 var(--font-h);letter-spacing:-.02em;margin:0 0 .5em;color:var(--ink)}
.sc-meta{font-size:.9rem;color:var(--muted);margin:-.2em 0 1em}
.sc-note{color:var(--muted);margin:.2em 0 1em}
.sc-alt{font-size:.9rem;color:var(--muted);margin:.8em 0 0;text-align:center}
.sc-lease{display:flex;gap:.8em;align-items:center;margin:14px 0 0;padding:12px 14px;border-radius:var(--rs);background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);text-decoration:none;color:var(--ink)}
.sc-lease .ic{color:var(--accent);width:1.6em;height:1.6em}
.sc-lease span{display:flex;flex-direction:column;line-height:1.3}
.sc-lease small{color:var(--muted);font-size:.83rem}
.sc-trust{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:.9rem;color:var(--muted)}
.sc-trust li{display:flex;gap:.55em;align-items:center}
.sc-trust .ic{color:var(--primary)}
.sc-contact{margin:16px 0 0;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.sc-contact a{display:inline-flex;gap:.35em;align-items:center;font-weight:600;text-decoration:none}
.sc-more{margin:12px 0 0;font-size:.9rem}
.sc-compact{padding:20px}
.sc-compact .sc-price{font-size:1.8rem}
details.offer{margin-top:12px}
details.offer>summary{list-style:none}
details.offer>summary::-webkit-details-marker{display:none}
details.offer[open]>summary{display:none}
.offer-body{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Angebotsformular */
.offer-body form{display:grid;gap:10px}
.offer-body .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.offer-body .field{display:flex;flex-direction:column;gap:4px}
.offer-body label{font-size:.82rem;font-weight:600;color:var(--muted)}
.offer-body input[type=text],.offer-body input[type=email],.offer-body textarea{width:100%;font:inherit;font-size:.97rem;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:var(--rs);padding:.65em .8em}
.offer-body textarea{min-height:80px;resize:vertical}
.offer-body input:focus,.offer-body textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.offer-body .check{display:flex;gap:.6em;align-items:flex-start;font-size:.8rem;font-weight:400;color:var(--muted)}
.offer-body .hp{position:absolute;left:-9999px}
.offer-body .btn-offer{background:var(--primary);color:var(--on-primary);border-radius:var(--rb);border:0;font:600 1rem var(--font-b);padding:.85em;cursor:pointer}
.offer-body .errors{background:color-mix(in srgb,#e11d48 12%,var(--surface));color:#be123c;border-radius:var(--rs);padding:10px 12px;font-size:.88rem}
.offer-body .small{font-size:.8rem}

/* Abschnitte */
.secs{padding-top:clamp(10px,3vw,30px);padding-bottom:clamp(30px,5vw,60px)}
.sec{padding:clamp(26px,4vw,48px) 0}
.sec+.sec{border-top:1px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:0}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);padding:14px 16px}
.fact dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:4px}
.fact dd{margin:0;font-weight:600;font-size:1.02rem;word-break:break-word}
.fact small{display:block;font-weight:400;color:var(--muted);font-size:.84rem;margin-top:2px}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.chips li{display:inline-flex;align-items:center;gap:.45em;padding:.5em .95em;border-radius:var(--rb);background:color-mix(in srgb,var(--primary) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,transparent);font-weight:500;font-size:.95rem}
.chips .ic{color:var(--primary);width:1em;height:1em}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.opt{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.opt h3{margin:.7em 0 .3em}
.opt p{margin:0;color:var(--muted);font-size:.95rem}
.opt-ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--rs);background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary)}
.opt-ic .ic{width:22px;height:22px}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;counter-reset:s}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps h3{margin:.1em 0 .25em}
.steps p{margin:0;color:var(--muted);font-size:.95rem}
.step-n{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--rb);background:var(--primary);color:var(--on-primary);font:800 1rem var(--font-h)}
.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);padding:0 18px}
.faq summary{cursor:pointer;list-style:none;font-weight:600;padding:15px 30px 15px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--primary);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{color:var(--muted);margin:0 0 16px}

/* Parklinks & weitere Domains */
.linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.linkgrid a{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--rs);text-decoration:none;color:var(--ink);font-weight:500}
.linkgrid a:hover{border-color:var(--primary);color:var(--primary)}
.related-list{display:flex;flex-wrap:wrap;gap:8px}
.related-list a{padding:.45em .9em;border-radius:var(--rb);border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:.93rem;background:var(--surface)}
.related-list a:hover{border-color:var(--primary);color:var(--primary)}

/* Kontakt */
.ct{padding:clamp(30px,5vw,70px) 0}
.ct-card{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(26px,4vw,48px);border-radius:calc(var(--r) + 6px);color:var(--on-hero);background:radial-gradient(600px 300px at 100% 0%,color-mix(in srgb,var(--accent) 45%,transparent),transparent 70%),linear-gradient(135deg,var(--hero),color-mix(in srgb,var(--hero) 70%,var(--primary)));box-shadow:0 40px 80px -50px var(--hero);position:relative;overflow:hidden}
.ct-card::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:40px solid color-mix(in srgb,var(--on-hero) 7%,transparent);right:-90px;bottom:-120px}
.ct-card h2{color:inherit;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ct-card p{color:color-mix(in srgb,var(--on-hero) 82%,transparent)}
.ct-badge{display:inline-flex;align-items:center;gap:.45em;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.4em .8em;border-radius:var(--rb);background:color-mix(in srgb,var(--on-hero) 14%,transparent);margin-bottom:1em}
.ct-meta{display:flex;align-items:center;gap:.5em;font-size:.9rem;margin:0}
.ct-actions{display:grid;gap:12px;position:relative;z-index:1}
.ct-btn{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);text-decoration:none;background:var(--surface);color:var(--ink);box-shadow:0 18px 40px -24px rgba(0,0,0,.6);transition:transform .15s}
.ct-btn:hover{transform:translateY(-2px)}
.ct-btn strong{display:block;font-size:1.05rem}
.ct-btn small{display:block;color:var(--muted);font-size:.86rem;overflow-wrap:anywhere}
.ct-btn>span:nth-child(2){flex:1;min-width:0}
.ct-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--rs);flex:none;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.ct-ic .ic{width:24px;height:24px}
.ct-wa .ct-ic{background:#25d366;color:#fff}
.ct-go{color:var(--muted)}

/* Schwebender Kontaktknopf */
.fab{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab-btn{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;box-shadow:0 14px 30px -10px color-mix(in srgb,var(--primary) 80%,#000)}
.fab-btn .ic{width:26px;height:26px}
.fab .fab-close,.fab.open .fab-open{display:none}
.fab.open .fab-close{display:block}
.fab-menu{display:none;flex-direction:column;gap:8px}
.fab.open .fab-menu{display:flex;animation:fade .2s}
.fab-item{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:999px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;box-shadow:0 10px 30px -12px rgba(0,0,0,.45);border:1px solid var(--line)}
.fab-wa .ic{color:#25d366}
.has-sale .fab{bottom:86px}
@media(min-width:900px){.has-sale .fab{bottom:18px}.L-dock.has-sale .fab{bottom:96px}}

/* Leiste unten (Handy; im Dock-Aufbau immer) */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s}
.mbar.show{transform:none}
.mbar-in{display:flex;align-items:center;gap:14px;max-width:1180px;margin:0 auto;padding:10px 18px}
.mbar-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.mbar-txt strong{font-family:var(--font-h);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar-txt small{color:var(--muted)}
@media(min-width:900px){.mbar{display:none}.L-dock .mbar{display:block}.L-dock body,.L-dock{padding-bottom:78px}}
.M-content .mbar{display:block}
@media(min-width:900px){.M-content:not(.L-dock):not(.L-band) .mbar{display:none}}

/* Verkaufsband über Inhalten */
.strip{background:linear-gradient(90deg,var(--hero),color-mix(in srgb,var(--hero) 75%,var(--primary)));color:var(--on-hero)}
.strip-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.strip-txt{font-size:.97rem}
.strip-txt strong{font-family:var(--font-h)}
.strip .btn-p{box-shadow:none}

/* Inhaltsseiten */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,4vw,56px);align-items:start;padding-top:clamp(24px,4vw,48px);padding-bottom:clamp(30px,5vw,60px)}
.cols-single{grid-template-columns:minmax(0,1fr);max-width:860px}
.col-side{position:sticky;top:90px}
.M-content main.narrow{padding-top:clamp(24px,4vw,48px);padding-bottom:40px}
.after-content{margin-top:36px}
.prose{font-size:1.04rem;min-width:0}
.prose h1{font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.025em}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose img{border-radius:var(--rs);height:auto}
.prose figure{margin:1.4em 0}
.prose figcaption{font-size:.88rem;color:var(--muted);margin-top:6px}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95rem;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.6em .7em;text-align:left;vertical-align:top}
.prose th{font-weight:700;background:color-mix(in srgb,var(--primary) 6%,transparent)}
.prose blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--primary);color:var(--muted);font-style:italic}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose iframe{max-width:100%;border:0;border-radius:var(--rs)}
.prose .featured{width:100%;margin-bottom:1.2em}
.posts{list-style:none;padding:0}
.posts li{padding:1em 0;border-bottom:1px solid var(--line)}
.posts .t{font:700 1.2rem var(--font-h);text-decoration:none;color:var(--ink)}
.ad-slot{margin:1.8em 0;text-align:center;min-height:90px}

/* Fußzeile */
.lf{border-top:1px solid var(--line);padding:26px 0 30px;font-size:.88rem;color:var(--muted)}
.lf-in{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap}
.lf a{color:var(--muted)}

/* ---------- Aufbau-Varianten ---------- */
/* zentriert */
.hero-center{text-align:center}
.hero-center .lead,.hero-center .desc{margin-left:auto;margin-right:auto}
.hero-center .trust{justify-content:center}
.hero-tall{padding:clamp(60px,10vw,140px) 0}
/* Reine Verkaufsseite: der Kopf darf das Angebotsfeld nicht unter die Falz druecken */
.M-sale .hero-tall{padding:clamp(32px,4.4vw,64px) 0 clamp(24px,3.4vw,44px)}
.M-sale .hero{padding-top:clamp(28px,3.8vw,56px);padding-bottom:clamp(22px,3vw,40px)}
.sc-float{margin-top:-10px;position:relative;z-index:2}
.L-center .sc,.L-minimal .sc{max-width:560px;margin:0 auto}
.L-center .secs .sec-in>h2,.L-dock .secs h2{text-align:center}

/* Seitenleiste */
.hero-plain{padding:clamp(30px,5vw,64px) 0 10px;background:none!important}
.hero-plain::before,.hero-plain::after{display:none}
.L-sidebar .col-side,.L-rail .rail .sc{position:sticky;top:90px}

/* Magazin */
.hero-mag{text-align:left;border-bottom:1px solid var(--line)}
.hero-mag .dn{font-size:clamp(3rem,9vw,7rem)}
.sc-band{background:var(--hero);color:var(--on-hero);padding:26px 0}
.sc-band .sc{display:grid;grid-template-columns:auto 1fr auto;gap:10px 30px;align-items:center;max-width:none}
.sc-band .sc>*{margin:0}
.sc-band .sc-trust,.sc-band .sc-contact,.sc-band details.offer,.sc-band .sc-lease{grid-column:1/-1}
.secs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.secs-grid .sec+.sec{border-top:0}
.secs-grid .sec{border-bottom:1px solid var(--line)}
.secs-grid .sec-faq,.secs-grid .sec-options,.secs-grid .sec-steps{grid-column:1/-1}

/* Karte */
.card-page{padding:clamp(20px,5vw,70px) 16px;background:var(--bg)}
.B-dots .card-page{background-image:radial-gradient(color-mix(in srgb,var(--primary) 22%,transparent) 1.4px,transparent 1.6px);background-size:22px 22px}
.B-grid .card-page{background-image:linear-gradient(color-mix(in srgb,var(--line) 80%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 80%,transparent) 1px,transparent 1px);background-size:40px 40px}
.B-gradient .card-page,.B-mesh .card-page,.B-waves .card-page,.B-plain .card-page{background:radial-gradient(900px 500px at 10% 0%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 60%),radial-gradient(800px 500px at 100% 100%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),var(--bg)}
.card-shell{max-width:1080px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 8px);padding:clamp(22px,4vw,56px);box-shadow:0 50px 100px -60px color-mix(in srgb,var(--ink) 60%,transparent)}
.card-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:40px;align-items:center;padding-bottom:20px}
.card-shell .sc{box-shadow:none;background:var(--bg)}

/* Farbband */
.hero-band{background:var(--hero)!important;color:var(--on-hero)}
.hero-band::before,.hero-band::after{display:none}
.hero-band .dn,.hero-band h1{color:var(--on-hero)}
.hero-band .dn-tld{color:var(--accent)}
.hero-band .lead,.hero-band .trust,.hero-band .desc{color:color-mix(in srgb,var(--on-hero) 80%,transparent)}
.hero-band .kicker{color:var(--accent)}
.hero-band .trust .ic{color:var(--accent)}
.secs-alt .sec{padding-left:0;padding-right:0}
.secs-alt .sec>.sec-in{max-width:1180px;margin:0 auto;padding:0 22px}
.secs-alt .sec:nth-child(even){background:var(--surface)}
.secs-alt .sec+.sec{border-top:0}

/* Minimal */
.L-minimal .dn{font-weight:700;letter-spacing:-.04em}
.L-minimal .sc{box-shadow:none;border-width:2px}
.L-minimal .sc::before{display:none}
.L-minimal .fact,.L-minimal .opt,.L-minimal .faq details{background:transparent}

/* Dock */
.sc-wide .sc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 30px;align-items:center}
.sc-wide .sc>*{grid-column:1}
.sc-wide .sc>.btn,.sc-wide .sc>details,.sc-wide .sc>.sc-lease{grid-column:2}
.sc-wide .sc-trust,.sc-wide .sc-contact{grid-column:1/-1!important}

/* Leiste */
.rail-wrap{display:grid;grid-template-columns:360px minmax(0,1fr);min-height:calc(100vh - 68px)}
.rail{background:var(--hero);padding:32px 26px;border-right:1px solid var(--line)}
.rail .sc{top:100px}
.rail-main{padding:0 clamp(20px,4vw,64px)}
.rail-main .sec-links .wrap,.rail-main .sec-related .wrap{padding:0}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;padding-top:26px;padding-bottom:40px}
.bento>.tile,.bento>.sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);margin:0}
.bento>.sec+.sec{border-top:1px solid var(--line)}
.tile-hero{grid-column:span 4;position:relative;overflow:hidden}
.tile-sc{grid-column:span 2;padding:0!important;border:0!important;background:none!important}
.tile-sc .sc{height:100%}
.bento>.sec-facts{grid-column:span 4}
.bento>.sec-uses{grid-column:span 2}
.bento>.sec-options,.bento>.sec-steps,.bento>.sec-faq{grid-column:span 6}
.bento>.sec-uses:first-of-type{grid-column:span 2}
.bento .fact{background:var(--bg)}
.B-mesh .tile-hero,.B-gradient .tile-hero{background:radial-gradient(500px 300px at 100% 0%,color-mix(in srgb,var(--primary) 18%,transparent),transparent 70%),var(--surface)}

/* Dunkle Designs */
.is-dark .sc,.is-dark .ct-btn,.is-dark .fab-item{box-shadow:0 30px 60px -30px #000}
.is-dark .ct-card{background:radial-gradient(600px 300px at 100% 0%,color-mix(in srgb,var(--primary) 35%,transparent),transparent 70%),linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 60%,var(--primary)));border:1px solid var(--line)}

/* ---------- Mobil ---------- */
@media(max-width:1000px){
  .rail-wrap{grid-template-columns:1fr}
  .rail{border-right:0;order:2}
  .rail .sc{position:static}
  .bento{grid-template-columns:1fr}
  .bento>*{grid-column:1/-1!important}
}
@media(max-width:900px){
  body{font-size:16px}
  .hero-grid,.card-top,.cols,.ct-card,.sc-wide .sc,.sc-band .sc{grid-template-columns:1fr}
  .sc-wide .sc>*,.sc-band .sc>*{grid-column:1!important}
  .col-side{position:static}
  .secs-grid{grid-template-columns:1fr}
  .lh-burger{display:block}
  .lh-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;padding:10px 16px}
  .lh-nav.open{display:flex}
  .lh-in{gap:10px}
  .lh-logo{flex:0 1 auto}
  .lh-logo svg,.lh-logo img{max-width:100%}
  .lh-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .lh-nav a{padding:.7em .4em;font-size:1rem}
  .lh-score{padding:3px;gap:0;border:0;background:none}.lh-score-t{display:none}
  .lh-in .lh-cta{margin-left:auto}
  .lh-burger~.lh-cta{display:none}
  .lh-lang{margin-left:auto}
  .lh-lang~.lh-burger,.lh-burger{order:9}
  .lh-lang+.lh-cta{margin-left:0}
  .lh-lang~.lh-burger{margin-left:0}
  .M-sale{padding-bottom:72px}
  .M-content.has-sale{padding-bottom:72px}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .lh-logo svg,.lh-logo img{height:34px;max-width:200px}
  .offer-body .row2{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fact{padding:11px 12px}
  .fact dd{font-size:.95rem}
  .hero .trust{display:none}
  .sec{padding:24px 0}
  .opts{gap:10px}
  .opt{padding:16px;display:grid;grid-template-columns:44px 1fr;gap:0 12px}
  .opt h3{margin:.1em 0 .2em}
  .opt p{grid-column:2}
  .opt-ic{grid-row:span 2}
  .strip-in{justify-content:center;text-align:center}
  .lh-lang{margin-left:auto;gap:0}.lh-lang a{padding:.35em .3em}
  .lh-lang+.lh-burger,.lh-lang~.lh-burger{margin-left:0}
}
@media print{.lh,.fab,.mbar,.strip{display:none}}

/* Startseite mit Inhalt: Verkaufskopf + Inhalt + Reiter */
.hero-home{padding-bottom:clamp(30px,5vw,60px)}
.content-home{padding-top:clamp(10px,3vw,30px);padding-bottom:clamp(20px,4vw,40px)}
.content-card{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:clamp(22px,4vw,54px);box-shadow:0 30px 60px -45px color-mix(in srgb,var(--ink) 40%,transparent)}
.content-card .prose>*:first-child{margin-top:0}
.saletabs{padding:clamp(30px,5vw,64px) 0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--primary) 6%,transparent))}
.st-head{text-align:center;margin-bottom:22px}
.st-head .kicker{justify-content:center}
.tab-list{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.tab-list button{font:600 .95rem var(--font-b);color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:var(--rb);padding:.65em 1.15em;cursor:pointer}
.tab-list button[aria-selected=true]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.tabs:not(.js) .tab-list{display:none}
.tabs.js .tab-panel[data-hidden]{display:none}
.tabs.js .tab-title{display:none}
.tabs:not(.js) .tab-panel{margin-bottom:34px}
.tab-panel{animation:fade .25s ease}
.sec-lead{color:var(--muted);max-width:52em}
.saletabs .sec-lead{margin-left:auto;margin-right:auto;text-align:center}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:10px}
.plan{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s}
.plan:hover{transform:translateY(-2px);border-color:var(--primary)}
.plan-hi{border:2px solid var(--primary);box-shadow:0 20px 40px -28px var(--primary)}
.plan-m{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.plan-p{font:800 1.9rem/1.1 var(--font-h)}
.plan-p small{font:500 .9rem var(--font-b);color:var(--muted);margin-left:4px}
.plan-d{font-size:.86rem;color:var(--muted)}
.plan-cta{margin-top:6px;font-weight:600;color:var(--primary);display:flex;align-items:center;gap:.4em}
@media(max-width:560px){.tab-list{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.tab-list button{white-space:nowrap}.content-card{padding:18px}}

/* ---------- Inhalte je Aufbau ---------- */
.cb{padding-top:clamp(10px,3vw,30px);padding-bottom:clamp(20px,4vw,50px)}
/* Inhaltsverzeichnis */
.cb-toc{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.toc{position:sticky;top:92px;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--line);padding-left:4px}
.toc-t{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 12px}
.toc a{color:var(--muted);text-decoration:none;font-size:.93rem;padding:6px 12px;border-radius:var(--rs);line-height:1.35}
.toc a:hover{color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,transparent)}
.toc-sc{margin-top:18px}
.toc-body{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,4vw,48px)}
.toc-sec{scroll-margin-top:90px;padding-top:6px}
.toc-sec+.toc-sec{border-top:1px dashed var(--line);margin-top:26px;padding-top:26px}
.L-dock .toc{border-left:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 8px}
.L-rail .toc{border-left:0}
/* Kacheln */
.cb-h1{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.tile-intro{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,36px);margin-bottom:18px;font-size:1.08rem}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tiles-bento{grid-template-columns:repeat(3,minmax(0,1fr))}
.ctile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,32px);overflow:hidden;font-size:.98rem}
.ctile h2{margin-top:0;font-size:clamp(1.2rem,1.8vw,1.5rem)}
.ctile-n{position:absolute;right:16px;top:8px;font:800 3.2rem/1 var(--font-h);color:color-mix(in srgb,var(--primary) 12%,transparent)}
.ctile-wide{grid-column:1/-1}
.tiles-magazine .ctile{border-top:4px solid var(--primary);border-radius:0 0 var(--r) var(--r)}
.tiles-magazine .ctile:nth-child(3n+2){border-top-color:var(--accent)}
.tiles-bento .ctile:first-child{grid-column:span 2;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface))}
/* Streifen */
.stripe-intro{padding-bottom:20px;font-size:1.08rem}
.stripe{padding:clamp(28px,5vw,64px) 0}
.stripe:nth-child(odd){background:var(--surface)}
.stripe:nth-child(even){background:color-mix(in srgb,var(--primary) 5%,var(--bg))}
.stripe-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(20px,4vw,60px);align-items:start}
.stripe-t{position:sticky;top:92px;font-size:clamp(1.4rem,2.4vw,2rem);margin:0}
.stripe-t span{display:block;font:800 .9rem var(--font-b);letter-spacing:.12em;color:var(--primary);margin-bottom:.6em}
.stripe-b>*:first-child{margin-top:0}
.L-card .stripe:nth-child(odd){background:transparent}
.L-card .stripe-in{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,3vw,40px);max-width:1080px}
.L-card .stripe{padding:14px 0}
/* Kapitel */
.cb-chapters{padding-top:clamp(20px,4vw,50px)}
.chapter{margin-top:clamp(36px,6vw,70px);padding-top:clamp(20px,3vw,30px);border-top:1px solid var(--ink)}
.chapter-n{font:300 clamp(2.4rem,6vw,4rem)/1 var(--font-h);color:var(--primary);margin:0 0 .2em;letter-spacing:-.03em}
.chapter h2{margin-top:0;font-size:clamp(1.6rem,3vw,2.3rem)}
@media(max-width:900px){
  .cb-toc{grid-template-columns:1fr}
  .toc{position:static;flex-direction:row;flex-wrap:wrap;border-left:0;padding:0;gap:6px}
  .toc-t{width:100%;margin-left:0}
  .toc a{border:1px solid var(--line);font-size:.85rem;padding:5px 10px}
  .tiles,.tiles-bento{grid-template-columns:1fr}
  .tiles-bento .ctile:first-child{grid-column:auto}
  .stripe-in{grid-template-columns:1fr}
  .stripe-t{position:static}
}

/* Vertrauenssiegel */
.sc-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.sc-badges .bdg{display:inline-flex;align-items:center;gap:.35em;font-size:.74rem;font-weight:700;line-height:1;padding:.42em .7em;border-radius:99px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);text-decoration:none;white-space:nowrap}
.sc-badges .bdg .ic{width:1.05em;height:1.05em}
.sc-badges .bdg-rare{background:color-mix(in srgb,#b45309 12%,transparent);color:#b45309}
.sc-badges .bdg-trustpilot{background:color-mix(in srgb,#00b67a 14%,transparent);color:#007a52}
.sc-band .sc-badges,.sc-wide .sc-badges{grid-column:1/-1}

/* Namensgeschichte */
.nm-letters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0}
.nm-l{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.nm-big{grid-row:1/3;font:800 2.6rem/1 var(--font-h);color:var(--primary);min-width:1ch;text-align:center}
.nm-sp{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.nm-w{font-size:.93rem;line-height:1.45}
.nm-ex{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.nm-ex span{font-family:var(--font-h);font-weight:700;padding:.45em .9em;border-radius:var(--rb);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ink)}
.nm-pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0}
.nm-pts div{border-left:3px solid var(--primary);padding:2px 0 2px 12px}
.nm-pts dt{font-weight:800;font-family:var(--font-h)}
.nm-pts dd{margin:2px 0 0;color:var(--muted);font-size:.95rem}
/* Variante 2: große Buchstaben-Kacheln */
.sec-name.sec-v2 .nm-letters{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sec-name.sec-v2 .nm-l{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--primary);color:var(--on-primary);border:0}
.sec-name.sec-v2 .nm-big{font-size:3.4rem;color:var(--on-primary)}
.sec-name.sec-v2 .nm-sp{color:color-mix(in srgb,var(--on-primary) 75%,transparent)}
.sec-name.sec-v2 .nm-pts{grid-template-columns:1fr}
/* Variante 3: redaktionell, Zitat */
.sec-name.sec-v3 .sec-lead{font-family:var(--font-h);font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.45;border-left:4px solid var(--accent);padding-left:18px}
.sec-name.sec-v3 .nm-letters{grid-template-columns:1fr}
.sec-name.sec-v3 .nm-l{background:transparent;border:0;border-bottom:1px dashed var(--line);border-radius:0;padding:10px 0}
.sec-name.sec-v3 .nm-pts{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.sec-name.sec-v3 .nm-pts div{border-left:0;border-top:2px solid var(--accent);padding:10px 0 0}

/* Fakten: 2 = Tabelle, 3 = große Kennzahlen */
.sec-facts.sec-v2 .facts{grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sec-facts.sec-v2 .fact{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:12px;border:0;border-radius:0;border-bottom:1px solid var(--line);align-items:baseline}
.sec-facts.sec-v2 .fact:last-child{border-bottom:0}
.sec-facts.sec-v2 .fact:nth-child(odd){background:color-mix(in srgb,var(--primary) 4%,var(--surface))}
.sec-facts.sec-v3 .facts{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.sec-facts.sec-v3 .fact{background:transparent;border:0;border-top:3px solid var(--primary);border-radius:0;padding:12px 0}
.sec-facts.sec-v3 .fact dd{font:800 1.25rem/1.25 var(--font-h)}
/* Einsatzideen: 2 = Kacheln, 3 = Liste mit Häkchen */
.sec-uses.sec-v2 .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.sec-uses.sec-v2 .chips li{border-radius:var(--rs);padding:1em;font-weight:700;background:var(--surface)}
.sec-uses.sec-v3 .chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 20px}
.sec-uses.sec-v3 .chips li{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.6em 0}
/* Kaufwege: 2 = Zeilen, 3 = farbige Kacheln */
.sec-options.sec-v2 .opts{grid-template-columns:1fr;gap:0}
.sec-options.sec-v2 .opt{display:grid;grid-template-columns:auto 1fr;column-gap:16px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:16px 0}
.sec-options.sec-v2 .opt-ic{grid-row:1/3}
.sec-options.sec-v2 .opt h3{margin:0}
.sec-options.sec-v3 .opt{background:color-mix(in srgb,var(--primary) 8%,var(--surface));border:0;text-align:center}
.sec-options.sec-v3 .opt-ic{width:56px;height:56px;border-radius:50%}
/* Ablauf: 2 = Zeitstrahl, 3 = Karten mit großen Ziffern */
.sec-steps.sec-v2 .steps{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));position:relative}
.sec-steps.sec-v2 .steps li{flex-direction:column;gap:10px;position:relative}
.sec-steps.sec-v2 .steps li::after{content:"";position:absolute;top:19px;left:48px;right:-10px;height:2px;background:var(--line)}
.sec-steps.sec-v2 .steps li:last-child::after{display:none}
.sec-steps.sec-v3 .steps li{flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.sec-steps.sec-v3 .step-n{width:auto;height:auto;background:transparent;color:var(--primary);font-size:2.4rem;line-height:1}
/* Fragen: 2 = alle offen in zwei Spalten, 3 = nummeriert ohne Rahmen */
.sec-faq.sec-v2 .faq{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.sec-faq.sec-v2 .faq summary::after{display:none}
.sec-faq.sec-v2 .faq summary{pointer-events:none;padding-right:0}
.sec-faq.sec-v3 .faq{counter-reset:q;gap:0}
.sec-faq.sec-v3 .faq details{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0}
.sec-faq.sec-v3 .faq summary::before{counter-increment:q;content:counter(q,decimal-leading-zero) " ";color:var(--primary);font-family:var(--font-h);margin-right:.4em}
/* Kaufbox: echtes Interesse, Zahlungswege, Antwortzeit */
.sc-interest{display:flex;align-items:center;gap:.5em;font-size:.86rem;color:var(--muted);margin:8px 0 0}
.sc-interest .pulse{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:pl 2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 8px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
@media (prefers-reduced-motion:reduce){.sc-interest .pulse{animation:none}}
.sc-pay{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.sc-pay span{font-size:.74rem;font-weight:700;padding:.35em .6em;border:1px solid var(--line);border-radius:6px;color:var(--muted)}
.sc-reply{display:flex;align-items:center;gap:.35em;width:100%;color:var(--muted);font-size:.8rem;margin-bottom:4px}
.sc-reply .ic{width:1em;height:1em}
@media (max-width:640px){.sec-facts.sec-v2 .fact{grid-template-columns:1fr;gap:2px}.sec-steps.sec-v2 .steps li::after{display:none}}
.sc-band .sc-pay,.sc-band .sc-interest,.sc-wide .sc-pay,.sc-wide .sc-interest{grid-column:1/-1}

/* ═════════════ Seitentypen (Designs 121–264) ═════════════ */
.A{display:block}
.ab{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px}
.ab-l{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted)}
.ab-p{font:800 clamp(1.6rem,3.4vw,2.4rem)/1 var(--font-h);color:var(--ink)}
.ab-lease{font-weight:600;text-decoration:none;color:var(--primary);border-bottom:1px dashed currentColor}
.ab-btns{display:flex;gap:10px;flex-wrap:wrap}
.ab-stack{flex-direction:column;align-items:flex-start}
.ab-center{justify-content:center;text-align:center}

/* 1 Plakat */
.A-billboard .bb-hero{min-height:calc(100vh - 70px);display:flex;flex-direction:column;justify-content:center;padding:6vw 4vw;background:radial-gradient(120% 90% at 10% 0%,color-mix(in srgb,var(--primary) 26%,transparent),transparent 60%),radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),var(--bg);overflow:hidden}
.bb-kicker{font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;color:var(--primary);margin:0}
.bb-name{font:900 clamp(3.4rem,17vw,15rem)/.85 var(--font-h);letter-spacing:-.06em;margin:.1em 0;word-break:break-all;color:var(--ink)}
.bb-name[data-long]{font-size:clamp(2.6rem,10vw,9rem)}
.bb-name span{color:var(--primary)}
.bb-lead{font-size:clamp(1.1rem,2vw,1.5rem);max-width:40ch;color:var(--muted);margin:0}
.bb-ticker{background:var(--ink);color:var(--bg);overflow:hidden;white-space:nowrap;padding:14px 0;font:800 1.2rem var(--font-h);text-transform:uppercase;letter-spacing:.05em}
.bb-track{display:inline-flex;gap:3rem;animation:bbt 28s linear infinite;padding-left:3rem}
.bb-track span::after{content:"✦";margin-left:3rem;color:var(--accent)}
@keyframes bbt{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bb-track{animation:none}}
.bb-story{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(20px,5vw,70px);padding-top:clamp(40px,7vw,90px);padding-bottom:30px}
.bb-story h2{font:800 clamp(1.8rem,4vw,3.2rem)/1.05 var(--font-h);margin:0;letter-spacing:-.02em}
.bb-story-b p{font-size:1.15rem;line-height:1.7}
.bb-letters{display:grid;gap:8px;margin-top:16px}
.bb-letters span{display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding-top:8px;color:var(--muted)}
.bb-letters b{font:900 2rem var(--font-h);color:var(--primary);min-width:1.2em}
.bb-sc{padding-top:20px}
@media (max-width:760px){.bb-story{grid-template-columns:1fr}}

/* 2 Geteilte Seite */
.A-splitscreen{display:grid;grid-template-columns:minmax(320px,42%) 1fr;min-height:100vh}
.ss-left{background:var(--hero);color:var(--on-hero);position:relative}
.ss-left-in{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,5vw,70px)}
.ss-left .ab-l,.ss-left .ab-p{color:var(--on-hero)}
.ss-left .btn-s{color:var(--on-hero);border-color:color-mix(in srgb,var(--on-hero) 40%,transparent)}
.ss-left .ab-lease{color:var(--accent)}
.ss-logo{max-width:220px;margin-bottom:26px}
.ss-logo svg,.ss-logo img{max-height:52px;width:auto}
.ss-kicker{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;opacity:.8;margin:0}
.ss-name{font:800 clamp(2.4rem,5.4vw,4.6rem)/1 var(--font-h);letter-spacing:-.03em;margin:.2em 0;overflow-wrap:anywhere}
.ss-name span{color:var(--accent)}
.ss-lead{font-size:1.1rem;opacity:.9;max-width:34ch}
.ss-trust{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:8px;font-size:.92rem;opacity:.9}
.ss-trust li{display:flex;gap:.5em;align-items:center}
.ss-right{padding:clamp(24px,4vw,56px);min-width:0}
.ss-intro{max-width:760px;margin-bottom:28px}
.ss-big{font:700 clamp(1.4rem,2.6vw,2rem)/1.25 var(--font-h);margin:0 0 .6em}
.ss-sc{max-width:760px}
.A-splitscreen .secs .sec-in,.A-splitscreen .cb{max-width:none;padding-left:0;padding-right:0}
.A-splitscreen .ct .wrap{padding:0}
@media (max-width:900px){.A-splitscreen{grid-template-columns:1fr}.ss-left-in{position:static;min-height:0}}

/* 3 Marken-Showroom */
.A-showroom .sr-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,60px);align-items:center;padding-top:clamp(36px,6vw,80px);padding-bottom:30px}
.sr-kicker{display:inline-block;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-weight:700;font-size:.8rem;padding:.35em .8em;border-radius:99px;margin:0}
.sr-name{font:800 clamp(2.4rem,5vw,4.2rem)/1.02 var(--font-h);letter-spacing:-.03em;margin:.3em 0 .2em;overflow-wrap:anywhere}
.sr-lead{font-size:1.2rem;font-weight:600;margin:0 0 .6em}
.sr-desc{color:var(--muted)}
.sr-stage{position:relative;height:420px}
.sr-card{position:absolute;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.35);border-radius:14px}
.sr-bcard{width:330px;height:190px;left:0;top:40px;transform:rotate(-6deg);display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.sr-bcard-logo svg,.sr-bcard-logo img{max-height:48px;width:auto}
.sr-bcard-l{display:grid;font-size:.85rem}
.sr-bcard-l small{color:var(--muted)}
.sr-app{right:20px;top:0;width:130px;padding:18px;text-align:center;transform:rotate(5deg)}
.sr-appicon{width:88px;height:88px;border-radius:22px;overflow:hidden;margin:0 auto 8px;display:grid;place-items:center;background:var(--primary)}
.sr-appicon svg{width:100%;height:100%}
.sr-sign{right:0;bottom:10px;width:280px;height:110px;display:grid;place-items:center;background:var(--primary);border:0;transform:rotate(-2deg)}
.sr-sign span{font:900 2.8rem var(--font-h);letter-spacing:.12em;color:var(--on-primary)}
.sr-kit{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;padding-top:10px;padding-bottom:30px}
.sr-browser{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.sr-bar,.tm-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:color-mix(in srgb,var(--ink) 6%,var(--surface));font-size:.8rem;color:var(--muted)}
.sr-bar i,.tm-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.sr-bar i:nth-child(2),.tm-bar i:nth-child(2){background:#febc2e}
.sr-bar i:nth-child(3),.tm-bar i:nth-child(3){background:#28c840}
.sr-bar span,.tm-bar span{margin-left:10px}
.sr-site{padding:22px;display:grid;gap:12px}
.sr-site-logo svg,.sr-site-logo img{max-height:34px;width:auto}
.sr-site-h{font:800 1.3rem var(--font-h)}
.sr-site-lines{display:grid;gap:7px}
.sr-site-lines i{height:8px;border-radius:4px;background:var(--line)}
.sr-site-lines i:nth-child(2){width:80%}
.sr-site-lines i:nth-child(3){width:60%}
.sr-site-btn{width:120px;height:32px;border-radius:var(--rb);background:var(--primary)}
.sr-palette,.sr-mail{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--surface)}
.sr-palette p,.sr-mail p{margin:0 0 10px;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sr-palette span{display:inline-block;width:44px;height:44px;border-radius:50%;margin-right:6px;border:1px solid var(--line)}
.sr-palette .sr-type{margin-top:14px;font:700 1.5rem var(--font-h);text-transform:none;letter-spacing:0;color:var(--ink)}
.sr-mail code{display:block;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.92rem}
@media (max-width:900px){.A-showroom .sr-hero,.sr-kit{grid-template-columns:1fr}.sr-stage{height:360px;transform:scale(.85);transform-origin:left top}}

/* 4 Journal */
.A-editorial{background:var(--bg)}
.ed-mast{display:flex;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:10px;border-bottom:4px double var(--ink);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);flex-wrap:wrap}
.ed-mast strong{color:var(--ink);font-family:var(--font-h);letter-spacing:.14em}
.ed-head{text-align:center;padding-top:clamp(28px,5vw,60px);padding-bottom:20px;border-bottom:1px solid var(--line)}
.ed-rubric{font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;margin:0}
.ed-title{font:800 clamp(2.2rem,5.5vw,4.6rem)/1.02 var(--font-h);margin:.2em auto;max-width:20ch;letter-spacing:-.02em}
.ed-sub{font-style:italic;color:var(--muted);font-size:1.15rem}
.ed-body{display:grid;grid-template-columns:1fr 340px;gap:40px;padding-top:30px;padding-bottom:30px}
.ed-cols{columns:2 300px;column-gap:34px;column-rule:1px solid var(--line);font-size:1.05rem;line-height:1.75}
.ed-cols p{margin:0 0 1em;break-inside:avoid-column}
.ed-drop::first-letter{float:left;font:900 4.6rem/.8 var(--font-h);padding:6px 10px 0 0;color:var(--primary)}
.ed-quote{margin:0 0 1em;padding:14px 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);font:italic 700 1.4rem/1.3 var(--font-h);break-inside:avoid}
.ed-ad{border:2px solid var(--ink);padding:16px;align-self:start;position:sticky;top:90px}
.ed-ad-t{margin:0;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;text-align:center;border-bottom:1px solid var(--ink);padding-bottom:6px}
.ed-ad-n{font:900 1.8rem var(--font-h);text-align:center;margin:.3em 0;overflow-wrap:anywhere}
.ed-ad .sc{box-shadow:none;border:0;padding:0;background:transparent}
@media (max-width:900px){.ed-body{grid-template-columns:1fr}.ed-ad{position:static}}

/* 5 Urkunde */
.A-certificate{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--primary) 4%,transparent) 0 2px,transparent 2px 14px),var(--bg)}
.ct-paper{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.ct-frame{max-width:900px;margin:0 auto;background:var(--surface);padding:clamp(28px,6vw,70px);text-align:center;border:14px solid transparent;border-image:repeating-linear-gradient(45deg,var(--primary) 0 6px,var(--accent) 6px 12px) 14;box-shadow:0 30px 80px -40px rgba(0,0,0,.4);position:relative}
.ct-frame::before{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--primary) 50%,transparent);pointer-events:none}
.ct-cap{letter-spacing:.35em;text-transform:uppercase;font-size:.8rem;color:var(--primary);margin:0}
.ct-intro{font-style:italic;color:var(--muted);margin:1.4em 0 .2em}
.ct-name{font:700 clamp(2.4rem,6vw,4.8rem)/1.05 var(--font-h);margin:0;overflow-wrap:anywhere}
.ct-lead{font-size:1.1rem;color:var(--muted);max-width:44ch;margin:.8em auto 1.6em}
.ct-lines{display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;text-align:left;max-width:640px;margin:0 auto}
.ct-lines div{border-bottom:1px dotted var(--muted);padding-bottom:4px;display:flex;justify-content:space-between;gap:10px}
.ct-lines dt{color:var(--muted);font-size:.85rem}
.ct-lines dd{margin:0;font-weight:600;text-align:right}
.ct-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:36px}
.ct-sign{display:grid;border-top:1px solid var(--ink);padding-top:6px;min-width:150px}
.ct-sign span{font-family:var(--font-h);font-style:italic}
.ct-sign small{color:var(--muted);font-size:.75rem}
.ct-seal{width:120px;height:120px;transform:rotate(-12deg);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.ct-seal text{font-family:var(--font-b)}
.ct-buy{padding-top:10px}
.ct-content .content-card{border:6px double var(--primary)}
@media (max-width:640px){.ct-lines{grid-template-columns:1fr}.ct-foot{flex-direction:column}}

/* 6 Terminal */
.A-terminal{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.A-terminal .tm{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.tm-win,.tm-readme{border-radius:12px;overflow:hidden;background:#0d1117;color:#e6edf3;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);border:1px solid #30363d}
.tm-win .tm-bar,.tm-readme .tm-bar{background:#161b22;color:#8b949e}
.tm-body{padding:clamp(18px,3vw,34px);font-size:clamp(.9rem,1.4vw,1.05rem);line-height:1.7}
.tm-body p{margin:0 0 .4em}
.tm-cmd{color:#7ee787}
.tm-cmd::before{content:"";}
.tm-out{color:#c9d1d9}
.tm-k{color:#79c0ff}
.tm-name{font:800 clamp(2rem,6vw,4.4rem)/1.1 ui-monospace,Menlo,monospace;color:#fff;margin:.2em 0;overflow-wrap:anywhere}
.tm-cur{display:inline-block;width:.55em;height:.9em;background:#7ee787;margin-left:.1em;vertical-align:-.08em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tm-cur{animation:none}}
.tm-price{font-size:1.6rem;color:#ffa657;font-weight:700}
.tm-price span{font-size:1rem;color:#8b949e;font-weight:400}
.tm-actions .ab{margin-top:14px}
.tm-actions .ab-l,.tm-actions .ab-p{display:none}
.A-terminal .btn{font-family:inherit;border-radius:6px}
.A-terminal .btn-p::before{content:"$ ";opacity:.7}
.A-terminal .btn-s{color:#e6edf3;border-color:#30363d}
.A-terminal .ab-lease{color:#79c0ff}
.tm-readme{margin-top:24px;border-radius:12px 12px 0 0;margin-bottom:-2px}
.tm-sc{padding-top:10px}

/* 7 Luxus */
body.L-luxury{--ink:#f4efe6;--muted:#a79f92;--line:#2a2724;--surface:#121110;--bg:#0a0a0a;--hero:#0a0a0a;--on-hero:#f4efe6;background:#0a0a0a;color:#f4efe6}
.A-luxury{background:#0a0a0a;color:#f4efe6}
.lx-hero{min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;background:radial-gradient(60% 50% at 50% 40%,color-mix(in srgb,var(--primary) 16%,transparent),transparent 70%)}
.lx-kicker{letter-spacing:.5em;text-transform:uppercase;font-size:.75rem;color:var(--primary);margin:0}
.lx-rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--primary),transparent);margin:26px auto}
.lx-name{font:400 clamp(2.4rem,7vw,6rem)/1.05 var(--font-h);letter-spacing:.14em;text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.lx-lead{font-style:italic;color:var(--muted);font-size:1.15rem;max-width:40ch}
.lx-price{font:400 1.8rem var(--font-h);letter-spacing:.2em;color:var(--primary);margin:.4em 0 0}
.A-luxury .ab-l,.A-luxury .ab-p{display:none}
.A-luxury .btn{border-radius:0;letter-spacing:.2em;text-transform:uppercase;font-size:.85rem}
.A-luxury .btn-s{color:var(--ink);border-color:var(--primary)}
.lx-story{text-align:center;font-size:1.2rem;line-height:1.9;color:var(--muted);padding-bottom:30px}
.A-luxury .sc,.A-luxury .fact,.A-luxury .opt,.A-luxury .faq details,.A-luxury .nm-l{background:#121110;border-color:#2a2724;color:var(--ink)}
.A-luxury .sec h2{font-weight:400;letter-spacing:.12em;text-transform:uppercase;text-align:center}

/* 8 Bauhaus */
.A-bauhaus .bh-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-top:clamp(36px,6vw,80px);padding-bottom:40px}
.bh-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.bh-s{aspect-ratio:1;display:grid;place-items:center;font:900 clamp(2rem,5vw,4rem) var(--font-h);color:var(--on-primary)}
.bh-s1{background:var(--primary);border-radius:50%}
.bh-s2{background:var(--ink);color:var(--bg)}
.bh-s3{background:var(--accent);clip-path:polygon(50% 0,100% 100%,0 100%);padding-top:30%}
.bh-s4{background:var(--hero);color:var(--on-hero);border-radius:0 50% 0 50%}
.bh-name{font:900 clamp(2.6rem,6vw,5rem)/.95 var(--font-h);text-transform:uppercase;margin:0;overflow-wrap:anywhere}
.bh-name span{display:block;color:var(--primary);font-size:.5em}
.bh-lead{font-size:1.15rem;border-left:8px solid var(--accent);padding-left:14px}
.bh-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-bottom:30px}
.bh-b{padding:28px}
.bh-b1{grid-column:span 2;background:var(--ink);color:var(--bg)}
.bh-b1 h2{color:var(--bg);margin-top:0}
.bh-b2{grid-column:span 2;grid-row:span 2;background:var(--surface);border:4px solid var(--ink)}
.bh-b2 .sc{border:0;box-shadow:none;padding:0}
.bh-b3{background:var(--primary);color:var(--on-primary)}
.bh-b4{background:var(--accent);color:#111}
.bh-b h3{margin-top:0}
@media (max-width:900px){.A-bauhaus .bh-hero{grid-template-columns:1fr}.bh-blocks{grid-template-columns:1fr}.bh-b1,.bh-b2{grid-column:auto}}

/* 9 Kennzahlen */
.A-dashboard{background:color-mix(in srgb,var(--ink) 4%,var(--bg))}
.A-dashboard .db{padding-top:clamp(28px,5vw,56px);padding-bottom:20px}
.db-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.db-k{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--primary);font-weight:700}
.db-name{font:800 clamp(2.2rem,5vw,3.8rem)/1 var(--font-h);margin:.15em 0;letter-spacing:-.03em;overflow-wrap:anywhere}
.db-lead{margin:0;color:var(--muted)}
.db-head .ab{margin:0}
.db-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.db-t{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:4px;align-content:start}
.db-t small{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.db-t b{font:800 2.2rem/1.1 var(--font-h);color:var(--ink)}
.db-t span{font-size:.85rem;color:var(--muted)}
.db-t p{margin:0}
.db-hi{background:var(--primary);border:0}
.db-hi small,.db-hi b,.db-hi span{color:var(--on-primary)}
.db-wide{grid-column:span 2}
.db-spark{width:100%;height:70px}
.db-sc{padding-top:10px}
@media (max-width:760px){.db-grid{grid-template-columns:1fr 1fr}.db-wide{grid-column:span 2}}

/* 10 Kapitel */
html:has(.A-chapters){scroll-snap-type:y proximity}
.ch{min-height:100vh;display:flex;align-items:center;scroll-snap-align:start;padding:60px 0;position:relative}
.ch-short{min-height:60vh}
.ch1{background:var(--hero);color:var(--on-hero)}
.ch1 .ab-l,.ch1 .ab-p{color:var(--on-hero)}
.ch2{background:var(--bg)}
.ch3{background:color-mix(in srgb,var(--primary) 8%,var(--bg))}
.ch4{background:var(--bg);align-items:flex-start}
.ch-n{font:800 5rem/1 var(--font-h);color:color-mix(in srgb,currentColor 18%,transparent);margin:0}
.ch-name{font:800 clamp(2.8rem,9vw,7rem)/1 var(--font-h);letter-spacing:-.04em;margin:.1em 0;overflow-wrap:anywhere}
.ch-lead{font-size:1.3rem;opacity:.9}
.ch-big{font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.6}
.ch-down{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid currentColor;color:inherit;text-decoration:none;font-size:1.3rem;margin-top:30px;animation:bob 2s infinite}
@keyframes bob{50%{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.ch-down{animation:none}}
.ch-dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:grid;gap:10px;z-index:30}
.ch-dots a{width:10px;height:10px;border-radius:50%;background:var(--primary);opacity:.4}
.ch-dots a:hover{opacity:1}

/* 11 Glas */
.A-glass .gl-hero{background:radial-gradient(80% 90% at 0% 0%,var(--primary),transparent 60%),radial-gradient(70% 80% at 100% 20%,var(--accent),transparent 60%),linear-gradient(160deg,var(--hero),color-mix(in srgb,var(--primary) 60%,#000));color:#fff;padding:clamp(40px,7vw,100px) 0}
.gl-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,60px);align-items:center}
.gl-k{text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;font-weight:700;opacity:.85;margin:0}
.gl-name{font:800 clamp(2.4rem,6vw,4.8rem)/1 var(--font-h);letter-spacing:-.03em;margin:.2em 0;overflow-wrap:anywhere}
.gl-lead{font-size:1.2rem;opacity:.92}
.gl-trust{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:.92rem}
.gl-trust li{display:flex;gap:.5em;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:10px 12px}
.A-glass .gl-copy .sc-badges .bdg{background:rgba(255,255,255,.18);color:#fff}
.gl-card .sc{background:rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.35);color:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.gl-card .sc *{color:inherit}
.gl-card .sc .btn-p{background:#fff;color:#111}
.gl-card .sc .btn-s,.gl-card .sc summary.btn{border-color:rgba(255,255,255,.5)}
.gl-card .sc-lease{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35)}
.gl-card input,.gl-card textarea{background:rgba(255,255,255,.9);color:#111!important}
.gl-story{max-width:820px;padding-top:40px;text-align:center}
.gl-story h2{font:800 clamp(1.6rem,3vw,2.4rem) var(--font-h)}
@media (max-width:900px){.gl-grid{grid-template-columns:1fr}.gl-trust{grid-template-columns:1fr}}

/* 12 Auktionslos */
.A-lot{background:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--line) 70%,transparent) 31px 32px),var(--bg)}
.A-lot .lt{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.lt-card{max-width:880px;margin:0 auto;background:var(--surface);border:2px dashed var(--ink);padding:clamp(24px,4vw,48px);position:relative;box-shadow:12px 12px 0 var(--primary)}
.lt-top{display:flex;justify-content:space-between;font:700 .8rem var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:10px}
.lt-name{font:800 clamp(2.4rem,6vw,4.6rem)/1 var(--font-h);margin:.35em 0 .1em;overflow-wrap:anywhere}
.lt-lead{font-style:italic;color:var(--muted);font-size:1.1rem}
.lt-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin:20px 0}
.lt-row div{padding:12px 14px;border-right:1px solid var(--line);display:grid}
.lt-row div:last-child{border-right:0}
.lt-row small{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.lt-row b{font:800 1.5rem var(--font-h)}
.lt-desc{line-height:1.7}
.lt-stamp{position:absolute;top:62px;right:28px;transform:rotate(-12deg);border:3px solid var(--primary);color:var(--primary);font:900 1rem var(--font-h);letter-spacing:.2em;text-transform:uppercase;padding:4px 12px;border-radius:6px;opacity:.85}
.A-lot .ab-l,.A-lot .ab-p{display:none}
.lt-sc{padding-top:10px}
@media (max-width:640px){.lt-stamp{position:static;display:inline-block;margin-top:10px}}

/* Lange Domainnamen: die Schriftgröße richtet sich nach der Zeichenzahl, damit der Name in eine
   Zeile passt, statt mitten im Wort umzubrechen. Kurze Namen bleiben unverändert groß. */
.hero-copy,.A-billboard .bb-hero{container-type:inline-size}
.dn,.bb-name{word-break:normal;overflow-wrap:break-word}
@supports (container-type:inline-size){
  .dn,.dn[data-long],.dn[data-xlong]{font-size:min(clamp(2.6rem,7.2vw,5.4rem),calc(94cqi / var(--dn-len,12) * 1.62))}
  .hero-mag .dn{font-size:min(clamp(3rem,9vw,7rem),calc(94cqi / var(--dn-len,12) * 1.62))}
  .bb-name,.bb-name[data-long]{font-size:min(clamp(3.4rem,17vw,15rem),calc(96cqi / var(--dn-len,12) * 1.78))}
}
.lf-lang{display:flex;flex-wrap:wrap;gap:.2em .9em;margin-top:.6em;font-size:.86rem}
.lf-lang a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.lf-lang a:hover{color:var(--primary);border-bottom-color:currentColor}
.lf-lang a[aria-current]{color:var(--ink);font-weight:700}
.opt{display:flex;flex-direction:column}.opt p{flex:1}
.opt-act{margin-top:14px}
.opt-go{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--rb,999px);border:0;background:var(--primary);color:var(--on-primary,#fff);font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;text-decoration:none}
.opt-go:hover{filter:brightness(1.08);text-decoration:none}.opt-go .ic{width:16px;height:16px}

/* Button-Effekt überall: Rahmen und Schrift leuchten in der Designfarbe, leichter Schein, kleines Anheben */
.btn{transition:transform .25s,box-shadow .25s,background-color .25s,color .25s,border-color .25s}
.btn:hover,.btn:focus-visible,.offer-body .btn-offer:hover{background:transparent!important;color:var(--primary)!important;border-color:transparent!important;box-shadow:inset 0 0 0 2px var(--primary),0 12px 28px -12px var(--primary)!important;transform:translateY(-2px);text-decoration:none}
.btn:hover *,.btn:focus-visible *{color:inherit}
.btn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:focus-visible{transform:none}}
/* Projekt inklusive: laufende Website auf der Domain */
.sec-project .prj{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:start}
.sec-project .prj-logo{display:block;padding:18px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px -18px rgba(0,0,0,.3)}
.sec-project .prj-logo img{display:block;width:100%;height:auto;max-height:64px;object-fit:contain}
.sec-project .prj-lead{font-size:1.08rem;line-height:1.6;margin:0 0 10px}
.sec-project .prj-about{opacity:.8;margin:0 0 16px}
.sec-project .prj-facts{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:10px}
.sec-project .prj-facts li{display:flex;flex-direction:column;min-width:120px;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.05)}
.sec-project .prj-facts b{font-size:1.35rem;line-height:1.1}
.sec-project .prj-facts span{font-size:.8rem;opacity:.75}
.sec-project .prj-cta{margin:0}
.bento>.sec-project{grid-column:span 12}
@media (max-width:700px){.sec-project .prj{grid-template-columns:1fr}.sec-project .prj-logo{max-width:220px}}

/* Konfetti auf der Bestätigungsseite */
.kf{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999}
.kf i{position:absolute;top:-24px;border-radius:2px;opacity:.95;animation-name:kf-a;animation-timing-function:cubic-bezier(.25,.6,.4,1);animation-fill-mode:forwards}
.kf i.kf-b{animation-name:kf-b}
@keyframes kf-a{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(106vh) rotate(680deg);opacity:.7}}
@keyframes kf-b{0%{transform:translateY(0) translateX(0) rotate(0)}50%{transform:translateY(50vh) translateX(40px) rotate(260deg)}100%{transform:translateY(106vh) translateX(-30px) rotate(560deg);opacity:.7}}
@media (prefers-reduced-motion: reduce){.kf{display:none}}

/* ==================================================================
   Neue Seitentypen, Satz 1. Jeder ist ein eigener Aufbau, keine
   Umfaerbung: andere Anordnung, andere Rolle fuer Name und Preis.
   ================================================================== */

/* Bordkarte: Hauptteil und abgetrennter Stumpf mit Preis */
.A-ticket{background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 8%,var(--bg)) 0,var(--bg) 320px)}
.A-ticket .tk{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.tk-card{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 34px 250px;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 6px);overflow:hidden;box-shadow:0 30px 70px -48px var(--hero)}
.tk-haupt{padding:clamp(22px,3.4vw,40px)}
.tk-kopf{display:flex;justify-content:space-between;align-items:center;font:700 .74rem var(--font-b);text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.tk-name{font:800 clamp(2rem,5vw,3.6rem)/1.02 var(--font-h);margin:.3em 0 .18em;overflow-wrap:anywhere}
.tk-lead{color:var(--muted);font-size:1.05rem;margin:0 0 18px}
.tk-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:16px}
.tk-felder small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:3px}
.tk-felder b{font:700 1.15rem var(--font-h)}
.tk-desc{line-height:1.7;margin-bottom:18px}
.tk-abriss{position:relative;background:var(--surface)}
.tk-abriss::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;border-left:2px dashed var(--line)}
.tk-abriss::after{content:"";position:absolute;left:50%;top:-11px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--bg);box-shadow:0 calc(100% + 22px) 0 var(--bg)}
.tk-stumpf{background:var(--hero);color:var(--on-hero);padding:26px 22px;display:flex;flex-direction:column;justify-content:center;gap:8px;text-align:center}
.tk-stumpf-l{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;opacity:.8}
.tk-stumpf-p{font:800 1.7rem var(--font-h);line-height:1.1}
.tk-stumpf-d{font-size:.8rem;opacity:.75;overflow-wrap:anywhere}
.tk-code{display:flex;gap:2px;justify-content:center;height:34px;margin:6px 0}
.tk-code i{display:block;height:100%;background:currentColor;opacity:.8}
.tk-sc{padding-top:10px}
@media(max-width:860px){.tk-card{grid-template-columns:1fr}.tk-abriss{height:30px}.tk-abriss::before{left:14px;right:14px;top:50%;bottom:auto;border-left:0;border-top:2px dashed var(--line)}.tk-abriss::after{display:none}}

/* Lexikon: Eintrag mit Lemma, Lautung und nummerierten Bedeutungen */
.A-lexikon{background:var(--bg)}
.A-lexikon .lx{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.lx-eintrag{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,4vw,52px);border-left:6px solid var(--primary)}
.lx-lemma{font:700 clamp(2.2rem,5.4vw,4rem)/1 var(--font-h);margin:0;overflow-wrap:anywhere}
.lx-tld{color:var(--primary);font-weight:400}
.lx-lautung{font-family:var(--font-b);color:var(--muted);margin:.5em 0 1.4em;font-size:1rem}
.lx-bedeutungen{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.lx-bedeutungen li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start}
.lx-nr{font:700 1.05rem var(--font-h);color:var(--primary)}
.lx-bedeutungen p{margin:0;line-height:1.7}
.lx-zitat{margin:26px 0 18px;padding:18px 20px;background:color-mix(in srgb,var(--primary) 7%,transparent);border-radius:var(--r)}
.lx-zitat-l{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.lx-zitat b{display:block;font:800 1.8rem var(--font-h);margin:2px 0 12px}
.lx-herkunft{color:var(--muted);font-size:.92rem;border-top:1px solid var(--line);padding-top:14px;margin:0}
.lx-sc{padding-top:10px}

/* Blaupause: technische Zeichnung mit Massen und Schriftfeld */
.A-blaupause{background:linear-gradient(var(--hero),var(--hero)),
  repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--on-hero) 14%,transparent) 23px 24px),
  repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--on-hero) 14%,transparent) 23px 24px);
  background-blend-mode:normal,overlay,overlay;color:var(--on-hero)}
.A-blaupause .bp{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.bp-blatt{max-width:900px;margin:0 auto;border:1px solid color-mix(in srgb,var(--on-hero) 45%,transparent);padding:clamp(22px,3.6vw,44px)}
.bp-zeichnung{position:relative;padding:34px 0 40px;text-align:center}
.bp-name{font:300 clamp(2.2rem,6vw,4.4rem)/1 var(--font-h);letter-spacing:.04em;margin:0;overflow-wrap:anywhere;color:var(--on-hero)}
.bp-name span{opacity:.6}
.bp-mass{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:3px;font:500 .72rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.bp-mass i{display:block;width:70%;height:1px;background:currentColor;position:relative}
.bp-mass i::before,.bp-mass i::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:currentColor}
.bp-mass i::before{left:0}.bp-mass i::after{right:0}
.bp-mass-o{top:4px}.bp-mass-u{bottom:4px}.bp-mass-u{flex-direction:column-reverse}
.bp-lead{text-align:center;opacity:.85;margin:0 0 22px}
.bp-schriftfeld{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border:1px solid color-mix(in srgb,var(--on-hero) 45%,transparent)}
.bp-feld{padding:10px 12px;border-right:1px solid color-mix(in srgb,var(--on-hero) 30%,transparent)}
.bp-feld:last-child{border-right:0}
.bp-feld-breit{grid-column:span 2}
.bp-feld small{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;opacity:.7}
.bp-feld b{font:600 1.05rem var(--font-h);overflow-wrap:anywhere}
.bp-desc{line-height:1.7;margin:20px 0 18px;opacity:.9}
.A-blaupause .btn-s{border-color:currentColor;color:var(--on-hero)}
.bp-sc{padding-top:10px}

/* Beleg: schmaler Kassenbon */
.A-beleg{background:color-mix(in srgb,var(--ink) 6%,var(--bg))}
.A-beleg .bl{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.bl-bon{max-width:460px;margin:0 auto;background:var(--surface);padding:clamp(22px,3.4vw,38px) clamp(18px,3vw,30px);font-family:var(--mono,ui-monospace,monospace);font-size:.92rem;
  box-shadow:0 24px 50px -36px var(--ink);
  -webkit-mask-image:radial-gradient(7px 7px at 7px 100%,transparent 96%,#000 100%) 0 100%/14px 14px repeat-x;
  mask-image:radial-gradient(7px 7px at 7px 100%,transparent 96%,#000 100%) 0 100%/14px 14px repeat-x}
.bl-haus{text-align:center;font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin:0}
.bl-zeile{text-align:center;color:var(--muted);margin:.3em 0 0;font-size:.8rem}
.bl-trenn{border-top:1px dashed var(--line);margin:14px 0}
.bl-name{font:700 clamp(1.5rem,4vw,2.2rem)/1.1 var(--font-h);text-align:center;margin:0;overflow-wrap:anywhere}
.bl-lead{text-align:center;color:var(--muted);margin:.5em 0 0;font-size:.86rem}
.bl-posten{display:grid;grid-template-columns:1fr auto;gap:7px 12px;margin:0}
.bl-posten dt{color:var(--muted)}
.bl-posten dd{margin:0;text-align:right}
.bl-summe{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;margin:0 0 14px}
.bl-summe b{font:800 1.4rem var(--font-h)}
.bl-desc{color:var(--muted);line-height:1.6;font-size:.86rem;margin:0 0 14px}
.bl-code{display:flex;gap:2px;justify-content:center;height:40px;margin:18px 0 8px}
.bl-code i{display:block;height:100%;background:var(--ink)}
.bl-dank{text-align:center;color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0}
.A-beleg .ab{display:block;text-align:center}
.bl-sc{padding-top:10px}

/* Plattenhuelle: Quadrat links, Rueckseite mit Liste rechts */
.A-cover{background:var(--bg)}
.A-cover .cv{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.cv-in{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.05fr);gap:clamp(20px,3.4vw,44px);align-items:start}
.cv-huelle{position:relative;aspect-ratio:1;background:linear-gradient(145deg,var(--hero),color-mix(in srgb,var(--hero) 62%,var(--primary)));color:var(--on-hero);padding:clamp(18px,2.6vw,30px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-shadow:0 30px 60px -40px var(--hero)}
.cv-label{position:absolute;top:clamp(18px,2.6vw,30px);left:clamp(18px,2.6vw,30px);font:700 .68rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.cv-name{font:800 clamp(1.8rem,4.6vw,3.2rem)/.98 var(--font-h);margin:0;overflow-wrap:anywhere}
.cv-tld{font:600 1.1rem var(--font-b);opacity:.72;margin-top:.3em}
.cv-ring{position:absolute;right:-70px;top:50%;transform:translateY(-50%);width:230px;height:230px;border-radius:50%;border:1px solid color-mix(in srgb,var(--on-hero) 35%,transparent);box-shadow:0 0 0 22px color-mix(in srgb,var(--on-hero) 7%,transparent)}
.cv-lead{font-size:1.1rem;color:var(--muted);margin:0 0 18px}
.cv-liste{list-style:none;margin:0 0 18px;padding:0;border-top:1px solid var(--line)}
.cv-liste li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.cv-liste span{font:700 .78rem var(--mono,var(--font-b));color:var(--muted)}
.cv-liste b{font:700 1.05rem var(--font-h)}
.cv-desc{line-height:1.7;margin:0 0 18px}
.cv-sc{padding-top:10px}
@media(max-width:800px){.cv-in{grid-template-columns:1fr}}

/* Reisepass: Doppelseite mit Stempeln und maschinenlesbarer Zeile */
.A-pass{background:color-mix(in srgb,var(--hero) 12%,var(--bg))}
.A-pass .ps{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.ps-buch{max-width:900px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:clamp(20px,3.2vw,38px);box-shadow:0 30px 60px -44px var(--ink)}
.ps-kopf{display:flex;justify-content:space-between;font:700 .72rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--primary);padding-bottom:10px;margin-bottom:20px}
.ps-seite{display:grid;grid-template-columns:150px 1fr;gap:clamp(16px,3vw,34px)}
.ps-links{position:relative}
.ps-bild{aspect-ratio:3/4;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,transparent) 0 7px,transparent 7px 14px),color-mix(in srgb,var(--primary) 6%,var(--surface));border:1px solid var(--line);display:grid;place-items:center}
.ps-bild span{font:800 2.4rem var(--font-h);color:var(--primary);opacity:.8}
.ps-stempel{position:absolute;display:grid;place-items:center;border:3px solid var(--accent);color:var(--accent);border-radius:50%;width:76px;height:76px;font:800 1.1rem var(--font-h);opacity:.75}
.ps-stempel-1{right:-26px;top:16px;transform:rotate(-16deg)}
.ps-stempel-2{right:-14px;bottom:10px;transform:rotate(11deg);width:58px;height:58px;border-color:var(--primary);color:var(--primary)}
.ps-name{font:800 clamp(1.7rem,4.4vw,3rem)/1.04 var(--font-h);margin:0 0 .5em;overflow-wrap:anywhere}
.ps-daten{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0 0 16px;font-size:.95rem}
.ps-daten dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);align-self:center}
.ps-daten dd{margin:0;font-weight:600}
.ps-lead{color:var(--muted);margin:0}
.ps-desc{line-height:1.7;margin:20px 0 18px}
.ps-mrz{font-family:var(--mono,ui-monospace,monospace);font-size:clamp(.62rem,1.5vw,.86rem);letter-spacing:.08em;word-break:break-all;background:color-mix(in srgb,var(--ink) 5%,transparent);border-top:1px solid var(--line);padding:12px 10px 10px;margin:18px 0 0;color:var(--muted)}
.ps-sc{padding-top:10px}
@media(max-width:700px){.ps-seite{grid-template-columns:1fr}.ps-bild{max-width:160px}.ps-stempel-1{right:10px}.ps-stempel-2{right:70px;bottom:-10px}}

/* ==================================================================
   Neue Seitentypen, Satz 2.
   ================================================================== */

/* Kinoplakat: Vorspann, Riesentitel, Credits in einer Zeile */
.A-kinoplakat{background:radial-gradient(900px 500px at 50% -10%,color-mix(in srgb,var(--primary) 32%,transparent),transparent 65%),var(--hero);color:var(--on-hero)}
.A-kinoplakat .kp{padding-top:clamp(32px,6vw,80px);padding-bottom:24px}
.kp-plakat{max-width:820px;margin:0 auto;text-align:center;border:1px solid color-mix(in srgb,var(--on-hero) 28%,transparent);padding:clamp(26px,4.4vw,56px) clamp(20px,3.4vw,44px)}
.kp-vorspann{font:600 .76rem var(--font-b);letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin:0 0 1.6em}
.kp-name{font:800 clamp(2.4rem,8vw,5.4rem)/.92 var(--font-h);letter-spacing:-.02em;margin:0;overflow-wrap:anywhere;text-transform:uppercase}
.kp-name span{display:block;font-size:.34em;letter-spacing:.3em;font-weight:500;opacity:.72;margin-top:.5em;text-transform:none}
.kp-tagline{font-style:italic;font-size:clamp(1rem,2vw,1.3rem);opacity:.88;margin:1.3em 0 1.6em}
.kp-credits{font:600 .74rem var(--font-b);letter-spacing:.1em;text-transform:uppercase;line-height:2;opacity:.82;border-top:1px solid color-mix(in srgb,var(--on-hero) 26%,transparent);border-bottom:1px solid color-mix(in srgb,var(--on-hero) 26%,transparent);padding:12px 0;margin:0 0 1.5em}
.kp-credits b{font-weight:800;opacity:.6;margin-right:.4em}
.kp-credits span{opacity:.4;margin:0 .5em}
.kp-desc{line-height:1.75;opacity:.9;margin:0 0 1.6em;text-align:left}
.kp-fuss{font:600 .7rem var(--font-b);letter-spacing:.26em;text-transform:uppercase;opacity:.55;margin:1.8em 0 0}
.A-kinoplakat .ab{justify-content:center}
.A-kinoplakat .btn-s{border-color:currentColor;color:var(--on-hero)}
.kp-sc{padding-top:14px}

/* Zeitstrahl: vier Stationen untereinander an einer Linie */
.A-zeitstrahl{background:var(--bg)}
.A-zeitstrahl .zs{padding-top:clamp(28px,5vw,64px);padding-bottom:20px;max-width:820px;margin-left:auto;margin-right:auto}
.zs-name{font:800 clamp(2rem,5.6vw,3.6rem)/1.02 var(--font-h);margin:0;overflow-wrap:anywhere}
.zs-lead{color:var(--muted);font-size:1.12rem;margin:.6em 0 2.2em}
.zs-strahl{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.zs-strahl::before{content:"";position:absolute;left:7px;top:6px;bottom:24px;width:2px;background:linear-gradient(var(--primary),color-mix(in srgb,var(--primary) 20%,transparent))}
.zs-strahl li{position:relative;padding-bottom:30px}
.zs-punkt{position:absolute;left:-30px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--primary)}
.zs-ziel .zs-punkt{background:var(--primary)}
.zs-strahl small{display:block;font:700 .7rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.zs-strahl b{display:block;font:700 1.35rem var(--font-h);margin-bottom:6px;overflow-wrap:anywhere}
.zs-preis{font-size:1.9rem!important;color:var(--primary)}
.zs-strahl p{margin:0;line-height:1.65;color:var(--muted)}
.zs-sc{padding-top:10px}

/* Etikett: Anhaenger mit Loch und Schnur, Text daneben */
.A-etikett{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--primary) 5%,transparent) 0 18px,transparent 18px 36px),var(--bg)}
.A-etikett .et{padding-top:clamp(34px,5.4vw,72px);padding-bottom:20px;display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;max-width:960px;margin-left:auto;margin-right:auto}
.et-anhaenger{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px 14px 10px 10px;padding:44px 24px 24px;text-align:center;box-shadow:0 22px 44px -34px var(--ink)}
.et-anhaenger::before{content:"";position:absolute;left:0;right:0;top:30px;border-top:1px dashed var(--line)}
.et-loch{position:absolute;top:12px;left:50%;margin-left:-9px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.et-schnur{position:absolute;top:-26px;left:50%;width:2px;height:34px;background:var(--muted);transform-origin:bottom;transform:rotate(-14deg)}
.et-marke{font:700 .68rem var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.et-name{font:800 clamp(1.5rem,3.4vw,2.2rem)/1.08 var(--font-h);margin:0;overflow-wrap:anywhere}
.et-name span{color:var(--primary)}
.et-preis{font:800 clamp(2rem,5vw,3rem)/1 var(--font-h);color:var(--primary);margin:.5em 0 0}
.et-rate{color:var(--muted);font-size:.9rem;margin:.4em 0 0}
.et-merkmale{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:16px 0 18px;padding:0}
.et-merkmale li{font-size:.78rem;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-weight:600}
.et-lead{font-size:1.2rem;font-weight:600;margin:0 0 .9em}
.et-text p{line-height:1.75}
.et-sc{padding-top:10px}
@media(max-width:780px){.A-etikett .et{grid-template-columns:1fr}}

/* Karteikarte: Stapel mit Reiter und Linienraster */
.A-karteikarte{background:color-mix(in srgb,var(--ink) 7%,var(--bg))}
.A-karteikarte .kk{padding-top:clamp(34px,5.4vw,76px);padding-bottom:20px}
.kk-stapel{position:relative;max-width:760px;margin:0 auto}
.kk-blatt{position:absolute;inset:0;background:var(--surface);border:1px solid var(--line);border-radius:8px}
.kk-blatt-2{transform:rotate(-1.2deg) translateY(6px)}
.kk-blatt-3{transform:rotate(1.6deg) translateY(12px)}
.kk-karte{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:clamp(26px,4vw,46px) clamp(22px,3.4vw,40px) clamp(22px,3vw,34px);box-shadow:0 20px 44px -36px var(--ink);overflow:hidden}
.kk-reiter{position:absolute;top:-1px;right:30px;background:var(--primary);color:var(--on-primary);font:700 .74rem var(--font-b);letter-spacing:.16em;padding:6px 14px 7px;border-radius:0 0 7px 7px}
.kk-linien{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 27px,color-mix(in srgb,var(--primary) 12%,transparent) 27px 28px);opacity:.75}
.kk-karte>*{position:relative}
.kk-name{font:700 clamp(1.7rem,4.4vw,2.8rem)/1.08 var(--font-h);margin:0;overflow-wrap:anywhere;border-bottom:2px solid var(--primary);display:inline-block;padding-bottom:3px}
.kk-lead{color:var(--muted);margin:.8em 0 1.2em;font-size:1.05rem}
.kk-felder{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0 0 1.2em}
.kk-felder dt{font:700 .7rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);align-self:center}
.kk-felder dd{margin:0;font-weight:600}
.kk-preis{font:800 1.5rem var(--font-h)!important;color:var(--primary)}
.kk-desc{line-height:1.8;margin:0 0 1.2em}
.kk-sc{padding-top:22px}

/* ==================================================================
   Seitentypen, von mehreren Assistenten parallel gebaut.
   ================================================================== */

/* --- Seitentyp: Briefmarke --- */
/* Briefmarke: gezackte Marke mit Nennwert, Stempel daneben, Sammlerblatt darunter */
.A-briefmarke{background:
  repeating-linear-gradient(0deg,transparent 0 47px,color-mix(in srgb,var(--line) 55%,transparent) 47px 48px),
  repeating-linear-gradient(90deg,transparent 0 47px,color-mix(in srgb,var(--line) 55%,transparent) 47px 48px),
  var(--bg)}
.A-briefmarke .bm{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.bm-blatt{max-width:1000px;margin:0 auto;background:var(--surface);border:1px solid var(--line);padding:clamp(20px,3.4vw,44px);box-shadow:0 28px 56px -44px var(--ink)}
.bm-reihe{display:flex;align-items:center;gap:clamp(10px,2vw,22px);flex-wrap:wrap}
.bm-marke{flex:0 0 auto;width:clamp(230px,32vw,320px);padding:9px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));
  /* Perforation: die Zacken werden aus der vollen Flaeche herausgestanzt (exclude),
     nicht als Schnittmenge mehrerer Randstreifen gebildet. Mit intersect blieb von der
     Marke nichts uebrig, weil jeder Streifen nur seinen eigenen Rand abdeckt und
     ausserhalb davon leer ist: die Schnittmenge war das ganze Bild hindurch leer. */
  -webkit-mask-image:
    radial-gradient(circle 5px at 50% 0,#000 96%,transparent 100%),
    radial-gradient(circle 5px at 50% 100%,#000 96%,transparent 100%),
    radial-gradient(circle 5px at 0 50%,#000 96%,transparent 100%),
    radial-gradient(circle 5px at 100% 50%,#000 96%,transparent 100%),
    linear-gradient(#000,#000);
  mask-image:
    radial-gradient(circle 5px at 50% 0,#000 96%,transparent 100%),
    radial-gradient(circle 5px at 50% 100%,#000 96%,transparent 100%),
    radial-gradient(circle 5px at 0 50%,#000 96%,transparent 100%),
    radial-gradient(circle 5px at 100% 50%,#000 96%,transparent 100%),
    linear-gradient(#000,#000);
  -webkit-mask-size:14px 14px,14px 14px,14px 14px,14px 14px,auto;
  mask-size:14px 14px,14px 14px,14px 14px,14px 14px,auto;
  -webkit-mask-repeat:repeat-x,repeat-x,repeat-y,repeat-y,no-repeat;
  mask-repeat:repeat-x,repeat-x,repeat-y,repeat-y,no-repeat;
  -webkit-mask-position:0 0,0 100%,0 0,100% 0,center;
  mask-position:0 0,0 100%,0 0,100% 0,center;
  -webkit-mask-composite:xor,xor,xor,source-over;
  mask-composite:exclude,exclude,exclude,exclude,add}
.bm-zacken{border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);aspect-ratio:4/5;padding:clamp(12px,2vw,20px);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(120% 90% at 50% 0,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.bm-land{font:700 .66rem var(--font-b);text-transform:uppercase;letter-spacing:.24em;color:var(--muted)}
.bm-name{font:800 clamp(1.4rem,3.4vw,2.2rem)/1.05 var(--font-h);margin:0;overflow-wrap:anywhere}
.bm-name span{display:block;font-size:.5em;font-weight:600;color:var(--accent);letter-spacing:.06em}
.bm-wert{font:900 clamp(1.5rem,3.8vw,2.3rem)/1 var(--font-h);color:var(--primary);margin:0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bm-nennwert{font:700 .62rem var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.bm-stempel{position:relative;flex:0 0 auto;width:clamp(120px,17vw,160px);aspect-ratio:1;margin-left:clamp(-44px,-5vw,-22px);border:3px solid color-mix(in srgb,var(--ink) 65%,transparent);border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(-13deg);opacity:.82;color:color-mix(in srgb,var(--ink) 78%,transparent);background:color-mix(in srgb,var(--surface) 70%,transparent)}
.bm-stempel::before{content:"";position:absolute;inset:7px;border:1px dashed currentColor;border-radius:50%}
.bm-stempel-tld{font:900 clamp(1rem,2.4vw,1.4rem) var(--font-h);letter-spacing:.06em}
.bm-stempel-datum{font:700 .64rem var(--font-b);letter-spacing:.16em}
.bm-wellen{position:absolute;left:100%;top:50%;transform:translateY(-50%);width:clamp(70px,12vw,130px);height:34px;background:repeating-linear-gradient(0deg,currentColor 0 2px,transparent 2px 11px)}
.bm-text{margin-top:clamp(20px,3vw,34px);border-top:1px solid var(--line);padding-top:clamp(16px,2.4vw,26px)}
.bm-lead{font-size:clamp(1rem,2.2vw,1.2rem);font-style:italic;color:var(--muted);margin:0 0 16px}
.bm-katalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:0 0 18px}
.bm-katalog>div{background:var(--surface);padding:10px 12px}
.bm-katalog dt{font:700 .64rem var(--font-b);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.bm-katalog dd{margin:2px 0 0;font:800 1.05rem var(--font-h);overflow-wrap:anywhere}
.bm-desc{line-height:1.7;margin:0 0 6px}
.A-briefmarke .ab-l,.A-briefmarke .ab-p{display:none}
.bm-fuss{margin:20px 0 0;font-size:.76rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.bm-sc{padding-top:10px}
@media (max-width:780px){
  .bm-reihe{flex-direction:column;align-items:flex-start}
  .bm-marke{width:min(100%,300px)}
  .bm-stempel{margin-left:clamp(28px,16vw,90px);margin-top:-30px}
  .bm-wellen{display:none}
}

/* --- Seitentyp: Exponat --- */
/* Exponat: links die leere Vitrine mit dem blassen Namen, rechts die Kartusche und der Kuratorentext */
.A-exponat{background:var(--bg)}
.A-exponat .xp{padding-top:clamp(24px,4.5vw,58px);padding-bottom:clamp(20px,4vw,44px)}

.xp-saal{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,4vw,54px);align-items:start;max-width:1120px;margin:0 auto}

/* Die Vitrine bleibt leer: die Domain traegt noch nichts. Nur der Name, sehr gross und sehr blass. */
.xp-vitrine{position:sticky;top:clamp(12px,3vw,28px)}
.xp-glas{display:grid;place-items:center;aspect-ratio:4/3;min-height:clamp(230px,40vw,440px);padding:clamp(18px,4vw,42px);background:linear-gradient(162deg,color-mix(in srgb,var(--accent) 15%,var(--surface)),var(--surface) 46%,color-mix(in srgb,var(--accent) 7%,var(--surface)));border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);outline:1px solid var(--line);outline-offset:clamp(5px,1vw,10px);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 86%,var(--ink)),0 26px 54px -42px color-mix(in srgb,var(--ink) 70%,transparent)}
.xp-leer{margin:0;max-width:100%;text-align:center;font:400 clamp(1.6rem,8vw,4.4rem)/1.02 var(--font-h);letter-spacing:-.02em;color:color-mix(in srgb,var(--ink) 15%,var(--surface));overflow-wrap:anywhere}
.xp-sockel{margin:0;padding-top:clamp(8px,1.6vw,12px);border-top:clamp(6px,1.2vw,10px) solid color-mix(in srgb,var(--ink) 17%,var(--surface));text-align:center;font:700 .68rem/1.5 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

.xp-schild{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--primary);padding:clamp(20px,3.4vw,32px)}
.xp-unter{margin:0 0 clamp(14px,2.6vw,20px);padding-bottom:clamp(12px,2.2vw,18px);border-bottom:1px solid var(--line);font:italic 400 clamp(1rem,2.4vw,1.16rem)/1.55 var(--font-b);color:var(--ink);overflow-wrap:anywhere}

.xp-kartusche{margin:0;display:grid;gap:clamp(9px,1.8vw,13px)}
.xp-kartusche>div{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);gap:.35em 1em;align-items:baseline}
.xp-kartusche dt{font:700 .68rem/1.5 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.xp-kartusche dd{margin:0;font:400 clamp(.93rem,2vw,1.02rem)/1.5 var(--font-b);color:var(--ink);overflow-wrap:anywhere}
.xp-werk{font-weight:600}
.xp-wert{margin-top:clamp(4px,1vw,7px);padding-top:clamp(10px,2vw,14px);border-top:1px solid var(--line)}
.xp-wert dt{color:var(--primary)}
.xp-wert dd{font:700 clamp(1.3rem,3.4vw,1.9rem)/1.15 var(--font-h);color:var(--ink)}

.xp-kurator{margin-top:clamp(18px,3vw,26px);padding-top:clamp(14px,2.6vw,20px);border-top:1px solid var(--line)}
.xp-kurator-l{margin:0 0 .55em;font:700 .68rem/1.3 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.xp-kurator-x{margin:0;font:400 clamp(.93rem,2vw,1rem)/1.75 var(--font-b);color:var(--ink)}
.A-exponat .desc.custom{margin-top:.85em;line-height:1.75}
.A-exponat .ab{margin-top:clamp(18px,3vw,26px);flex-direction:column;align-items:flex-start}

.xp-sc{padding-top:10px}

@media (max-width:780px){
  .xp-saal{grid-template-columns:1fr;gap:clamp(18px,4vw,26px)}
  .xp-vitrine{position:static}
  .xp-glas{aspect-ratio:auto;min-height:clamp(190px,50vw,290px);outline-offset:5px}
  .xp-kartusche>div{grid-template-columns:1fr;gap:.1em}
  .xp-schild{border-left-width:3px;padding:clamp(18px,5vw,24px)}
}

/* --- Seitentyp: Fallblatt --- */
/* Fallblatt: Bahnhofsanzeige, Domainname in einzelnen Klappkaestchen, darunter Spaltenzeile */
.A-fallblatt{background:var(--bg)}
.A-fallblatt .fb{padding-top:clamp(26px,5vw,60px);padding-bottom:20px}
.fb-tafel{max-width:1000px;margin:0 auto;background:var(--hero);color:var(--on-hero);border:1px solid color-mix(in srgb,var(--on-hero) 22%,transparent);border-radius:var(--r);padding:clamp(14px,2.4vw,26px);box-shadow:0 30px 70px -40px var(--ink)}

/* Leuchtschriftzeile oben */
.fb-leucht{display:flex;align-items:center;gap:clamp(8px,1.6vw,16px);margin:0 0 clamp(14px,2.4vw,22px);padding:9px clamp(10px,1.8vw,16px);border-radius:calc(var(--r) / 2);border-bottom:3px solid color-mix(in srgb,var(--accent) 70%,transparent);background:var(--primary);color:var(--on-primary)}
.fb-leucht-marke{flex:0 0 auto;font:800 .62rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--primary);background:color-mix(in srgb,var(--on-primary) 92%,transparent);padding:5px 8px;border-radius:2px}
.fb-leucht-text{flex:1 1 auto;min-width:0;font:700 clamp(.76rem,1.8vw,.95rem)/1.4 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--on-primary);overflow-wrap:anywhere}

/* Der Name in Klappkaestchen */
.fb-klappen{display:flex;flex-wrap:wrap;gap:clamp(3px,.6vw,6px);margin:0 0 clamp(14px,2.4vw,22px);line-height:1}
.fb-kasten{position:relative;display:block;flex:0 0 auto;width:clamp(28px,6.2vw,66px);background:color-mix(in srgb,var(--on-hero) 13%,var(--hero));border:1px solid color-mix(in srgb,var(--on-hero) 16%,transparent);border-radius:3px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--on-hero) 14%,transparent)}
.fb-kasten i{display:grid;place-items:center;height:clamp(40px,8.8vw,92px);font:800 clamp(1.3rem,4.6vw,3.2rem)/1 var(--font-h);font-style:normal;color:var(--on-hero);text-transform:uppercase}
.fb-kasten::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--hero);border-top:1px solid color-mix(in srgb,var(--on-hero) 22%,transparent)}
.fb-kasten-punkt{width:clamp(18px,3.4vw,34px);background:color-mix(in srgb,var(--on-hero) 22%,var(--hero))}
.fb-kasten-punkt i{color:color-mix(in srgb,var(--on-hero) 58%,transparent)}

/* Spaltenzeile: Zeit, Ziel, Gleis, Preis */
.fb-spalten{border:1px solid color-mix(in srgb,var(--on-hero) 18%,transparent);border-radius:calc(var(--r) / 2);overflow:hidden}
.fb-kopf,.fb-reihe{display:grid;grid-template-columns:.8fr .8fr .6fr 1.3fr;gap:1px}
.fb-kopf{background:color-mix(in srgb,var(--on-hero) 14%,transparent)}
.fb-kopf span{padding:7px clamp(8px,1.4vw,14px);font:800 .64rem/1 var(--font-b);letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 72%,transparent)}
.fb-reihe span{display:block;padding:clamp(10px,1.8vw,16px) clamp(8px,1.4vw,14px);background:color-mix(in srgb,var(--on-hero) 9%,var(--hero))}
.fb-reihe b{display:block;font:800 clamp(1.05rem,3vw,1.9rem)/1.1 var(--font-h);color:var(--on-hero);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fb-reihe small{display:block;margin-top:3px;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 60%,transparent)}
.fb-reihe span.fb-preis{background:var(--primary)}
.fb-preis b{color:var(--on-primary)}
.fb-preis small{color:color-mix(in srgb,var(--on-primary) 74%,transparent)}

/* Durchsage */
.fb-durchsage{margin-top:clamp(14px,2.4vw,22px);padding-top:clamp(12px,2vw,18px);border-top:1px dashed color-mix(in srgb,var(--on-hero) 20%,transparent)}
.fb-durchsage-titel{margin:0 0 5px;font:800 .64rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--on-hero)}
.fb-text{margin:0;line-height:1.7;color:color-mix(in srgb,var(--on-hero) 82%,transparent)}
.fb-durchsage .custom{color:color-mix(in srgb,var(--on-hero) 82%,transparent)}
.A-fallblatt .ab{margin-top:clamp(14px,2.4vw,20px)}
.A-fallblatt .ab-l{color:color-mix(in srgb,var(--on-hero) 60%,transparent)}
.A-fallblatt .ab-p{color:var(--on-hero)}
.A-fallblatt .ab-lease{color:var(--on-hero)}
.A-fallblatt .btn-s{color:var(--on-hero);border-color:color-mix(in srgb,var(--on-hero) 40%,transparent)}
.fb-sc{padding-top:14px}

@media (max-width:780px){
    .fb-kopf,.fb-reihe{grid-template-columns:1fr 1fr}
    .fb-kopf span:nth-child(4),.fb-reihe span:nth-child(4){grid-column:span 2}
    .fb-leucht{flex-wrap:wrap}
    .fb-leucht-text{letter-spacing:.1em}
}

/* --- Seitentyp: Leporello --- */
/* Leporello: Faltprospekt aus vier Feldern, abwechselnd nach vorn und hinten geknickt */
.A-leporello .lr{padding-top:clamp(26px,4vw,56px);padding-bottom:clamp(26px,4vw,52px)}
.A-leporello .lr-blatt{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto auto 1fr;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 18px 40px -28px color-mix(in srgb,var(--ink) 60%,transparent);
}
/* die vier Falzfelder liegen als Flaechen unter dem Satz, exakt in denselben Spalten */
.A-leporello .lr-f{grid-row:1 / -1;display:block;min-height:100%}
.A-leporello .lr-f1{grid-column:1}
.A-leporello .lr-f2{grid-column:2}
.A-leporello .lr-f3{grid-column:3}
.A-leporello .lr-f4{grid-column:4}
/* nach vorn geknickt: hell, Schattenkante rechts am Falz */
.A-leporello .lr-f1,.A-leporello .lr-f3{
  background:var(--surface);
  box-shadow:inset -16px 0 20px -16px color-mix(in srgb,var(--ink) 55%,transparent);
}
/* nach hinten geknickt: eine Spur tiefer, Schattenkante links am Falz */
.A-leporello .lr-f2,.A-leporello .lr-f4{
  background:color-mix(in srgb,var(--ink) 5%,var(--surface));
  box-shadow:inset 18px 0 22px -16px color-mix(in srgb,var(--ink) 60%,transparent);
}
.A-leporello .lr-f1,.A-leporello .lr-f2,.A-leporello .lr-f3{border-right:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}
/* Satz liegt ueber den Falzfeldern */
.A-leporello .lr-blatt>:not(.lr-f){position:relative;z-index:1;min-width:0}
.A-leporello .lr-marke,.A-leporello .lr-falzmarke{
  grid-row:1;margin:0;padding:clamp(14px,2vw,20px) clamp(12px,1.6vw,20px) 0;
  font:700 .68rem/1.3 var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.A-leporello .lr-k1{grid-column:1}
.A-leporello .lr-k2{grid-column:2}
.A-leporello .lr-k3{grid-column:3}
.A-leporello .lr-k4{grid-column:4}
.A-leporello .lr-falzmarke{color:color-mix(in srgb,var(--muted) 55%,transparent);text-align:left;font-size:.6rem}
/* der Name laeuft ueber die ersten beiden Felder, der Falz schneidet ihn */
.A-leporello .lr-name{
  grid-column:1 / 3;grid-row:2;margin:0;
  padding:clamp(8px,1.4vw,16px) clamp(12px,1.6vw,20px) 0;
  font:800 clamp(2.1rem,6.4vw,4.6rem)/.96 var(--font-h);
  letter-spacing:-.035em;overflow-wrap:anywhere;hyphens:auto;
}
.A-leporello .lr-sld{color:var(--ink)}
.A-leporello .lr-tld{color:var(--primary)}
.A-leporello .lr-lead{
  grid-column:1 / 3;grid-row:3;
  margin:0;padding:clamp(10px,1.6vw,18px) clamp(12px,1.6vw,20px) clamp(18px,2.6vw,28px);
  font-size:clamp(1rem,1.5vw,1.2rem);color:var(--muted);
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  margin-top:clamp(12px,2vw,22px);
}
.A-leporello .lr-text{
  grid-column:3;grid-row:2 / -1;
  padding:clamp(10px,1.6vw,18px) clamp(14px,1.8vw,22px) clamp(18px,2.4vw,26px);
  font-size:.97rem;
}
.A-leporello .lr-text p{margin:0 0 1em}
.A-leporello .lr-mini{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.A-leporello .lr-mini li{display:flex;justify-content:space-between;gap:10px;padding:.5em 0;border-bottom:1px dotted color-mix(in srgb,var(--line) 85%,transparent);font-size:.84rem}
.A-leporello .lr-mini span{color:var(--muted)}
.A-leporello .lr-mini b{overflow-wrap:anywhere;text-align:right}
/* letztes Feld: der Preis */
.A-leporello .lr-preisfeld{
  grid-column:4;grid-row:2 / -1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;
  padding:clamp(14px,2vw,24px) clamp(12px,1.6vw,20px) clamp(20px,2.6vw,30px);
  text-align:center;
  border-left:3px solid var(--accent);
}
.A-leporello .lr-preis-l{font:700 .7rem/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.A-leporello .lr-preis{font:800 clamp(1.5rem,3vw,2.5rem)/1.05 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.A-leporello .lr-rate{font-size:.85rem;color:var(--muted)}
.A-leporello .lr-preisfeld .ab{margin-top:.8em;flex-direction:column;align-items:center;gap:.5em}
.A-leporello .lr-preisfeld .ab-l,.A-leporello .lr-preisfeld .ab-p{font-size:.85rem}
.A-leporello .lr-sc{padding-top:8px;padding-bottom:8px}
@media (max-width:980px){
  .A-leporello .lr-name{font-size:clamp(1.9rem,5.4vw,3rem)}
}
/* schmale Fenster: der Prospekt wird aufgefaltet, die Falze liegen waagerecht */
@media (max-width:780px){
  .A-leporello .lr-blatt{grid-template-columns:1fr;grid-template-rows:none}
  .A-leporello .lr-f{display:none}
  .A-leporello .lr-blatt>:not(.lr-f){grid-column:1 !important;grid-row:auto !important}
  .A-leporello .lr-k2,.A-leporello .lr-k3,.A-leporello .lr-k4{display:none}
  .A-leporello .lr-marke{padding:16px 18px 0}
  .A-leporello .lr-name{padding:6px 18px 0;font-size:clamp(2rem,10vw,3rem)}
  .A-leporello .lr-lead{padding:10px 18px 18px;margin-top:10px}
  .A-leporello .lr-text,.A-leporello .lr-preisfeld{
    padding:20px 18px;
    border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
    box-shadow:inset 0 16px 20px -16px color-mix(in srgb,var(--ink) 55%,transparent);
  }
  .A-leporello .lr-text{background:color-mix(in srgb,var(--ink) 5%,var(--surface))}
  .A-leporello .lr-preisfeld{border-left:0;border-top-width:3px;border-top-color:var(--accent);box-shadow:none}
}

/* --- Seitentyp: Messschrieb --- */
/* Messschrieb: Millimeterpapier mit gezeichneter Kurve, Messpunkte mit Fahnen, links die Achse */
.A-messschrieb{background:var(--bg)}
.A-messschrieb .ms{padding-top:clamp(26px,5vw,56px);padding-bottom:20px}
.ms-blatt{display:grid;grid-template-columns:auto 1fr;gap:clamp(8px,1.6vw,16px);max-width:1000px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) / 2);padding:clamp(12px,2.2vw,22px);box-shadow:0 26px 60px -46px var(--ink)}

/* Achsenbeschriftung links */
.ms-achse{display:flex;gap:6px;align-items:stretch}
.ms-achse-titel{margin:0;writing-mode:vertical-rl;transform:rotate(180deg);font:700 .62rem/1 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);text-align:center}
.ms-achse-werte{display:flex;flex-direction:column;justify-content:space-between;list-style:none;margin:0;padding:0 6px 0 0;border-right:2px solid var(--ink);text-align:right;font:700 .66rem/1 var(--font-b);color:var(--muted);font-variant-numeric:tabular-nums}

/* Das Millimeterpapier */
.ms-feld{min-width:0}
.ms-papier{position:relative;color:var(--primary);aspect-ratio:2/1;min-height:200px;border:1px solid var(--line);background:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--line) 85%,transparent) 0 1px,transparent 1px 10%),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--line) 85%,transparent) 0 1px,transparent 1px 25%),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--line) 38%,transparent) 0 1px,transparent 1px 2%),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--line) 38%,transparent) 0 1px,transparent 1px 5%),
    var(--surface)}
.ms-kurve{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Der Domainname beschriftet die Messreihe */
.ms-reihe{position:absolute;left:clamp(8px,1.6vw,16px);top:clamp(8px,1.6vw,14px);max-width:72%;padding:6px 10px;background:color-mix(in srgb,var(--surface) 86%,transparent);border-left:3px solid var(--primary)}
.ms-reihe-k{margin:0;font:700 .6rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ms-name{margin:.18em 0 0;font:800 clamp(1.3rem,4vw,2.5rem)/1.05 var(--font-h);letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}

/* Abgesetzte Messpunkte mit Fahnen */
.ms-punkt{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--surface);border:2px solid var(--primary)}
.ms-punkt-haupt{width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--primary);border-color:var(--surface);box-shadow:0 0 0 2px var(--primary)}
.ms-fahne{position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%);display:block;white-space:nowrap;padding:4px 8px;background:var(--surface);border:1px solid var(--primary);border-radius:calc(var(--r) / 3)}
.ms-fahne::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:11px;background:var(--primary)}
.ms-fahne small{display:block;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.ms-fahne b{display:block;font:800 clamp(.8rem,1.8vw,1rem)/1.15 var(--font-h);color:var(--ink);font-variant-numeric:tabular-nums}
.ms-punkt-haupt .ms-fahne{background:var(--primary);border-color:var(--primary)}
.ms-punkt-haupt .ms-fahne::after{background:var(--primary)}
.ms-punkt-haupt .ms-fahne small{color:color-mix(in srgb,var(--on-primary) 76%,transparent)}
.ms-punkt-haupt .ms-fahne b{color:var(--on-primary);font-size:clamp(.95rem,2.4vw,1.3rem)}
/* Fahnen, die sonst aus dem Blatt laufen: nach innen bzw. unter den Punkt */
.ms-punkt-links .ms-fahne{left:-5px;transform:none}
.ms-punkt-links .ms-fahne::after{left:12px}
.ms-punkt-rechts .ms-fahne{left:auto;right:-5px;transform:none}
.ms-punkt-rechts .ms-fahne::after{left:auto;right:12px}
.ms-punkt-tief .ms-fahne{bottom:auto;top:calc(100% + 11px)}
.ms-punkt-tief .ms-fahne::after{top:auto;bottom:100%}

.ms-abszisse{display:flex;justify-content:space-between;margin:5px 0 0;border-top:2px solid var(--ink);padding-top:5px;font:700 .66rem/1 var(--font-b);color:var(--muted);font-variant-numeric:tabular-nums}

.ms-unterschrift{max-width:1000px;margin:clamp(10px,1.8vw,16px) auto 0;font-size:clamp(.88rem,1.7vw,1rem);line-height:1.5;color:var(--muted);font-style:italic}
.ms-protokoll{max-width:1000px;margin:clamp(14px,2.4vw,22px) auto 0;border-top:1px solid var(--line);padding-top:clamp(14px,2.4vw,20px)}
.ms-protokoll-titel{margin:0 0 6px;font:700 .64rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--primary)}
.ms-text{margin:0;line-height:1.75;color:var(--muted);max-width:68ch}
.ms-werte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.6vw,14px);list-style:none;margin:clamp(12px,2.2vw,18px) 0 0;padding:0}
.ms-werte li{border-top:2px solid var(--ink);padding-top:7px}
.ms-werte small{display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ms-werte b{display:block;margin-top:2px;font:800 clamp(.95rem,2.2vw,1.25rem) var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.ms-sc{padding-top:14px}

@media (max-width:780px){
    .ms-blatt{grid-template-columns:1fr}
    .ms-achse{flex-direction:row;align-items:baseline;gap:10px}
    .ms-achse-titel{writing-mode:horizontal-tb;transform:none;letter-spacing:.18em}
    .ms-achse-werte{flex-direction:row;justify-content:space-between;flex:1;padding:0 0 5px;border-right:0;border-bottom:2px solid var(--ink);text-align:left}
    .ms-papier{aspect-ratio:auto;min-height:230px}
    .ms-werte{grid-template-columns:1fr 1fr}
    .ms-reihe{max-width:88%}
}

/* --- Seitentyp: Programmheft --- */
/* Programmheft: Band mit Spielzeit und Haus, Titelblatt, Besetzung zweispaltig mit Fuehrungspunkten, drei Akte nebeneinander */
.A-programmheft{background:var(--bg)}
.A-programmheft .pg{padding-top:clamp(22px,4.5vw,54px);padding-bottom:clamp(20px,4vw,42px)}

.pg-heft{max-width:980px;margin:0 auto;background:var(--surface);border:1px solid var(--line);padding-bottom:clamp(20px,4vw,38px);box-shadow:0 30px 70px -48px color-mix(in srgb,var(--ink) 55%,transparent)}

.pg-band{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4em 1.4em;padding:clamp(10px,2vw,15px) clamp(16px,4vw,40px);background:var(--hero);color:var(--on-hero);font:700 .72rem/1.5 var(--font-b);letter-spacing:.24em;text-transform:uppercase}
.pg-spielzeit{overflow-wrap:anywhere}
.pg-haus{color:color-mix(in srgb,var(--on-hero) 70%,var(--hero));overflow-wrap:anywhere}

.pg-titelblatt{text-align:center;padding:clamp(26px,5vw,54px) clamp(16px,4vw,40px) clamp(20px,4vw,34px);border-bottom:1px solid var(--line)}
.pg-kicker{margin:0;font:italic 400 clamp(.88rem,2vw,1rem)/1.45 var(--font-b);color:var(--muted)}
.pg-stueck{margin:.3em 0 0;font:700 clamp(2rem,7.4vw,4.4rem)/1.03 var(--font-h);letter-spacing:-.012em;color:var(--ink);overflow-wrap:anywhere}
.pg-untertitel{margin:.65em auto 0;max-width:46ch;font:400 clamp(1rem,2.4vw,1.2rem)/1.5 var(--font-b);color:var(--ink)}
.pg-gattung{margin:.8em 0 0;font:700 .72rem/1.3 var(--font-b);letter-spacing:.3em;text-transform:uppercase;color:var(--primary)}

.pg-eintritt{display:inline-grid;justify-items:center;gap:.22em;margin-top:clamp(18px,3.2vw,28px);padding:clamp(12px,2.4vw,18px) clamp(20px,4vw,34px);border:2px solid var(--primary);outline:1px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:4px}
.pg-eintritt-l{font:700 .7rem/1.2 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--primary)}
.pg-eintritt-p{font:700 clamp(1.55rem,4.6vw,2.6rem)/1.1 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.pg-eintritt-r{font:400 clamp(.8rem,1.8vw,.88rem)/1.4 var(--font-b);color:var(--muted)}

.pg-besetzung{padding:clamp(22px,4vw,38px) clamp(16px,4vw,40px);border-bottom:1px solid var(--line)}
.pg-h2{margin:0 0 clamp(14px,2.8vw,22px);text-align:center;font:700 .72rem/1.3 var(--font-b);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.pg-rollen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.7vw,13px) clamp(26px,5vw,60px)}
.pg-rollen li{display:flex;align-items:baseline;gap:.5em;font:400 clamp(.93rem,2vw,1.02rem)/1.5 var(--font-b)}
/* Fuehrungspunkte: hoehenloses Element, Unterkante auf der Schriftlinie */
.pg-fuehrung{flex:1 1 1.5em;min-width:1.5em;height:0;align-self:baseline;border-bottom:1px dotted color-mix(in srgb,var(--ink) 48%,transparent);transform:translateY(-2px)}
.pg-rolle{color:var(--muted);overflow-wrap:anywhere}
.pg-wer{flex:none;color:var(--ink);font-weight:600;overflow-wrap:anywhere}

.pg-akte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.pg-akt{padding:clamp(20px,3.4vw,30px) clamp(15px,2.6vw,26px);border-left:1px solid var(--line)}
.pg-akt:first-child{border-left:0}
.pg-akt-t{display:flex;align-items:baseline;gap:.55em;margin:0 0 .75em;font:700 .72rem/1.3 var(--font-b);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.pg-akt-n{font:700 clamp(1.5rem,3.2vw,2.2rem)/1 var(--font-h);letter-spacing:0;color:color-mix(in srgb,var(--primary) 48%,var(--surface))}
.pg-akt-x{margin:0;font:400 clamp(.93rem,2vw,1rem)/1.7 var(--font-b);color:var(--ink);overflow-wrap:anywhere}
.A-programmheft .desc.custom{margin-top:.85em;font-size:.97rem;line-height:1.7}

.pg-kasse{padding:clamp(20px,3.4vw,32px) clamp(16px,4vw,40px) 0;text-align:center}
.pg-kasse-l{margin:0 0 .7em;font:700 .72rem/1.3 var(--font-b);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

.pg-sc{padding-top:10px}

@media (max-width:780px){
  .pg-akte{grid-template-columns:1fr}
  .pg-akt{border-left:0;border-top:1px solid var(--line)}
  .pg-akt:first-child{border-top:0}
  .pg-rollen{grid-template-columns:1fr}
  .pg-eintritt{display:grid;justify-self:stretch;outline-offset:3px}
  .pg-band{letter-spacing:.16em}
}

/* --- Seitentyp: Rechner --- */
/* Rechner: Geraetekoerper mit Anzeige oben, Preis als Ergebnis, Tastenfeld mit den Merkmalen */
.A-rechner{background:color-mix(in srgb,var(--ink) 7%,var(--bg))}
.A-rechner .rn{padding-top:clamp(26px,5vw,56px);padding-bottom:20px}
.rn-geraet{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) + 8px);padding:clamp(16px,3vw,28px);box-shadow:0 32px 70px -40px var(--ink),inset 0 2px 0 color-mix(in srgb,var(--ink) 5%,transparent)}

/* Modellbezeichnung auf dem Gehaeuse */
.rn-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding-bottom:clamp(12px,2vw,18px)}
.rn-modell{margin:0;font:800 clamp(1rem,2.6vw,1.35rem)/1.2 var(--font-h);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere}
.rn-typ{margin:0;font:700 .62rem/1 var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Die Anzeige */
.rn-anzeige{background:color-mix(in srgb,var(--primary) 12%,var(--hero));border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:calc(var(--r) / 2);padding:clamp(12px,2.2vw,20px);box-shadow:inset 0 3px 10px -4px var(--ink);text-align:right}
.rn-rechnung{margin:0;font:700 clamp(.68rem,1.5vw,.8rem)/1 var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 62%,transparent);font-variant-numeric:tabular-nums}
.rn-ergebnis{margin:.3em 0 .2em;font:800 clamp(1.7rem,6.4vw,3rem)/1 var(--font-h);letter-spacing:-.01em;color:var(--on-hero);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rn-melder{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 10px;margin:0}
.rn-melder span{font:700 .58rem/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 28%,transparent)}
.rn-melder span.rn-an{color:var(--on-hero)}

.rn-lead{margin:clamp(12px,2.2vw,18px) 0 clamp(12px,2.2vw,18px);text-align:center;font-size:clamp(.92rem,1.8vw,1.05rem);line-height:1.5;color:var(--muted)}

/* Das Tastenfeld: jede Taste traegt ein Merkmal */
.rn-feld{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(7px,1.4vw,11px)}
.rn-taste{display:grid;align-content:center;gap:3px;min-height:clamp(58px,11vw,76px);padding:8px 6px;text-align:center;background:color-mix(in srgb,var(--ink) 6%,var(--surface));border:1px solid var(--line);border-radius:calc(var(--r) / 2);box-shadow:0 3px 0 var(--line)}
.rn-taste b{font:800 clamp(.88rem,2.4vw,1.2rem)/1.1 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.rn-taste small{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rn-taste-hell{background:color-mix(in srgb,var(--primary) 14%,var(--surface));border-color:color-mix(in srgb,var(--primary) 40%,transparent)}
.rn-taste-hell b{color:var(--primary)}
.rn-taste-gleich{background:var(--primary);border-color:var(--primary);box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 35%,var(--primary))}
.rn-taste-gleich b{font-size:clamp(1.2rem,3.4vw,1.7rem);color:var(--on-primary)}
.rn-taste-gleich small{color:color-mix(in srgb,var(--on-primary) 78%,transparent)}

.rn-text{margin:clamp(14px,2.4vw,20px) 0 0;line-height:1.75;color:var(--muted)}
.A-rechner .ab{margin-top:clamp(14px,2.4vw,20px);justify-content:center;text-align:center}
.A-rechner .ab-btns{justify-content:center}
.rn-fuss{margin:clamp(12px,2vw,18px) 0 0;padding-top:10px;border-top:1px solid var(--line);text-align:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rn-sc{padding-top:14px}

@media (max-width:780px){
    .rn-feld{grid-template-columns:repeat(2,minmax(0,1fr))}
    .rn-kopf{flex-direction:column;align-items:flex-start}
    .rn-anzeige{text-align:left}
    .rn-melder{justify-content:flex-start}
}

/* --- Seitentyp: Rezeptblock --- */
/* Rezept: Block aus gestapelten Blaettern, Rx-Spalte, Verordnung auf Linien, Stempelfeld */
.A-rezept{background:color-mix(in srgb,var(--primary) 5%,var(--bg))}
.A-rezept .rz{padding-top:clamp(28px,5vw,64px);padding-bottom:34px}
.rz-block{max-width:780px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--primary);padding:clamp(20px,3.2vw,40px);
  box-shadow:0 6px 0 -2px var(--surface),0 7px 0 -2px var(--line),0 13px 0 -4px var(--surface),0 14px 0 -4px var(--line),0 30px 54px -44px var(--ink)}
.rz-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 20px;border-bottom:2px solid var(--ink);padding-bottom:12px}
.rz-aussteller strong{display:block;font:800 clamp(1rem,2.2vw,1.2rem) var(--font-h);letter-spacing:.02em}
.rz-aussteller small{display:block;margin-top:2px;font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.rz-kopffelder{display:flex;gap:18px;margin:0;text-align:right}
.rz-kopffelder dt{font:700 .62rem var(--font-b);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.rz-kopffelder dd{margin:2px 0 0;font:800 .96rem var(--font-h);font-variant-numeric:tabular-nums}
.rz-koerper{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,2.4vw,28px);margin-top:clamp(14px,2.4vw,24px)}
.rz-rx{position:relative;align-self:start;font:900 clamp(2.6rem,8vw,5rem)/.9 var(--font-h);color:var(--primary)}
.rz-rx i{font-style:normal;font-size:.52em;vertical-align:baseline}
.rz-rx::after{content:"";position:absolute;left:.08em;bottom:.1em;width:.6em;height:.08em;background:currentColor;transform:rotate(-40deg);transform-origin:left center}
.rz-zeilen{line-height:32px;background-image:repeating-linear-gradient(to bottom,transparent 0 31px,var(--line) 31px 32px);background-position:0 0}
.rz-name{font:800 clamp(1.5rem,4.2vw,2.3rem)/64px var(--font-h);margin:0;overflow-wrap:anywhere}
.rz-lead{margin:0;color:var(--muted);line-height:32px;overflow-wrap:anywhere}
.rz-dosis{list-style:none;margin:0;padding:0}
.rz-dosis li{line-height:32px;border-bottom:0;font-size:.95rem}
.rz-dosis b{display:inline-block;min-width:5.2em;color:var(--primary);font-weight:800;font-variant-numeric:tabular-nums}
.rz-zuzahlung{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;border:2px solid var(--ink);padding:12px 16px;margin:clamp(18px,2.8vw,28px) 0 16px}
.rz-zuzahlung span{font:700 .72rem var(--font-b);text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.rz-zuzahlung b{font:800 clamp(1.3rem,3.6vw,2rem)/1 var(--font-h);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rz-desc{line-height:1.75;color:var(--muted);margin:0 0 6px}
.A-rezept .ab-l,.A-rezept .ab-p{display:none}
.rz-fuss{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);gap:clamp(14px,2.6vw,30px);align-items:end;margin-top:clamp(22px,3.4vw,36px)}
.rz-stempel{min-height:92px;border:2px dashed var(--line);display:grid;place-content:center;font:700 .68rem var(--font-b);text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.rz-unterschrift small{display:block;margin-top:6px;font:700 .68rem var(--font-b);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.rz-linie{display:block;border-top:1px solid var(--ink);height:0}
.rz-sc{padding-top:16px}
@media (max-width:780px){
  .rz-koerper{grid-template-columns:1fr}
  .rz-rx{line-height:1}
  .rz-fuss{grid-template-columns:1fr}
  .rz-kopffelder{text-align:left}
}

/* --- Seitentyp: Schichten --- */
/* Schichten: geologisches Profil aus waagerechten Baendern, links die Tiefenskala */
.A-schichten .si{padding-top:clamp(26px,4vw,56px);padding-bottom:clamp(26px,4vw,52px);max-width:1000px}
.A-schichten .si-kopf{
  padding:0 0 clamp(14px,2vw,20px) clamp(78px,9vw,108px);
  border-bottom:2px solid var(--ink);
}
.A-schichten .si-k{
  display:block;font:700 .68rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.A-schichten .si-name{
  margin:.22em 0 .18em;
  font:800 clamp(1.9rem,5.6vw,3.6rem)/1.02 var(--font-h);
  letter-spacing:-.03em;overflow-wrap:anywhere;
}
.A-schichten .si-lead{margin:0;font-size:clamp(1rem,1.6vw,1.18rem);color:var(--muted);max-width:60ch}
/* das Profil: Spalte Tiefenskala, Spalte Baender; jede Zeile so dick wie ihre Schicht */
.A-schichten .si-profil{
  display:grid;
  grid-template-columns:clamp(78px,9vw,108px) minmax(0,1fr);
  align-items:stretch;
}
.A-schichten .si-tiefe{
  display:block;min-height:var(--h);
  padding:6px 12px 0 0;text-align:right;
  font:600 .74rem/1 var(--font-b);font-variant-numeric:tabular-nums;color:var(--muted);
  border-right:2px solid var(--ink);
  border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
}
.A-schichten .si-tiefe-k{color:var(--ink);font-weight:800}
.A-schichten .si-tiefe-e{
  min-height:16px;padding:6px 12px 0 0;text-align:right;
  font:600 .74rem/1 var(--font-b);color:var(--muted);
  border-right:2px solid var(--ink);border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
}
.A-schichten .si-band{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  min-height:var(--h);min-width:0;
  padding:clamp(6px,1vw,10px) clamp(14px,2vw,22px);
  border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
  background-color:var(--surface);
}
/* drei Gesteinsarten, nur als Schraffur aus der Textfarbe */
.A-schichten .si-m0{
  background-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 9%,transparent) 0 2px,transparent 2px 9px);
}
.A-schichten .si-m1{
  background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 11%,transparent) 0 1px,transparent 1px 7px);
}
.A-schichten .si-m2{
  background-image:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--ink) 16%,transparent) 1.1px,transparent 1.2px);
  background-size:12px 12px;
}
.A-schichten .si-bl{
  font:700 .72rem/1.2 var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.A-schichten .si-bv{
  font:600 clamp(1rem,2vw,1.35rem)/1.2 var(--font-h);color:var(--ink);
  text-align:right;overflow-wrap:anywhere;min-width:0;
}
/* das Floez: die dickste Schicht traegt den Preis */
.A-schichten .si-floez{
  display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;
  min-height:var(--h);
  padding:clamp(8px,1.4vw,14px) clamp(14px,2vw,26px);
  background:var(--primary);color:var(--on-primary);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
}
.A-schichten .si-floez .si-bl{color:var(--on-primary);opacity:.82}
.A-schichten .si-preis{
  font:800 clamp(1.7rem,4.2vw,3rem)/1 var(--font-h);
  overflow-wrap:anywhere;min-width:0;
}
.A-schichten .si-rate{flex:1 0 100%;text-align:right;font-size:.88rem;opacity:.85}
.A-schichten .si-sohle{
  grid-column:2;height:14px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 7px);
  border-top:2px solid var(--ink);
}
.A-schichten .si-text{
  margin-top:clamp(20px,3vw,32px);
  padding-left:clamp(78px,9vw,108px);
  max-width:74ch;font-size:clamp(1rem,1.5vw,1.1rem);
}
.A-schichten .si-text p{margin:0 0 1em}
.A-schichten .si-text .ab{margin-top:clamp(14px,2vw,20px);flex-wrap:wrap}
.A-schichten .si-sc{padding-top:8px;padding-bottom:8px}
@media (max-width:780px){
  .A-schichten .si-profil{grid-template-columns:52px minmax(0,1fr)}
  .A-schichten .si-kopf,.A-schichten .si-text{padding-left:0}
  .A-schichten .si-tiefe,.A-schichten .si-tiefe-e{font-size:.66rem;padding-right:7px}
  .A-schichten .si-band,.A-schichten .si-floez{padding:10px 12px;align-content:center}
  .A-schichten .si-bv{font-size:1rem}
  .A-schichten .si-preis{font-size:clamp(1.4rem,7vw,2rem)}
  .A-schichten .si-name{font-size:clamp(1.7rem,8.5vw,2.5rem)}
}

/* --- Seitentyp: Skala --- */
/* Skala: Radioskala, Domainname als eingestellter Sender am Zeiger, Preis als Senderstaerke */
.A-skala{background:color-mix(in srgb,var(--ink) 5%,var(--bg))}
.A-skala .sk{padding-top:clamp(26px,5vw,60px);padding-bottom:20px}
.sk-geraet{max-width:920px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,2.8vw,32px);box-shadow:0 28px 64px -44px var(--ink),inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.sk-marke{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 clamp(12px,2vw,18px);font:700 .68rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.sk-marke b{color:var(--primary);letter-spacing:.14em}

/* Das Skalenfenster */
.sk-fenster{position:relative;padding:clamp(18px,3vw,26px) clamp(10px,2vw,20px) clamp(26px,4vw,38px);background:var(--hero);border:1px solid var(--line);border-radius:calc(var(--r) / 2)}
.sk-striche{height:clamp(26px,4.4vw,38px);background:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-hero) 62%,transparent) 0 1px,transparent 1px 10%),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-hero) 30%,transparent) 0 1px,transparent 1px 2%);
    background-position:0 0,0 60%;background-size:100% 100%,100% 40%;background-repeat:repeat-x;border-bottom:1px solid color-mix(in srgb,var(--on-hero) 45%,transparent)}
.sk-zahlen{display:flex;justify-content:space-between;margin-top:7px;font:700 clamp(.68rem,1.5vw,.82rem)/1 var(--font-b);letter-spacing:.1em;color:color-mix(in srgb,var(--on-hero) 70%,transparent);font-variant-numeric:tabular-nums}
.sk-zeiger{position:absolute;top:clamp(10px,2vw,16px);bottom:clamp(6px,1.2vw,10px);transform:translateX(-50%)}
.sk-nadel{display:block;width:2px;height:100%;margin:0 auto;background:var(--on-hero);box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 28%,transparent)}
.sk-fahne{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);white-space:nowrap;font:800 .66rem/1 var(--font-b);letter-spacing:.1em;color:var(--on-primary);background:var(--primary);padding:4px 7px;border-radius:2px}

/* Der eingestellte Sender */
.sk-sender{padding:clamp(16px,2.8vw,26px) 0 clamp(12px,2vw,18px);border-bottom:1px solid var(--line)}
.sk-eingestellt{margin:0;font:700 .64rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.sk-name{margin:.22em 0 .12em;font:800 clamp(1.8rem,5.6vw,3.6rem)/1.05 var(--font-h);letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.sk-lead{margin:0;color:var(--muted);font-size:clamp(.95rem,1.8vw,1.1rem);line-height:1.55}

/* Senderstaerke statt Preisschild */
.sk-staerke{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"titel titel titel" "balken preis hint";align-items:end;gap:4px clamp(12px,2.2vw,20px);padding:clamp(14px,2.4vw,20px) 0;border-bottom:1px solid var(--line)}
.sk-staerke-titel{grid-area:titel;margin:0 0 6px;font:700 .64rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.sk-balken{grid-area:balken;display:flex;align-items:flex-end;gap:3px;height:clamp(32px,5vw,46px)}
.sk-balken i{display:block;width:clamp(6px,1.2vw,10px);background:color-mix(in srgb,var(--ink) 14%,transparent);border-radius:1px}
.sk-balken i.sk-an{background:var(--primary)}
.sk-preis{grid-area:preis;margin:0;font:800 clamp(1.3rem,3.8vw,2.3rem)/1 var(--font-h);color:var(--primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sk-preis-hint{grid-area:hint;margin:0 0 .2em;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Kippschalter und Drehknoepfe */
.sk-bedienung{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,2.6vw,26px);padding:clamp(16px,2.8vw,24px) 0;border-bottom:1px solid var(--line)}
.sk-schalter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.6vw,14px)}
.sk-kipp{text-align:center;padding:10px 6px;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line);border-radius:calc(var(--r) / 3)}
.sk-wippe{display:block;width:22px;height:34px;margin:0 auto 7px;background:color-mix(in srgb,var(--ink) 10%,transparent);border:1px solid var(--line);border-radius:3px;position:relative}
.sk-wippe i{position:absolute;left:2px;right:2px;bottom:2px;height:14px;background:var(--muted);border-radius:2px}
.sk-kipp-an .sk-wippe i{bottom:auto;top:2px;background:var(--primary)}
.sk-kipp small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sk-kipp b{display:block;margin-top:2px;font:700 clamp(.76rem,1.6vw,.92rem) var(--font-b);color:var(--ink);overflow-wrap:anywhere}
.sk-knoepfe{display:flex;gap:clamp(10px,2vw,18px)}
.sk-knopf{text-align:center}
.sk-scheibe{display:block;width:clamp(44px,8vw,64px);height:clamp(44px,8vw,64px);margin:0 auto 7px;border-radius:50%;border:2px solid var(--line);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--ink) 7%,transparent),transparent 70%),var(--surface);position:relative}
.sk-scheibe::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:34%;margin-left:-1px;background:var(--accent)}
.sk-knopf small{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sk-knopf b{display:block;margin-top:2px;font:800 clamp(.88rem,2vw,1.1rem) var(--font-h);color:var(--ink)}

.sk-text{margin:clamp(14px,2.4vw,20px) 0 0;line-height:1.75;color:var(--muted)}
.A-skala .ab{margin-top:clamp(14px,2.4vw,20px)}
.sk-sc{padding-top:14px}

@media (max-width:780px){
    .sk-bedienung{grid-template-columns:1fr}
    .sk-schalter{grid-template-columns:1fr 1fr}
    .sk-knoepfe{justify-content:flex-start}
    .sk-staerke{grid-template-columns:1fr;grid-template-areas:"titel" "balken" "preis" "hint";align-items:start}
    .sk-preis-hint{margin:0}
}

/* --- Seitentyp: Stimmzettel --- */
/* Spalten: Stimmzettel, streng senkrecht gegliedert, durchlaufende Trennlinie zum Ankreuzfeld */
.A-spalten .sz{padding-top:clamp(24px,4vw,52px);padding-bottom:clamp(26px,4vw,52px);max-width:760px}
.A-spalten .sz-bogen{
  background:var(--surface);
  border:2px solid var(--ink);
  border-radius:0;
  box-shadow:0 16px 40px -30px color-mix(in srgb,var(--ink) 65%,transparent);
}
.A-spalten .sz-kopf{
  padding:clamp(16px,2.4vw,26px) clamp(14px,2.2vw,24px);
  text-align:center;
  border-bottom:2px solid var(--ink);
}
.A-spalten .sz-amt{margin:0 0 .5em;font:700 .66rem/1 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.A-spalten .sz-titel{
  margin:0;font:800 clamp(1.1rem,2.6vw,1.6rem)/1.1 var(--font-h);
  letter-spacing:.22em;text-transform:uppercase;
}
.A-spalten .sz-sub{margin:.5em 0 0;font-size:.9rem;color:var(--muted);overflow-wrap:anywhere}
.A-spalten .sz-anleitung{
  margin:0;padding:.7em clamp(14px,2.2vw,24px);
  font:600 .8rem/1.4 var(--font-b);
  background:color-mix(in srgb,var(--accent) 16%,var(--surface));
  border-bottom:2px solid var(--ink);
}
.A-spalten .sz-liste{list-style:none;margin:0;padding:0;counter-reset:none}
.A-spalten .sz-zeile{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(58px,8vw,78px);
  align-items:stretch;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 35%,transparent);
}
.A-spalten .sz-zeile:last-child{border-bottom:2px solid var(--ink)}
.A-spalten .sz-inhalt{
  display:grid;grid-template-columns:clamp(30px,4vw,44px) minmax(0,1fr);
  gap:0 clamp(8px,1.4vw,14px);align-items:start;
  padding:clamp(10px,1.8vw,16px) clamp(12px,2vw,20px);
}
.A-spalten .sz-nr{
  font:700 .95rem/1.5 var(--font-b);font-variant-numeric:tabular-nums;
  color:var(--muted);text-align:right;
  border-right:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  padding-right:clamp(6px,1vw,10px);
  align-self:stretch;
}
.A-spalten .sz-vorschlag{min-width:0}
.A-spalten .sz-lb{
  display:block;font:700 .68rem/1.3 var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.A-spalten .sz-vl{display:block;font-size:1rem;overflow-wrap:anywhere}
/* das Ankreuzfeld: die senkrechte Linie laeuft durch alle Zeilen */
.A-spalten .sz-feld{
  display:grid;place-items:center;
  border-left:2px solid var(--ink);
  padding:clamp(10px,1.8vw,16px) 8px;
}
.A-spalten .sz-kasten{
  display:grid;place-items:center;
  width:clamp(26px,3.6vw,34px);height:clamp(26px,3.6vw,34px);
  border:2px solid var(--ink);
  background:var(--bg);
  font:700 1.3rem/1 var(--font-b);color:transparent;
}
.A-spalten .sz-kreuz{color:var(--ink);border-color:var(--ink)}
/* der Wahlvorschlag: der Domainname */
.A-spalten .sz-haupt{border-bottom:2px solid var(--ink)}
.A-spalten .sz-haupt .sz-inhalt{padding-top:clamp(14px,2.4vw,22px);padding-bottom:clamp(14px,2.4vw,22px)}
.A-spalten .sz-name{
  margin:0;font:800 clamp(1.6rem,5.6vw,2.9rem)/1.04 var(--font-h);
  letter-spacing:-.025em;overflow-wrap:anywhere;
}
.A-spalten .sz-lead{margin:.3em 0 0;font-size:clamp(.95rem,1.5vw,1.08rem);color:var(--muted)}
.A-spalten .sz-haupt .sz-nr{font-size:1.1rem;color:var(--ink)}
/* die angekreuzte Zeile: der Preis */
.A-spalten .sz-gewaehlt{background:color-mix(in srgb,var(--primary) 10%,var(--surface));border-top:2px solid var(--ink)}
.A-spalten .sz-preis{
  display:block;margin:.1em 0;
  font:800 clamp(1.4rem,4vw,2.2rem)/1.05 var(--font-h);color:var(--ink);
  overflow-wrap:anywhere;
}
.A-spalten .sz-text{padding:clamp(16px,2.4vw,24px) clamp(12px,2vw,22px) 0;font-size:1rem}
.A-spalten .sz-text p{margin:0 0 1em}
.A-spalten .sz-bogen .ab{
  margin:0;padding:0 clamp(12px,2vw,22px) clamp(16px,2.4vw,24px);
  flex-wrap:wrap;
}
.A-spalten .sz-belehrung{
  margin:0;padding:clamp(12px,2vw,18px) clamp(12px,2vw,22px);
  border-top:1px solid color-mix(in srgb,var(--ink) 35%,transparent);
  font:400 .74rem/1.55 var(--font-b);color:var(--muted);
}
.A-spalten .sz-sc{padding-top:8px;padding-bottom:8px}
@media (max-width:780px){
  .A-spalten .sz-zeile{grid-template-columns:minmax(0,1fr) 46px}
  .A-spalten .sz-inhalt{grid-template-columns:26px minmax(0,1fr)}
  .A-spalten .sz-name{font-size:clamp(1.5rem,8vw,2.1rem)}
  .A-spalten .sz-titel{letter-spacing:.14em}
  .A-spalten .sz-kasten{width:24px;height:24px;font-size:1.05rem}
  .A-spalten .sz-feld{padding:12px 6px}
}

/* --- Seitentyp: Speisekarte --- */
/* Speisekarte: schmale Karte, Gaenge als Abschnitte, Fuehrungspunkte bis zur Zahl, Fussnote unten */
.A-speisekarte{background:var(--bg)}
.A-speisekarte .sp{padding-top:clamp(26px,5vw,60px);padding-bottom:clamp(20px,4vw,40px)}

.sp-karte{max-width:760px;margin:0 auto;background:var(--surface);padding:clamp(22px,5vw,56px) clamp(18px,5vw,52px);border-top:3px double var(--ink);border-bottom:3px double var(--ink)}

.sp-kopf{text-align:center;padding-bottom:clamp(16px,3vw,26px);border-bottom:1px solid var(--line)}
.sp-haus{margin:0;font:700 .72rem/1.3 var(--font-b);letter-spacing:.32em;text-transform:uppercase;color:var(--primary);overflow-wrap:anywhere}
.sp-titel{margin:.6em 0 .2em;font:400 clamp(1.4rem,4.2vw,2.1rem)/1.1 var(--font-h);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.sp-tag{margin:0;font:italic 400 clamp(.82rem,1.9vw,.92rem)/1.45 var(--font-b);color:var(--muted)}

.sp-gang{padding:clamp(20px,4vw,34px) 0;border-bottom:1px solid var(--line)}
.sp-gang:last-of-type{border-bottom:0;padding-bottom:0}
.sp-gang-t{display:flex;align-items:baseline;justify-content:center;gap:.7em;margin:0 0 clamp(14px,3vw,24px);font:600 .76rem/1.2 var(--font-b);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.sp-gang-n{font:700 .88rem/1 var(--font-h);letter-spacing:.08em;color:var(--primary)}

/* Fuehrungspunkte: leeres, hoehenloses Element, dessen Unterkante auf der Schriftlinie liegt */
.sp-zeile{display:flex;align-items:baseline;gap:.55em}
.sp-punkte{flex:1 1 2em;min-width:2em;height:0;align-self:baseline;border-bottom:2px dotted color-mix(in srgb,var(--ink) 42%,transparent);transform:translateY(-2px)}

.sp-haus-gericht{display:block}
.sp-zeile-xl{flex-wrap:wrap;gap:.6em}
.sp-name{margin:0;font:600 clamp(1.9rem,6.4vw,3.4rem)/1.05 var(--font-h);color:var(--ink);overflow-wrap:anywhere;max-width:100%}
.sp-zeile-xl .sp-punkte{border-bottom-width:3px}
.sp-preis{flex:none;font:600 clamp(1.4rem,3.8vw,2.2rem)/1.1 var(--font-h);color:var(--ink);white-space:nowrap}
.sp-empfehlung{margin:.75em 0 0;max-width:54ch;font:400 clamp(1rem,2.4vw,1.14rem)/1.6 var(--font-b);color:var(--ink)}
.sp-marke{margin:1em 0 0;font:700 .7rem/1.2 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--primary)}
.sp-zutaten{margin:.5em 0 0;max-width:54ch;font:italic 400 clamp(.93rem,2.2vw,1.02rem)/1.65 var(--font-b);color:var(--muted);overflow-wrap:anywhere}
.sp-zutaten sup{font-style:normal;font-size:.68em;font-weight:700;color:var(--primary)}

.sp-beilagen{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,1.7vw,13px)}
.sp-beilagen .sp-zeile{font:400 clamp(.95rem,2.2vw,1.04rem)/1.5 var(--font-b)}
.sp-g{color:var(--ink);overflow-wrap:anywhere}
.sp-g sup{font-size:.68em;font-weight:700;color:var(--primary)}
.sp-w{flex:none;color:var(--ink);font-weight:600;white-space:nowrap}

.sp-text{margin:0;max-width:62ch;font:400 clamp(.98rem,2.2vw,1.06rem)/1.75 var(--font-b);color:var(--ink)}
.A-speisekarte .desc.custom{margin-top:.9em;line-height:1.75}
.A-speisekarte .ab{margin-top:clamp(18px,3vw,26px);padding-top:clamp(14px,2.6vw,20px);border-top:1px solid var(--line);justify-content:space-between}

.sp-fuss{margin-top:clamp(20px,3.4vw,30px);padding-top:clamp(12px,2.4vw,18px);border-top:3px double var(--ink)}
.sp-fuss p{margin:0 0 .45em;font:400 clamp(.74rem,1.7vw,.8rem)/1.6 var(--font-b);color:var(--muted);overflow-wrap:anywhere}
.sp-fuss p:last-child{margin-bottom:0}
.sp-fuss sup{font-weight:700;color:var(--primary)}

.sp-sc{padding-top:10px}

@media (max-width:780px){
  .sp-karte{padding-left:clamp(16px,5vw,24px);padding-right:clamp(16px,5vw,24px)}
  .sp-name{flex:1 0 100%}
  .sp-gang-t{letter-spacing:.2em}
  .A-speisekarte .ab{flex-direction:column;align-items:flex-start}
}

/* --- Seitentyp: Sternkarte --- */
/* Sternkarte: Himmelsfeld mit Sternbild aus dem Namen, Legende mit Helligkeiten */
.A-sternkarte .sn{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,30px);
  align-items:start;
  padding-top:clamp(26px,4vw,56px);
  padding-bottom:clamp(26px,4vw,52px);
}
.A-sternkarte .sn-feld{
  grid-column:1;margin:0;
  background:var(--hero);color:var(--on-hero);
  border:1px solid color-mix(in srgb,var(--on-hero) 28%,var(--hero));
  border-radius:var(--r);
  padding:clamp(12px,1.8vw,20px);
  box-shadow:inset 0 0 70px color-mix(in srgb,var(--on-hero) 10%,transparent);
}
.A-sternkarte .sn-svg{
  display:block;width:100%;height:auto;
  border:1px solid color-mix(in srgb,var(--on-hero) 20%,var(--hero));
  border-radius:calc(var(--r) / 2);
  background:color-mix(in srgb,var(--on-hero) 7%,var(--hero));
}
.A-sternkarte .sn-staub circle{fill:currentColor;opacity:.32}
.A-sternkarte .sn-sterne circle{fill:currentColor}
.A-sternkarte .sn-linie{stroke:currentColor;stroke-width:.4;stroke-linejoin:round;stroke-linecap:round;opacity:.5}
.A-sternkarte .sn-kopf{margin-top:clamp(12px,1.8vw,20px);padding:0 clamp(2px,.6vw,8px)}
.A-sternkarte .sn-kl{
  display:block;font:700 .68rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 62%,var(--hero));
}
.A-sternkarte .sn-name{
  margin:.25em 0 .2em;color:var(--on-hero);
  font:700 clamp(1.9rem,5vw,3.4rem)/1.04 var(--font-h);
  letter-spacing:-.02em;overflow-wrap:anywhere;
}
.A-sternkarte .sn-lead{margin:0;font-size:clamp(.95rem,1.5vw,1.1rem);color:color-mix(in srgb,var(--on-hero) 76%,var(--hero))}
/* Legende */
.A-sternkarte .sn-legende{
  grid-column:2;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(16px,2.2vw,26px);
}
.A-sternkarte .sn-lt{margin:0 0 .6em;font:700 .68rem/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.A-sternkarte .sn-hell{margin:0 0 clamp(16px,2.2vw,24px)}
.A-sternkarte .sn-z{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px 12px;align-items:baseline;
  padding:.55em 0;border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);
}
.A-sternkarte .sn-z dt{grid-column:1;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.A-sternkarte .sn-z dd{grid-column:1;margin:0;font-weight:600;overflow-wrap:anywhere}
.A-sternkarte .sn-mag{
  grid-column:2;grid-row:1 / 3;align-self:center;margin:0;
  font:700 .88rem/1 var(--font-b);font-variant-numeric:tabular-nums;
  color:var(--ink);white-space:nowrap;
  padding:.35em .6em;border:1px solid var(--accent);border-radius:999px;
}
.A-sternkarte .sn-ent{
  display:flex;flex-direction:column;gap:.2em;
  padding:clamp(12px,1.8vw,18px);
  background:var(--primary);color:var(--on-primary);
  border-radius:calc(var(--r) / 1.5);
}
.A-sternkarte .sn-ent-l{font:700 .68rem/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;opacity:.82}
.A-sternkarte .sn-ent-p{font:800 clamp(1.5rem,3vw,2.3rem)/1.05 var(--font-h);overflow-wrap:anywhere}
.A-sternkarte .sn-ent-r{font-size:.86rem;opacity:.85}
.A-sternkarte .sn-legende .ab{margin-top:clamp(14px,2vw,20px);flex-wrap:wrap}
.A-sternkarte .sn-text{
  grid-column:1 / -1;
  max-width:70ch;
  font-size:clamp(1rem,1.5vw,1.1rem);
}
.A-sternkarte .sn-text p{margin:0 0 1em}
.A-sternkarte .sn-sc{padding-top:8px;padding-bottom:8px}
@media (max-width:780px){
  .A-sternkarte .sn{grid-template-columns:1fr}
  .A-sternkarte .sn-feld,.A-sternkarte .sn-legende,.A-sternkarte .sn-text{grid-column:1}
  .A-sternkarte .sn-name{font-size:clamp(1.7rem,8vw,2.4rem)}
  .A-sternkarte .sn-mag{font-size:.8rem}
}

/* --- Seitentyp: Telegramm --- */
/* Telegramm: Formularbogen mit Lochrandstreifen, Zeilen in Versalien mit STOP */
.A-telegramm{background:var(--bg)}
.A-telegramm .tg{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.tg-formular{position:relative;max-width:920px;margin:0 auto;background:var(--surface);border:1px solid var(--ink);padding:clamp(22px,3.4vw,42px) clamp(40px,6vw,74px);box-shadow:0 26px 54px -40px var(--ink)}
.tg-rand{position:absolute;top:0;bottom:0;width:clamp(22px,3.4vw,30px);background:radial-gradient(circle 4px at 50% 12px,var(--bg) 97%,transparent 100%) 0 0/100% 26px repeat-y}
.tg-rand-l{left:0;border-right:1px dashed var(--line)}
.tg-rand-r{right:0;border-left:1px dashed var(--line)}
.tg-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;font:700 clamp(.66rem,1.5vw,.76rem)/1.4 var(--font-b);text-transform:uppercase;letter-spacing:.16em;color:var(--muted);border-bottom:2px solid var(--ink);padding-bottom:10px}
.tg-amt{color:var(--ink)}
.tg-leiste{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px dashed var(--line);padding:9px 0}
.tg-leiste b{color:var(--ink);font-weight:800;letter-spacing:.04em}
.tg-band{font-family:var(--mono,ui-monospace,monospace);margin:clamp(16px,2.6vw,26px) 0 clamp(14px,2.4vw,22px)}
.tg-zeile,.tg-name{display:block;margin:0;padding:9px 0;border-bottom:1px dotted var(--line);font-size:clamp(.88rem,2vw,1.05rem);line-height:1.5;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.tg-nr{display:inline-block;min-width:2.6em;color:var(--muted);font-weight:400;letter-spacing:.1em}
.tg-name{font:800 clamp(1.3rem,4.4vw,2.5rem)/1.2 var(--font-h);letter-spacing:.04em;padding:14px 0;border-bottom:1px solid var(--ink)}
.tg-name .tg-nr{font-size:.42em;vertical-align:middle}
.tg-zeile i,.tg-name i{display:inline-block;margin-left:.7em;padding:.1em .5em;font-style:normal;font-size:.66em;font-weight:800;letter-spacing:.2em;color:var(--primary);background:color-mix(in srgb,var(--primary) 14%,transparent);border-radius:2px;vertical-align:middle}
.tg-preis{border-bottom:2px solid var(--ink)}
.tg-preis b{font:800 clamp(1.2rem,3.4vw,1.9rem) var(--font-h);color:var(--primary);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tg-klartext{color:var(--muted);line-height:1.7;margin:0 0 4px}
.A-telegramm .ab-l,.A-telegramm .ab-p{display:none}
.tg-vermerk{position:relative;margin-top:clamp(18px,3vw,30px);border:1px dashed var(--line);background:color-mix(in srgb,var(--ink) 4%,transparent);padding:12px 16px;font-size:.8rem;color:var(--muted)}
.tg-vermerk p{margin:0}
.tg-vermerk-titel{text-transform:uppercase;letter-spacing:.18em;font-weight:700;color:var(--ink);margin-bottom:4px!important}
.tg-kuerzel{position:absolute;right:14px;top:50%;transform:translateY(-50%) rotate(-9deg);border:2px solid var(--accent);color:var(--accent);font:900 .9rem var(--font-h);letter-spacing:.18em;padding:3px 9px;border-radius:3px;opacity:.9}
.tg-sc{padding-top:10px}
@media (max-width:780px){
  .tg-formular{padding-left:clamp(26px,8vw,40px);padding-right:clamp(26px,8vw,40px)}
  .tg-rand{width:18px}
  .tg-nr{min-width:2.2em}
  .tg-kuerzel{position:static;display:inline-block;transform:rotate(-4deg);margin-top:10px}
}

/* --- Seitentyp: Wegweiser --- */
/* Wegweiser: pfeilfoermige Schilder uebereinander an einem Pfosten, jedes mit Entfernung */
.A-wegweiser{background:var(--bg)}
.A-wegweiser .ww{padding-top:clamp(24px,4.5vw,54px);padding-bottom:clamp(20px,4vw,44px)}

.ww-pfosten{position:relative;max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(10px,1.9vw,16px);padding:clamp(16px,3vw,26px) 0 clamp(24px,4vw,38px)}

.ww-mast{position:absolute;z-index:0;top:0;bottom:0;left:50%;width:clamp(12px,2vw,18px);transform:translateX(-50%);border-radius:calc(var(--r) / 2);background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 36%,var(--bg)),color-mix(in srgb,var(--ink) 18%,var(--bg)) 46%,color-mix(in srgb,var(--ink) 42%,var(--bg)))}
.ww-mast::before{content:"";position:absolute;left:50%;top:-14px;width:clamp(20px,3.2vw,28px);height:clamp(20px,3.2vw,28px);transform:translateX(-50%) rotate(45deg);border-radius:calc(var(--r) / 3);background:color-mix(in srgb,var(--primary) 72%,var(--bg))}
.ww-fuss{grid-column:1/-1;justify-self:center;z-index:0;width:clamp(110px,24vw,190px);height:clamp(8px,1.4vw,12px);border-radius:999px;background:color-mix(in srgb,var(--ink) 26%,var(--bg));box-shadow:0 12px 20px -10px color-mix(in srgb,var(--ink) 60%,transparent)}

.ww-s{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(10px,2vw,20px);background:var(--surface);color:var(--ink);padding:clamp(10px,1.9vw,16px) clamp(16px,2.6vw,24px);filter:drop-shadow(0 7px 12px color-mix(in srgb,var(--ink) 28%,transparent))}
/* Zwei Schraubenkoepfe am pfostenseitigen Rand */
.ww-s::after{content:"";position:absolute;top:50%;width:clamp(5px,.9vw,7px);height:clamp(5px,.9vw,7px);border-radius:50%;background:color-mix(in srgb,var(--ink) 32%,var(--surface));box-shadow:0 -13px 0 color-mix(in srgb,var(--ink) 32%,var(--surface)),0 13px 0 color-mix(in srgb,var(--ink) 32%,var(--surface))}

.ww-r{grid-column:2;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 50%,calc(100% - 28px) 100%,0 100%);padding-right:clamp(40px,5vw,52px)}
.ww-r::after{left:clamp(7px,1.2vw,11px)}
.ww-l{grid-column:1;flex-direction:row-reverse;text-align:right;clip-path:polygon(28px 0,100% 0,100% 100%,28px 100%,0 50%);padding-left:clamp(40px,5vw,52px)}
.ww-l::after{right:clamp(7px,1.2vw,11px)}

.ww-s.ww-s-haupt{grid-column:1/-1;margin-bottom:clamp(6px,1.2vw,10px);padding-top:clamp(16px,2.8vw,26px);padding-bottom:clamp(16px,2.8vw,26px)}

.ww-s-t{flex:1;min-width:0;font:700 clamp(.96rem,2.2vw,1.16rem)/1.35 var(--font-b);overflow-wrap:anywhere}
.ww-km{flex:none;font:700 clamp(.76rem,1.7vw,.9rem)/1.2 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ww-ziel{margin:0;font:800 clamp(1.6rem,5.6vw,3.1rem)/1.06 var(--font-h);letter-spacing:-.012em;overflow-wrap:anywhere}
.ww-ziel-u{display:block;margin-top:.45em;font:400 clamp(.93rem,2.1vw,1.06rem)/1.5 var(--font-b);color:var(--muted)}

.ww-s-preis{background:var(--primary);color:var(--on-primary)}
.ww-s-preis .ww-km{color:color-mix(in srgb,var(--on-primary) 70%,var(--primary))}
.ww-s-preis::after{background:color-mix(in srgb,var(--on-primary) 34%,var(--primary));box-shadow:0 -13px 0 color-mix(in srgb,var(--on-primary) 34%,var(--primary)),0 13px 0 color-mix(in srgb,var(--on-primary) 34%,var(--primary))}

.ww-tafel{max-width:720px;margin:clamp(10px,2vw,20px) auto 0;padding:clamp(18px,3.4vw,32px);text-align:center;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--primary);border-radius:var(--r)}
.ww-tafel-l{margin:0 0 .65em;font:700 .7rem/1.3 var(--font-b);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.ww-text{margin:0 auto;max-width:58ch;font:400 clamp(.96rem,2.1vw,1.04rem)/1.75 var(--font-b);color:var(--ink)}
.A-wegweiser .desc.custom{margin-top:.9em;line-height:1.75}
.A-wegweiser .ab{margin-top:clamp(18px,3vw,26px)}

.ww-sc{padding-top:10px}

@media (max-width:780px){
  .ww-pfosten{grid-template-columns:1fr}
  .ww-mast{left:clamp(13px,3.6vw,20px)}
  .ww-mast::before{top:-11px}
  .ww-s,.ww-s.ww-l,.ww-s.ww-r{grid-column:1;flex-direction:row;text-align:left;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%);padding-left:clamp(26px,7vw,36px);padding-right:clamp(28px,7vw,38px)}
  .ww-s::after,.ww-l::after,.ww-r::after{right:auto;left:clamp(10px,3.2vw,17px)}
  .ww-fuss{justify-self:start;width:clamp(74px,20vw,110px)}
  .ww-s-t{font-size:clamp(.92rem,3.4vw,1.04rem)}
}

/* --- Seitentyp: Aktienurkunde --- */
/* Wertpapier: Guillochenrahmen, Nennwert gross, Tabellenblock, zwei Unterschriften und Siegel */
.A-wertpapier{background:color-mix(in srgb,var(--ink) 4%,var(--bg))}
.A-wertpapier .wp{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.wp-bogen{max-width:1020px;margin:0 auto;padding:clamp(12px,2.2vw,26px);border:2px solid color-mix(in srgb,var(--primary) 70%,transparent);box-shadow:0 30px 60px -46px var(--ink);
  background:
    repeating-radial-gradient(circle at 8% 50%,transparent 0 9px,color-mix(in srgb,var(--primary) 26%,transparent) 9px 10px),
    repeating-radial-gradient(circle at 92% 50%,transparent 0 9px,color-mix(in srgb,var(--accent) 22%,transparent) 9px 10px),
    repeating-linear-gradient(135deg,transparent 0 7px,color-mix(in srgb,var(--primary) 14%,transparent) 7px 8px),
    repeating-linear-gradient(45deg,transparent 0 7px,color-mix(in srgb,var(--accent) 10%,transparent) 7px 8px),
    var(--surface)}
.wp-innen{background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 40%,transparent);padding:clamp(20px,3.4vw,46px)}
.wp-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;font:700 .7rem var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px}
.wp-haus{color:var(--ink)}
.wp-titel{margin:clamp(16px,2.6vw,28px) 0 clamp(14px,2.4vw,24px)}
.wp-name{font:800 clamp(1.9rem,5.2vw,3.4rem)/1.02 var(--font-h);margin:0;overflow-wrap:anywhere}
.wp-lead{margin:.5em 0 0;color:var(--muted);font-size:clamp(1rem,2.2vw,1.15rem);font-style:italic}
.wp-zahlen{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr);gap:clamp(16px,2.6vw,32px);align-items:start;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:clamp(16px,2.4vw,24px) 0;margin-bottom:clamp(16px,2.4vw,24px)}
.wp-gross{border-left:5px solid var(--primary);background:color-mix(in srgb,var(--primary) 9%,transparent);padding:12px 16px}
.wp-gross small{display:block;font:700 .66rem var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.wp-gross b{display:block;margin-top:4px;font:900 clamp(1.7rem,5vw,3rem)/1 var(--font-h);color:var(--primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.wp-tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.wp-tabelle tr{border-bottom:1px solid var(--line)}
.wp-tabelle tr:last-child{border-bottom:0}
.wp-tabelle th{text-align:left;padding:9px 0;font:700 .72rem var(--font-b);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.wp-tabelle td{text-align:right;padding:9px 0;font:800 clamp(1rem,2.2vw,1.25rem) var(--font-h);color:var(--ink)}
.wp-desc{line-height:1.75;margin:0 0 6px}
.A-wertpapier .ab-l,.A-wertpapier .ab-p{display:none}
.wp-fuss{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,3vw,36px);align-items:end;margin-top:clamp(26px,4vw,46px)}
.wp-unter small{display:block;margin-top:6px;font:700 .68rem var(--font-b);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.wp-linie{display:block;border-top:1px solid var(--ink);height:0}
.wp-siegel{width:clamp(72px,10vw,96px);aspect-ratio:1;border-radius:50%;display:grid;place-content:center;color:var(--on-primary);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--primary) 88%,var(--surface)),var(--primary) 72%);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--on-primary) 45%,transparent)}
.wp-siegel span{font:900 clamp(.9rem,2.2vw,1.2rem) var(--font-h);letter-spacing:.1em}
.wp-sc{padding-top:10px}
@media (max-width:780px){
  .wp-zahlen{grid-template-columns:1fr}
  .wp-fuss{grid-template-columns:1fr;justify-items:start;gap:20px}
  .wp-bogen{padding:10px}
}

/* ==================================================================
   Seitentypen, von mehreren Assistenten parallel gebaut.
   ================================================================== */

/* --- Seitentyp: Anzeigetafel --- */
/* Anzeigetafel: Stadionanzeige mit Punktmatrix, Ziffernfelder, Perioden und Bandzeile */
.A-anzeigetafel{background:var(--bg)}
.A-anzeigetafel .atf{
  padding-top:clamp(22px,3.6vw,52px);
  padding-bottom:clamp(18px,2.6vw,34px);
}
.atf-tafel{
  background:var(--hero);
  color:var(--on-hero);
  border:3px solid color-mix(in srgb,var(--on-hero) 34%,var(--hero));
  border-radius:var(--r);
  padding:clamp(12px,2vw,22px);
  box-shadow:0 20px 48px -28px color-mix(in srgb,var(--on-hero) 70%,transparent);
}
.atf-band{
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  overflow:hidden;
  margin:0 0 clamp(12px,2vw,20px);
  border:1px solid color-mix(in srgb,var(--on-hero) 30%,var(--hero));
  border-radius:calc(var(--r) / 2);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--on-hero) 20%,transparent) 0 1px, transparent 1.3px) 0 0/5px 5px,
    color-mix(in srgb,var(--on-hero) 9%,var(--hero));
  padding:6px 2px;
}
.atf-bw{
  flex:0 0 auto;
  white-space:nowrap;
  padding:0 14px;
  max-width:44ch;
  overflow:hidden;
  text-overflow:ellipsis;
  font:700 .7rem/1.5 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--on-hero);
}
.atf-bw + .atf-bw{border-left:1px solid color-mix(in srgb,var(--on-hero) 28%,var(--hero))}
.atf-spiel{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,auto) minmax(0,.7fr);
  gap:clamp(10px,1.8vw,22px);
  align-items:stretch;
}
.atf-rolle{
  display:block;
  font:800 .64rem/1 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.24em;
  color:color-mix(in srgb,var(--on-hero) 62%,var(--hero));
  margin-bottom:8px;
}
.atf-seite{
  border:1px solid color-mix(in srgb,var(--on-hero) 22%,var(--hero));
  border-radius:calc(var(--r) / 2);
  padding:clamp(10px,1.6vw,16px);
  background:color-mix(in srgb,var(--on-hero) 6%,var(--hero));
  min-width:0;
}
.atf-name{
  margin:0;
  color:var(--on-hero);
  font:900 clamp(1.4rem,4.6vw,2.7rem)/1 var(--font-h);
  text-transform:uppercase;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.atf-lead{
  margin:.5em 0 0;
  font-size:.9rem;
  line-height:1.5;
  color:color-mix(in srgb,var(--on-hero) 72%,var(--hero));
  overflow-wrap:anywhere;
}
.atf-gast{display:flex;flex-direction:column}
.atf-gastname{
  margin:auto 0;
  font:800 clamp(1rem,2.6vw,1.5rem)/1.1 var(--font-h);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:color-mix(in srgb,var(--on-hero) 54%,var(--hero));
}
.atf-stand{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:clamp(10px,1.6vw,16px);
  border:1px solid color-mix(in srgb,var(--accent) 70%,var(--on-hero));
  border-radius:calc(var(--r) / 2);
  background:color-mix(in srgb,var(--on-hero) 11%,var(--hero));
}
.atf-ziffern{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-block:auto;
}
.atf-z{
  display:grid;
  place-items:center;
  min-width:.72em;
  padding:.1em .1em .14em;
  border-radius:3px;
  font:900 clamp(1.9rem,6.4vw,3.6rem)/1 var(--font-h);
  font-variant-numeric:tabular-nums;
  color:var(--on-hero);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--on-hero) 26%,transparent) 0 1px, transparent 1.4px) 0 0/4px 4px,
    color-mix(in srgb,var(--on-hero) 16%,var(--hero));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 26%,var(--hero));
}
.atf-luecke{background:none;box-shadow:none;min-width:.2em}
.atf-perioden{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:1px;
  margin-top:clamp(12px,2vw,20px);
  background:color-mix(in srgb,var(--on-hero) 5%,var(--hero));
  border:1px solid color-mix(in srgb,var(--on-hero) 26%,var(--hero));
  border-radius:calc(var(--r) / 2);
  overflow:hidden;
}
.atf-p{
  background:color-mix(in srgb,var(--on-hero) 5%,var(--hero));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 26%,var(--hero));
  padding:9px 11px 11px;
  min-width:0;
}
.atf-p span{
  display:block;
  font:800 .6rem/1 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.2em;
  color:color-mix(in srgb,var(--on-hero) 55%,var(--hero));
}
.atf-p small{
  display:block;
  margin-top:5px;
  font-size:.76rem;
  color:color-mix(in srgb,var(--on-hero) 72%,var(--hero));
}
.atf-p b{
  display:block;
  margin-top:2px;
  font:900 clamp(1.05rem,2.6vw,1.45rem)/1.15 var(--font-h);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.atf-uhr{border-left:3px solid color-mix(in srgb,var(--accent) 70%,var(--on-hero))}
.atf-text{
  margin:clamp(14px,2.2vw,22px) 0 0;
  max-width:62ch;
  line-height:1.68;
  color:color-mix(in srgb,var(--on-hero) 86%,var(--hero));
}
.A-anzeigetafel .atf-tafel .custom{
  margin-top:10px;
  max-width:62ch;
  color:color-mix(in srgb,var(--on-hero) 86%,var(--hero));
}
.A-anzeigetafel .atf-tafel .ab-l{color:color-mix(in srgb,var(--on-hero) 62%,var(--hero))}
.A-anzeigetafel .atf-tafel .ab-p{color:var(--on-hero)}
.A-anzeigetafel .atf-tafel .ab-lease{color:var(--on-hero)}
.A-anzeigetafel .atf-sc{padding-top:8px}
@media (max-width:780px){
  .atf-spiel{grid-template-columns:1fr}
  .atf-gast{order:3}
  .atf-gastname{margin-top:0}
  .atf-band{border-radius:4px}
  .atf-bw{padding:0 10px;letter-spacing:.14em}
  .atf-z{min-width:.6em}
}

/* --- Seitentyp: Druckstock --- */
/* Druckstock: links der spiegelverkehrte Satz in der Form, rechts der Abzug, darunter der Druckvermerk */
.A-druckstock{background:color-mix(in srgb,var(--ink) 8%,var(--bg))}
.A-druckstock .ds{padding-top:clamp(26px,4.6vw,56px);padding-bottom:20px}
.ds-paar{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(12px,2.4vw,26px)}
.ds-seite{display:grid;grid-template-rows:auto 1fr auto;gap:9px;min-width:0}
.ds-marke{font:700 .66rem var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ds-fuss{font-size:.74rem;line-height:1.5;color:var(--muted)}
.ds-form{background:var(--hero);color:var(--on-hero);border:3px solid color-mix(in srgb,var(--on-hero) 45%,var(--hero));
  border-radius:calc(var(--r) / 3);padding:clamp(12px,2.2vw,20px);display:grid;gap:8px;
  box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--on-hero) 9%,var(--hero))}
.ds-blind{display:block;height:14px;border-radius:1px;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--on-hero) 22%,var(--hero)) 0 9px,
    color-mix(in srgb,var(--on-hero) 10%,var(--hero)) 9px 12px)}
.ds-satz{transform:scaleX(-1);font:800 clamp(1.5rem,4.6vw,3.1rem)/1.1 var(--font-h);letter-spacing:.01em;
  text-align:center;overflow-wrap:anywhere;padding:clamp(8px,1.6vw,14px) 6px;
  background:color-mix(in srgb,var(--on-hero) 13%,var(--hero));border-radius:1px;
  box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--on-hero) 26%,var(--hero)),
    inset -1px -1px 0 color-mix(in srgb,var(--hero) 70%,var(--on-hero))}
.ds-satz span{font-weight:400;opacity:.72;white-space:nowrap}
.ds-pfeil{display:grid;place-items:center;align-self:center;color:color-mix(in srgb,var(--ink) 45%,transparent)}
.ds-pfeil svg{width:clamp(30px,4vw,48px);height:20px}
.ds-blatt{display:grid;align-content:center;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) / 3);
  padding:clamp(16px,2.8vw,30px) clamp(14px,2.4vw,26px);box-shadow:0 1px 0 var(--line),0 10px 24px -18px var(--ink)}
.ds-name{font:800 clamp(1.5rem,4.6vw,3.1rem)/1.1 var(--font-h);letter-spacing:-.01em;margin:0;
  color:var(--ink);overflow-wrap:anywhere;text-align:center}
.ds-name span{font-weight:400;color:var(--primary);white-space:nowrap}
.ds-zeile{margin:.6em 0 0;text-align:center;color:var(--muted);line-height:1.55}
.ds-vermerk{max-width:1040px;margin:clamp(18px,3vw,30px) auto 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.ds-v{padding:11px 14px 13px;border-right:1px solid var(--line);min-width:0}
.ds-v:last-child{border-right:0}
.ds-v small{display:block;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ds-v b{display:block;margin-top:3px;font:700 1rem/1.25 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.ds-v-preis b{color:var(--primary);font-size:1.12rem}
.ds-text{max-width:1040px;margin:clamp(16px,2.6vw,26px) auto 0}
.ds-absatz{margin:0 0 14px;line-height:1.75;color:var(--ink);max-width:66ch}
.ds-text .desc{margin-bottom:14px}
.ds-text .ab{margin:0}
.ds-sc{padding-top:10px}
@media (max-width:780px){
  .ds-paar{grid-template-columns:1fr}
  .ds-pfeil{transform:rotate(90deg)}
  .ds-vermerk{grid-template-columns:1fr 1fr}
  .ds-v:nth-child(2n){border-right:0}
  .ds-v{border-bottom:1px solid var(--line)}
}

/* --- Seitentyp: Explosionszeichnung --- */
/* Explosion: Bestandteile der Domain auseinandergezogen, Führungslinien zu Positionen, daneben die Stückliste */
.A-explosion{background:var(--bg)}
.A-explosion .ex{padding-top:clamp(26px,4.6vw,56px);padding-bottom:20px}
.ex-kopf{max-width:1060px;margin:0 auto clamp(18px,3vw,30px)}
.ex-kopf>small{display:block;font:700 .66rem var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ex-name{font:800 clamp(1.7rem,4.6vw,3rem)/1.08 var(--font-h);letter-spacing:-.03em;margin:.14em 0 0;
  color:var(--ink);overflow-wrap:anywhere}
.ex-zeile{margin:.55em 0 0;color:var(--muted);line-height:1.6;max-width:56ch}
.ex-paar{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(16px,3vw,34px);align-items:start}
.ex-zeichnung{position:relative;display:grid;gap:clamp(12px,2.4vw,24px);padding:14px 0 14px 36px}
.ex-zeichnung::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;
  border-left:1px dashed color-mix(in srgb,var(--accent) 70%,var(--line))}
.ex-glied{--vs:0px;margin-left:var(--vs);display:flex;align-items:center;gap:10px;position:relative;min-width:0}
.ex-glied::before{content:"";position:absolute;left:calc(-23px - var(--vs));width:calc(23px + var(--vs));top:50%;
  border-top:1px dashed color-mix(in srgb,var(--accent) 70%,var(--line))}
.ex-glied:nth-child(2){--vs:clamp(8px,3vw,34px)}
.ex-glied:nth-child(3){--vs:clamp(16px,6vw,68px)}
.ex-glied:nth-child(4){--vs:clamp(24px,9vw,102px)}
.ex-stueck{background:var(--surface);border:1px solid var(--line);border-left:3px solid color-mix(in srgb,var(--accent) 65%,var(--line));
  border-radius:calc(var(--r) / 3);padding:clamp(8px,1.5vw,14px) clamp(10px,1.8vw,18px);
  font:800 clamp(1.15rem,3.2vw,2.1rem)/1.1 var(--font-h);color:var(--ink);overflow-wrap:anywhere;min-width:0;
  box-shadow:0 1px 0 var(--line)}
.ex-fuehrung{flex:1 1 20px;min-width:14px;border-top:1px dashed color-mix(in srgb,var(--ink) 40%,transparent)}
.ex-pos{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--primary);color:var(--on-primary);font:800 .85rem/1 var(--font-h)}
.ex-liste{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(14px,2.4vw,22px)}
.ex-titel{margin:0 0 10px;font:700 .68rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ex-tab{width:100%;border-collapse:collapse;font-size:.92rem}
.ex-tab th{text-align:left;font:700 .64rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:0 8px 7px 0;border-bottom:1px solid var(--ink)}
.ex-tab td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);color:var(--ink);overflow-wrap:anywhere}
.ex-sp{width:3.2em;color:var(--primary);font-weight:700}
.ex-sm{width:4.4em;text-align:right;padding-right:0!important;font-variant-numeric:tabular-nums}
.ex-tab th.ex-sm{text-align:right}
.ex-gesamt td{font-weight:700;border-bottom:0}
.ex-summe{margin-top:14px;padding-top:12px;border-top:2px solid var(--ink);display:grid;gap:2px}
.ex-summe small{font:700 .64rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ex-summe b{font:800 clamp(1.3rem,3vw,1.9rem)/1.15 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.ex-summe span{font-size:.8rem;color:var(--primary)}
.ex-text{max-width:1060px;margin:clamp(18px,3vw,30px) auto 0;border-top:1px solid var(--line);padding-top:clamp(14px,2.4vw,22px)}
.ex-absatz{margin:0 0 14px;line-height:1.75;color:var(--ink);max-width:66ch}
.ex-text .desc{margin-bottom:14px}
.ex-text .ab{margin:0}
.ex-sc{padding-top:10px}
@media (max-width:780px){
  .ex-paar{grid-template-columns:1fr}
  .ex-zeichnung{padding-left:28px}
  .ex-zeichnung::before{left:10px}
  .ex-glied::before{left:calc(-19px - var(--vs));width:calc(19px + var(--vs))}
  .ex-stueck{font-size:clamp(1.05rem,5vw,1.5rem)}
}

/* --- Seitentyp: Herbarbogen --- */
/* Herbarbogen: gepresste Pflanze, mit Montagestreifen an den Rändern des Bogens befestigt,
   unten rechts das aufgeklebte Bestimmungsetikett. */
.A-herbarium{
  background:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--line) 26%,transparent) 0 1px,transparent 1px 7px),
    var(--bg);
}
.A-herbarium .hb{
  padding-top:clamp(26px,4vw,58px);
  padding-bottom:clamp(26px,4vw,52px);
}
/* Der Bogen selbst */
.A-herbarium .hb-bogen{
  position:relative;
  max-width:980px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 3);
  padding:clamp(22px,3.4vw,44px);
  box-shadow:0 26px 60px -40px color-mix(in srgb,var(--ink) 70%,transparent);
}
.A-herbarium .hb-bogen::before{
  content:"";
  position:absolute;
  inset:clamp(8px,1.2vw,14px);
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  pointer-events:none;
}
/* Die Pflanze */
.A-herbarium .hb-pflanze{
  display:block;
  width:64%;
  height:clamp(330px,44vw,520px);
  color:var(--ink);
}
.A-herbarium .hb-stiel,
.A-herbarium .hb-wurzel path{
  fill:none;
  stroke:currentColor;
  stroke-width:.9;
  stroke-linecap:round;
  opacity:.72;
}
.A-herbarium .hb-wurzel path{stroke-width:.5;opacity:.45}
.A-herbarium .hb-blaetter path{
  fill:color-mix(in srgb,var(--primary) 26%,transparent);
  stroke:color-mix(in srgb,var(--ink) 55%,transparent);
  stroke-width:.4;
}
.A-herbarium .hb-ader path{fill:none;stroke:currentColor;stroke-width:.28;opacity:.45}
.A-herbarium .hb-bluete ellipse{
  fill:color-mix(in srgb,var(--accent) 48%,transparent);
  stroke:color-mix(in srgb,var(--ink) 45%,transparent);
  stroke-width:.35;
}
.A-herbarium .hb-bluete circle{fill:color-mix(in srgb,var(--primary) 70%,transparent)}
/* Montagestreifen, je einer über jeder Bogenkante */
.A-herbarium .hb-band{
  position:absolute;
  width:clamp(52px,8vw,92px);
  height:clamp(13px,1.7vw,19px);
  background:color-mix(in srgb,var(--accent) 30%,transparent);
  border-left:1px solid color-mix(in srgb,var(--accent) 62%,transparent);
  border-right:1px solid color-mix(in srgb,var(--accent) 62%,transparent);
  pointer-events:none;
  z-index:2;
}
.A-herbarium .hb-band-a{top:0;left:15%;transform:translateY(-52%) rotate(-3deg)}
.A-herbarium .hb-band-b{top:24%;right:0;transform:translate(46%,-50%) rotate(86deg)}
.A-herbarium .hb-band-c{bottom:0;left:19%;transform:translateY(54%) rotate(4deg)}
.A-herbarium .hb-band-d{bottom:22%;left:0;transform:translate(-46%,50%) rotate(93deg)}
/* Bestimmungsetikett, aufgeklebt unten rechts */
.A-herbarium .hb-etikett{
  position:absolute;
  right:clamp(16px,2.6vw,34px);
  bottom:clamp(16px,2.6vw,34px);
  width:min(350px,56%);
  z-index:3;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 4);
  padding:clamp(12px,1.7vw,19px);
  box-shadow:0 14px 30px -20px color-mix(in srgb,var(--ink) 75%,transparent);
}
.A-herbarium .hb-el{
  margin:0 0 .7em;
  padding-bottom:.5em;
  border-bottom:1px solid var(--line);
  font:700 .66rem/1.2 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-herbarium .hb-ek{
  margin:0;
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-herbarium .hb-gattung{
  margin:.2em 0 .15em;
  font:400 clamp(1.15rem,2.6vw,1.9rem)/1.12 var(--font-h);
  font-style:italic;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.A-herbarium .hb-lead{
  margin:0 0 .9em;
  overflow-wrap:anywhere;
  font-size:.86rem;
  line-height:1.45;
  color:var(--muted);
}
.A-herbarium .hb-zeilen{margin:0}
.A-herbarium .hb-zeilen div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  padding:.32em 0;
  border-bottom:1px dotted color-mix(in srgb,var(--muted) 60%,transparent);
}
.A-herbarium .hb-zeilen dt{
  font-size:.72rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.A-herbarium .hb-zeilen dd{
  margin:0;
  text-align:right;
  font-weight:600;
  font-size:.86rem;
  overflow-wrap:anywhere;
}
.A-herbarium .hb-wert{
  margin-top:.4em;
  border-bottom:0;
  border-top:2px solid var(--accent);
  padding-top:.6em;
}
.A-herbarium .hb-wert dd{
  font:800 clamp(1rem,2vw,1.35rem)/1.1 var(--font-h);
  color:var(--primary);
}
/* Fliesstext unter dem Bogen */
.A-herbarium .hb-text{
  max-width:72ch;
  margin:clamp(20px,3vw,34px) auto 0;
  font-size:clamp(1rem,1.5vw,1.08rem);
}
.A-herbarium .hb-text p{margin:0 0 1em;overflow-wrap:anywhere}
.A-herbarium .hb-text .ab{margin-top:clamp(14px,2vw,20px);flex-wrap:wrap}
.A-herbarium .hb-sc{padding-top:8px;padding-bottom:8px}
@media (max-width:780px){
  .A-herbarium .hb-pflanze{width:100%;height:clamp(240px,58vw,340px)}
  .A-herbarium .hb-etikett{
    position:static;
    width:auto;
    margin-top:clamp(16px,3vw,24px);
    box-shadow:none;
  }
  .A-herbarium .hb-band-b,
  .A-herbarium .hb-band-d{display:none}
  .A-herbarium .hb-gattung{font-size:clamp(1.1rem,6vw,1.5rem)}
}

/* --- Seitentyp: Baumscheibe --- */
/* Baumscheibe: konzentrische Jahresringe als Inline-SVG, Ringzahl und Ringabstände aus dem Namen
   gerechnet. Der Domainname sitzt im Kern, der Preis am äussersten Ring, die Legende daneben. */
.A-jahresringe{
  background:
    repeating-linear-gradient(104deg,color-mix(in srgb,var(--line) 34%,transparent) 0 1px,transparent 1px 11px),
    var(--bg);
}
.A-jahresringe .jr{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,32px);
  align-items:start;
  padding-top:clamp(26px,4vw,58px);
  padding-bottom:clamp(26px,4vw,52px);
}
/* Die Scheibe */
.A-jahresringe .jr-scheibe{
  grid-column:1;
  margin:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(10px,1.6vw,18px);
}
.A-jahresringe .jr-flaeche{position:relative;aspect-ratio:1.5}
.A-jahresringe .jr-svg{display:block;width:100%;height:100%;color:var(--ink)}
.A-jahresringe .jr-kernflaeche{
  fill:color-mix(in srgb,var(--primary) 16%,transparent);
  stroke:var(--primary);
  stroke-width:1.4;
}
.A-jahresringe .jr-ringe circle{
  fill:none;
  stroke:currentColor;
  stroke-width:.8;
  opacity:.5;
}
.A-jahresringe .jr-ringe circle:nth-child(3n){stroke-width:1.7;opacity:.68}
.A-jahresringe .jr-riss{
  stroke:var(--accent);
  stroke-width:1.1;
  stroke-linejoin:round;
  stroke-linecap:round;
  opacity:.65;
}
.A-jahresringe .jr-marken line{stroke:var(--primary);stroke-width:1.7;stroke-linecap:round}
.A-jahresringe .jr-schrift text{
  font:700 7px/1 var(--font-b);
  fill:var(--ink);
  stroke:var(--surface);
  stroke-width:3;
  paint-order:stroke;
  stroke-linejoin:round;
}
/* Der Name im Kern */
.A-jahresringe .jr-kern{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:25%;
  margin:0;
  text-align:center;
  font:700 clamp(.62rem,1.5vw,1.05rem)/1.18 var(--font-h);
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
/* Der Preis am äussersten Ring */
.A-jahresringe .jr-aussen{
  position:absolute;
  left:50%;
  top:3%;
  transform:translate(-50%,-50%);
  margin:0;
  max-width:88%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.1em;
  text-align:center;
  background:var(--surface);
  border:1px solid var(--accent);
  border-radius:999px;
  padding:.35em 1em;
}
.A-jahresringe .jr-aussen span{
  font:700 .6rem/1 var(--font-b);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-jahresringe .jr-aussen b{
  font:800 clamp(.95rem,2vw,1.4rem)/1.05 var(--font-h);
  color:var(--primary);
  overflow-wrap:anywhere;
}
.A-jahresringe .jr-cap{
  margin:clamp(8px,1.4vw,14px) 0 0;
  overflow-wrap:anywhere;
  text-align:center;
  font-size:clamp(.95rem,1.5vw,1.08rem);
  font-style:italic;
  color:var(--muted);
}
/* Legende */
.A-jahresringe .jr-legende{
  grid-column:2;
  align-self:start;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(16px,2.2vw,26px);
}
.A-jahresringe .jr-lt{
  margin:0 0 .5em;
  font:700 .68rem/1 var(--font-b);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-jahresringe .jr-liste{margin:0 0 clamp(12px,1.8vw,18px)}
.A-jahresringe .jr-z{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:3px 12px;
  align-items:baseline;
  padding:.5em 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent);
}
.A-jahresringe .jr-z dt{
  grid-column:1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5em;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-jahresringe .jr-rnr{
  font:700 .64rem/1 var(--font-b);
  letter-spacing:.05em;
  text-transform:none;
  color:var(--ink);
  border:1px solid var(--accent);
  border-radius:999px;
  padding:.28em .6em;
  white-space:nowrap;
}
.A-jahresringe .jr-z dd{
  grid-column:2;
  margin:0;
  text-align:right;
  font-weight:600;
  overflow-wrap:anywhere;
}
.A-jahresringe .jr-summe{
  margin:0;
  overflow-wrap:anywhere;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--muted);
}
.A-jahresringe .jr-legende .ab{margin-top:clamp(14px,2vw,20px);flex-wrap:wrap}
.A-jahresringe .ab-l,
.A-jahresringe .ab-p{display:none}
/* Fliesstext */
.A-jahresringe .jr-text{
  grid-column:1 / -1;
  max-width:72ch;
  font-size:clamp(1rem,1.5vw,1.08rem);
}
.A-jahresringe .jr-text p{margin:0 0 1em;overflow-wrap:anywhere}
.A-jahresringe .jr-sc{padding-top:8px;padding-bottom:8px}
@media (max-width:780px){
  .A-jahresringe .jr{grid-template-columns:1fr}
  .A-jahresringe .jr-scheibe,
  .A-jahresringe .jr-legende,
  .A-jahresringe .jr-text{grid-column:1}
  .A-jahresringe .jr-kern{width:30%;font-size:clamp(.58rem,2.6vw,.85rem)}
  .A-jahresringe .jr-z{grid-template-columns:1fr}
  .A-jahresringe .jr-z dd{grid-column:1;text-align:left}
  .A-jahresringe .jr-aussen b{font-size:clamp(.9rem,4vw,1.2rem)}
  .A-jahresringe .jr-schrift text{font-size:8px}
}

/* --- Seitentyp: Morse --- */
/* Morse: laufender Papierstreifen mit Punkten und Strichen, darunter die Entschlüsselung */
.A-morse{background:var(--bg)}
.A-morse .mrs{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.mrs-kopf{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;font:700 clamp(.66rem,1.5vw,.76rem)/1.4 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-bottom:clamp(12px,2vw,18px)}
.mrs-kopf span:first-child{color:var(--primary)}

/* Der Streifen: gelochte Ränder, der Name als Punkte und Striche auf der Mittellinie */
.mrs-streifen{position:relative;background:var(--surface);border:1px solid var(--line);padding:clamp(18px,2.6vw,26px) clamp(12px,2vw,22px);box-shadow:0 22px 46px -38px color-mix(in srgb,var(--ink) 70%,transparent)}
.mrs-streifen::before,.mrs-streifen::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle 3px at 10px 50%,var(--bg) 96%,transparent 100%) 0 0/20px 10px repeat-x}
.mrs-streifen::before{top:3px}
.mrs-streifen::after{bottom:3px}
.mrs-band{display:flex;flex-wrap:wrap;align-items:center;row-gap:clamp(8px,1.6vw,16px)}
.mrs-gruppe{position:relative;display:flex;align-items:center;gap:clamp(4px,.7vw,7px);padding:clamp(8px,1.4vw,13px) clamp(6px,1.1vw,11px)}
.mrs-gruppe::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:color-mix(in srgb,var(--ink) 20%,transparent)}
.mrs-punkt,.mrs-strich{position:relative;display:block;height:clamp(8px,1.5vw,11px);background:var(--primary);border-radius:2px}
.mrs-punkt{width:clamp(8px,1.5vw,11px);border-radius:50%}
.mrs-strich{width:clamp(22px,4vw,34px)}
.mrs-trenner{flex:none;width:0;height:clamp(26px,5vw,42px);padding-left:5px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);margin:0 clamp(10px,2vw,20px)}
.mrs-ende{display:flex;flex-direction:column;line-height:1.1;padding-left:clamp(2px,.6vw,6px)}
.mrs-ende small{font:700 clamp(.6rem,1.3vw,.7rem)/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.mrs-ende b{font:800 clamp(1.3rem,3.6vw,2.2rem)/1.1 var(--font-h);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mrs-kerbe{height:12px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 16px)}

.mrs-name{margin:clamp(16px,2.6vw,26px) 0 0;font:800 clamp(1.8rem,6vw,3.4rem)/1.1 var(--font-h);letter-spacing:.04em;color:var(--ink);overflow-wrap:anywhere}
.mrs-zeile{margin:.4em 0 0;font-size:clamp(1rem,2vw,1.2rem);color:var(--muted);max-width:52ch}
.mrs-marke{display:block;margin:clamp(20px,3vw,30px) 0 .7em;font:700 clamp(.6rem,1.3vw,.72rem)/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}

/* Entschlüsselung Zeichen für Zeichen */
.mrs-klar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,clamp(56px,8vw,76px));width:fit-content;max-width:100%;background:var(--surface);border:1px solid var(--line)}
.mrs-klar li{display:flex;flex-direction:column;align-items:center;gap:.25em;padding:clamp(8px,1.4vw,12px) 4px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.mrs-klar b{font:800 clamp(1rem,2.4vw,1.35rem)/1 var(--font-h);color:var(--ink)}
.mrs-klar span{font:400 clamp(.7rem,1.6vw,.85rem)/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--primary)}

.mrs-angaben{margin:clamp(20px,3vw,30px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 clamp(16px,2.6vw,30px)}
.mrs-angaben div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.mrs-angaben dt{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.mrs-angaben dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.mrs-text{max-width:62ch;margin:clamp(18px,2.6vw,28px) 0 0;color:var(--muted);line-height:1.75}
.mrs-text p{margin:0 0 1em}
.mrs-buy .ab{margin-top:4px}
.mrs-buy .ab-l,.mrs-buy .ab-p{display:none}
.mrs-sc{padding-top:10px}

@media (max-width:780px){
    .mrs-trenner{margin:0 10px}
    .mrs-ende{width:100%;padding-left:clamp(6px,1.1vw,11px);margin-top:6px}
    .mrs-angaben{grid-template-columns:minmax(0,1fr)}
    .mrs-klar{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));width:auto}
}

/* --- Seitentyp: Palimpsest --- */
/* Palimpsest: zwei Schichten auf einem Blatt, die untere ausgelöscht und quer, dazu eine Randspalte */
.A-palimpsest{background:var(--bg)}
.A-palimpsest .plm{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.plm-blatt{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,270px);gap:0 clamp(18px,3vw,38px);background:var(--surface);border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:clamp(22px,3.6vw,44px) clamp(18px,3vw,40px);background-image:repeating-linear-gradient(180deg,transparent 0 30px,color-mix(in srgb,var(--ink) 5%,transparent) 30px 31px)}

/* Untere, ausgelöschte Schicht: blass, quer, nicht anklickbar */
.plm-unten{position:absolute;inset:-14% -8%;z-index:0;display:flex;flex-direction:column;justify-content:space-around;transform:rotate(-7deg);pointer-events:none;user-select:none;opacity:.12;filter:blur(.5px)}
.plm-unten span{display:block;white-space:nowrap;font:700 clamp(1.6rem,5.4vw,3.4rem)/1.5 var(--font-h);letter-spacing:.14em;color:var(--ink);text-decoration:line-through;text-decoration-thickness:1px}

/* Obere Schicht: der Name und die Angaben */
.plm-oben{position:relative;z-index:1;min-width:0}
.plm-marke{display:block;margin:0 0 .6em;font:700 clamp(.6rem,1.3vw,.72rem)/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--primary)}
.plm-name{margin:0;font:700 clamp(2rem,6.4vw,3.8rem)/1.06 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.plm-zeile{margin:.5em 0 0;font:400 clamp(1.05rem,2.2vw,1.35rem)/1.5 var(--font-h);color:var(--ink);max-width:40ch}
.plm-text{margin:clamp(16px,2.4vw,26px) 0 0;max-width:58ch;color:var(--muted);line-height:1.8}
.plm-text p{margin:0 0 1em}
.plm-angaben{margin:clamp(14px,2.2vw,22px) 0 0;max-width:58ch}
.plm-angaben div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dotted color-mix(in srgb,var(--ink) 34%,transparent)}
.plm-angaben dt{font-size:.86rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.plm-angaben dt sup{margin-left:.25em;font-size:.68em;color:var(--primary);font-weight:700}
.plm-angaben dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}

/* Randspalte mit Anmerkungen und dem Preiseintrag */
.plm-rand{position:relative;z-index:1;align-self:start;padding-left:clamp(14px,2.4vw,26px);border-left:1px solid var(--ink);min-width:0}
.plm-note{position:relative;margin:0 0 .9em;padding-left:1.7em;font:italic 400 clamp(.82rem,1.7vw,.92rem)/1.55 var(--font-b);color:var(--muted);overflow-wrap:anywhere}
.plm-erst{font-style:normal}
.plm-note b{position:absolute;left:0;top:0;font-style:normal;font-weight:700;font-size:.78em;color:var(--primary)}
.plm-preis{margin-top:clamp(16px,2.6vw,24px);padding-top:clamp(12px,2vw,18px);border-top:2px solid var(--ink)}
.plm-preis b{display:block;font:700 clamp(1.5rem,4vw,2.1rem)/1.1 var(--font-h);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.plm-preis .ab{margin-top:14px;display:grid;gap:8px}
.plm-preis .ab-l,.plm-preis .ab-p{display:none}
.plm-preis .btn{width:100%}
.plm-sc{padding-top:10px}

@media (max-width:780px){
    .plm-blatt{grid-template-columns:minmax(0,1fr)}
    .plm-rand{margin-top:clamp(20px,4vw,30px);padding-left:0;padding-top:clamp(14px,2.6vw,20px);border-left:0;border-top:1px solid var(--ink)}
    .plm-unten span{font-size:clamp(1.3rem,8vw,2.2rem)}
}
@media (prefers-reduced-transparency:reduce){.plm-unten{opacity:.08}}

/* --- Seitentyp: Partie --- */
/* Partie: Schachbrett aus CSS-Feldern mit gerechneter Stellung, daneben die Notation in zwei Spalten */
.A-partie{background:var(--bg)}
.A-partie .scp{
  padding-top:clamp(24px,4vw,56px);
  padding-bottom:clamp(20px,3vw,38px);
}
.scp-partie{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(18px,3vw,40px);
  align-items:start;
}
.scp-brettbox{
  margin:0;
  position:sticky;
  top:16px;
}
.scp-brett{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  aspect-ratio:1;
  border:3px solid var(--ink);
  border-radius:3px;
  overflow:hidden;
}
.scp-f{
  display:grid;
  place-items:center;
  min-width:0;
  font-size:clamp(1rem,3.6vw,2.1rem);
  line-height:1;
  color:var(--ink);
}
.scp-hell{background:color-mix(in srgb,var(--primary) 7%,var(--surface))}
.scp-dunkel{background:color-mix(in srgb,var(--primary) 32%,var(--surface))}
.scp-linien{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  margin-top:6px;
  font:700 .68rem/1 var(--font-b);
  letter-spacing:.1em;
  color:var(--muted);
  text-align:center;
}
.scp-seite{min-width:0}
.scp-turnier{
  margin:0;
  font:800 .66rem/1.3 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.26em;
  color:var(--muted);
}
.scp-name{
  margin:.25em 0 0;
  font:800 clamp(1.7rem,5.2vw,2.9rem)/1.04 var(--font-h);
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.scp-lead{
  margin:.4em 0 0;
  font-size:1rem;
  line-height:1.55;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.scp-notation{
  margin:clamp(14px,2.2vw,22px) 0 0;
  padding:0;
  list-style:none;
  columns:2;
  column-gap:clamp(14px,2.2vw,26px);
  column-rule:1px solid var(--line);
}
.scp-zug{
  display:grid;
  grid-template-columns:1.9em minmax(0,1fr);
  align-items:baseline;
  gap:0 6px;
  break-inside:avoid;
  padding:5px 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.scp-nr{
  grid-row:span 2;
  font:700 .76rem/1.5 var(--font-b);
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  text-align:right;
}
.scp-zug b{
  font:700 .88rem/1.4 var(--font-b);
  letter-spacing:.02em;
}
.scp-zug i{
  grid-column:2;
  font-style:normal;
  font:700 .95rem/1.3 var(--font-h);
  font-variant-numeric:tabular-nums;
  color:var(--primary);
  overflow-wrap:anywhere;
}
.scp-ergebnis{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:4px clamp(10px,2vw,20px);
  margin-top:clamp(16px,2.4vw,24px);
  padding:clamp(12px,2vw,18px);
  background:var(--hero);
  color:var(--on-hero);
  border-radius:var(--r);
  border:1px solid color-mix(in srgb,var(--on-hero) 26%,var(--hero));
}
.scp-ergebnis span{
  grid-column:1;
  font:800 .62rem/1 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.26em;
  color:color-mix(in srgb,var(--on-hero) 62%,var(--hero));
}
.scp-ergebnis b{
  grid-column:1;
  font:900 clamp(1.4rem,4.6vw,2.2rem)/1.05 var(--font-h);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.scp-ergebnis em{
  grid-column:2;
  grid-row:span 2;
  font-style:normal;
  font:800 clamp(1rem,2.6vw,1.4rem)/1 var(--font-h);
  letter-spacing:.06em;
  padding:7px 11px;
  border:2px solid color-mix(in srgb,var(--on-hero) 40%,var(--hero));
  border-radius:calc(var(--r) / 2);
  white-space:nowrap;
}
.scp-text{
  margin:clamp(14px,2.2vw,20px) 0 0;
  max-width:60ch;
  line-height:1.7;
}
.A-partie .scp-seite .custom{margin-top:10px;max-width:60ch;line-height:1.7}
@media (max-width:780px){
  .scp-partie{grid-template-columns:1fr}
  .scp-brettbox{position:static;max-width:420px;margin:0 auto;width:100%}
  .scp-notation{columns:1;column-rule:none}
  .scp-ergebnis{grid-template-columns:1fr}
  .scp-ergebnis em{grid-column:1;grid-row:auto;justify-self:start}
}
.A-partie .scp-sc{padding-top:8px}

/* --- Seitentyp: Samentüte --- */
/* Samentüte: stehende Tüte mit Umschlagkante oben und gezackter Aufreißkante unten,
   daneben die Rückseite als Tabelle mit den Sortenangaben. */
.A-saattuete{
  background:
    radial-gradient(circle,color-mix(in srgb,var(--line) 60%,transparent) 1px,transparent 1.7px) 0 0/24px 24px,
    var(--bg);
}
.A-saattuete .stt{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(16px,2.6vw,34px);
  align-items:start;
  padding-top:clamp(26px,4vw,58px);
  padding-bottom:clamp(26px,4vw,52px);
}
/* Die Tüte */
.A-saattuete .stt-tuete{
  grid-column:1;
  display:flex;
  flex-direction:column;
  min-height:clamp(380px,46vw,560px);
  background:var(--surface);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:calc(var(--r) / 4) calc(var(--r) / 4) 0 0;
  box-shadow:0 22px 44px -32px color-mix(in srgb,var(--ink) 75%,transparent);
}
/* Umschlagkante: der nach vorn gefaltete Rand */
.A-saattuete .stt-kante{
  position:relative;
  height:clamp(28px,3.6vw,42px);
  background:color-mix(in srgb,var(--ink) 9%,var(--surface));
  border-bottom:1px solid var(--line);
  border-radius:calc(var(--r) / 4) calc(var(--r) / 4) 0 0;
}
.A-saattuete .stt-falz{
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  height:0;
  border-top:1px dashed color-mix(in srgb,var(--ink) 34%,transparent);
}
.A-saattuete .stt-vorn{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:clamp(18px,2.6vw,30px);
}
.A-saattuete .stt-kl{
  margin:0;
  font:700 .68rem/1 var(--font-b);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--primary);
}
.A-saattuete .stt-sorte{
  margin:.3em 0 .2em;
  font:700 clamp(1.7rem,4.2vw,3rem)/1.04 var(--font-h);
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.A-saattuete .stt-lead{
  margin:0;
  overflow-wrap:anywhere;
  font-size:clamp(.95rem,1.5vw,1.08rem);
  line-height:1.45;
  color:var(--muted);
}
.A-saattuete .stt-sig{
  margin:auto 0 0;
  padding-top:1.2em;
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
/* Inhaltsangabe am Fuss der Vorderseite */
.A-saattuete .stt-inhalt{
  margin-top:clamp(14px,2.2vw,22px);
  padding-top:.7em;
  border-top:2px solid var(--accent);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.15em .9em;
  align-items:baseline;
}
.A-saattuete .stt-il{
  grid-column:1 / -1;
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-saattuete .stt-gramm{
  grid-column:1;
  font:700 clamp(1rem,1.9vw,1.3rem)/1.1 var(--font-h);
  font-variant-numeric:tabular-nums;
}
.A-saattuete .stt-preis{
  grid-column:2;
  justify-self:end;
  text-align:right;
  font:800 clamp(1.4rem,3.2vw,2.2rem)/1.05 var(--font-h);
  color:var(--primary);
  overflow-wrap:anywhere;
}
.A-saattuete .stt-rate{
  grid-column:1 / -1;
  font-size:.84rem;
  color:var(--muted);
}
/* Aufreißkante */
.A-saattuete .stt-reiss{
  margin:0;
  padding:0 clamp(18px,2.6vw,30px) .6em;
  text-align:center;
  font:700 .62rem/1 var(--font-b);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-saattuete .stt-zacken{display:block;width:100%;height:clamp(10px,1.4vw,15px)}
.A-saattuete .stt-zf{fill:var(--surface);stroke:none}
.A-saattuete .stt-zl{fill:none;stroke:var(--line);stroke-width:1.1;vector-effect:non-scaling-stroke}
/* Rückseite */
.A-saattuete .stt-rueck{
  grid-column:2;
  background:color-mix(in srgb,var(--ink) 4%,var(--surface));
  border:1px dashed var(--line);
  border-radius:calc(var(--r) / 4);
  padding:clamp(18px,2.6vw,30px);
}
.A-saattuete .stt-rt{
  margin:0 0 .7em;
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-saattuete .stt-tab{width:100%;border-collapse:collapse}
.A-saattuete .stt-tab caption{
  text-align:left;
  padding-bottom:.6em;
  font:700 clamp(1rem,1.8vw,1.22rem)/1.2 var(--font-h);
  color:var(--ink);
}
.A-saattuete .stt-tab th{
  width:42%;
  text-align:left;
  vertical-align:top;
  padding:.58em .9em .58em 0;
  border-bottom:1px solid var(--line);
  font:700 .73rem/1.3 var(--font-b);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-saattuete .stt-tab td{
  padding:.58em 0;
  border-bottom:1px solid var(--line);
  font-weight:600;
  overflow-wrap:anywhere;
}
.A-saattuete .stt-charge{
  margin:.9em 0 0;
  font-size:.74rem;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.A-saattuete .stt-rueck .ab{margin-top:clamp(14px,2vw,20px);flex-wrap:wrap}
.A-saattuete .ab-l,
.A-saattuete .ab-p{display:none}
/* Fliesstext */
.A-saattuete .stt-text{
  grid-column:1 / -1;
  max-width:72ch;
  font-size:clamp(1rem,1.5vw,1.08rem);
}
.A-saattuete .stt-text p{margin:0 0 1em;overflow-wrap:anywhere}
.A-saattuete .stt-sc{padding-top:8px;padding-bottom:8px}
@media (max-width:780px){
  .A-saattuete .stt{grid-template-columns:1fr}
  .A-saattuete .stt-tuete,
  .A-saattuete .stt-rueck,
  .A-saattuete .stt-text{grid-column:1}
  .A-saattuete .stt-tuete{min-height:0}
  .A-saattuete .stt-sorte{font-size:clamp(1.5rem,7.5vw,2.2rem)}
  .A-saattuete .stt-preis{font-size:clamp(1.3rem,6vw,1.8rem)}
  .A-saattuete .stt-tab th{width:48%}
}

/* --- Seitentyp: Schnittmuster --- */
/* Schnittmuster: Bogen aus dünnen Schnittlinien, Nahtzugaben, Fadenlauf und Kerben */
.A-schnittmuster{background:color-mix(in srgb,var(--primary) 6%,var(--bg))}
.A-schnittmuster .sm{padding-top:clamp(26px,4.6vw,56px);padding-bottom:20px}
.sm-bogen{max-width:1020px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(16px,2.6vw,30px);display:grid;gap:clamp(10px,1.8vw,20px);
  grid-template-columns:1.5fr 1fr;
  grid-template-areas:"kopf kopf" "vor rue" "vor arm" "vor bed" "bun bun" "anl anl"}
.sm-kopf{grid-area:kopf;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;
  border-bottom:1px solid var(--line);padding-bottom:10px}
.sm-kopf small{font:700 .72rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}
.sm-kopf span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sm-teil{position:relative;color:color-mix(in srgb,var(--ink) 50%,transparent);min-height:150px}
.sm-riss{position:absolute;inset:0;width:100%;height:100%}
.sm-zugabe{stroke:color-mix(in srgb,var(--accent) 45%,var(--ink));opacity:.8}
.sm-txt{position:relative;padding:clamp(22px,3.2vw,34px) clamp(18px,2.6vw,28px);max-width:80%}
.sm-teilname{display:block;font:700 .7rem var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.sm-ml{display:block;margin-top:14px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sm-modell{font:700 clamp(1.5rem,4vw,2.9rem)/1.08 var(--font-h);letter-spacing:-.02em;margin:.08em 0 0;
  color:var(--ink);overflow-wrap:anywhere}
.sm-zeile{margin:.7em 0 0;color:var(--muted);line-height:1.55;max-width:34ch}
.sm-wert{display:block;margin-top:10px;font:700 clamp(1.5rem,3.4vw,2.2rem)/1 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.sm-merk{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sm-v{grid-area:vor;min-height:clamp(300px,42vw,440px)}
.sm-v .sm-txt{padding-top:clamp(34px,4.4vw,54px)}
.sm-r{grid-area:rue;min-height:clamp(150px,19vw,190px)}
.sm-r .sm-txt{padding-top:clamp(30px,3.6vw,46px)}
.sm-a{grid-area:arm;min-height:clamp(140px,17vw,175px)}
.sm-a .sm-txt{padding-top:clamp(42px,5.2vw,64px);padding-left:clamp(34px,4.2vw,52px)}
.sm-b{grid-area:bun;min-height:130px}
.sm-txt-b{position:absolute;inset:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:none;padding:0 clamp(14px,2vw,22px) 0 clamp(34px,4.4vw,56px)}
.sm-txt-b .sm-wert{margin-top:0}
.sm-fl{position:absolute;right:23%;top:36%;display:flex;flex-direction:column;align-items:center;gap:6px;
  color:color-mix(in srgb,var(--ink) 55%,transparent)}
.sm-fl svg{width:14px;height:clamp(56px,9vw,78px)}
.sm-fl i{writing-mode:vertical-rl;font-style:normal;font:700 .6rem var(--font-b);letter-spacing:.2em;text-transform:uppercase}
.sm-bedarf{grid-area:bed;align-self:end;border:1px solid color-mix(in srgb,var(--accent) 60%,var(--line));
  border-radius:calc(var(--r) / 2);padding:12px 14px;display:grid;gap:2px;
  background:color-mix(in srgb,var(--accent) 5%,transparent)}
.sm-bedarf small{font:700 .66rem var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sm-bedarf b{font:700 clamp(1.15rem,2.6vw,1.6rem)/1.15 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.sm-bedarf span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sm-rate{color:var(--primary)}
.sm-anleitung{grid-area:anl;border-top:1px solid var(--line);padding-top:clamp(14px,2.4vw,22px)}
.sm-text{margin:0 0 14px;line-height:1.7;color:var(--ink);max-width:68ch}
.sm-anleitung .desc{margin-bottom:14px}
.sm-anleitung .ab{margin:0}
.sm-sc{padding-top:10px}
@media (max-width:780px){
  .sm-bogen{grid-template-columns:1fr;grid-template-areas:"kopf" "vor" "rue" "arm" "bun" "bed" "anl"}
  .sm-v{min-height:300px}
  .sm-txt{max-width:92%}
  .sm-fl{right:14%;top:30%}
}

/* --- Seitentyp: Schriftmuster --- */
/* Schriftmuster: Typenprobe, derselbe Name in aufsteigenden Graden mit Punktangabe links */
.A-schriftmuster{background:var(--bg)}
.A-schriftmuster .sfm{padding-top:clamp(28px,5vw,64px);padding-bottom:20px;--sfm-k:1}
.sfm-kopf{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;font:700 clamp(.66rem,1.5vw,.76rem)/1.4 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted);border-bottom:2px solid var(--ink);padding-bottom:10px}
.sfm-kopf span:first-child{color:var(--primary)}
.sfm-zeile{margin:clamp(14px,2vw,22px) 0 clamp(18px,2.6vw,28px);font:400 clamp(1.05rem,2.2vw,1.35rem)/1.5 var(--font-h);color:var(--muted);max-width:52ch;overflow-wrap:anywhere}

/* Die Stufen: Punktangabe in der linken Spalte, der Satz daneben */
.sfm-probe{border-top:1px solid var(--line)}
.sfm-grad{display:grid;grid-template-columns:clamp(3.4rem,7vw,5rem) minmax(0,1fr);align-items:baseline;gap:clamp(10px,2vw,22px);padding:clamp(6px,1vw,12px) 0;border-bottom:1px solid var(--line)}
.sfm-pt{font:700 clamp(.66rem,1.4vw,.78rem)/1 var(--font-b);color:var(--muted);text-align:right;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.sfm-satz{display:block;margin:0;font-family:var(--font-h);font-weight:600;line-height:1.04;letter-spacing:-.015em;color:var(--ink);overflow-wrap:anywhere;font-size:min(calc(var(--sfm-pt) * 1px * var(--sfm-k)),12.5vw)}
.sfm-haupt{border-bottom:3px solid var(--ink);padding-bottom:clamp(8px,1.4vw,16px)}
.sfm-haupt .sfm-satz{font-weight:800}
.sfm-haupt .sfm-pt{color:var(--primary)}

/* Der Zeichensatz als Reihe, die im Namen vorkommenden Zeichen hervorgehoben */
.sfm-zeichen{margin:clamp(18px,2.6vw,30px) 0;padding:clamp(14px,2vw,20px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.sfm-marke{display:block;font:700 clamp(.6rem,1.3vw,.72rem)/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-bottom:.7em}
.sfm-zeichen p{margin:0;display:flex;flex-wrap:wrap;gap:clamp(4px,.8vw,8px)}
.sfm-zeichen b{display:grid;place-items:center;min-width:clamp(1.5rem,3.2vw,2.1rem);padding:.18em .2em;font:500 clamp(.95rem,2.2vw,1.25rem)/1 var(--font-h);color:var(--muted);border:1px solid transparent}
.sfm-zeichen b.sfm-hat{color:var(--on-primary);background:var(--primary);border-color:var(--primary);font-weight:700;border-radius:var(--rs)}

/* Angaben und Lizenzgebühr */
.sfm-fuss{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:clamp(18px,3vw,36px);align-items:start}
.sfm-angaben{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 clamp(16px,2.6vw,30px)}
.sfm-angaben div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dotted var(--line)}
.sfm-angaben dt{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.sfm-angaben dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.sfm-lizenz{padding:clamp(16px,2.4vw,24px);background:var(--surface);border:2px solid var(--ink);border-radius:var(--r)}
.sfm-betrag{margin:0;font:800 clamp(1.7rem,4.4vw,2.6rem)/1.05 var(--font-h);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sfm-lage{margin:.4em 0 0;font-size:.84rem;color:var(--muted)}
.sfm-lizenz .ab{margin-top:16px;display:grid;gap:8px}
.sfm-lizenz .ab-l,.sfm-lizenz .ab-p{display:none}
.sfm-lizenz .btn{width:100%}
.sfm-text{max-width:62ch;margin:clamp(20px,3vw,32px) 0 0;color:var(--muted);line-height:1.75}
.sfm-text p{margin:0 0 1em}
.sfm-sc{padding-top:10px}

@media (max-width:780px){
    .A-schriftmuster .sfm{--sfm-k:.62}
    .sfm-fuss{grid-template-columns:minmax(0,1fr)}
    .sfm-grad{gap:8px;grid-template-columns:3rem minmax(0,1fr)}
    .sfm-angaben div{padding:7px 0}
}

/* --- Seitentyp: Setzkasten --- */
/* Setzkasten: Holzkasten mit Fächern verschiedener Größe, die Lettern des Namens einzeln einsortiert */
.A-setzkasten{background:var(--bg)}
.A-setzkasten .szk{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.szk-tafel{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;max-width:1020px;margin:0 auto 12px;font:700 clamp(.66rem,1.5vw,.76rem)/1.4 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.szk-tafel span:first-child{color:var(--primary)}

/* Der Kasten: Fugen werden je Fach gezeichnet, nie über gap, damit der Umbruch nicht aufreißt */
.szk-kasten{max-width:1020px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(clamp(68px,9vw,96px),auto);background:var(--surface);border:clamp(9px,1.5vw,16px) solid color-mix(in srgb,var(--primary) 26%,var(--surface));box-shadow:0 28px 60px -42px color-mix(in srgb,var(--ink) 70%,transparent)}
.szk-fach{position:relative;background:var(--surface);box-shadow:0 0 0 1px var(--line);padding:clamp(10px,1.4vw,16px)}
.szk-marke{display:block;font:700 clamp(.6rem,1.3vw,.7rem)/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:.4em}

/* Lettern: jede in ihrem Fach, mit Signatur-Kerbe am Fuß */
.szk-name{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(48px,7.4vw,84px),1fr));margin:0;padding:0;letter-spacing:0;line-height:1;color:var(--on-hero)}
.szk-letter{display:grid;place-items:center;aspect-ratio:3/4;background:var(--hero);color:var(--on-hero);padding:0;overflow:hidden}
.szk-letter b{font:700 clamp(1.5rem,5vw,2.9rem)/1 var(--font-h);text-transform:lowercase;overflow-wrap:anywhere}
.szk-letter::after{content:"";position:absolute;left:24%;right:24%;bottom:15%;height:clamp(3px,.5vw,4px);border-radius:2px;background:color-mix(in srgb,var(--on-hero) 38%,var(--hero))}
.szk-trenn b{font-size:clamp(1.2rem,3.4vw,2rem)}
.szk-trenn,.szk-end{background:color-mix(in srgb,var(--on-hero) 14%,var(--hero))}
.szk-trenn::after,.szk-end::after{background:color-mix(in srgb,var(--on-hero) 46%,var(--hero))}

/* Gesetzte Zeile, volle Breite unter den Lettern */
.szk-zeile{grid-column:1/-1}
.szk-zeile p{margin:0;font:400 clamp(1rem,2.2vw,1.3rem)/1.45 var(--font-h);color:var(--ink);overflow-wrap:anywhere}

/* Größtes Fach: der Preis */
.szk-gross{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center;background:color-mix(in srgb,var(--primary) 9%,var(--surface));box-shadow:0 0 0 1px var(--line),inset 0 0 0 1px color-mix(in srgb,var(--primary) 38%,transparent)}
.szk-betrag{margin:0;font:800 clamp(1.8rem,5vw,3.1rem)/1.05 var(--font-h);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.szk-gross .ab{margin-top:14px}
.szk-gross .ab-l,.szk-gross .ab-p{display:none}

/* Leere Fächer tragen die Merkmale */
.szk-merk b{display:block;font:600 clamp(.92rem,1.8vw,1.05rem)/1.35 var(--font-b);color:var(--ink);overflow-wrap:anywhere}
.szk-merk small{display:block;margin-top:.35em;font-size:.76rem;line-height:1.4;color:var(--muted)}
.szk-m0{grid-column:span 2}
.szk-leer{grid-column:span 2;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 4%,var(--surface))}
.szk-leer i{width:clamp(14px,2.4vw,22px);height:clamp(14px,2.4vw,22px);border:1px solid var(--line);border-radius:50%}

.szk-satz{max-width:760px;margin:clamp(20px,3vw,34px) auto 0;color:var(--muted);line-height:1.75}
.szk-satz p{margin:0 0 1em}
.szk-sc{padding-top:10px}

@media (max-width:780px){
    .szk-kasten{grid-template-columns:repeat(2,minmax(0,1fr));border-width:8px}
    .szk-gross,.szk-m0,.szk-leer{grid-column:1/-1}
    .szk-gross{grid-row:auto}
    .szk-leer{display:none}
    .szk-name{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
}

/* --- Seitentyp: Spielkarte --- */
/* Spielkarte: Quartettkarte im Hochformat, Werte als Zeilen mit Zahl rechts, Preis als Trumpfwert */
.A-spielkarte{
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--line) 55%,transparent) 0 1.5px, transparent 1.6px) 0 0/18px 18px,
    var(--bg);
}
.A-spielkarte .qk{
  padding-top:clamp(26px,4.5vw,60px);
  padding-bottom:clamp(20px,3vw,36px);
  display:flex;
  justify-content:center;
}
.qk-karte{
  position:relative;
  width:100%;
  max-width:430px;
  background:var(--surface);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:calc(var(--r) + 6px);
  padding:clamp(14px,2.4vw,20px);
  box-shadow:0 1px 0 2px var(--surface) inset, 0 18px 40px -22px color-mix(in srgb,var(--ink) 60%,transparent);
}
.qk-karte::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid color-mix(in srgb,var(--accent) 60%,var(--line));
  border-radius:var(--r);
  pointer-events:none;
}
.qk-kopf{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  font:700 .68rem/1.3 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.16em;
}
.qk-serie{
  background:var(--primary);
  color:var(--on-primary);
  border-radius:calc(var(--r) / 2);
  padding:4px 9px;
}
.qk-blatt{color:var(--muted)}
.qk-bild{
  position:relative;
  margin:12px 0 10px;
  aspect-ratio:4 / 3;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb,var(--primary) 12%,transparent) 0 8px, transparent 8px 16px),
    var(--hero);
  color:var(--on-hero);
  overflow:hidden;
}
.qk-bild span{
  font:900 clamp(3.4rem,15vw,5.6rem)/1 var(--font-h);
  letter-spacing:-.04em;
  opacity:.9;
}
.qk-name{
  position:relative;
  margin:0;
  font:800 clamp(1.5rem,5.4vw,2.2rem)/1.05 var(--font-h);
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
}
.qk-tld{color:var(--primary);font-weight:700}
.qk-lead{
  position:relative;
  margin:.3em 0 0;
  font-size:.86rem;
  line-height:1.45;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.qk-werte{
  position:relative;
  margin:14px 0 0;
  border-top:1px solid var(--line);
}
.qk-w{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:7px 2px;
  border-bottom:1px solid var(--line);
}
.qk-w dt{
  font:600 .8rem var(--font-b);
  color:var(--muted);
  flex:0 1 auto;
}
.qk-w::after{
  content:"";
  flex:1 1 auto;
  min-width:14px;
  align-self:center;
  height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 5px);
}
.qk-w dd{
  margin:0;
  order:3;
  flex:0 0 auto;
  font:800 1.05rem/1.1 var(--font-h);
  font-variant-numeric:tabular-nums;
  text-align:right;
  overflow-wrap:anywhere;
}
.qk-trumpf{
  margin-top:4px;
  border:2px solid var(--primary);
  border-radius:var(--r);
  padding:9px 11px;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
}
.qk-trumpf dt{color:var(--ink);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;font-weight:800}
.qk-trumpf dd{font-size:clamp(1.3rem,4.6vw,1.75rem);color:var(--primary)}
.qk-trumpf::after{background:none}
.qk-text{
  position:relative;
  margin:13px 0 0;
  font-size:.88rem;
  line-height:1.62;
}
.A-spielkarte .qk-karte .custom{font-size:.88rem;line-height:1.62}
.A-spielkarte .qk-karte .ab{margin-top:14px;gap:8px 12px}
.A-spielkarte .qk-karte .ab-l,
.A-spielkarte .qk-karte .ab-p{display:none}
.A-spielkarte .qk-karte .ab-btns{width:100%;justify-content:center}
.qk-regel{
  position:relative;
  display:block;
  margin:14px -4px -4px;
  border-top:1px dashed var(--line);
  padding-top:9px;
  font:600 .68rem/1.4 var(--font-b);
  letter-spacing:.03em;
  color:var(--muted);
  text-align:center;
}
.A-spielkarte .qk-sc{padding-top:6px}
@media (max-width:780px){
  .A-spielkarte .qk{padding-top:20px}
  .qk-karte{max-width:none;border-radius:var(--r)}
  .qk-bild{aspect-ratio:16 / 9}
  .qk-w{flex-wrap:wrap}
  .qk-w::after{min-width:8px}
}

/* --- Seitentyp: Startnummer --- */
/* Startnummer: Startnummernbogen mit Sicherheitsnadeln in den Ecken, grosse Nummer, Siegpraemie */
.A-startnummer{
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb,var(--line) 60%,transparent) 0 1px, transparent 1px 44px),
    var(--bg);
}
.A-startnummer .trk{
  padding-top:clamp(24px,4vw,58px);
  padding-bottom:clamp(20px,3vw,38px);
  display:flex;
  justify-content:center;
}
.trk-bogen{
  position:relative;
  width:100%;
  max-width:560px;
  text-align:center;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 2);
  padding:clamp(26px,4.4vw,44px) clamp(18px,3.4vw,38px) clamp(16px,2.6vw,26px);
  box-shadow:0 24px 50px -30px color-mix(in srgb,var(--ink) 65%,transparent);
}
.trk-nadel{
  position:absolute;
  width:26px;
  height:11px;
  border:2px solid color-mix(in srgb,var(--ink) 45%,var(--surface));
  border-radius:11px;
  background:color-mix(in srgb,var(--ink) 7%,var(--surface));
}
.trk-nadel::before{
  content:"";
  position:absolute;
  left:3px;
  top:50%;
  width:19px;
  height:2px;
  transform:translateY(-50%);
  background:color-mix(in srgb,var(--ink) 55%,var(--surface));
  border-radius:2px;
}
.trk-nadel::after{
  content:"";
  position:absolute;
  left:-4px;
  top:50%;
  width:9px;
  height:9px;
  transform:translateY(-50%);
  border:2px solid color-mix(in srgb,var(--ink) 45%,var(--surface));
  border-radius:50%;
  background:var(--surface);
}
.trk-n1{top:11px;left:11px;transform:rotate(-34deg)}
.trk-n2{top:11px;right:11px;transform:rotate(34deg)}
.trk-n3{bottom:11px;left:11px;transform:rotate(34deg)}
.trk-n4{bottom:11px;right:11px;transform:rotate(-34deg)}
.trk-lauf{
  margin:0;
  font:800 .68rem/1.3 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.3em;
  color:var(--muted);
}
.trk-nummer{
  display:block;
  margin:.1em 0 .05em;
  font:900 clamp(4.4rem,22vw,9.5rem)/.86 var(--font-h);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.045em;
  color:var(--primary);
}
.trk-laeufer{
  margin:0;
  padding-top:10px;
  border-top:3px solid var(--ink);
  font:700 clamp(1.1rem,3.8vw,1.7rem)/1.2 var(--font-h);
  text-transform:uppercase;
  letter-spacing:.06em;
  overflow-wrap:anywhere;
}
.trk-lead{
  margin:.45em auto 0;
  max-width:46ch;
  font-size:.92rem;
  line-height:1.5;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.trk-daten{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:1px;
  margin:clamp(16px,2.6vw,24px) 0 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 2);
  overflow:hidden;
  text-align:left;
}
.trk-d{background:var(--surface);box-shadow:0 0 0 1px var(--line);padding:9px 12px 11px;min-width:0}
.trk-d dt{
  font:800 .6rem/1 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}
.trk-d dd{
  margin:5px 0 0;
  font:700 .98rem/1.2 var(--font-h);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.trk-praemie{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  margin-top:clamp(14px,2.2vw,20px);
  padding:clamp(12px,2vw,18px);
  border:2px dashed var(--accent);
  border-radius:var(--r);
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));
}
.trk-praemie span{
  font:800 .64rem/1 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.26em;
  color:var(--muted);
}
.trk-praemie b{
  font:900 clamp(1.5rem,5.6vw,2.5rem)/1.05 var(--font-h);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.trk-text{
  margin:clamp(14px,2.2vw,20px) auto 0;
  max-width:56ch;
  font-size:.94rem;
  line-height:1.68;
  text-align:left;
}
.A-startnummer .trk-bogen .custom{margin-top:10px;text-align:left;font-size:.94rem;line-height:1.68}
.A-startnummer .trk-bogen .ab-l,
.A-startnummer .trk-bogen .ab-p{display:none}
.A-startnummer .trk-bogen .ab{margin-top:16px;gap:10px}
.trk-zettel{
  margin:clamp(14px,2.2vw,20px) 0 0;
  padding-top:10px;
  border-top:1px solid var(--line);
  font:600 .68rem/1.5 var(--font-b);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-startnummer .trk-sc{padding-top:6px}
@media (max-width:780px){
  .A-startnummer .trk{padding-top:18px}
  .trk-bogen{padding:30px 14px 16px}
  .trk-nadel{width:20px;height:9px}
  .trk-nadel::before{left:3px;width:15px}
  .trk-daten{grid-template-columns:1fr 1fr}
  .trk-text{text-align:left}
}

/* --- Seitentyp: Werkzeugtafel --- */
/* Werkzeugtafel: Lochplatte mit aufgemalten Werkzeugumrissen, Merkmale in den Umrissen */
.A-werkzeugtafel{background:color-mix(in srgb,var(--ink) 7%,var(--bg))}
.A-werkzeugtafel .wt{padding-top:clamp(28px,5vw,56px);padding-bottom:20px}
.wt-tafel{max-width:980px;margin:0 auto;border:3px solid color-mix(in srgb,var(--on-hero) 34%,var(--hero));border-radius:var(--r);
  padding:clamp(18px,3vw,34px);color:var(--on-hero);
  background-color:var(--hero);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--on-hero) 26%,var(--hero)) 0 2.6px,transparent 3.2px);
  background-size:26px 26px;background-position:13px 13px}
.wt-schild{display:inline-block;position:relative;max-width:100%;padding:clamp(12px,2vw,18px) clamp(26px,4vw,40px);
  background:color-mix(in srgb,var(--on-hero) 11%,var(--hero));border:1px solid color-mix(in srgb,var(--on-hero) 42%,var(--hero));border-radius:calc(var(--r) / 2)}
.wt-schild::before,.wt-schild::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:color-mix(in srgb,var(--on-hero) 55%,var(--hero));transform:translateY(-50%)}
.wt-schild::before{left:9px}
.wt-schild::after{right:9px}
.wt-schild>small{display:block;font:700 .66rem var(--font-b);letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.wt-name{font:800 clamp(1.8rem,5vw,3.2rem)/1.05 var(--font-h);letter-spacing:-.02em;margin:.1em 0 0;overflow-wrap:anywhere;color:var(--on-hero)}
.wt-name span{font-weight:400;opacity:.62;white-space:nowrap}
.wt-kopf{margin:.5em 0 0;font-size:.98rem;opacity:.85;max-width:52ch}
.wt-wand{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1.6vw,18px);margin-top:clamp(20px,3.4vw,34px)}
.wt-platz{display:grid;gap:10px;align-content:start;justify-items:center}
.wt-umriss{position:relative;width:100%;aspect-ratio:3 / 4;display:grid;place-items:center;
  color:color-mix(in srgb,var(--accent) 55%,var(--on-hero))}
.wt-riss{position:absolute;inset:0;width:100%;height:100%}
.wt-wert{position:relative;z-index:1;max-width:92%;text-align:center;overflow-wrap:anywhere;
  font:800 clamp(1rem,2.2vw,1.55rem)/1.15 var(--font-h);color:var(--on-hero);
  background:color-mix(in srgb,var(--hero) 84%,transparent);padding:4px 8px;border-radius:2px}
.wt-leer{color:color-mix(in srgb,var(--accent) 38%,var(--on-hero));opacity:.7}
.wt-lab{font:700 .7rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;text-align:center;
  color:color-mix(in srgb,var(--on-hero) 78%,var(--hero))}
.wt-preis{display:grid;gap:1px;padding:7px 12px;border-radius:calc(var(--r) / 2);background:var(--primary);color:var(--on-primary);letter-spacing:.1em}
.wt-preis small{font-size:.63rem;opacity:.85}
.wt-preis b{font:800 1.05rem/1.2 var(--font-h);letter-spacing:0;text-transform:none}
.wt-bank{max-width:980px;margin:clamp(16px,2.8vw,26px) auto 0;background:var(--surface);border:1px solid var(--line);
  border-top:6px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-radius:var(--r);padding:clamp(18px,3vw,30px)}
.wt-text{margin:0 0 14px;line-height:1.7;color:var(--ink)}
.wt-bank .desc{margin-bottom:14px}
.wt-bank .ab{margin:0}
.wt-sc{padding-top:10px}
@media (max-width:780px){
  .wt-wand{grid-template-columns:repeat(2,1fr)}
  .wt-frei{grid-column:span 2}
  .wt-frei .wt-umriss{max-width:46%}
  .wt-schild{padding-left:24px;padding-right:24px}
  .wt-schild::before,.wt-schild::after{display:none}
}

/* --- Seitentyp: Wetterkarte --- */
/* Wetterkarte: Isobaren um ein Hoch und ein Tief als Inline-SVG, aus dem Namen gerechnet,
   Windpfeile zwischen den beiden Zentren, Merkmale als Messwerte an Stationskreisen. */
.A-wetterkarte{
  --wk-feld:color-mix(in srgb,var(--primary) 7%,var(--surface));
  background:linear-gradient(color-mix(in srgb,var(--primary) 6%,transparent),transparent 420px),var(--bg);
}
.A-wetterkarte .wk{
  padding-top:clamp(26px,4vw,58px);
  padding-bottom:clamp(26px,4vw,52px);
}
/* Kopf: die Lage hat einen Namen */
.A-wetterkarte .wk-kopf{max-width:48ch}
.A-wetterkarte .wk-kl{
  margin:0;
  font:700 .68rem/1 var(--font-b);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--primary);
}
.A-wetterkarte .wk-name{
  margin:.25em 0 .2em;
  font:800 clamp(2rem,5.4vw,3.8rem)/1.02 var(--font-h);
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.A-wetterkarte .wk-lead{
  margin:0;
  overflow-wrap:anywhere;
  font-size:clamp(1rem,1.6vw,1.18rem);
  line-height:1.45;
  color:var(--muted);
}
/* Das Kartenfeld */
.A-wetterkarte .wk-karte{
  margin:clamp(16px,2.6vw,30px) 0 0;
  background:var(--wk-feld);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(10px,1.4vw,16px);
}
.A-wetterkarte .wk-svg{
  display:block;
  width:100%;
  aspect-ratio:200 / 120;
  color:var(--ink);
}
.A-wetterkarte .wk-gitter line{stroke:currentColor;stroke-width:.3;opacity:.16}
.A-wetterkarte .wk-iso ellipse{fill:none;stroke:currentColor;stroke-width:.55;opacity:.5}
.A-wetterkarte .wk-wind path{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.7;
  stroke-linecap:round;
}
.A-wetterkarte .wk-hoch,
.A-wetterkarte .wk-tief{
  font:800 9px/1 var(--font-h);
  stroke:var(--wk-feld);
  stroke-width:2.6;
  paint-order:stroke;
  stroke-linejoin:round;
}
.A-wetterkarte .wk-hoch{fill:var(--primary)}
.A-wetterkarte .wk-tief{fill:var(--ink)}
.A-wetterkarte .wk-stationen circle{fill:none;stroke:var(--ink);stroke-width:.9}
.A-wetterkarte .wk-stationen line{stroke:var(--ink);stroke-width:.8;stroke-linecap:round}
.A-wetterkarte .wk-wl{
  font:700 2.4px/1 var(--font-b);
  letter-spacing:.18px;
  fill:var(--muted);
  stroke:var(--wk-feld);
  stroke-width:1.2;
  paint-order:stroke;
  stroke-linejoin:round;
}
.A-wetterkarte .wk-wv{
  font:700 3.6px/1 var(--font-h);
  fill:var(--ink);
  stroke:var(--wk-feld);
  stroke-width:1.5;
  paint-order:stroke;
  stroke-linejoin:round;
}
.A-wetterkarte .wk-sig{
  margin:clamp(8px,1.2vw,12px) 0 0;
  font-size:.76rem;
  letter-spacing:.06em;
  color:var(--muted);
}
/* Vorhersagezeile: hier steht der Preis */
.A-wetterkarte .wk-vor{
  margin-top:clamp(16px,2.4vw,26px);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.2em clamp(14px,2.4vw,30px);
  align-items:center;
  background:var(--hero);
  color:var(--on-hero);
  border-radius:var(--r);
  padding:clamp(14px,2.2vw,24px) clamp(16px,2.6vw,30px);
}
.A-wetterkarte .wk-vl{
  grid-column:1;
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 70%,var(--hero));
}
.A-wetterkarte .wk-vt{
  grid-column:1;
  margin:0;
  overflow-wrap:anywhere;
  font:600 clamp(1rem,1.9vw,1.3rem)/1.3 var(--font-h);
}
.A-wetterkarte .wk-vp{
  grid-column:2;
  grid-row:1 / 3;
  align-self:center;
  text-align:right;
  font:800 clamp(1.5rem,3.6vw,2.6rem)/1 var(--font-h);
  overflow-wrap:anywhere;
}
.A-wetterkarte .wk-vr{
  grid-column:1 / -1;
  font-size:.86rem;
  color:color-mix(in srgb,var(--on-hero) 78%,var(--hero));
}
.A-wetterkarte .ab{margin-top:clamp(14px,2vw,20px);flex-wrap:wrap}
.A-wetterkarte .ab-l,
.A-wetterkarte .ab-p{display:none}
/* Fließtext */
.A-wetterkarte .wk-text{
  max-width:72ch;
  margin-top:clamp(20px,3vw,32px);
  font-size:clamp(1rem,1.5vw,1.08rem);
}
.A-wetterkarte .wk-text p{margin:0 0 1em;overflow-wrap:anywhere}
.A-wetterkarte .wk-sc{padding-top:8px;padding-bottom:8px}
@media (max-width:780px){
  .A-wetterkarte .wk-name{font-size:clamp(1.7rem,8.5vw,2.4rem)}
  .A-wetterkarte .wk-vor{grid-template-columns:1fr}
  .A-wetterkarte .wk-vp{
    grid-column:1;
    grid-row:auto;
    text-align:left;
    font-size:clamp(1.4rem,7vw,2rem);
  }
  .A-wetterkarte .wk-wl{font-size:3.4px}
  .A-wetterkarte .wk-wv{font-size:5px}
  .A-wetterkarte .wk-hoch,
  .A-wetterkarte .wk-tief{font-size:12px}
  .A-wetterkarte .wk-sig{font-size:.72rem}
}