/* ==========================================================================
   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}
}

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

/* --- Seitentyp: Autobahnschild --- */
/* Autobahnschild: eine einzige grosse Wegweisertafel, Zeilen darin untereinander,
   Pfeile nach oben und rechts, Entfernungen rechts, der Preis in einem abgesetzten Feld */
.A-autobahnschild{background:var(--bg)}
.A-autobahnschild .tfl{
  padding-top:clamp(22px,3.8vw,54px);
  padding-bottom:clamp(20px,3.4vw,44px);
}

/* Die Tafel: ein Stück Blech mit umlaufendem Rand */
.A-autobahnschild .tfl-tafel{
  max-width:940px;
  margin:0 auto;
  background:var(--hero);
  color:var(--on-hero);
  border:clamp(2px,.45vw,4px) solid color-mix(in srgb,var(--on-hero) 88%,var(--hero));
  border-radius:clamp(8px,1.4vw,16px);
  padding:clamp(14px,2.4vw,26px) clamp(14px,2.6vw,30px) clamp(16px,2.6vw,28px);
  box-shadow:0 24px 54px -34px color-mix(in srgb,var(--ink) 80%,transparent);
}

/* Streckennummer oben, klein */
.A-autobahnschild .tfl-nr{
  display:flex;
  align-items:center;
  gap:clamp(8px,1.4vw,14px);
  margin:0 0 clamp(10px,1.8vw,18px);
}
.A-autobahnschild .tfl-bahn{
  display:inline-block;
  padding:.18em .6em .24em;
  background:var(--primary);
  color:var(--on-primary);
  border-radius:calc(var(--r) / 2.4);
  font:800 clamp(.82rem,1.7vw,1.05rem)/1.2 var(--font-h);
  letter-spacing:.06em;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--on-hero) 75%,var(--hero));
}
.A-autobahnschild .tfl-aus{
  font:600 .72rem/1.2 var(--font-b);
  font-style:normal;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 70%,var(--hero));
}

/* Hauptziel: der Domainname in sehr grosser Schrift */
.A-autobahnschild .tfl-haupt{
  display:flex;
  align-items:center;
  gap:clamp(12px,2.4vw,28px);
  padding-bottom:clamp(12px,2.2vw,22px);
}
.A-autobahnschild .tfl-ht{flex:1;min-width:0}
.A-autobahnschild .tfl-name{
  margin:0;
  color:var(--on-hero);
  font:800 clamp(2rem,7.4vw,4.6rem)/1 var(--font-h);
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}
.A-autobahnschild .tfl-lead{
  margin:.45em 0 0;
  overflow-wrap:anywhere;
  font:500 clamp(.92rem,1.8vw,1.14rem)/1.45 var(--font-b);
  color:color-mix(in srgb,var(--on-hero) 82%,var(--hero));
}

/* Pfeile */
.A-autobahnschild .tfl-pf{
  flex:none;
  width:clamp(22px,2.8vw,30px);
  height:clamp(22px,2.8vw,30px);
  fill:currentColor;
}
.A-autobahnschild .tfl-pf-gross{
  width:clamp(46px,8vw,86px);
  height:clamp(46px,8vw,86px);
}

/* Die Zielzeilen in der Tafel */
.A-autobahnschild .tfl-ziele{
  list-style:none;
  margin:0;
  padding:0;
}
.A-autobahnschild .tfl-z,
.A-autobahnschild .tfl-preis{
  display:flex;
  align-items:center;
  gap:clamp(10px,2vw,20px);
  padding:clamp(9px,1.6vw,15px) 0;
  border-top:2px solid color-mix(in srgb,var(--on-hero) 30%,var(--hero));
}
.A-autobahnschild .tfl-zt{
  flex:1;
  min-width:0;
  font:700 clamp(1.05rem,2.6vw,1.6rem)/1.2 var(--font-h);
  overflow-wrap:anywhere;
}
.A-autobahnschild .tfl-zt small{
  display:block;
  margin-top:.25em;
  font:600 .68rem/1.2 var(--font-b);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 66%,var(--hero));
}
.A-autobahnschild .tfl-km{
  flex:none;
  white-space:nowrap;
  font:700 clamp(.95rem,2.2vw,1.35rem)/1.2 var(--font-h);
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--on-hero) 86%,var(--hero));
}

/* Preiszeile: eigene Zeile, der Betrag in einem abgesetzten Feld */
.A-autobahnschild .tfl-preis{
  margin-top:clamp(4px,.8vw,8px);
  border-top-width:clamp(3px,.6vw,5px);
  border-top-color:color-mix(in srgb,var(--on-hero) 70%,var(--hero));
}
.A-autobahnschild .tfl-feld{
  flex:none;
  max-width:60%;
  padding:.3em .72em .38em;
  background:var(--primary);
  color:var(--on-primary);
  border-radius:calc(var(--r) / 2);
  font:800 clamp(1.1rem,3.4vw,2.1rem)/1.1 var(--font-h);
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--on-hero) 55%,var(--hero));
}

.A-autobahnschild .tfl-mast{
  max-width:940px;
  margin:clamp(10px,1.6vw,16px) auto 0;
  font:600 .7rem/1.5 var(--font-b);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-autobahnschild .ab{margin-top:clamp(14px,2.2vw,22px);flex-wrap:wrap}
.A-autobahnschild .ab-l,
.A-autobahnschild .ab-p{display:none}
.A-autobahnschild .tfl-text{
  max-width:70ch;
  margin-top:clamp(16px,2.6vw,28px);
  font-size:clamp(.98rem,1.5vw,1.06rem);
  line-height:1.7;
}
.A-autobahnschild .tfl-text p{margin:0 0 1em;overflow-wrap:anywhere}
.A-autobahnschild .tfl-sc{padding-top:10px;padding-bottom:8px}

@media (max-width:780px){
  .A-autobahnschild .tfl-haupt{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:start;
  }
  .A-autobahnschild .tfl-pf-gross{width:clamp(34px,11vw,52px);height:clamp(34px,11vw,52px)}
  .A-autobahnschild .tfl-name{font-size:clamp(1.6rem,9.5vw,2.6rem)}
  .A-autobahnschild .tfl-zt{font-size:clamp(.98rem,4.6vw,1.2rem)}
  .A-autobahnschild .tfl-zt small{font-size:.6rem;letter-spacing:.12em}
  .A-autobahnschild .tfl-km{font-size:clamp(.86rem,4vw,1rem)}
  .A-autobahnschild .tfl-preis{flex-wrap:wrap}
  .A-autobahnschild .tfl-feld{
    max-width:100%;
    width:100%;
    margin-top:.4em;
    text-align:center;
  }
  .A-autobahnschild .tfl-mast{font-size:.62rem;letter-spacing:.1em}
}

/* --- Seitentyp: Backbuch --- */
/* Backbuch: eine aufgeschlagene Doppelseite. Der Domainname steht als Rezepttitel über
   beiden Seiten, links die Zutatenliste mit eigener Mengenspalte, rechts die Zubereitung
   in nummerierten Schritten. Der Preis steht als Angabe zu Form und Portionen im Kopf,
   unten läuft ein handschriftlicher Zusatz quer über den Bund. */
.A-backbuch{background:var(--bg)}
.A-backbuch .bkb{
  padding-top:clamp(22px,4vw,54px);
  padding-bottom:clamp(24px,4vw,52px);
}
.A-backbuch .bkb-buch{
  max-width:1000px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 3);
  box-shadow:0 30px 60px -44px color-mix(in srgb,var(--ink) 85%,transparent);
  overflow:hidden;
}

/* --- Kopf über beiden Seiten --- */
.A-backbuch .bkb-kopf{
  padding:clamp(20px,3.4vw,38px) clamp(18px,3.4vw,40px) clamp(16px,2.6vw,26px);
  border-bottom:2px solid var(--ink);
  text-align:center;
}
.A-backbuch .bkb-kl{
  margin:0;
  font:700 .64rem/1.3 var(--font-b);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--primary);
  overflow-wrap:anywhere;
}
.A-backbuch .bkb-titel{
  margin:.4em 0 .25em;
  font:700 clamp(1.7rem,5.2vw,3.4rem)/1.04 var(--font-h);
  letter-spacing:-.02em;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-backbuch .bkb-unter{
  margin:0 auto;
  max-width:58ch;
  font:italic 400 clamp(.95rem,1.8vw,1.1rem)/1.5 var(--font-b);
  color:var(--muted);
  overflow-wrap:anywhere;
}
/* Angabe zu Form, Preis und Portionen: drei Felder mit eigener Fuge je Feld */
.A-backbuch .bkb-angabe{
  margin:clamp(14px,2.4vw,22px) 0 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  text-align:left;
}
.A-backbuch .bkb-angabe dt{
  grid-row:1;
  padding:.6em clamp(8px,1.4vw,14px) .1em;
  font:700 .6rem/1.3 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  box-shadow:0 0 0 1px var(--line);
}
.A-backbuch .bkb-angabe dd{
  grid-row:2;
  margin:0;
  padding:0 clamp(8px,1.4vw,14px) .7em;
  font:600 clamp(.84rem,1.6vw,.95rem)/1.4 var(--font-b);
  color:var(--ink);
  box-shadow:0 0 0 1px var(--line);
  overflow-wrap:anywhere;
}
.A-backbuch .bkb-angabe dt:nth-of-type(2),
.A-backbuch .bkb-angabe dd:nth-of-type(2){background:color-mix(in srgb,var(--primary) 8%,transparent)}
.A-backbuch .bkb-preis{
  font:800 clamp(1.1rem,2.8vw,1.7rem)/1.15 var(--font-h);
  color:var(--primary);
}

/* --- Die Doppelseite. Der Bund entsteht aus den Innenschatten beider Seiten. --- */
.A-backbuch .bkb-seiten{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
}
.A-backbuch .bkb-seite{
  position:relative;
  padding:clamp(18px,3vw,34px) clamp(16px,3vw,32px) clamp(34px,4vw,48px);
}
.A-backbuch .bkb-links{
  border-right:1px solid var(--line);
  box-shadow:inset -14px 0 18px -18px color-mix(in srgb,var(--ink) 80%,transparent);
  background:color-mix(in srgb,var(--ink) 3%,var(--surface));
}
.A-backbuch .bkb-rechts{
  box-shadow:inset 14px 0 18px -18px color-mix(in srgb,var(--ink) 80%,transparent);
}
.A-backbuch .bkb-st{
  margin:0 0 clamp(10px,1.8vw,16px);
  padding-bottom:.4em;
  border-bottom:1px solid var(--accent);
  font:700 .72rem/1.2 var(--font-b);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink);
}
.A-backbuch .bkb-pz{
  position:absolute;
  bottom:clamp(12px,1.8vw,18px);
  margin:0;
  font:600 .72rem/1 var(--font-b);
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.A-backbuch .bkb-links .bkb-pz{left:clamp(16px,3vw,32px)}
.A-backbuch .bkb-rechts .bkb-pz{right:clamp(16px,3vw,32px)}

/* --- Linke Seite: Zutaten mit Mengenspalte --- */
.A-backbuch .bkb-zl{width:100%;border-collapse:collapse}
.A-backbuch .bkb-zl thead th{
  text-align:left;
  padding:0 .8em .35em 0;
  border-bottom:1px solid var(--line);
  font:700 .58rem/1.3 var(--font-b);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-backbuch .bkb-zl thead th:first-child{width:36%}
.A-backbuch .bkb-zl .bkb-menge{
  width:36%;
  padding:.5em .9em .5em 0;
  border-bottom:1px dotted var(--line);
  vertical-align:top;
  font:700 clamp(.88rem,1.8vw,1rem)/1.4 var(--font-h);
  font-variant-numeric:tabular-nums;
  color:var(--primary);
  overflow-wrap:anywhere;
}
.A-backbuch .bkb-zl tbody th{
  text-align:left;
  padding:.5em 0;
  border-bottom:1px dotted var(--line);
  vertical-align:top;
  font:400 clamp(.9rem,1.8vw,1rem)/1.45 var(--font-b);
  color:var(--ink);
  overflow-wrap:anywhere;
}

/* --- Rechte Seite: nummerierte Schritte --- */
.A-backbuch .bkb-schritte{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:bkbs;
  display:grid;
  gap:clamp(10px,1.8vw,16px);
}
.A-backbuch .bkb-schritte li{
  counter-increment:bkbs;
  position:relative;
  padding-left:clamp(32px,4.4vw,44px);
  font-size:clamp(.95rem,1.6vw,1.04rem);
  line-height:1.65;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-backbuch .bkb-schritte li::before{
  content:counter(bkbs);
  position:absolute;
  left:0;
  top:.12em;
  width:clamp(22px,3vw,30px);
  height:clamp(22px,3vw,30px);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--primary);
  color:var(--on-primary);
  font:700 .78rem/1 var(--font-h);
  font-variant-numeric:tabular-nums;
}

/* --- Vorbemerkung und Kaufzeile unter beiden Seiten --- */
.A-backbuch .bkb-notiz{
  padding:clamp(16px,2.6vw,28px) clamp(18px,3.4vw,40px);
  border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--ink) 4%,var(--surface));
}
.A-backbuch .bkb-text{
  margin:0;
  max-width:74ch;
  font-size:clamp(.98rem,1.5vw,1.06rem);
  line-height:1.75;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-backbuch .bkb-notiz .desc.custom{margin-top:.8em;line-height:1.75}
.A-backbuch .bkb-notiz .ab{margin-top:clamp(14px,2.2vw,20px);flex-wrap:wrap;justify-content:space-between}

/* --- Handschriftlicher Zusatz, quer über den Bund --- */
.A-backbuch .bkb-hand{
  margin:0;
  padding:clamp(14px,2.4vw,22px) clamp(18px,3.4vw,40px) clamp(18px,3vw,28px);
  border-top:1px dashed var(--line);
  font:italic 400 clamp(1rem,2.2vw,1.22rem)/1.6 var(--font-h);
  letter-spacing:.01em;
  color:var(--muted);
  transform:rotate(-.5deg);
  transform-origin:left center;
  overflow-wrap:anywhere;
}
.A-backbuch .bkb-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-backbuch .bkb-seiten{grid-template-columns:1fr}
  .A-backbuch .bkb-links{
    border-right:0;
    border-bottom:1px solid var(--line);
    box-shadow:inset 0 -14px 18px -18px color-mix(in srgb,var(--ink) 80%,transparent);
  }
  .A-backbuch .bkb-rechts{box-shadow:inset 0 14px 18px -18px color-mix(in srgb,var(--ink) 80%,transparent)}
  .A-backbuch .bkb-angabe{grid-template-columns:1fr}
  .A-backbuch .bkb-angabe dt,
  .A-backbuch .bkb-angabe dd{grid-row:auto}
  .A-backbuch .bkb-titel{font-size:clamp(1.5rem,8.4vw,2.3rem)}
  .A-backbuch .bkb-zl thead th:first-child,
  .A-backbuch .bkb-zl .bkb-menge{width:42%}
  .A-backbuch .bkb-notiz .ab{flex-direction:column;align-items:flex-start}
  .A-backbuch .bkb-hand{transform:none}
}

/* --- Seitentyp: Element --- */
/* --- Seitentyp: Element --- */
/* Element: grosses quadratisches Feld aus dem Periodensystem, daneben die kleine Tafel mit dem hervorgehobenen Feld */
.A-element{background:var(--bg)}
.A-element .ez{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(16px,2.6vw,34px);
  align-items:start;
  padding-top:clamp(26px,4.4vw,58px);
  padding-bottom:clamp(24px,4vw,52px);
}

/* Das grosse Feld */
.A-element .ez-zelle{
  grid-column:1;
  position:relative;
  container-type:inline-size;
  aspect-ratio:1;
  min-height:fit-content;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:.2em;
  padding:clamp(44px,13cqw,78px) clamp(14px,5cqw,30px) clamp(70px,20cqw,120px);
  background:var(--hero);
  color:var(--on-hero);
  border:2px solid color-mix(in srgb,var(--on-hero) 32%,var(--hero));
  border-radius:var(--r);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 10%,transparent);
}
.A-element .ez-ord{
  position:absolute;top:clamp(10px,3cqw,22px);left:clamp(12px,3.4cqw,24px);
  font:800 clamp(1rem,5cqw,2.1rem)/1 var(--font-h);
  font-variant-numeric:tabular-nums;
  color:var(--on-hero);
}
.A-element .ez-gp{
  position:absolute;top:clamp(12px,3.4cqw,24px);right:clamp(12px,3.4cqw,24px);
  max-width:46%;
  font:700 clamp(.56rem,1.9cqw,.78rem)/1.3 var(--font-b);
  letter-spacing:.12em;text-transform:uppercase;text-align:right;
  color:color-mix(in srgb,var(--on-hero) 60%,var(--hero));
}
.A-element .ez-sym{
  display:block;
  font:800 clamp(2.6rem,30cqw,9rem)/.92 var(--font-h);
  letter-spacing:-.04em;
  color:var(--on-hero);
}
.A-element .ez-name{
  margin:.18em 0 .1em;
  color:var(--on-hero);
  font:700 clamp(1.05rem,5.4cqw,2.1rem)/1.12 var(--font-h);
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
}
.A-element .ez-lead{
  margin:0;max-width:34ch;
  font-size:clamp(.82rem,2.7cqw,1.02rem);
  color:color-mix(in srgb,var(--on-hero) 74%,var(--hero));
}
.A-element .ez-masse{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  display:flex;flex-direction:column;align-items:center;gap:.12em;
  padding:clamp(10px,2.6cqw,18px) clamp(12px,3cqw,22px);
  border-top:1px solid color-mix(in srgb,var(--on-hero) 26%,var(--hero));
  background:color-mix(in srgb,var(--on-hero) 8%,var(--hero));
  border-radius:0 0 calc(var(--r) - 2px) calc(var(--r) - 2px);
}
.A-element .ez-masse small{
  font:700 clamp(.55rem,1.8cqw,.7rem)/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 62%,var(--hero));
}
.A-element .ez-masse b{
  font:800 clamp(1.2rem,6.4cqw,2.4rem)/1.1 var(--font-h);
  color:var(--on-hero);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
.A-element .ez-masse i{
  font-style:normal;font-size:clamp(.66rem,2.1cqw,.84rem);
  color:color-mix(in srgb,var(--on-hero) 70%,var(--hero));
}

/* Rechte Spalte: kleine Tafel und Eigenschaften */
.A-element .ez-seite{grid-column:2;min-width:0}
.A-element .ez-ut{
  margin:0 0 .7em;
  font:700 .68rem/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.A-element .ez-tafel{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  padding:1px;
  margin:0 0 clamp(20px,3vw,30px);
}
.A-element .ez-f{
  aspect-ratio:1;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 5%,var(--surface));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 85%,transparent);
  font:800 clamp(.44rem,1.1vw,.66rem)/1 var(--font-b);
  color:transparent;
}
.A-element .ez-hi{
  position:relative;z-index:1;
  background:var(--primary);
  color:var(--on-primary);
  box-shadow:0 0 0 1px var(--primary),0 0 0 4px color-mix(in srgb,var(--primary) 30%,transparent);
}
.A-element .ez-eig{margin:0 0 clamp(6px,1.4vw,12px);border-top:1px solid var(--line)}
.A-element .ez-e{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:2px 14px;padding:.6em 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.A-element .ez-e dt{
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.A-element .ez-e dd{margin:0;font-weight:700;overflow-wrap:anywhere;text-align:right}
.A-element .ez-seite .ab{margin-top:clamp(16px,2.4vw,24px)}
.A-element .ez-text{
  grid-column:1 / -1;
  max-width:70ch;
  font-size:clamp(1rem,1.5vw,1.08rem);
}
.A-element .ez-text p{margin:0 0 1em}
.A-element .ez-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-element .ez{grid-template-columns:1fr}
  .A-element .ez-zelle,.A-element .ez-seite,.A-element .ez-text{grid-column:1}
  .A-element .ez-zelle{aspect-ratio:auto;padding-bottom:clamp(76px,26vw,110px)}
  .A-element .ez-f{font-size:.42rem}
  .A-element .ez-e dd{text-align:left}
}

/* --- Seitentyp: Formeltafel --- */
/* --- Seitentyp: Formeltafel --- */
/* Formeltafel: dunkle Tafel in Kreideanmutung, die Merkmale sind die Glieder einer Herleitung, der Preis ihr Ergebnis */
.A-formeltafel{background:var(--bg)}
.A-formeltafel .ft{
  padding-top:clamp(24px,4.2vw,56px);
  padding-bottom:clamp(24px,4vw,52px);
}
.A-formeltafel .ft-tafel{
  position:relative;
  max-width:1000px;margin:0 auto;
  padding:clamp(22px,3.6vw,48px) clamp(18px,3.2vw,46px) clamp(62px,8vw,96px);
  background-color:var(--hero);
  background-image:radial-gradient(900px 420px at 18% 12%,color-mix(in srgb,var(--on-hero) 7%,transparent),transparent 70%);
  color:var(--on-hero);
  border:clamp(9px,1.5vw,16px) solid color-mix(in srgb,var(--accent) 26%,color-mix(in srgb,var(--on-hero) 34%,var(--hero)));
  border-radius:calc(var(--r) / 1.6);
  box-shadow:0 26px 60px -42px var(--ink),inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 16%,transparent);
  overflow:hidden;
}
/* Kreidereste am Rand */
.A-formeltafel .ft-kreidereste{
  position:absolute;top:0;right:0;width:min(44%,340px);height:clamp(80px,13vw,160px);
  pointer-events:none;
  background:radial-gradient(60px 26px at 72% 34%,color-mix(in srgb,var(--on-hero) 20%,transparent),transparent 72%),radial-gradient(90px 18px at 40% 68%,color-mix(in srgb,var(--on-hero) 14%,transparent),transparent 74%),radial-gradient(40px 40px at 90% 82%,color-mix(in srgb,var(--on-hero) 11%,transparent),transparent 70%);
}
.A-formeltafel .ft-kl{
  position:relative;margin:0 0 .55em;
  font:700 clamp(.6rem,1.4vw,.74rem)/1 var(--font-b);
  letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 58%,var(--hero));
}
.A-formeltafel .ft-name{
  position:relative;margin:0 0 .18em;
  color:var(--on-hero);
  font:700 clamp(1.7rem,5.2vw,3.2rem)/1.08 var(--font-h);
  letter-spacing:.005em;overflow-wrap:anywhere;
  text-shadow:0 0 1px color-mix(in srgb,var(--on-hero) 45%,transparent);
}
.A-formeltafel .ft-lead{
  position:relative;margin:0 0 clamp(18px,3vw,32px);max-width:54ch;
  font-size:clamp(.95rem,1.5vw,1.1rem);
  color:color-mix(in srgb,var(--on-hero) 74%,var(--hero));
}
.A-formeltafel .ft-zeilen{
  position:relative;list-style:none;margin:0;padding:0;
}
.A-formeltafel .ft-z{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.25em 1.4em;
  padding:.52em 0;
  border-bottom:1px dashed color-mix(in srgb,var(--on-hero) 20%,var(--hero));
}
.A-formeltafel .ft-f{
  font:600 clamp(1.02rem,2.7vw,1.55rem)/1.35 var(--font-h);
  letter-spacing:.02em;overflow-wrap:anywhere;min-width:0;
  text-shadow:0 0 1px color-mix(in srgb,var(--on-hero) 35%,transparent);
}
.A-formeltafel .ft-n{
  font:700 clamp(.6rem,1.4vw,.74rem)/1.3 var(--font-b);
  letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;
  color:color-mix(in srgb,var(--on-hero) 56%,var(--hero));
}
.A-formeltafel .ft-erg{border-bottom:0;padding-top:.75em}
.A-formeltafel .ft-erg .ft-f{
  font-size:clamp(1.35rem,4.4vw,2.5rem);font-weight:800;
}
.A-formeltafel .ft-erg .ft-f b{
  border-bottom:3px double currentColor;padding-bottom:.1em;
  font-variant-numeric:tabular-nums;
}
.A-formeltafel .ft-neben{border-bottom:0;opacity:.85}
.A-formeltafel .ft-neben .ft-f{font-size:clamp(.9rem,2vw,1.15rem);font-weight:500}
.A-formeltafel .ft-bedingung{
  position:relative;margin:clamp(14px,2.2vw,22px) 0 0;
  font-size:clamp(.82rem,1.4vw,.92rem);
  color:color-mix(in srgb,var(--on-hero) 60%,var(--hero));
}
/* Ablage mit Kreide und Schwamm */
.A-formeltafel .ft-leiste{
  position:absolute;left:0;right:0;bottom:0;
  height:clamp(30px,4.2vw,46px);
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(8px,1.4vw,14px);
  padding:0 clamp(14px,2.4vw,26px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,color-mix(in srgb,var(--on-hero) 38%,var(--hero))),color-mix(in srgb,var(--accent) 22%,color-mix(in srgb,var(--on-hero) 26%,var(--hero))));
  border-top:1px solid color-mix(in srgb,var(--on-hero) 18%,var(--hero));
}
.A-formeltafel .ft-kreide{
  height:clamp(6px,.9vw,8px);border-radius:999px;
  background:color-mix(in srgb,var(--on-hero) 80%,var(--hero));
}
.A-formeltafel .ft-k1{width:clamp(24px,3.6vw,42px)}
.A-formeltafel .ft-k2{width:clamp(16px,2.4vw,28px);opacity:.68}
.A-formeltafel .ft-schwamm{
  width:clamp(34px,5vw,56px);height:clamp(14px,2.1vw,22px);
  border-radius:calc(var(--r) / 3);
  background:color-mix(in srgb,var(--on-hero) 36%,var(--hero));
  box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--on-hero) 20%,var(--hero)),0 2px 6px -2px var(--ink);
}
.A-formeltafel .ft-text{
  max-width:1000px;margin:clamp(22px,3.2vw,38px) auto 0;
  padding:0 clamp(0px,1.5vw,16px);
  font-size:clamp(1rem,1.5vw,1.08rem);
}
.A-formeltafel .ft-text p,.A-formeltafel .ft-text .desc{margin:0 0 1em;max-width:70ch}
.A-formeltafel .ft-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-formeltafel .ft-z{flex-direction:column;align-items:flex-start;gap:.1em}
  .A-formeltafel .ft-n{white-space:normal}
  .A-formeltafel .ft-kreidereste{width:58%}
}

/* --- Seitentyp: Gewürzregal --- */
/* Gewürzregal: eine Reihe stehender Gläser auf einem Regalbrett, jedes mit Deckel und
   Etikett. Auf jedem Glas steht ein Merkmal, das grösste Glas trägt den Preis. Darüber
   liegt die Regalleiste, die den Domainnamen als Beschriftung trägt. Anzahl und Höhe der
   Gläser werden aus dem Namen gerechnet, jede Domain bekommt also ihr eigenes Regal. */
.A-gewuerzregal{background:var(--bg)}
.A-gewuerzregal .grg{
  padding-top:clamp(24px,4.2vw,56px);
  padding-bottom:clamp(24px,4vw,52px);
}

/* --- Regalleiste mit der Beschriftung --- */
.A-gewuerzregal .grg-leiste{
  padding:clamp(14px,2.6vw,26px) clamp(16px,3vw,30px);
  background:var(--hero);
  color:var(--on-hero);
  border-radius:calc(var(--r) / 3) calc(var(--r) / 3) 0 0;
  border-bottom:3px solid var(--accent);
}
.A-gewuerzregal .grg-kl{
  margin:0;
  font:700 .64rem/1.3 var(--font-b);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 66%,var(--hero));
  overflow-wrap:anywhere;
}
/* h1 trägt in lander.css fest var(--ink); auf der Hero-Fläche muss der Textton
   ausdrücklich auf var(--on-hero) gesetzt werden. */
.A-gewuerzregal .grg-name{
  margin:.28em 0 .2em;
  font:800 clamp(1.5rem,4.6vw,2.9rem)/1.05 var(--font-h);
  letter-spacing:-.02em;
  color:var(--on-hero);
  overflow-wrap:anywhere;
}
.A-gewuerzregal .grg-lead{
  margin:0;
  max-width:62ch;
  font-size:clamp(.92rem,1.5vw,1.04rem);
  line-height:1.5;
  color:color-mix(in srgb,var(--on-hero) 78%,var(--hero));
  overflow-wrap:anywhere;
}

/* --- Die Reihe der Gläser --- */
.A-gewuerzregal .grg-reihe{
  display:flex;
  align-items:flex-end;
  gap:clamp(5px,1.1vw,13px);
  height:clamp(250px,34vw,370px);
  padding:0 clamp(10px,2vw,22px);
  background:color-mix(in srgb,var(--ink) 7%,var(--surface));
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}
.A-gewuerzregal .grg-glas{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  height:calc(var(--grg-h,70) * 1%);
}
.A-gewuerzregal .grg-glas-p{flex:1.7 1 0}

/* Deckel: etwas breiter als der Korpus, mit Rändelung */
.A-gewuerzregal .grg-deckel{
  flex:none;
  height:clamp(11px,1.5vw,17px);
  margin:0 clamp(-4px,-.5vw,-2px);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 5) calc(var(--r) / 5) 0 0;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--ink) 16%,transparent) 0 1px,
      transparent 1px 5px),
    var(--accent);
}
/* Korpus: die senkrechten Verläufe geben dem Glas seine Rundung */
.A-gewuerzregal .grg-korpus{
  flex:1;
  min-height:0;
  display:flex;
  padding:clamp(6px,1.1vw,11px) 0;
  border:1px solid var(--line);
  border-radius:0 0 calc(var(--r) / 4) calc(var(--r) / 4);
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--ink) 15%,var(--surface)) 0%,
      var(--surface) 26%,
      color-mix(in srgb,var(--ink) 5%,var(--surface)) 52%,
      var(--surface) 76%,
      color-mix(in srgb,var(--ink) 17%,var(--surface)) 100%);
}
/* Etikett: die Fuge zum Glas kommt als box-shadow am Feld selbst, nicht über gap */
.A-gewuerzregal .grg-etikett{
  margin:auto clamp(3px,.7vw,7px);
  width:100%;
  display:grid;
  gap:.12em;
  padding:clamp(5px,.9vw,9px) clamp(3px,.6vw,7px);
  background:color-mix(in srgb,var(--ink) 4%,var(--surface));
  box-shadow:0 0 0 1px var(--line);
  text-align:center;
}
.A-gewuerzregal .grg-k{
  font:700 clamp(.52rem,1vw,.64rem)/1.25 var(--font-b);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  overflow-wrap:anywhere;
  hyphens:auto;
}
.A-gewuerzregal .grg-w{
  font:700 clamp(.7rem,1.5vw,.95rem)/1.2 var(--font-h);
  color:var(--ink);
  overflow-wrap:anywhere;
  hyphens:auto;
}
.A-gewuerzregal .grg-w-p{
  font-size:clamp(.86rem,2.2vw,1.5rem);
  line-height:1.1;
  color:var(--primary);
}
.A-gewuerzregal .grg-glas-p .grg-etikett{
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
  box-shadow:0 0 0 2px var(--accent);
}

/* --- Regalbrett --- */
.A-gewuerzregal .grg-brett{
  height:clamp(12px,1.8vw,20px);
  border:1px solid var(--line);
  border-radius:0 0 calc(var(--r) / 4) calc(var(--r) / 4);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--ink) 18%,var(--surface)) 0 35%,
      color-mix(in srgb,var(--ink) 9%,var(--surface)) 35% 100%);
  box-shadow:0 14px 26px -22px color-mix(in srgb,var(--ink) 85%,transparent);
}
.A-gewuerzregal .grg-fuss{
  margin:.8em 0 0;
  font:700 .66rem/1.5 var(--font-b);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  overflow-wrap:anywhere;
}

/* --- Text unter dem Regal --- */
.A-gewuerzregal .grg-text{
  margin:clamp(18px,3vw,34px) auto 0;
  max-width:66ch;
  text-align:center;
  font-size:clamp(.98rem,1.5vw,1.08rem);
}
.A-gewuerzregal .grg-text p{margin:0 0 1em;line-height:1.75;overflow-wrap:anywhere}
.A-gewuerzregal .grg-text .desc.custom{line-height:1.75}
.A-gewuerzregal .grg-text .ab{margin-top:clamp(12px,2vw,18px);flex-wrap:wrap}
.A-gewuerzregal .grg-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  /* Auf schmalen Fenstern wird aus der Reihe ein zweireihiges Regal, die Höhen
     bleiben über die Mindesthöhe des Korpus unterschiedlich. */
  .A-gewuerzregal .grg-reihe{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:end;
    height:auto;
    padding:clamp(10px,3vw,16px);
    gap:clamp(8px,2.4vw,14px);
    border:1px solid var(--line);
    border-top:0;
  }
  .A-gewuerzregal .grg-glas{height:auto}
  .A-gewuerzregal .grg-glas-p{grid-column:1 / -1}
  .A-gewuerzregal .grg-korpus{min-height:calc(var(--grg-h,70) * 1.9px)}
  .A-gewuerzregal .grg-glas-p .grg-korpus{min-height:calc(var(--grg-h,70) * 1.3px)}
  .A-gewuerzregal .grg-k{font-size:.62rem}
  .A-gewuerzregal .grg-w{font-size:.9rem}
  .A-gewuerzregal .grg-w-p{font-size:1.4rem}
  .A-gewuerzregal .grg-name{font-size:clamp(1.4rem,8vw,2.1rem)}
  .A-gewuerzregal .grg-text .ab{flex-direction:column;align-items:center}
}

/* --- Seitentyp: Konserve --- */
/* Konserve: eine stehende Dose. Oben der gewölbte Deckel, unten der gewölbte Boden,
   dazwischen die umlaufende Banderole mit dem Namen als Produktnamen, den Merkmalen als
   Nährwerttabelle und dem Preis als Grundpreis je Einheit. Seitlich steht das Haltbarkeitsdatum. */
.A-konserve{background:var(--bg)}
.A-konserve .dse{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  gap:clamp(18px,3vw,38px);
  align-items:start;
  padding-top:clamp(26px,4.4vw,62px);
  padding-bottom:clamp(24px,4vw,52px);
}

/* --- Dosenkörper --- */
.A-konserve .dse-dose{grid-column:1}
.A-konserve .dse-deckel,
.A-konserve .dse-boden{
  display:block;
  height:clamp(26px,3.6vw,42px);
  border-radius:50%;
  border:1px solid var(--line);
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--on-hero) 26%,var(--hero)) 0%,
      var(--hero) 22%,
      color-mix(in srgb,var(--on-hero) 10%,var(--hero)) 50%,
      var(--hero) 78%,
      color-mix(in srgb,var(--on-hero) 26%,var(--hero)) 100%);
}
.A-konserve .dse-deckel{position:relative;z-index:3;margin-bottom:calc(clamp(26px,3.6vw,42px) / -2)}
.A-konserve .dse-boden{position:relative;z-index:1;margin-top:calc(clamp(26px,3.6vw,42px) / -2)}

/* Die Banderole. Die Wölbung entsteht aus der Abdunkelung an den beiden Rändern. */
.A-konserve .dse-band{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:clamp(12px,1.8vw,20px);
  padding:calc(clamp(26px,3.6vw,42px) / 2 + clamp(14px,2vw,22px)) clamp(16px,2.6vw,30px) calc(clamp(26px,3.6vw,42px) / 2 + clamp(14px,2vw,22px));
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--ink) 16%,var(--surface)) 0%,
      var(--surface) 16%,
      var(--surface) 84%,
      color-mix(in srgb,var(--ink) 16%,var(--surface)) 100%);
}
/* Sicken: die umlaufenden Prägerillen am oberen und unteren Rand der Banderole */
.A-konserve .dse-sicke{
  position:absolute;
  left:0;
  right:0;
  height:0;
  border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  box-shadow:0 3px 0 -2px color-mix(in srgb,var(--ink) 14%,transparent);
}
.A-konserve .dse-sicke-o{top:clamp(10px,1.5vw,16px)}
.A-konserve .dse-sicke-u{bottom:clamp(10px,1.5vw,16px)}

/* --- Haltbarkeitsdatum, seitlich stehend --- */
.A-konserve .dse-mhd{
  grid-column:2;
  grid-row:1 / span 2;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  display:flex;
  align-items:center;
  gap:.9em;
  padding:.8em .35em;
  border-left:1px dashed var(--line);
  border-right:1px dashed var(--line);
}
.A-konserve .dse-mhd-k,
.A-konserve .dse-mhd-c{
  font:700 .6rem/1 var(--font-b);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-konserve .dse-mhd-d{
  font:800 clamp(.92rem,1.7vw,1.1rem)/1 var(--font-h);
  letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:var(--primary);
}

/* --- Mitte: Produktname --- */
.A-konserve .dse-mitte{grid-column:1;grid-row:1;text-align:center}
.A-konserve .dse-marke{
  margin:0;
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--primary);
  overflow-wrap:anywhere;
}
.A-konserve .dse-produkt{
  margin:.4em 0 .22em;
  font:800 clamp(1.7rem,5.4vw,3.5rem)/1.02 var(--font-h);
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-konserve .dse-lead{
  margin:0 auto;
  max-width:46ch;
  font-size:clamp(.95rem,1.6vw,1.08rem);
  line-height:1.5;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-konserve .dse-fuellung{
  margin:.7em 0 0;
  font:700 .68rem/1.4 var(--font-b);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  overflow-wrap:anywhere;
}

/* --- Unten: Nährwerttabelle und Grundpreis --- */
.A-konserve .dse-unten{
  grid-column:1;
  grid-row:2;
  margin-top:clamp(16px,2.4vw,26px);
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(12px,2vw,22px);
  align-items:start;
}
.A-konserve .dse-nwt{width:100%;border-collapse:collapse}
.A-konserve .dse-nwt caption{
  text-align:left;
  padding-bottom:.35em;
  border-bottom:4px solid var(--ink);
  font:800 .7rem/1.2 var(--font-b);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.A-konserve .dse-nwt th{
  text-align:left;
  padding:.38em .8em .38em 0;
  border-bottom:1px solid var(--line);
  font:600 .76rem/1.3 var(--font-b);
  color:var(--muted);
}
.A-konserve .dse-nwt td{
  text-align:right;
  padding:.38em 0;
  border-bottom:1px solid var(--line);
  font:700 .8rem/1.3 var(--font-b);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-konserve .dse-nwt tr:last-child th,
.A-konserve .dse-nwt tr:last-child td{border-bottom:2px solid var(--ink)}
.A-konserve .dse-gp{
  display:grid;
  gap:.1em;
  padding:clamp(10px,1.6vw,16px);
  border:2px solid var(--accent);
  border-radius:calc(var(--r) / 3);
  background:color-mix(in srgb,var(--primary) 7%,transparent);
  text-align:right;
}
.A-konserve .dse-gp-k{
  font:700 .62rem/1.2 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-konserve .dse-gp-w{
  font:800 clamp(1.3rem,3.4vw,2.2rem)/1.05 var(--font-h);
  color:var(--primary);
  overflow-wrap:anywhere;
}
.A-konserve .dse-gp-e,
.A-konserve .dse-gp-r{font-size:.78rem;line-height:1.4;color:var(--muted)}

/* --- Beipackzettel neben der Dose --- */
.A-konserve .dse-zettel{
  grid-column:2;
  padding:clamp(16px,2.4vw,28px);
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:0 calc(var(--r) / 3) calc(var(--r) / 3) 0;
}
.A-konserve .dse-zt{
  margin:0 0 .7em;
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-konserve .dse-text{
  margin:0;
  font-size:clamp(.98rem,1.5vw,1.06rem);
  line-height:1.7;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-konserve .dse-zettel .desc.custom{margin-top:.8em;line-height:1.7}
.A-konserve .dse-hinweis{
  margin:1em 0 0;
  padding-top:.8em;
  border-top:1px dashed var(--line);
  font-size:.8rem;
  line-height:1.6;
  color:var(--muted);
}
.A-konserve .dse-zettel .ab{margin-top:clamp(14px,2vw,20px);flex-wrap:wrap}
.A-konserve .dse-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-konserve .dse{grid-template-columns:1fr}
  .A-konserve .dse-dose,
  .A-konserve .dse-zettel{grid-column:1}
  .A-konserve .dse-band{grid-template-columns:minmax(0,1fr)}
  .A-konserve .dse-mhd{
    grid-column:1;
    grid-row:3;
    writing-mode:horizontal-tb;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:clamp(12px,3vw,18px);
    padding:.7em 0 0;
    border-left:0;
    border-right:0;
    border-top:1px dashed var(--line);
  }
  .A-konserve .dse-unten{grid-template-columns:1fr}
  .A-konserve .dse-gp{text-align:left}
  .A-konserve .dse-produkt{font-size:clamp(1.5rem,8.4vw,2.4rem)}
  .A-konserve .dse-zettel{border-left-width:1px;border-top:3px solid var(--accent);border-radius:0 0 calc(var(--r) / 3) calc(var(--r) / 3)}
}

/* --- Seitentyp: Kursbuch --- */
/* Kursbuch: schmales Fahrplanblatt, Halte untereinander an einer senkrechten
   Streckenlinie, Zeiten rechts in einer Spalte, der Preis als Endstation */
.A-kursbuch{
  background:
    linear-gradient(color-mix(in srgb,var(--primary) 7%,transparent),transparent 360px),
    var(--bg);
}
.A-kursbuch .kbh{
  padding-top:clamp(24px,4vw,56px);
  padding-bottom:clamp(20px,3.4vw,44px);
}

/* Das Blatt: schmal, hochkant, wie eine aus dem Kursbuch gerissene Spalte */
.A-kursbuch .kbh-blatt{
  max-width:640px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 26px 60px -44px color-mix(in srgb,var(--ink) 70%,transparent);
}

/* Kopf: der Domainname steht als Streckenname auf der dunklen Fläche */
.A-kursbuch .kbh-kopf{
  background:var(--hero);
  color:var(--on-hero);
  padding:clamp(18px,3vw,30px) clamp(16px,3vw,30px) clamp(16px,2.6vw,26px);
}
.A-kursbuch .kbh-strecke{
  margin:0;
  font:700 .68rem/1 var(--font-b);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 72%,var(--hero));
}
.A-kursbuch .kbh-name{
  margin:.3em 0 .18em;
  color:var(--on-hero);
  font:800 clamp(1.7rem,5vw,2.9rem)/1.04 var(--font-h);
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.A-kursbuch .kbh-lead{
  margin:0;
  overflow-wrap:anywhere;
  font:400 clamp(.95rem,1.7vw,1.08rem)/1.45 var(--font-b);
  color:color-mix(in srgb,var(--on-hero) 86%,var(--hero));
}
.A-kursbuch .kbh-gueltig{
  margin:.9em 0 0;
  padding-top:.7em;
  border-top:1px solid color-mix(in srgb,var(--on-hero) 30%,var(--hero));
  font:600 .74rem/1.3 var(--font-b);
  letter-spacing:.1em;
  color:color-mix(in srgb,var(--on-hero) 68%,var(--hero));
}

/* Der Fahrplan selbst */
.A-kursbuch .kbh-plan{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}
.A-kursbuch .kbh-cap,
.A-kursbuch .kbh-nur-vl{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  white-space:nowrap;
  clip-path:inset(50%);
}
.A-kursbuch .kbh-plan thead th{
  padding:clamp(10px,1.6vw,14px) clamp(8px,1.4vw,12px);
  border-bottom:1px solid var(--line);
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  background:color-mix(in srgb,var(--primary) 5%,var(--surface));
}
.A-kursbuch .kbh-th-l{width:44px;padding-left:0;padding-right:0}
.A-kursbuch .kbh-th-z{text-align:right;padding-right:clamp(14px,2.6vw,26px)}
.A-kursbuch .kbh-th-h{padding-left:0}

.A-kursbuch .kbh-r > *{
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,var(--surface));
  vertical-align:middle;
  padding-top:clamp(9px,1.5vw,13px);
  padding-bottom:clamp(9px,1.5vw,13px);
}
.A-kursbuch .kbh-r:last-child > *{border-bottom:0}

/* Streckenlinie mit Punkten: eine schmale Spalte links */
.A-kursbuch .kbh-gl{
  position:relative;
  width:44px;
  padding-left:0;
  padding-right:0;
}
.A-kursbuch .kbh-gl::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  margin-left:-1px;
  background:color-mix(in srgb,var(--accent) 75%,var(--surface));
}
.A-kursbuch .kbh-plan tbody tr:first-child .kbh-gl::before{top:50%}
.A-kursbuch .kbh-gl-end::before{bottom:50%}
.A-kursbuch .kbh-pkt{
  position:relative;
  z-index:1;
  display:block;
  width:11px;
  height:11px;
  margin:0 auto;
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 80%,var(--surface));
}
.A-kursbuch .kbh-pkt-end{
  width:16px;
  height:16px;
  background:var(--primary);
  box-shadow:0 0 0 2px var(--primary),0 0 0 4px color-mix(in srgb,var(--primary) 26%,var(--surface));
}

/* Haltestellenspalte */
.A-kursbuch .kbh-h{
  padding-left:0;
  padding-right:clamp(10px,1.8vw,16px);
  text-align:left;
  font-weight:400;
}
.A-kursbuch .kbh-ht{
  display:block;
  font:700 clamp(1rem,2.2vw,1.2rem)/1.3 var(--font-h);
  overflow-wrap:anywhere;
}
.A-kursbuch .kbh-hu{
  display:block;
  margin-top:.18em;
  font:500 .72rem/1.3 var(--font-b);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-kursbuch .kbh-ht-end{
  font-size:clamp(1.3rem,3.4vw,1.85rem);
  color:var(--primary);
  letter-spacing:-.015em;
}

/* Zeitspalte: rechts, gleich breite Ziffern */
.A-kursbuch .kbh-z{
  padding-right:clamp(14px,2.6vw,26px);
  padding-left:0;
  text-align:right;
  white-space:nowrap;
  font:700 clamp(.95rem,2vw,1.12rem)/1 var(--font-b);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.A-kursbuch .kbh-r-end .kbh-z{color:var(--primary)}

.A-kursbuch .ab{
  margin:clamp(14px,2.2vw,22px) clamp(16px,2.8vw,28px) 0;
  flex-wrap:wrap;
}
.A-kursbuch .ab-l,
.A-kursbuch .ab-p{display:none}

.A-kursbuch .kbh-text{
  padding:clamp(16px,2.6vw,26px) clamp(16px,2.8vw,28px) 0;
  font-size:clamp(.98rem,1.5vw,1.05rem);
  line-height:1.7;
}
.A-kursbuch .kbh-text p{margin:0 0 1em;overflow-wrap:anywhere}
.A-kursbuch .kbh-fuss{
  margin:0;
  padding:clamp(10px,1.6vw,14px) clamp(16px,2.8vw,28px) clamp(14px,2.2vw,20px);
  border-top:1px dashed var(--line);
  font:500 .72rem/1.4 var(--font-b);
  letter-spacing:.06em;
  color:var(--muted);
}
.A-kursbuch .kbh-sc{padding-top:10px;padding-bottom:8px}

@media (max-width:780px){
  .A-kursbuch .kbh-blatt{border-radius:calc(var(--r) / 1.4)}
  .A-kursbuch .kbh-name{font-size:clamp(1.5rem,7.5vw,2.1rem)}
  .A-kursbuch .kbh-th-l,
  .A-kursbuch .kbh-gl{width:30px}
  .A-kursbuch .kbh-pkt{width:9px;height:9px}
  .A-kursbuch .kbh-pkt-end{width:13px;height:13px}
  .A-kursbuch .kbh-hu{font-size:.66rem;letter-spacing:.06em}
  .A-kursbuch .kbh-z,
  .A-kursbuch .kbh-th-z{padding-right:10px}
  .A-kursbuch .kbh-ht-end{font-size:clamp(1.15rem,5.6vw,1.5rem)}
}

/* --- Seitentyp: Meldeschein --- */
/* Meldeschein: Formular auf einem Bogen, der Domainname Buchstabe für Buchstabe in
   einzelnen Kästchen, darunter Felder, der Preis als Zimmerpreis je Nacht,
   unten Unterschriftslinie und Stempelfeld */
.A-meldeschein{background:color-mix(in srgb,var(--ink) 5%,var(--bg))}
.A-meldeschein .mdk{
  padding-top:clamp(22px,3.8vw,52px);
  padding-bottom:clamp(20px,3.4vw,44px);
}

/* Der Bogen */
.A-meldeschein .mdk-bogen{
  max-width:740px;
  margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 2);
  padding:clamp(18px,3.2vw,40px) clamp(16px,3.2vw,40px) clamp(20px,3.2vw,36px);
  box-shadow:0 26px 58px -42px color-mix(in srgb,var(--ink) 80%,transparent);
}
.A-meldeschein .mdk-kopf{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  padding-bottom:clamp(10px,1.6vw,14px);
  border-bottom:3px double var(--line);
}
.A-meldeschein .mdk-art{
  margin:0;
  font:800 clamp(.9rem,2vw,1.15rem)/1.1 var(--font-h);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--primary);
}
.A-meldeschein .mdk-nr{
  margin:0;
  font:600 .7rem/1.2 var(--font-b);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Beschriftete Zeile */
.A-meldeschein .mdk-zeile{margin-top:clamp(14px,2.4vw,24px)}
.A-meldeschein .mdk-lb{
  display:block;
  margin-bottom:.5em;
  font:700 .66rem/1.2 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-meldeschein .mdk-nurvl{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  white-space:nowrap;
  clip-path:inset(50%);
}

/* Kästchenfelder: je Zeichen ein Kasten, der Rahmen je Feld als Schatten */
.A-meldeschein .mdk-name,
.A-meldeschein .mdk-preis{margin:0}
.A-meldeschein .mdk-kasten{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(3px,.6vw,5px);
}
.A-meldeschein .mdk-k{
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(24px,4.6vw,42px);
  height:clamp(32px,5.8vw,52px);
  border-radius:2px;
  box-shadow:0 0 0 1px var(--line);
  background:color-mix(in srgb,var(--primary) 5%,var(--surface));
  font:800 clamp(1.05rem,3.2vw,1.8rem)/1 var(--font-h);
  letter-spacing:0;
  color:var(--ink);
}
.A-meldeschein .mdk-luecke{
  display:block;
  width:clamp(8px,1.6vw,14px);
  height:clamp(32px,5.8vw,52px);
}
.A-meldeschein .mdk-k-p{
  color:var(--primary);
  background:color-mix(in srgb,var(--primary) 11%,var(--surface));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 45%,var(--surface));
}
.A-meldeschein .mdk-lead{
  margin:clamp(10px,1.6vw,14px) 0 0;
  overflow-wrap:anywhere;
  font:400 clamp(.96rem,1.7vw,1.1rem)/1.5 var(--font-b);
  color:var(--muted);
}

/* Die Formularfelder */
.A-meldeschein .mdk-felder{
  margin-top:clamp(14px,2.4vw,22px);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(5px,.9vw,8px);
}
.A-meldeschein .mdk-felder-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.A-meldeschein .mdk-f{
  padding:clamp(8px,1.4vw,12px) clamp(8px,1.4vw,12px) clamp(9px,1.5vw,13px);
  border-radius:2px;
  box-shadow:0 0 0 1px var(--line);
  background:color-mix(in srgb,var(--primary) 3%,var(--surface));
}
.A-meldeschein .mdk-f small{
  display:block;
  margin-bottom:.35em;
  font:700 .6rem/1.2 var(--font-b);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-meldeschein .mdk-f b{
  display:block;
  font:700 clamp(.92rem,2vw,1.08rem)/1.25 var(--font-h);
  overflow-wrap:anywhere;
}

.A-meldeschein .mdk-zeile-preis{
  margin-top:clamp(16px,2.6vw,26px);
  padding-top:clamp(14px,2.2vw,20px);
  border-top:1px dashed var(--line);
}
.A-meldeschein .mdk-rate{
  display:block;
  margin-top:.6em;
  font:500 .82rem/1.4 var(--font-b);
  color:var(--muted);
}

.A-meldeschein .mdk-text{
  margin-top:clamp(16px,2.6vw,26px);
  font-size:clamp(.96rem,1.5vw,1.04rem);
  line-height:1.7;
}
.A-meldeschein .mdk-text p{margin:0 0 1em;overflow-wrap:anywhere}
.A-meldeschein .ab{margin-top:clamp(12px,2vw,18px);flex-wrap:wrap}
.A-meldeschein .ab-l,
.A-meldeschein .ab-p{display:none}

/* Unterschrift und Stempel */
.A-meldeschein .mdk-fuss{
  margin-top:clamp(20px,3.2vw,34px);
  padding-top:clamp(14px,2.2vw,20px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(14px,2.6vw,28px);
  align-items:end;
}
.A-meldeschein .mdk-unter{align-self:end}
.A-meldeschein .mdk-strich{
  display:block;
  height:clamp(26px,4vw,38px);
  border-bottom:1px solid var(--ink);
}
.A-meldeschein .mdk-unter small{
  display:block;
  margin-top:.5em;
  font:600 .66rem/1.2 var(--font-b);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-meldeschein .mdk-stempel{
  flex:none;
  width:clamp(96px,15vw,128px);
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.3em;
  text-align:center;
  border:2px dashed color-mix(in srgb,var(--primary) 60%,var(--surface));
  border-radius:50%;
  color:var(--primary);
  transform:rotate(-5deg);
}
.A-meldeschein .mdk-stempel span{
  font:800 .7rem/1.1 var(--font-h);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.A-meldeschein .mdk-stempel em{
  font:600 .7rem/1.1 var(--font-b);
  font-style:normal;
  letter-spacing:.06em;
}
.A-meldeschein .mdk-sc{padding-top:10px;padding-bottom:8px}

@media (max-width:780px){
  .A-meldeschein .mdk-art{letter-spacing:.18em}
  .A-meldeschein .mdk-k{
    width:clamp(20px,7.4vw,30px);
    height:clamp(27px,9.4vw,40px);
    font-size:clamp(.9rem,4.6vw,1.25rem);
  }
  .A-meldeschein .mdk-luecke{height:clamp(27px,9.4vw,40px);width:clamp(6px,2.4vw,10px)}
  .A-meldeschein .mdk-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .A-meldeschein .mdk-felder-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .A-meldeschein .mdk-fuss{grid-template-columns:1fr;justify-items:start}
  .A-meldeschein .mdk-stempel{width:clamp(88px,28vw,112px)}
}

/* --- Seitentyp: Mischpult --- */
/* Mischpult: sechs senkrechte Kanalzüge nebeneinander, jeder mit einem Schieberegler in eigener
   Stellung. Über jedem Regler steht ein Merkmal, der lauteste Zug ist der Preiszug. Oben läuft
   die Beschriftungsleiste mit dem Domainnamen, unten die Pegelanzeige. Die Fugen des Rasters
   kommen je Feld aus box-shadow, nicht aus gap, damit auf dem eingefärbten Grund keine Lücken
   durchscheinen. */
.A-mischpult{background:color-mix(in srgb,var(--ink) 8%,var(--bg))}
.A-mischpult .mpl{padding-top:clamp(24px,4.4vw,56px);padding-bottom:22px}
.A-mischpult .mpl-pult{
  max-width:1000px;margin:0 auto;color:var(--on-hero);
  background:var(--hero);border-radius:var(--r);
  padding:clamp(13px,2.2vw,26px);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 20%,transparent),
             0 30px 62px -46px var(--hero);
}

/* Beschriftungsleiste */
.A-mischpult .mpl-leiste{
  padding:clamp(11px,1.9vw,18px) clamp(12px,2vw,20px);
  background:color-mix(in srgb,var(--on-hero) 11%,var(--hero));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 24%,transparent);
  border-radius:calc(var(--r) / 3);
  margin-bottom:clamp(12px,2vw,20px);
}
.A-mischpult .mpl-marke{
  margin:0;font:700 .62rem/1 var(--font-b);letter-spacing:.26em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 62%,transparent);
}
.A-mischpult .mpl-marke b{color:var(--on-hero)}
.A-mischpult .mpl-name{
  margin:.32em 0 .16em;font:800 clamp(1.6rem,5vw,3.1rem)/1.04 var(--font-h);
  letter-spacing:-.015em;color:var(--on-hero);overflow-wrap:anywhere;
}
.A-mischpult .mpl-lead{
  margin:0;font-size:clamp(.95rem,1.8vw,1.08rem);line-height:1.5;
  color:color-mix(in srgb,var(--on-hero) 76%,transparent);
}

/* Die Kanalzüge */
.A-mischpult .mpl-kanaele{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.A-mischpult .mpl-kanal{
  min-width:0;text-align:center;
  padding:clamp(10px,1.6vw,16px) clamp(4px,.9vw,10px) clamp(8px,1.4vw,13px);
  background:color-mix(in srgb,var(--on-hero) 5%,var(--hero));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 20%,transparent);
}
.A-mischpult .mpl-laut{
  background:color-mix(in srgb,var(--primary) 24%,var(--hero));
  box-shadow:0 0 0 1px var(--primary);
  position:relative;z-index:1;
}
.A-mischpult .mpl-kopf{margin:0 0 clamp(8px,1.4vw,14px);min-height:3.6em}
.A-mischpult .mpl-kopf small{
  display:block;font:700 .56rem/1.25 var(--font-b);letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 62%,transparent);overflow-wrap:anywhere;
}
.A-mischpult .mpl-kopf b{
  display:block;margin-top:5px;font:700 clamp(.76rem,1.6vw,1rem)/1.15 var(--font-h);
  color:var(--on-hero);overflow-wrap:anywhere;
}
.A-mischpult .mpl-laut .mpl-kopf b{font-size:clamp(.84rem,1.9vw,1.16rem);font-weight:800}

/* Schieberegler */
.A-mischpult .mpl-bahn{position:relative;width:clamp(26px,4.4vw,40px);height:clamp(112px,20vw,186px);margin:0 auto}
.A-mischpult .mpl-teilung{
  position:absolute;left:0;right:0;top:5px;bottom:5px;
  background:repeating-linear-gradient(to bottom,
    color-mix(in srgb,var(--on-hero) 32%,transparent) 0 1px,transparent 1px 10%);
}
.A-mischpult .mpl-schiene{
  position:absolute;left:50%;top:0;bottom:0;width:6px;transform:translateX(-50%);
  border-radius:3px;background:color-mix(in srgb,var(--on-hero) 26%,var(--hero));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 18%,transparent);
}
.A-mischpult .mpl-knopf{
  position:absolute;left:50%;bottom:var(--p);width:100%;height:clamp(13px,2.2vw,18px);
  transform:translate(-50%,50%);border-radius:3px;
  background:color-mix(in srgb,var(--on-hero) 80%,var(--hero));
  box-shadow:0 3px 7px -3px var(--hero);
}
.A-mischpult .mpl-knopf::after{
  content:"";position:absolute;left:14%;right:14%;top:50%;height:2px;
  transform:translateY(-50%);background:var(--hero);
}
.A-mischpult .mpl-laut .mpl-schiene{background:color-mix(in srgb,var(--primary) 58%,var(--hero))}
.A-mischpult .mpl-laut .mpl-knopf{background:var(--primary)}
.A-mischpult .mpl-laut .mpl-knopf::after{background:var(--on-primary)}
.A-mischpult .mpl-db{
  margin:clamp(8px,1.4vw,12px) 0 0;font:700 .62rem/1 var(--font-b);letter-spacing:.1em;
  font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--on-hero) 64%,transparent);
}
.A-mischpult .mpl-nr{
  margin:5px 0 0;font:700 .6rem/1 var(--font-b);letter-spacing:.18em;
  color:color-mix(in srgb,var(--on-hero) 40%,transparent);
}

/* Pegelanzeige */
.A-mischpult .mpl-pegel{
  margin-top:clamp(14px,2.4vw,22px);padding:clamp(10px,1.8vw,17px);
  background:color-mix(in srgb,var(--on-hero) 9%,var(--hero));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 20%,transparent);
  border-radius:calc(var(--r) / 3);
}
.A-mischpult .mpl-pegel-t{
  margin:0 0 9px;font:700 .6rem/1 var(--font-b);letter-spacing:.26em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 62%,transparent);
}
.A-mischpult .mpl-reihe{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:8px;margin-bottom:5px}
.A-mischpult .mpl-rl{font:700 .68rem/1 var(--font-b);color:color-mix(in srgb,var(--on-hero) 70%,transparent)}
.A-mischpult .mpl-leds{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:0}
.A-mischpult .mpl-leds i{
  display:block;height:clamp(9px,1.6vw,13px);
  background:color-mix(in srgb,var(--on-hero) 12%,var(--hero));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 22%,transparent);
}
.A-mischpult .mpl-leds i.mpl-an{background:var(--primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--hero) 58%,var(--primary))}
.A-mischpult .mpl-leds i.mpl-spitze.mpl-an{background:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--hero) 58%,var(--accent))}
.A-mischpult .mpl-skala{
  display:grid;grid-template-columns:4fr 4fr 4fr 3fr 2fr 3fr;margin:9px 0 0 24px;
  font:600 .58rem/1 var(--font-b);font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--on-hero) 52%,transparent);
}
.A-mischpult .mpl-skala span{text-align:right}

.A-mischpult .mpl-text{
  margin:clamp(16px,2.6vw,24px) 0 0;line-height:1.75;
  color:color-mix(in srgb,var(--on-hero) 80%,transparent);
}
.A-mischpult .ab{margin-top:clamp(14px,2.4vw,20px)}
.A-mischpult .mpl-pult .btn-s{border-color:currentColor;color:var(--on-hero)}
.A-mischpult .mpl-sc{padding-top:14px}

@media (max-width:780px){
  .A-mischpult .mpl-kanaele{grid-template-columns:repeat(3,minmax(0,1fr))}
  .A-mischpult .mpl-bahn{height:clamp(94px,26vw,140px)}
  .A-mischpult .mpl-kopf{min-height:4.2em}
  .A-mischpult .mpl-skala{margin-left:0}
}

/* --- Seitentyp: Mondphasen --- */
/* --- Seitentyp: Mondphasen --- */
/* Mondphasen: Kalenderraster aus Mondscheiben mit zunehmender Beleuchtung, der Preis haengt am Vollmond */
.A-mondphasen{background:var(--bg)}
.A-mondphasen .mf{
  padding-top:clamp(24px,4.2vw,56px);
  padding-bottom:clamp(24px,4vw,52px);
}

/* Nachthimmel */
.A-mondphasen .mf-himmel{
  position:relative;
  padding:clamp(22px,3.6vw,46px) clamp(16px,2.8vw,38px) clamp(20px,3.2vw,40px);
  background-color:var(--hero);
  background-image:radial-gradient(color-mix(in srgb,var(--on-hero) 26%,transparent) 1px,transparent 1.4px),radial-gradient(color-mix(in srgb,var(--on-hero) 16%,transparent) 1px,transparent 1.4px);
  background-size:58px 58px,31px 31px;
  background-position:0 0,17px 23px;
  color:var(--on-hero);
  border:1px solid color-mix(in srgb,var(--on-hero) 24%,var(--hero));
  border-radius:var(--r);
  text-align:center;
}
.A-mondphasen .mf-kl{
  margin:0 0 .5em;
  font:700 clamp(.6rem,1.4vw,.72rem)/1 var(--font-b);
  letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 62%,var(--hero));
}
.A-mondphasen .mf-name{
  margin:0 0 .18em;
  color:var(--on-hero);
  font:800 clamp(1.8rem,5.6vw,3.6rem)/1.04 var(--font-h);
  letter-spacing:-.025em;overflow-wrap:anywhere;
}
.A-mondphasen .mf-lead{
  margin:0 auto clamp(20px,3.2vw,34px);max-width:52ch;
  font-size:clamp(.95rem,1.5vw,1.1rem);
  color:color-mix(in srgb,var(--on-hero) 76%,var(--hero));
}

/* Kalender */
.A-mondphasen .mf-kalender{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(10px,1.8vw,20px) clamp(6px,1.2vw,14px);
}
.A-mondphasen .mf-t{
  display:flex;flex-direction:column;align-items:center;gap:.35em;
  padding:clamp(5px,1vw,9px) 2px;
  border-radius:calc(var(--r) / 1.6);
}
.A-mondphasen .mf-svg{
  display:block;max-width:none;
  width:clamp(30px,5.4vw,58px);height:auto;
}
.A-mondphasen .mf-dunkel{fill:color-mix(in srgb,var(--on-hero) 13%,var(--hero))}
.A-mondphasen .mf-licht{fill:color-mix(in srgb,var(--on-hero) 86%,var(--hero))}
.A-mondphasen .mf-d{
  font:600 clamp(.6rem,1.25vw,.76rem)/1.2 var(--font-b);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  color:color-mix(in srgb,var(--on-hero) 64%,var(--hero));
}
.A-mondphasen .mf-hi{
  box-shadow:0 0 0 1px var(--accent),0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent);
}
.A-mondphasen .mf-mk{
  display:inline-block;max-width:100%;
  padding:.18em .5em;border:1px solid var(--accent);border-radius:999px;
  font:700 clamp(.52rem,1.1vw,.64rem)/1.3 var(--font-b);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-hero);overflow-wrap:anywhere;
}
.A-mondphasen .mf-voll .mf-svg{
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--on-hero) 40%,transparent));
}

/* Vollmond mit Preis */
.A-mondphasen .mf-vollmond{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(12px,2.4vw,26px);
  margin-top:clamp(20px,3.2vw,36px);
  padding-top:clamp(16px,2.6vw,28px);
  border-top:1px solid color-mix(in srgb,var(--on-hero) 20%,var(--hero));
}
.A-mondphasen .mf-gross{
  display:block;max-width:none;flex:none;
  width:clamp(52px,10vw,92px);height:auto;
}
.A-mondphasen .mf-p{display:flex;flex-direction:column;gap:.1em;text-align:left;min-width:0}
.A-mondphasen .mf-pl{
  font:700 .68rem/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 66%,var(--hero));
}
.A-mondphasen .mf-pp{
  font:800 clamp(1.5rem,4.4vw,2.8rem)/1.08 var(--font-h);
  color:var(--on-hero);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
.A-mondphasen .mf-pr{font-size:.88rem;color:color-mix(in srgb,var(--on-hero) 74%,var(--hero))}

/* Merkmale als Leiste */
.A-mondphasen .mf-legende{
  list-style:none;margin:clamp(16px,2.4vw,24px) 0 0;padding:1px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.A-mondphasen .mf-legende li{
  display:flex;flex-direction:column;gap:.2em;
  padding:clamp(10px,1.8vw,16px) clamp(10px,1.6vw,16px);
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line);
}
.A-mondphasen .mf-legende span{
  font:700 .66rem/1 var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.A-mondphasen .mf-legende b{font-weight:700;overflow-wrap:anywhere}
.A-mondphasen .mf-text{
  max-width:68ch;margin:clamp(20px,3vw,34px) auto 0;text-align:center;
  font-size:clamp(1rem,1.5vw,1.08rem);
}
.A-mondphasen .mf-text p{margin:0 0 1em}
.A-mondphasen .mf-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-mondphasen .mf-kalender{grid-template-columns:repeat(5,minmax(0,1fr))}
  .A-mondphasen .mf-legende{grid-template-columns:repeat(2,minmax(0,1fr))}
  .A-mondphasen .mf-p{text-align:center}
  .A-mondphasen .mf-vollmond{flex-direction:column}
  .A-mondphasen .mf-mk{font-size:.5rem;letter-spacing:.04em}
}

/* --- Seitentyp: Notenblatt --- */
/* Notenblatt: ein Notensystem als Satzbild. Fünf Linien kommen als Verlauf, Schlüssel und
   Taktangabe als Inline-SVG, die acht Notenköpfe sitzen auf Tonhöhen aus crc32. Der Domainname
   steht als Werktitel über dem System, die Merkmale als Vortragsbezeichnungen darunter, der
   Preis als Opuszahl am rechten Rand. */
.A-notenblatt{
  --nbl-l:color-mix(in srgb,var(--ink) 52%,transparent);
  --nbl-kw:clamp(13px,2.2vw,18px);
  background:color-mix(in srgb,var(--ink) 4%,var(--bg));
}
.A-notenblatt .nbl{padding-top:clamp(24px,4.4vw,56px);padding-bottom:20px}
.A-notenblatt .nbl-blatt{
  max-width:900px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(18px,3.2vw,44px) clamp(14px,2.8vw,40px);
  box-shadow:0 26px 60px -46px var(--ink);
}

/* Titelkopf: Werktitel mittig, Besetzung links, Opuszahl rechts */
.A-notenblatt .nbl-kopf{text-align:center;margin:0 0 clamp(16px,2.8vw,30px)}
.A-notenblatt .nbl-titel{
  margin:0;font:700 clamp(1.7rem,5vw,3.1rem)/1.08 var(--font-h);
  color:var(--ink);letter-spacing:.01em;overflow-wrap:anywhere;
}
.A-notenblatt .nbl-unter{margin:.5em 0 0;font-style:italic;color:var(--muted);font-size:clamp(.95rem,1.8vw,1.1rem);line-height:1.5}
.A-notenblatt .nbl-zeile{
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  margin:clamp(12px,2vw,22px) 0 0;text-align:left;
}
.A-notenblatt .nbl-besetzung{font-style:italic;color:var(--muted);font-size:clamp(.82rem,1.6vw,.95rem)}
.A-notenblatt .nbl-opus{display:grid;gap:3px;text-align:right;min-width:0}
.A-notenblatt .nbl-opus small{font:700 .6rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.A-notenblatt .nbl-opus b{
  font:700 clamp(1.05rem,2.8vw,1.55rem)/1 var(--font-h);
  color:var(--primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

/* Das System: fünf Linien als ein Verlauf, Mitten bei 25 / 37,5 / 50 / 62,5 / 75 Prozent */
.A-notenblatt .nbl-system{
  position:relative;height:clamp(126px,19vw,176px);color:var(--ink);
  background-image:linear-gradient(to bottom,
    transparent 0 24.55%,var(--nbl-l) 24.55% 25.45%,
    transparent 25.45% 37.05%,var(--nbl-l) 37.05% 37.95%,
    transparent 37.95% 49.55%,var(--nbl-l) 49.55% 50.45%,
    transparent 50.45% 62.05%,var(--nbl-l) 62.05% 62.95%,
    transparent 62.95% 74.55%,var(--nbl-l) 74.55% 75.45%,
    transparent 75.45% 100%);
}
.A-notenblatt .nbl-schluessel{
  position:absolute;left:0;top:25%;height:50%;width:auto;aspect-ratio:58 / 40;
  overflow:visible;fill:currentColor;
}
.A-notenblatt .nbl-haken{fill:none;stroke:currentColor;stroke-width:3.8;stroke-linecap:round}
.A-notenblatt .nbl-takt{
  fill:currentColor;font-family:var(--font-h);font-size:15px;font-weight:800;
  text-anchor:middle;dominant-baseline:middle;
}

/* Die Noten: jede Note eine volle Spalte, Kopf und Hals sitzen auf Prozentwerten des Systems */
.A-notenblatt .nbl-noten{position:absolute;left:26%;right:2%;top:0;bottom:0}
.A-notenblatt .nbl-note{position:absolute;left:var(--x);top:0;bottom:0;width:0}
.A-notenblatt .nbl-kopf-n{
  position:absolute;left:0;top:var(--y);width:var(--nbl-kw);height:auto;max-width:none;
  transform:translate(-50%,-50%);fill:currentColor;
}
.A-notenblatt .nbl-offen ellipse{fill:none;stroke:currentColor;stroke-width:1.9}
.A-notenblatt .nbl-hals{position:absolute;top:var(--y);height:18.75%;width:2px;background:currentColor}
.A-notenblatt .nbl-auf{left:calc(var(--nbl-kw) / 2 - 2px)}
.A-notenblatt .nbl-ab{left:calc(var(--nbl-kw) / -2)}
.A-notenblatt .nbl-strich{position:absolute;left:var(--x);top:24.55%;height:50.9%;width:1.5px;background:var(--nbl-l)}
.A-notenblatt .nbl-schluss{
  width:4px;background:currentColor;
  box-shadow:-7px 0 0 -1.25px currentColor;
}

/* Vortragsbezeichnungen unter dem System, an denselben Stellen wie die Noten */
.A-notenblatt .nbl-marken{position:relative;height:3.3em;margin:0 2% 0 26%}
.A-notenblatt .nbl-mi{position:absolute;left:var(--x);top:0;transform:translateX(-50%);white-space:nowrap;text-align:center}
.A-notenblatt .nbl-mi em{display:block;font-style:italic;font-size:clamp(.72rem,1.5vw,.82rem);color:var(--muted)}
.A-notenblatt .nbl-mi b{display:block;margin-top:2px;font:700 clamp(.86rem,1.8vw,1rem)/1.2 var(--font-h);color:var(--ink)}

.A-notenblatt .nbl-text{
  margin:clamp(14px,2.6vw,24px) 0 0;padding-top:clamp(12px,2vw,18px);
  border-top:1px solid var(--line);line-height:1.75;color:var(--muted);
}
.A-notenblatt .ab{margin-top:clamp(14px,2.4vw,20px)}
.A-notenblatt .nbl-sc{padding-top:14px}

@media (max-width:780px){
  .A-notenblatt .nbl-system{height:clamp(108px,26vw,150px)}
  .A-notenblatt .nbl-noten{left:36%}
  .A-notenblatt .nbl-zeile{flex-direction:column;align-items:flex-start}
  .A-notenblatt .nbl-opus{text-align:left}
  .A-notenblatt .nbl-marken{
    position:static;height:auto;margin:clamp(12px,3vw,16px) 0 0;
    display:flex;flex-wrap:wrap;gap:10px clamp(16px,5vw,26px);
  }
  .A-notenblatt .nbl-mi{position:static;transform:none;text-align:left;white-space:normal}
}

/* --- Seitentyp: Plattenlabel --- */
/* Plattenlabel: das runde Mittelstück einer Schallplatte. Mittelloch genau in der Mitte, der
   Domainname darüber, die Angaben laufen als Inline-SVG auf zwei Kreisbahnen um das Loch, die
   Katalognummer trägt den Preis. Rechts daneben steht ein Ausschnitt der Rillen. */
.A-plattenlabel{background:color-mix(in srgb,var(--ink) 7%,var(--bg))}
.A-plattenlabel .pla{padding-top:clamp(26px,4.6vw,58px);padding-bottom:20px}
.A-plattenlabel .pla-in{
  max-width:1060px;margin:0 auto;display:grid;
  grid-template-columns:minmax(250px,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);align-items:center;
}

/* Scheibe und Rillenausschnitt stehen nebeneinander */
.A-plattenlabel .pla-platte{
  margin:0;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(52px,8vw,104px);
  gap:clamp(8px,1.4vw,16px);align-items:stretch;
}
.A-plattenlabel .pla-scheibe{
  position:relative;aspect-ratio:1;border-radius:50%;color:var(--on-hero);container-type:inline-size;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--on-hero) 11%,var(--hero)) 0 61%,
    var(--hero) 61% 100%);
  box-shadow:0 26px 56px -36px var(--hero),0 0 0 1px color-mix(in srgb,var(--on-hero) 26%,transparent);
}
.A-plattenlabel .pla-bahn{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.A-plattenlabel .pla-ring{fill:none;stroke:color-mix(in srgb,var(--on-hero) 32%,transparent);stroke-width:1}
.A-plattenlabel .pla-ring-d{stroke-dasharray:3 4}
.A-plattenlabel .pla-kerbe{stroke:color-mix(in srgb,var(--on-hero) 40%,transparent);stroke-width:1.2}
.A-plattenlabel .pla-schrift{
  fill:var(--on-hero);font-family:var(--font-b);font-size:8.2px;font-weight:700;
  letter-spacing:1.1px;text-anchor:middle;text-transform:uppercase;
}
.A-plattenlabel .pla-schrift-u{font-weight:800;letter-spacing:.9px}

/* Die Mitte: Name über dem Loch, Zeile darunter, das Loch genau im Mittelpunkt */
.A-plattenlabel .pla-mitte{
  position:absolute;inset:21%;display:grid;grid-template-rows:1fr auto 1fr;
  justify-items:center;align-items:center;text-align:center;
}
.A-plattenlabel .pla-ob{align-self:end;padding-bottom:.45em;min-width:0}
.A-plattenlabel .pla-marke{
  margin:0;font:700 clamp(.5rem,1.1vw,.66rem)/1 var(--font-b);
  letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 70%,transparent);
}
.A-plattenlabel .pla-name{
  margin:.4em 0 0;font:800 clamp(.9rem,3vw,1.7rem)/1.04 var(--font-h);
  color:var(--on-hero);overflow-wrap:anywhere;
}
/* Der Name richtet sich nach dem Durchmesser des Labels und nach seiner eigenen Länge,
   damit er in einer Zeile neben dem Loch steht und nicht mitten im Wort umbricht. */
.A-plattenlabel .pla-name{font-size:clamp(.7rem,calc(var(--pla-k,7) * 1cqw),2.1rem)}
.A-plattenlabel .pla-loch{
  width:clamp(15px,3.4vw,26px);aspect-ratio:1;border-radius:50%;background:var(--bg);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 48%,transparent),
             inset 0 2px 5px color-mix(in srgb,var(--on-hero) 35%,transparent);
}
.A-plattenlabel .pla-unt{
  align-self:start;margin:.55em 0 0;max-width:90%;
  font-size:clamp(.62rem,1.5vw,.86rem);line-height:1.4;overflow-wrap:anywhere;
  color:color-mix(in srgb,var(--on-hero) 78%,transparent);
}

/* Ausschnitt der Rillen: der Mittelpunkt liegt weit links, man sieht nur den Bogenanschnitt */
.A-plattenlabel .pla-rillen{
  position:relative;margin:0;overflow:hidden;color:var(--on-hero);
  border-radius:calc(var(--r) / 2);
  background:
    repeating-radial-gradient(circle at -420% 50%,
      color-mix(in srgb,var(--on-hero) 30%,transparent) 0 1px,transparent 1px 6px),
    linear-gradient(100deg,color-mix(in srgb,var(--on-hero) 13%,var(--hero)),var(--hero));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 22%,transparent);
}
.A-plattenlabel .pla-rillen-t{
  position:absolute;left:50%;bottom:clamp(8px,1.4vw,14px);transform:translateX(-50%);
  writing-mode:vertical-rl;font:700 .6rem var(--font-b);letter-spacing:.3em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 70%,transparent);
}

/* Angaben neben der Platte: Fugen je Feld, damit sie auf dem Grund sauber stehen */
.A-plattenlabel .pla-daten{min-width:0}
.A-plattenlabel .pla-fakten{list-style:none;margin:0 0 clamp(12px,2vw,18px);padding:0;display:flex;flex-wrap:wrap;gap:0}
.A-plattenlabel .pla-fakten li{
  flex:1 1 118px;min-width:0;background:var(--surface);
  padding:clamp(9px,1.5vw,13px) clamp(10px,1.6vw,15px);
  box-shadow:0 0 0 1px var(--line);
}
.A-plattenlabel .pla-fakten span{display:block;font:700 .6rem/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.A-plattenlabel .pla-fakten b{display:block;margin-top:5px;font:700 clamp(.95rem,2vw,1.15rem)/1.1 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.A-plattenlabel .pla-matrize{
  margin:0 0 clamp(12px,2vw,18px);font:600 .7rem/1.4 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere;
}
.A-plattenlabel .pla-text{margin:0 0 clamp(14px,2.2vw,20px);line-height:1.75;color:var(--muted)}
.A-plattenlabel .pla-sc{padding-top:12px}

@media (max-width:860px){
  .A-plattenlabel .pla-in{grid-template-columns:1fr}
}
@media (max-width:780px){
  .A-plattenlabel .pla-platte{grid-template-columns:minmax(0,1fr) clamp(38px,10vw,58px)}
  .A-plattenlabel .pla-fakten li{flex:1 1 100%}
  .A-plattenlabel .pla-mitte{inset:19%}
}

/* --- Seitentyp: Praeparat --- */
/* --- Seitentyp: Praeparat --- */
/* Praeparat: Objekttraeger mit Beschriftungsfeld und Deckglas, im runden Sichtfeld ein gerechnetes Zellbild */
.A-praeparat{background:var(--bg)}
.A-praeparat .pv{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(18px,2.8vw,34px);
  align-items:start;
  padding-top:clamp(26px,4.4vw,58px);
  padding-bottom:clamp(24px,4vw,52px);
}

/* Der Objekttraeger */
.A-praeparat .pv-traeger{
  grid-column:1 / -1;
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(16px,2.6vw,32px);
  align-items:center;
  padding:clamp(14px,2.2vw,26px);
  background:linear-gradient(104deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface) 46%,color-mix(in srgb,var(--accent) 9%,var(--surface)));
  border:1px solid var(--line);
  border-radius:calc(var(--r) * 1.2);
  box-shadow:0 20px 44px -34px var(--ink),inset 0 1px 0 color-mix(in srgb,var(--surface) 70%,transparent);
}

/* Beschriftungsfeld */
.A-praeparat .pv-schild{
  min-width:0;
  padding:clamp(14px,2.2vw,26px);
  background:color-mix(in srgb,var(--ink) 4%,var(--surface));
  border:1px dashed color-mix(in srgb,var(--line) 90%,var(--ink));
  border-radius:calc(var(--r) / 1.6);
}
.A-praeparat .pv-kl{
  display:block;margin-bottom:.5em;
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.A-praeparat .pv-name{
  margin:0 0 .22em;color:var(--ink);
  font:700 clamp(1.5rem,4vw,2.7rem)/1.08 var(--font-h);
  letter-spacing:-.02em;overflow-wrap:anywhere;
}
.A-praeparat .pv-lead{
  margin:0 0 1em;font-size:clamp(.92rem,1.5vw,1.06rem);color:var(--muted);
}
.A-praeparat .pv-nr{
  margin:0;display:flex;flex-direction:column;gap:.12em;
  padding-top:.8em;border-top:1px solid var(--line);
}
.A-praeparat .pv-nr small{
  font:700 .64rem/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.A-praeparat .pv-nr b{
  font:800 clamp(1.35rem,3.2vw,2.1rem)/1.1 var(--font-h);
  color:var(--primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.A-praeparat .pv-sig{
  display:block;margin-top:.7em;
  font:600 .74rem/1.3 var(--font-b);letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 55%,var(--surface));
}

/* Deckglas und Sichtfeld */
.A-praeparat .pv-glas{display:grid;place-items:center;min-width:0;padding:clamp(4px,1vw,12px)}
.A-praeparat .pv-deck{
  position:relative;
  width:100%;max-width:400px;
  aspect-ratio:1;
  padding:clamp(6px,1.2vw,12px);
  transform:rotate(-1.4deg);
  background:color-mix(in srgb,var(--primary) 6%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 10px 24px -18px var(--ink),inset 0 0 0 1px color-mix(in srgb,var(--surface) 60%,transparent);
}
.A-praeparat .pv-svg{
  display:block;width:100%;height:auto;max-width:none;
  color:var(--ink);
}
.A-praeparat .pv-feld{fill:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.A-praeparat .pv-faser path{stroke:currentColor;stroke-width:.5;opacity:.22;stroke-linecap:round}
.A-praeparat .pv-wand{
  fill:color-mix(in srgb,var(--primary) 18%,transparent);
  stroke:currentColor;stroke-width:.55;opacity:.8;
}
.A-praeparat .pv-kern{fill:var(--accent);opacity:.72}
.A-praeparat .pv-blende{stroke:currentColor;stroke-width:1.1;opacity:.3}
.A-praeparat .pv-mass{
  position:absolute;right:clamp(12px,2.4vw,22px);bottom:clamp(12px,2.4vw,22px);
  width:22%;height:3px;border-radius:2px;
  background:color-mix(in srgb,var(--ink) 62%,transparent);
}

/* Angaben */
.A-praeparat .pv-daten{grid-column:1;min-width:0}
.A-praeparat .pv-ut{
  margin:0 0 .7em;
  font:700 .68rem/1 var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.A-praeparat .pv-liste{margin:0;border-top:1px solid var(--line)}
.A-praeparat .pv-z{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:2px 14px;padding:.58em 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.A-praeparat .pv-z dt{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.A-praeparat .pv-z dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.A-praeparat .pv-rate{margin:.9em 0 0;font-size:.9rem;color:var(--muted)}
.A-praeparat .pv-daten .ab{margin-top:clamp(14px,2.2vw,22px)}
.A-praeparat .pv-text{
  grid-column:2;max-width:68ch;font-size:clamp(1rem,1.5vw,1.08rem);
}
.A-praeparat .pv-text p{margin:0 0 1em}
.A-praeparat .pv-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-praeparat .pv{grid-template-columns:1fr}
  .A-praeparat .pv-traeger{grid-template-columns:1fr}
  .A-praeparat .pv-daten,.A-praeparat .pv-text{grid-column:1}
  .A-praeparat .pv-deck{transform:none;max-width:340px}
  .A-praeparat .pv-z dd{text-align:left}
}

/* --- Seitentyp: Seekarte --- */
/* Seekarte: Tiefenzahlen verstreut auf hellem Wasser, Küstenlinie oben,
   Seezeichen und Kompassrose als Zeichnung, der Preis an einer Untiefe */
.A-seekarte{background:var(--bg)}
.A-seekarte .skr{
  padding-top:clamp(22px,3.8vw,52px);
  padding-bottom:clamp(20px,3.4vw,44px);
}
.A-seekarte .skr-blatt{
  max-width:1000px;
  margin:0 auto .9em;
  font:600 .7rem/1.5 var(--font-b);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Das Kartenblatt */
.A-seekarte .skr-karte{
  position:relative;
  max-width:1000px;
  margin:0 auto;
  padding:clamp(8px,1.2vw,14px);
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));
  border:1px solid var(--line);
  outline:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
  outline-offset:-5px;
  border-radius:var(--r);
}
.A-seekarte .skr-svg{
  display:block;
  width:100%;
  aspect-ratio:200 / 150;
  color:var(--ink);
}

/* Gitternetz und Küste */
.A-seekarte .skr-gitter line{stroke:currentColor;stroke-width:.25;opacity:.14}
.A-seekarte .skr-land{fill:color-mix(in srgb,var(--accent) 26%,var(--surface));opacity:.8}
.A-seekarte .skr-kante{
  fill:none;
  stroke:var(--ink);
  stroke-width:.8;
  stroke-linejoin:round;
  opacity:.7;
}

/* Die Untiefe: gepunktete Fläche */
.A-seekarte .skr-uf{
  fill:color-mix(in srgb,var(--primary) 16%,transparent);
  stroke:var(--primary);
  stroke-width:.7;
  stroke-dasharray:2.4 1.8;
}
.A-seekarte .skr-stich circle{fill:var(--primary);opacity:.6}

/* Lotungen: die Merkmale als Tiefenangaben */
.A-seekarte .skr-ll{
  font:700 2.9px/1 var(--font-b);
  letter-spacing:.3px;
  fill:var(--muted);
}
.A-seekarte .skr-lv{
  font:700 6.2px/1 var(--font-h);
  fill:var(--ink);
}
.A-seekarte .skr-ll,
.A-seekarte .skr-lv{
  stroke:color-mix(in srgb,var(--primary) 9%,var(--surface));
  stroke-width:1.6;
  paint-order:stroke;
  stroke-linejoin:round;
}

/* Gestreute Tiefenzahlen */
.A-seekarte .skr-tiefen text{
  font:400 4.4px/1 var(--font-b);
  fill:var(--ink);
  opacity:.62;
}

/* Seezeichen */
.A-seekarte .skr-zeichen line{stroke:var(--ink);stroke-width:.7}
.A-seekarte .skr-zeichen path{fill:var(--accent);stroke:var(--ink);stroke-width:.35}
.A-seekarte .skr-zeichen circle{fill:var(--ink);opacity:.8}

/* Kompassrose */
.A-seekarte .skr-rr{fill:none;stroke:var(--ink);stroke-width:.45;opacity:.55}
.A-seekarte .skr-rz{fill:var(--ink);opacity:.85}
.A-seekarte .skr-rd{fill:var(--ink);opacity:.4}
.A-seekarte .skr-rn{
  font:700 4.6px/1 var(--font-h);
  fill:var(--ink);
  stroke:color-mix(in srgb,var(--primary) 9%,var(--surface));
  stroke-width:1.4;
  paint-order:stroke;
}

/* Der Name des Gewässers liegt im freien Wasser */
.A-seekarte .skr-gewaesser{
  position:absolute;
  left:6%;
  top:27%;
  width:62%;
  pointer-events:none;
}
.A-seekarte .skr-name{
  margin:0;
  color:var(--ink);
  font:600 italic clamp(1.4rem,4.6vw,3rem)/1.08 var(--font-h);
  letter-spacing:.1em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
  text-shadow:
    0 0 6px color-mix(in srgb,var(--primary) 9%,var(--surface)),
    0 0 14px color-mix(in srgb,var(--primary) 9%,var(--surface));
}
.A-seekarte .skr-g-m .skr-name{font-size:clamp(1.05rem,3.2vw,2.1rem)}
.A-seekarte .skr-g-l .skr-name{font-size:clamp(.8rem,2.3vw,1.45rem);letter-spacing:.05em}
.A-seekarte .skr-lead{
  margin:.5em 0 0;
  font:500 clamp(.78rem,1.5vw,1rem)/1.4 var(--font-b);
  letter-spacing:.1em;
  color:var(--muted);
  overflow-wrap:anywhere;
}

/* Der Preis steht an der Untiefe */
.A-seekarte .skr-preis{
  position:absolute;
  transform:translate(-50%,-50%);
  display:block;
  max-width:min(58%,300px);
  text-align:center;
  padding:.45em .85em .55em;
  background:var(--primary);
  color:var(--on-primary);
  border-radius:calc(var(--r) / 1.6);
  box-shadow:0 10px 22px -14px color-mix(in srgb,var(--ink) 85%,transparent);
}
.A-seekarte .skr-preis small{
  display:block;
  font:700 .6rem/1 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--on-primary) 74%,var(--primary));
}
.A-seekarte .skr-preis span{
  display:block;
  margin-top:.18em;
  font:800 clamp(1rem,2.4vw,1.6rem)/1.1 var(--font-h);
  overflow-wrap:anywhere;
}
.A-seekarte .skr-preis em{
  display:block;
  margin-top:.1em;
  font:400 .72rem/1.3 var(--font-b);
  font-style:normal;
  color:color-mix(in srgb,var(--on-primary) 80%,var(--primary));
}

.A-seekarte .skr-sig{
  margin:clamp(8px,1.2vw,12px) 2px 0;
  font:500 .72rem/1.5 var(--font-b);
  letter-spacing:.05em;
  color:var(--muted);
}

.A-seekarte .ab{margin-top:clamp(16px,2.4vw,26px);flex-wrap:wrap}
.A-seekarte .ab-l,
.A-seekarte .ab-p{display:none}
.A-seekarte .skr-text{
  max-width:70ch;
  margin-top:clamp(16px,2.6vw,28px);
  font-size:clamp(.98rem,1.5vw,1.06rem);
  line-height:1.7;
}
.A-seekarte .skr-text p{margin:0 0 1em;overflow-wrap:anywhere}
.A-seekarte .skr-sc{padding-top:10px;padding-bottom:8px}

@media (max-width:780px){
  .A-seekarte .skr-blatt{font-size:.62rem;letter-spacing:.1em}
  .A-seekarte .skr-gewaesser{width:78%;top:23%}
  .A-seekarte .skr-name{font-size:clamp(1.05rem,5.6vw,1.7rem);letter-spacing:.06em}
  .A-seekarte .skr-g-m .skr-name{font-size:clamp(.82rem,4.2vw,1.2rem)}
  .A-seekarte .skr-g-l .skr-name{font-size:clamp(.6rem,3.1vw,.9rem);letter-spacing:.03em}
  .A-seekarte .skr-lead{font-size:.68rem;letter-spacing:.03em;margin-top:.4em}
  .A-seekarte .skr-g-l .skr-lead{font-size:.6rem}
  .A-seekarte .skr-preis{max-width:58%;padding:.3em .55em .4em}
  .A-seekarte .skr-preis span{font-size:clamp(.78rem,3.8vw,1rem)}
  .A-seekarte .skr-preis small{font-size:.54rem;letter-spacing:.14em}
  .A-seekarte .skr-preis em{font-size:.62rem}
  .A-seekarte .skr-ll{font-size:4px}
  .A-seekarte .skr-lv{font-size:8px}
  .A-seekarte .skr-tiefen text{font-size:5.6px}
  .A-seekarte .skr-rn{font-size:6px}
  .A-seekarte .skr-sig{font-size:.66rem}
}

/* --- Seitentyp: Tonbandkassette --- */
/* Tonbandkassette: das Gehäuse liegt waagerecht, oben das aufgeklebte Beschriftungsfeld mit dem
   handschriftlich gesetzten Domainnamen, darunter die Angabenreihe und das Sichtfenster mit den
   zwei Wickeln. Der Füllstand der Wickel kommt aus crc32, deshalb steht das Band bei jeder
   Domain anders. Das Rückenschild unter dem Gehäuse trägt den Preis. */
.A-tonbandkassette{background:color-mix(in srgb,var(--ink) 6%,var(--bg))}
.A-tonbandkassette .tbk{padding-top:clamp(24px,4.4vw,56px);padding-bottom:20px}
.A-tonbandkassette .tbk-in{
  max-width:1020px;margin:0 auto;display:grid;
  grid-template-columns:minmax(290px,1.12fr) minmax(0,1fr);
  gap:clamp(18px,3vw,40px);align-items:start;
}
.A-tonbandkassette .tbk-kassette{min-width:0}

/* Gehäuse */
.A-tonbandkassette .tbk-gehaeuse{
  position:relative;color:var(--on-hero);
  display:grid;grid-template-rows:auto auto minmax(0,1fr);
  gap:clamp(7px,1.2vw,12px);
  min-height:clamp(228px,32vw,320px);
  padding:clamp(12px,1.9vw,19px);
  border-radius:calc(var(--r) / 1.6);
  background:linear-gradient(168deg,color-mix(in srgb,var(--on-hero) 13%,var(--hero)),var(--hero));
  box-shadow:0 26px 56px -40px var(--hero),0 0 0 1px color-mix(in srgb,var(--on-hero) 22%,transparent);
}

/* Beschriftungsfeld, aufgeklebt */
.A-tonbandkassette .tbk-feld{
  background:var(--surface);color:var(--ink);border-radius:3px;
  padding:clamp(9px,1.6vw,15px) clamp(11px,1.8vw,19px);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent),0 4px 12px -8px var(--ink);
}
.A-tonbandkassette .tbk-marke{
  display:flex;justify-content:space-between;gap:10px;margin:0;
  font:700 .58rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
.A-tonbandkassette .tbk-name{
  margin:.42em 0 0;font:600 clamp(1.45rem,4.6vw,2.6rem)/1.08 var(--font-h);
  font-style:italic;letter-spacing:.005em;color:var(--primary);
  transform:rotate(-1.1deg);transform-origin:left center;overflow-wrap:anywhere;
}
.A-tonbandkassette .tbk-linie{
  display:block;height:1px;margin:.55em 0 .5em;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 30%,transparent) 0 6px,transparent 6px 10px);
}
.A-tonbandkassette .tbk-zeile{
  margin:0;font-size:clamp(.82rem,1.6vw,.95rem);line-height:1.45;font-style:italic;color:var(--muted);
}

/* Angaben: Laufzeit, Seite, Rauschunterdrückung. Fugen je Feld, nicht über gap */
.A-tonbandkassette .tbk-angaben{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.A-tonbandkassette .tbk-angaben li{
  min-width:0;padding:clamp(6px,1.1vw,11px) clamp(7px,1.2vw,12px);
  background:color-mix(in srgb,var(--on-hero) 7%,var(--hero));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 24%,transparent);
}
.A-tonbandkassette .tbk-angaben small{
  display:block;font:700 .52rem/1.25 var(--font-b);letter-spacing:.14em;text-transform:uppercase;
  overflow-wrap:anywhere;color:color-mix(in srgb,var(--on-hero) 62%,transparent);
}
.A-tonbandkassette .tbk-angaben b{display:block;margin-top:3px;font:800 clamp(.9rem,2vw,1.15rem)/1 var(--font-h);color:var(--on-hero)}
.A-tonbandkassette .tbk-angaben em{
  display:block;margin-top:3px;font-style:normal;font-size:.62rem;overflow-wrap:anywhere;
  color:color-mix(in srgb,var(--on-hero) 58%,transparent);
}

/* Sichtfenster mit den beiden Wickeln */
.A-tonbandkassette .tbk-fenster{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;justify-items:center;gap:clamp(10px,2vw,22px);
  padding:clamp(8px,1.4vw,14px) clamp(14px,3vw,34px);
  min-height:clamp(96px,15vw,160px);
  border-radius:calc(var(--r) / 3);
  background:color-mix(in srgb,var(--on-hero) 17%,var(--hero));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 30%,transparent);
}
.A-tonbandkassette .tbk-band{
  position:absolute;left:12%;right:12%;top:50%;height:clamp(8px,1.4vw,12px);
  transform:translateY(-50%);border-radius:1px;
  background:color-mix(in srgb,var(--on-hero) 44%,var(--hero));
}
.A-tonbandkassette .tbk-wickel{
  position:relative;display:block;width:min(100%,clamp(78px,13vw,148px));height:auto;color:var(--on-hero);
}
.A-tonbandkassette .tbk-rolle{fill:color-mix(in srgb,var(--on-hero) 50%,var(--hero))}
.A-tonbandkassette .tbk-rille{fill:none;stroke:color-mix(in srgb,var(--hero) 55%,transparent);stroke-width:1}
.A-tonbandkassette .tbk-nabe{fill:var(--hero);stroke:color-mix(in srgb,var(--on-hero) 55%,transparent);stroke-width:1.5}
.A-tonbandkassette .tbk-zahn{stroke:color-mix(in srgb,var(--on-hero) 55%,transparent);stroke-width:2.6;stroke-linecap:round}

/* Gehäuseschrauben */
.A-tonbandkassette .tbk-schraube{
  position:absolute;width:clamp(5px,.9vw,8px);aspect-ratio:1;border-radius:50%;
  background:color-mix(in srgb,var(--on-hero) 26%,var(--hero));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 45%,transparent);
}
.A-tonbandkassette .tbk-s1{left:5px;top:5px}
.A-tonbandkassette .tbk-s2{right:5px;top:5px}
.A-tonbandkassette .tbk-s3{left:5px;bottom:5px}
.A-tonbandkassette .tbk-s4{right:5px;bottom:5px}
.A-tonbandkassette .tbk-s5{left:50%;bottom:5px;transform:translateX(-50%)}

/* Rückenschild mit dem Preis */
.A-tonbandkassette .tbk-ruecken{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;
  gap:clamp(8px,1.6vw,16px);margin:clamp(10px,1.6vw,16px) 0 0;
  padding:clamp(9px,1.5vw,14px) clamp(13px,2vw,21px);
  background:var(--surface);border-radius:3px;
  box-shadow:0 0 0 1px var(--line),inset 4px 0 0 0 var(--accent);
}
.A-tonbandkassette .tbk-rl{font:700 .6rem/1 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.A-tonbandkassette .tbk-rp{
  font:800 clamp(1.1rem,2.8vw,1.6rem)/1.1 var(--font-h);color:var(--primary);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.A-tonbandkassette .tbk-rt{
  justify-self:end;font-style:normal;font:600 .64rem/1.3 var(--font-b);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

.A-tonbandkassette .tbk-rest{min-width:0}
.A-tonbandkassette .tbk-text{margin:0 0 clamp(14px,2.2vw,20px);line-height:1.75;color:var(--muted)}
.A-tonbandkassette .tbk-sc{padding-top:12px}

@media (max-width:860px){
  .A-tonbandkassette .tbk-in{grid-template-columns:1fr}
}
@media (max-width:780px){
  .A-tonbandkassette .tbk-angaben{grid-template-columns:1fr}
  .A-tonbandkassette .tbk-gehaeuse{min-height:0}
  .A-tonbandkassette .tbk-ruecken{grid-template-columns:1fr;gap:4px}
  .A-tonbandkassette .tbk-rt{justify-self:start}
}

/* --- Seitentyp: Weinetikett --- */
/* Weinetikett: ein hochformatiges Etikett, mittig gestellt, mit feiner doppelter Umrandung.
   Oben das Weingut, darunter der Domainname als Lagenname, der Jahrgang als grösstes
   Element der Seite, die Merkmale als Rebsorte, Ausbau und Alkohol, der Preis als
   Abgabepreis ab Hof und unten das Prüfnummernfeld. Darunter liegt das Rückenetikett. */
.A-weinetikett{background:var(--bg)}
.A-weinetikett .wne{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(18px,3vw,34px);
  padding-top:clamp(26px,4.6vw,66px);
  padding-bottom:clamp(24px,4vw,54px);
}

/* --- Das Etikett, hochkant --- */
.A-weinetikett .wne-etikett{
  width:100%;
  max-width:420px;
  padding:7px;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 26px 52px -40px color-mix(in srgb,var(--ink) 80%,transparent);
}
.A-weinetikett .wne-rand{
  height:100%;
  padding:clamp(20px,4.4vw,32px) clamp(16px,3.6vw,26px);
  border:1px solid var(--accent);
  text-align:center;
}
.A-weinetikett .wne-weingut{
  margin:0;
  font:700 .66rem/1.4 var(--font-b);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--primary);
  overflow-wrap:anywhere;
}
/* Ornament: eine Raute zwischen zwei feinen Linien */
.A-weinetikett .wne-orn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  margin:.9em 0;
}
.A-weinetikett .wne-orn::before,
.A-weinetikett .wne-orn::after{
  content:"";
  flex:1 1 auto;
  height:0;
  border-top:1px solid var(--line);
}
.A-weinetikett .wne-orn::before,
.A-weinetikett .wne-orn::after{box-shadow:0 3px 0 -2px var(--line)}
/* Raute zwischen den beiden Linien */
.A-weinetikett .wne-raute{
  flex:none;
  width:7px;
  height:7px;
  transform:rotate(45deg);
  background:var(--accent);
}
.A-weinetikett .wne-vorsatz{
  margin:0;
  font:600 .62rem/1 var(--font-b);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-weinetikett .wne-lage{
  margin:.45em 0 .35em;
  font:400 clamp(1.26rem,4vw,1.95rem)/1.18 var(--font-h);
  letter-spacing:.02em;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-weinetikett .wne-lead{
  margin:0;
  font:italic 400 clamp(.86rem,1.9vw,.96rem)/1.55 var(--font-b);
  color:var(--muted);
  overflow-wrap:anywhere;
}
.A-weinetikett .wne-jgk{
  margin:1.1em 0 0;
  font:600 .6rem/1 var(--font-b);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-weinetikett .wne-jahrgang{
  margin:.1em 0 .5em;
  font:400 clamp(2.6rem,10vw,4.4rem)/.95 var(--font-h);
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  color:var(--primary);
}

/* --- Rebsorte, Ausbau, Alkohol --- */
.A-weinetikett .wne-angaben{
  margin:0;
  padding:.9em 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.34em .9em;
  text-align:left;
}
.A-weinetikett .wne-angaben dt{
  font:600 .64rem/1.5 var(--font-b);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-weinetikett .wne-angaben dd{
  margin:0;
  text-align:right;
  font:600 clamp(.82rem,1.8vw,.9rem)/1.5 var(--font-b);
  color:var(--ink);
  overflow-wrap:anywhere;
}

/* --- Abgabepreis ab Hof --- */
.A-weinetikett .wne-preis{display:grid;gap:.12em;padding:1em 0 .9em}
.A-weinetikett .wne-preis-k{
  font:600 .6rem/1.3 var(--font-b);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-weinetikett .wne-preis-w{
  font:400 clamp(1.3rem,4.2vw,1.95rem)/1.1 var(--font-h);
  letter-spacing:.01em;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-weinetikett .wne-preis-r{font-size:.78rem;line-height:1.45;color:var(--muted)}

/* --- Prüfnummernfeld --- */
.A-weinetikett .wne-pruef{
  margin:0;
  display:grid;
  gap:.2em;
  padding:.6em .7em;
  border:1px dotted var(--line);
  background:color-mix(in srgb,var(--primary) 6%,transparent);
}
.A-weinetikett .wne-pruef-k{
  font:600 .56rem/1.3 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-weinetikett .wne-pruef-w{
  font:700 clamp(.74rem,1.7vw,.84rem)/1.3 var(--font-b);
  letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  overflow-wrap:anywhere;
}

/* --- Rückenetikett --- */
.A-weinetikett .wne-rueck{
  width:100%;
  max-width:640px;
  padding:clamp(16px,2.8vw,26px) clamp(16px,3.2vw,30px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 3);
  text-align:center;
}
.A-weinetikett .wne-rt{
  margin:0 0 .7em;
  font:600 .6rem/1 var(--font-b);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-weinetikett .wne-text{
  margin:0;
  max-width:62ch;
  margin-left:auto;
  margin-right:auto;
  font-size:clamp(.98rem,1.5vw,1.06rem);
  line-height:1.75;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.A-weinetikett .wne-rueck .desc.custom{margin-top:.8em;line-height:1.75}
.A-weinetikett .wne-abf{
  margin:1em 0 0;
  padding-top:.8em;
  border-top:1px solid var(--line);
  font-size:.76rem;
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.A-weinetikett .wne-rueck .ab{margin-top:clamp(12px,2vw,18px);flex-wrap:wrap}
.A-weinetikett .wne-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-weinetikett .wne{gap:clamp(14px,4vw,24px)}
  .A-weinetikett .wne-rueck{padding-left:clamp(14px,4vw,22px);padding-right:clamp(14px,4vw,22px)}
  .A-weinetikett .wne-rueck .ab{flex-direction:column;align-items:center}
}
@media (max-width:520px){
  /* Auf dem Handy wird das Etikett so schmal, dass Bezeichnung und Angabe
     untereinander stehen müssen. */
  .A-weinetikett .wne-angaben{grid-template-columns:1fr;gap:.1em}
  .A-weinetikett .wne-angaben dd{text-align:left;margin-bottom:.5em}
  .A-weinetikett .wne-jahrgang{font-size:clamp(2.4rem,15vw,3.4rem)}
}

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

/* --- Seitentyp: Aushang --- */
/* --- Seitentyp: Aushang --- */
/* Zettel am schwarzen Brett: Reisszwecke oben, Name als Ueberschrift, Text darunter,
   am unteren Rand die eingeschnittenen Abrisszettel mit senkrecht stehendem Preis,
   von denen einer schon fehlt und das Brett durchscheinen laesst. */
.A-aushang{background:
  radial-gradient(circle at 22% 28%,color-mix(in srgb,var(--ink) 8%,transparent) 0 1.6px,transparent 2.6px) 0 0/23px 23px,
  radial-gradient(circle at 68% 74%,color-mix(in srgb,var(--ink) 5%,transparent) 0 1.4px,transparent 2.4px) 9px 13px/29px 29px,
  var(--bg)}
.A-aushang .ah{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(40px,7vw,86px)}

.ah-blatt{max-width:760px;margin:0 auto;transform:rotate(-.6deg);
  filter:drop-shadow(0 13px 19px color-mix(in srgb,var(--ink) 21%,transparent))}

.ah-zettel{container-type:inline-size;position:relative;background:var(--surface);
  border:1px solid var(--line);border-bottom:none;
  padding:clamp(34px,5.4vw,58px) clamp(20px,3.4vw,44px) clamp(18px,2.8vw,30px)}
.ah-zwecke{position:absolute;left:50%;top:clamp(10px,1.8vw,17px);transform:translateX(-50%);
  width:clamp(18px,3vw,25px);height:clamp(18px,3vw,25px);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,
    color-mix(in srgb,var(--on-primary) 55%,var(--primary)),var(--primary) 58%);
  box-shadow:0 5px 9px -4px var(--ink),inset 0 -2px 3px color-mix(in srgb,var(--ink) 32%,transparent)}

.ah-kopf{margin:0 0 .7em;text-align:center;font:700 .64rem var(--font-b);
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.ah-name{margin:0 0 .2em;text-align:center;font:900 clamp(1.55rem,9cqw,3.1rem)/1.05 var(--font-h);
  letter-spacing:-.015em;overflow-wrap:anywhere}
.ah-zeile{margin:0 0 clamp(14px,2.6vw,24px);padding-bottom:clamp(12px,2.2vw,20px);
  text-align:center;font-size:clamp(1rem,2.3vw,1.2rem);line-height:1.5;color:var(--muted);
  border-bottom:2px solid var(--ink)}
.ah-text{margin:0 0 6px;line-height:1.78}

.ah-daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  margin:clamp(14px,2.6vw,24px) 0 0}
.ah-daten>div{background:var(--surface);box-shadow:0 0 0 1px var(--line);padding:9px 13px}
.ah-daten dt{font:700 .6rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ah-daten dd{margin:2px 0 0;font:800 1.02rem var(--font-h);overflow-wrap:anywhere}

.ah-preis{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px 14px;
  margin:clamp(14px,2.4vw,22px) 0 0;padding:clamp(10px,1.9vw,16px);
  border:2px dashed color-mix(in srgb,var(--primary) 52%,transparent);
  background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.ah-preis span{font:700 .64rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ah-preis b{font:900 clamp(1.18rem,3.4vw,1.9rem) var(--font-h);color:var(--primary);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.A-aushang .ab{justify-content:center}
.A-aushang .ab-l,.A-aushang .ab-p{display:none}
.ah-rest{margin:clamp(14px,2.4vw,22px) 0 0;text-align:center;font:700 .66rem var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* Abrisszettel: die Einschnitte sind senkrecht, der Bogen laeuft ohne Querkante weiter */
.ah-fransen{display:flex;align-items:stretch;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.ah-abriss{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(3px,.9vw,8px);height:clamp(104px,19vw,156px);padding:11px 0 13px;
  writing-mode:vertical-rl;background:var(--surface);border-bottom:1px solid var(--line)}
.ah-abriss+.ah-abriss{border-left:1px dashed color-mix(in srgb,var(--line) 70%,var(--ink))}
.ah-ab-p{font:800 clamp(.76rem,2vw,.98rem) var(--font-h);color:var(--primary);
  letter-spacing:.03em;white-space:nowrap}
.ah-ab-d{font:600 .64rem var(--font-b);letter-spacing:.1em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ah-abriss.ah-weg{background:transparent;border-bottom:none;border-left:none}
.ah-abriss.ah-weg+.ah-abriss{border-left:none}

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

@media (max-width:780px){
  .ah-blatt{transform:none}
  .ah-abriss{height:clamp(86px,24vw,120px);gap:3px}
  .ah-ab-d{display:none}
  .ah-abriss:nth-child(n+7){display:none}
}

/* --- Seitentyp: Geldschein --- */
/* --- Seitentyp: Geldschein --- */
/* Banknote: querformatiger Schein auf Hero-Grund, Guillochen aus feinen Verlaeufen,
   Portraetfeld mit Monogramm, Nennwert gross und klein, Mikroschrift und zwei Unterschriften */
.A-banknote{background:color-mix(in srgb,var(--hero) 22%,var(--bg))}
.A-banknote .gsn{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.gsn-schein{position:relative;max-width:1080px;margin:0 auto;color:var(--on-hero);background:var(--hero);border-radius:calc(var(--r) * .35);overflow:hidden;box-shadow:0 26px 54px -42px var(--ink)}
.gsn-guilloche{position:absolute;inset:0;pointer-events:none;
  background:
    repeating-radial-gradient(circle at 13% 48%,transparent 0 11px,color-mix(in srgb,var(--on-hero) 15%,transparent) 11px 12px),
    repeating-radial-gradient(circle at 87% 52%,transparent 0 11px,color-mix(in srgb,var(--accent) 30%,transparent) 11px 12px),
    repeating-linear-gradient(27deg,transparent 0 5px,color-mix(in srgb,var(--on-hero) 9%,transparent) 5px 6px),
    repeating-linear-gradient(-27deg,transparent 0 5px,color-mix(in srgb,var(--on-hero) 7%,transparent) 5px 6px),
    repeating-linear-gradient(90deg,transparent 0 14px,color-mix(in srgb,var(--primary) 16%,transparent) 14px 15px),
    radial-gradient(130% 95% at 50% 0,color-mix(in srgb,var(--primary) 26%,transparent),transparent 72%)}
.gsn-rand{position:absolute;inset:clamp(8px,1.2vw,14px);border:1px solid color-mix(in srgb,var(--on-hero) 46%,transparent);pointer-events:none}
.gsn-rand::before{content:"";position:absolute;inset:5px;border:1px dashed color-mix(in srgb,var(--on-hero) 26%,transparent)}
.gsn-innen{position:relative;padding:clamp(24px,3.6vw,46px)}
.gsn-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;font:700 .68rem var(--font-b);letter-spacing:.22em;text-transform:uppercase}
.gsn-haus{color:color-mix(in srgb,var(--on-hero) 88%,transparent)}
.gsn-serie{font-variant-numeric:tabular-nums;letter-spacing:.3em;color:color-mix(in srgb,var(--on-hero) 80%,transparent)}
.gsn-mitte{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(16px,3vw,40px);align-items:start;margin-top:clamp(18px,2.8vw,32px)}
.gsn-portraet{position:relative;width:clamp(96px,13vw,152px);aspect-ratio:3/4;display:grid;place-content:center;border-radius:50% 50% 44% 44%/56% 56% 44% 44%;border:1px solid color-mix(in srgb,var(--on-hero) 48%,transparent);
  background:
    repeating-radial-gradient(circle at 50% 42%,transparent 0 3px,color-mix(in srgb,var(--on-hero) 13%,transparent) 3px 4px),
    radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--on-hero) 17%,transparent),transparent 72%)}
.gsn-ring{position:absolute;inset:9px;border-radius:inherit;border:1px solid color-mix(in srgb,var(--on-hero) 24%,transparent)}
.gsn-mono{font:900 clamp(2.3rem,6vw,4rem)/1 var(--font-h);letter-spacing:-.02em}
.gsn-stelle{display:block;font:700 .64rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 70%,transparent)}
.gsn-name{color:var(--on-hero);font:800 clamp(1.6rem,4.6vw,3rem)/1.04 var(--font-h);margin:.12em 0 0;overflow-wrap:anywhere}
.gsn-lead{margin:.5em 0 0;font-size:clamp(1rem,2.1vw,1.12rem);color:color-mix(in srgb,var(--on-hero) 82%,transparent)}
.gsn-desc{margin:14px 0 0;line-height:1.7;color:color-mix(in srgb,var(--on-hero) 88%,transparent)}
.gsn-wert{position:relative;text-align:right;padding-right:4px}
.gsn-gross{display:block;font:900 clamp(1.7rem,5.2vw,3.3rem)/1 var(--font-h);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gsn-wert small{display:block;margin-top:6px;font:700 .64rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 70%,transparent)}
.gsn-stich{display:block;height:7px;margin-top:10px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-hero) 55%,transparent) 0 2px,transparent 2px 6px)}
.gsn-mikro{margin:clamp(18px,2.8vw,28px) 0 0;padding:4px 0;font-size:clamp(4px,.55vw,6px);line-height:1.5;letter-spacing:.16em;white-space:nowrap;overflow:hidden;color:color-mix(in srgb,var(--on-hero) 55%,transparent);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)}
.gsn-fuss{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 26px;margin-top:clamp(16px,2.6vw,28px)}
.gsn-sig{flex:1 1 190px;min-width:0}
.gsn-sig-r{text-align:right}
.gsn-sig svg{display:block;max-width:none;width:clamp(112px,16vw,160px);height:auto;color:color-mix(in srgb,var(--on-hero) 85%,transparent)}
.gsn-sig-r svg{margin-left:auto}
.gsn-sig small{display:block;margin-top:4px;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--on-hero) 46%,transparent);font:700 .64rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 72%,transparent);overflow-wrap:anywhere}
.gsn-klein{flex:0 0 auto;padding:5px 11px;border:1px solid color-mix(in srgb,var(--on-hero) 46%,transparent);font:900 clamp(.95rem,2.3vw,1.45rem) var(--font-h);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.A-banknote .ab{margin-top:20px}
.A-banknote .ab-l{color:color-mix(in srgb,var(--on-hero) 72%,transparent)}
.A-banknote .ab-p{color:var(--on-hero)}
.A-banknote .ab-lease{color:var(--on-hero)}
.A-banknote .btn-s{color:var(--on-hero);border-color:color-mix(in srgb,var(--on-hero) 50%,transparent)}
.A-banknote .btn-s:hover{border-color:var(--on-hero);color:var(--on-hero)}
.gsn-sc{padding-top:10px}
@media (max-width:780px){
  .gsn-mitte{grid-template-columns:1fr;gap:18px}
  .gsn-portraet{width:clamp(84px,26vw,118px)}
  .gsn-wert{text-align:left;padding-right:0}
  .gsn-fuss{flex-direction:column;align-items:stretch}
  .gsn-fuss>*{flex:0 1 auto}
  .gsn-sig-r{text-align:left}
  .gsn-sig-r svg{margin-left:0}
  .gsn-klein{align-self:flex-start}
}

/* --- Seitentyp: Bauklotz --- */
/* Bauklotz: Holzwürfel mit sichtbarer Oberseite und Schattenseite, von Hand gestapelt */

.A-bauklotz{
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb,var(--ink) 7%,transparent) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(0deg, color-mix(in srgb,var(--ink) 5%,transparent) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(45deg, color-mix(in srgb,var(--primary) 8%,transparent) 0 15px, transparent 15px 30px),
    color-mix(in srgb,var(--primary) 5%,var(--bg));
}
.A-bauklotz .bkz{
  position:relative;
  padding-top:clamp(26px,4.5vw,58px);
  padding-bottom:clamp(22px,3.5vw,44px);
}
/* Teppichkante mit Fransen */
.A-bauklotz .bkz::before,
.A-bauklotz .bkz::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  height:9px;
  background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--ink) 26%,transparent) 0 2px, transparent 2px 6px);
  opacity:.65;
  pointer-events:none;
}
.A-bauklotz .bkz::before{top:6px}
.A-bauklotz .bkz::after{bottom:6px}

.bkz-kiste{
  margin:0 0 10px;
  font:700 .72rem/1.4 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.bkz-kiste b{color:var(--ink);font-weight:800}

/* --- der Stapel ---------------------------------------------------------- */
.bkz-turm{
  container-type:inline-size;
  display:block;
  margin:0;
  font-size:inherit;
  letter-spacing:normal;
  color:var(--ink);
}
.bkz-sr{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.bkz-stapel{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:18px 5px;
  padding-top:22px;
}
.bkz-w{
  --bkz-s:clamp(28px, calc((100cqw - var(--bkz-n) * 5px) / var(--bkz-n) / 1.3), 104px);
  --bkz-d:calc(var(--bkz-s) * .27);
  --bkz-face:var(--primary);
  --bkz-on:var(--on-primary);
  --bkz-top:color-mix(in srgb,var(--bkz-face) 70%,var(--bg));
  --bkz-side:color-mix(in srgb,var(--bkz-face) 64%,var(--ink));
  position:relative;
  flex:0 0 auto;
  width:var(--bkz-s);
  height:var(--bkz-s);
  margin:var(--bkz-d) var(--bkz-d) 0 0;
  display:grid;
  place-items:center;
  background:var(--bkz-face);
  color:var(--bkz-on);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent);
}
.bkz-w>i{
  font:900 calc(var(--bkz-s) * .56)/1 var(--font-h);
  font-style:normal;
  letter-spacing:-.02em;
}
/* Oberseite */
.bkz-w::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  width:100%;
  height:var(--bkz-d);
  background:var(--bkz-top);
  transform:skewX(-45deg);
  transform-origin:bottom left;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent);
}
/* Schattenseite */
.bkz-w::after{
  content:"";
  position:absolute;
  left:100%;
  top:0;
  width:var(--bkz-d);
  height:100%;
  background:var(--bkz-side);
  transform:skewY(-45deg);
  transform-origin:left top;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent);
}
.bkz-f1{--bkz-face:var(--primary);--bkz-on:var(--on-primary)}
.bkz-f2{--bkz-face:var(--hero);--bkz-on:var(--on-hero)}
.bkz-f3{
  --bkz-face:var(--surface);
  --bkz-on:var(--ink);
  --bkz-top:color-mix(in srgb,var(--accent) 48%,var(--surface));
  --bkz-side:color-mix(in srgb,var(--accent) 24%,color-mix(in srgb,var(--surface) 62%,var(--ink)));
}
/* von Hand gestapelt: jeder Klotz sitzt eine Spur anders */
.bkz-v0{margin-bottom:0;rotate:-.8deg}
.bkz-v1{margin-bottom:7px;rotate:.9deg}
.bkz-v2{margin-bottom:-3px;rotate:-.4deg}
.bkz-v3{margin-bottom:11px;rotate:1.3deg}
.bkz-fuge{width:calc(var(--bkz-s) * .5)}
.bkz-fuge>i{font-size:calc(var(--bkz-s) * .4)}
.bkz-endung{width:auto;min-width:var(--bkz-s);padding:0 .35em}
.bkz-endung>i{font-size:calc(var(--bkz-s) * .34);letter-spacing:.02em}

.bkz-lead{
  margin:30px 0 0;
  max-width:52ch;
  font-size:clamp(1rem,1.5vw,1.18rem);
  color:var(--ink);
  border-left:7px solid var(--accent);
  padding-left:13px;
  overflow-wrap:anywhere;
}

/* --- die liegenden Klötze ------------------------------------------------ */
.bkz-boden{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px 20px;
  margin-top:clamp(34px,5vw,60px);
}
.bkz-klotz{
  --bkz-d:22px;
  --bkz-face:var(--surface);
  --bkz-on:var(--ink);
  --bkz-top:color-mix(in srgb,var(--accent) 42%,var(--surface));
  --bkz-side:color-mix(in srgb,var(--surface) 58%,var(--ink));
  position:relative;
  background:var(--bkz-face);
  color:var(--bkz-on);
  padding:16px 16px 18px;
  margin:var(--bkz-d) var(--bkz-d) 0 0;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent);
}
.bkz-klotz::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  width:100%;
  height:var(--bkz-d);
  background:var(--bkz-top);
  transform:skewX(-45deg);
  transform-origin:bottom left;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent);
}
.bkz-klotz::after{
  content:"";
  position:absolute;
  left:100%;
  top:0;
  width:var(--bkz-d);
  height:100%;
  background:var(--bkz-side);
  transform:skewY(-45deg);
  transform-origin:left top;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent);
}
.bkz-liege h2{
  margin:0 0 .3em;
  font:800 1.02rem/1.2 var(--font-h);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:inherit;
}
.bkz-liege p{
  margin:0;
  font-size:.9rem;
  line-height:1.5;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.bkz-l1{--bkz-top:color-mix(in srgb,var(--accent) 48%,var(--surface))}
.bkz-l2{--bkz-top:color-mix(in srgb,var(--primary) 40%,var(--surface))}
.bkz-l3{--bkz-top:color-mix(in srgb,var(--accent) 26%,var(--primary))}

/* der größte Klotz trägt den Preis */
.bkz-gross{
  --bkz-d:32px;
  --bkz-face:var(--primary);
  --bkz-on:var(--on-primary);
  --bkz-top:color-mix(in srgb,var(--primary) 64%,var(--bg));
  --bkz-side:color-mix(in srgb,var(--primary) 58%,var(--ink));
  grid-column:span 2;
  grid-row:span 2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:clamp(18px,2.6vw,30px);
}
.bkz-gl{
  font:800 .74rem/1.3 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.16em;
  opacity:.82;
}
.bkz-gp{
  font:900 clamp(1.9rem,5.4vw,3.3rem)/1 var(--font-h);
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}
.bkz-rate{
  font:600 .88rem/1.4 var(--font-b);
  opacity:.85;
}

.bkz-text{
  margin-top:clamp(40px,5vw,62px);
  max-width:66ch;
}
.bkz-text>p{margin:0 0 1em;overflow-wrap:anywhere}
.A-bauklotz .bkz-text .custom{font-size:.95rem}
.A-bauklotz .bkz-sc{padding-top:8px}

@media (max-width:780px){
  .bkz-boden{grid-template-columns:1fr;gap:30px 0}
  .bkz-gross{grid-column:auto;grid-row:auto}
  .bkz-klotz{--bkz-d:16px}
  .bkz-stapel{gap:14px 4px}
  .bkz-lead{margin-top:22px}
  .A-bauklotz .bkz::before,
  .A-bauklotz .bkz::after{left:4px;right:4px}
}

/* --- Seitentyp: Bauschild --- */
/* Bauschild: eine grosse Tafel an zwei Pfosten am Bauzaun. Oben ein Band "Hier entsteht",
   darunter der Domainname als Bauvorhaben, die Merkmale als Baubeteiligte, der Preis als
   Bausumme, unten eine Leiste leerer Kaesten fuer die ausfuehrenden Firmen. */
.A-bauschild{
  background:
    repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 4%,transparent) 0 10px,transparent 10px 24px),
    var(--bg);
}
.A-bauschild .bzn{
  padding-top:clamp(22px,3.8vw,56px);
  padding-bottom:clamp(20px,3.4vw,44px);
}

/* Der Zaun: zwei Pfosten, dazwischen die Tafel */
.A-bauschild .bzn-zaun{
  position:relative;
  max-width:960px;
  margin:0 auto;
  padding:clamp(12px,1.8vw,20px) 0 clamp(30px,4.6vw,58px);
}
.A-bauschild .bzn-pfosten{
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(11px,1.7vw,20px);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--ink) 58%,var(--bg)),
    color-mix(in srgb,var(--ink) 34%,var(--bg)) 55%,
    color-mix(in srgb,var(--ink) 62%,var(--bg)));
  border-radius:2px;
}
.A-bauschild .bzn-pfosten-l{left:11%}
.A-bauschild .bzn-pfosten-r{right:11%}
.A-bauschild .bzn-zaun::after{
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  bottom:0;
  height:2px;
  background:color-mix(in srgb,var(--ink) 28%,transparent);
}

/* Die Tafel selbst */
.A-bauschild .bzn-tafel{
  position:relative;
  z-index:1;
  background:var(--surface);
  border:clamp(2px,.4vw,4px) solid color-mix(in srgb,var(--ink) 72%,var(--surface));
  border-radius:calc(var(--r) / 4);
  overflow:hidden;
  box-shadow:0 20px 44px -32px color-mix(in srgb,var(--ink) 70%,transparent);
}

/* Kopfband: "Hier entsteht" und die Nummer des Bauantrags */
.A-bauschild .bzn-kopf{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 16px;
  margin:0;
  padding:clamp(9px,1.5vw,14px) clamp(14px,2.4vw,28px);
  background:var(--primary);
  color:var(--on-primary);
}
.A-bauschild .bzn-hier{
  font:800 clamp(1rem,2.6vw,1.5rem)/1.1 var(--font-h);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.A-bauschild .bzn-antrag{
  font:600 .72rem/1.3 var(--font-b);
  font-style:normal;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.82;
}

/* Das Bauvorhaben: der Domainname gross */
.A-bauschild .bzn-vorhaben{
  padding:clamp(16px,2.8vw,32px) clamp(14px,2.4vw,28px) clamp(14px,2.2vw,26px);
}
.A-bauschild .bzn-vl{
  display:block;
  font:700 .68rem/1.3 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.5em;
}
.A-bauschild .bzn-name{
  margin:0;
  font:800 clamp(1.8rem,6.2vw,3.9rem)/1.02 var(--font-h);
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.A-bauschild .bzn-lead{
  margin:.55em 0 0;
  color:var(--muted);
  font-size:clamp(1rem,1.7vw,1.18rem);
  max-width:44em;
}

/* Die Baubeteiligten als Raster. Die Fugen entstehen je Feld aus einem Schlagschatten,
   damit kein eingefaerbter Grund durchscheint. */
.A-bauschild .bzn-rollen{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:0;
  border-top:1px solid var(--line);
}
.A-bauschild .bzn-rolle{
  flex:1 1 170px;
  min-width:0;
  padding:clamp(10px,1.7vw,15px) clamp(14px,2.2vw,22px);
  box-shadow:0 0 0 1px var(--line);
}
.A-bauschild .bzn-rolle dt{
  font:700 .66rem/1.3 var(--font-b);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary);
}
.A-bauschild .bzn-rolle dd{
  margin:.3em 0 0;
  font:700 1.02rem/1.3 var(--font-h);
  overflow-wrap:anywhere;
}
.A-bauschild .bzn-rolle dd small{
  display:block;
  font:500 .68rem/1.4 var(--font-b);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.25em;
}

/* Die Bausumme: abgesetztes Feld quer ueber die Tafel */
.A-bauschild .bzn-summe{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 18px;
  margin:0;
  padding:clamp(12px,2vw,20px) clamp(14px,2.4vw,28px);
  background:var(--hero);
  color:var(--on-hero);
}
.A-bauschild .bzn-summe span{
  font:700 .74rem/1.3 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.8;
}
.A-bauschild .bzn-summe b{
  font:800 clamp(1.5rem,4.4vw,2.6rem)/1 var(--font-h);
  letter-spacing:-.02em;
}

/* Firmenleiste: kleine leere Kaesten, wo sonst die Logos kleben */
.A-bauschild .bzn-firmen{
  padding:clamp(12px,2vw,20px) clamp(14px,2.4vw,28px) clamp(14px,2.2vw,24px);
  border-top:1px solid var(--line);
}
.A-bauschild .bzn-ft{
  margin:0 0 .7em;
  font:700 .66rem/1.3 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-bauschild .bzn-firmen ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(8px,1.4vw,14px);
}
.A-bauschild .bzn-fk{
  width:clamp(76px,13vw,116px);
}
.A-bauschild .bzn-fk i{
  display:block;
  aspect-ratio:16 / 9;
  border:1px dashed color-mix(in srgb,var(--ink) 32%,transparent);
  border-radius:3px;
  background:repeating-linear-gradient(135deg,
    color-mix(in srgb,var(--ink) 5%,transparent) 0 5px,
    transparent 5px 11px);
}
.A-bauschild .bzn-fk span{
  display:block;
  margin-top:.4em;
  font:600 .64rem/1.3 var(--font-b);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}

.A-bauschild .bzn-fuss{
  max-width:960px;
  margin:clamp(12px,2vw,20px) auto 0;
  font:600 .7rem/1.5 var(--font-b);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-bauschild .bzn-text{
  max-width:960px;
  margin:clamp(16px,2.6vw,26px) auto 0;
  line-height:1.7;
}
.A-bauschild .bzn-sc{padding-top:10px}

@media(max-width:780px){
  .A-bauschild .bzn-pfosten-l{left:5%}
  .A-bauschild .bzn-pfosten-r{right:5%}
  .A-bauschild .bzn-rolle{flex-basis:40%}
  .A-bauschild .bzn-fk{width:calc(33.333% - 8px)}
  .A-bauschild .bzn-summe{flex-direction:column;align-items:flex-start}
}
@media(max-width:460px){
  .A-bauschild .bzn-rolle{flex-basis:100%}
  .A-bauschild .bzn-fk{width:calc(50% - 7px)}
}

/* --- Seitentyp: Grundriss --- */
/* Grundriss: ein Bauplan. Die Aussenwand ist ein dicker Rahmen, die Innenwaende entstehen
   aus den Schlagschatten der einzelnen Raumfelder. Jeder Raum traegt Beschriftung und
   Quadratmeterzahl, der Domainname steht als Objektbezeichnung im groessten Raum,
   der Preis als Kaufpreis in der Legende. Dazu Tuerboegen, Fenster, Nordpfeil, Massstab.
   Die Aufteilung der Raeume kommt aus dem Namen der Domain (vier Varianten). */
.A-grundriss{
  background:
    repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--ink) 6%,transparent) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--ink) 6%,transparent) 23px 24px),
    var(--bg);
}
.A-grundriss .gri{
  padding-top:clamp(22px,3.8vw,56px);
  padding-bottom:clamp(20px,3.4vw,44px);
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.A-grundriss .gri-kopf{
  margin:0 0 clamp(10px,1.6vw,16px);
  font:700 .68rem/1.4 var(--font-b);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Aussenwand */
.A-grundriss .gri-aussen{
  --gri-w:clamp(3px,.5vw,5px);
  position:relative;
  padding:var(--gri-w);
  background:var(--surface);
  border:calc(var(--gri-w) * 2) solid var(--ink);
}

/* Fenster: unterbrechen die obere Aussenwand mit einer duennen Doppellinie */
.A-grundriss .gri-fenster{
  position:absolute;
  top:calc(var(--gri-w) * -2);
  width:clamp(30px,6vw,64px);
  height:calc(var(--gri-w) * 2);
  background:var(--surface);
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
}

/* Das Feld der Raeume. gap bleibt 0, die Fugen kommen aus den Schatten der Felder. */
.A-grundriss .gri-plan{
  display:grid;
  gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:minmax(clamp(74px,11vw,124px),auto);
}
.A-grundriss .gri-v0{grid-template-areas:"h h a" "h h b" "c d b"}
.A-grundriss .gri-v1{grid-template-areas:"a h h" "b h h" "b c d"}
.A-grundriss .gri-v2{grid-template-areas:"a b c" "a h h" "d h h"}
.A-grundriss .gri-v3{grid-template-areas:"a a b" "h h c" "h h d"}
.A-grundriss .gri-rh{grid-area:h}
.A-grundriss .gri-r1{grid-area:a}
.A-grundriss .gri-r2{grid-area:b}
.A-grundriss .gri-r3{grid-area:c}
.A-grundriss .gri-r4{grid-area:d}

/* Ein Raum. Der Schatten ist die Wand; benachbarte Raeume legen ihre Schatten
   aneinander und ergeben so eine durchgehende Innenwand. */
.A-grundriss .gri-raum{
  position:relative;
  min-width:0;
  padding:clamp(10px,1.7vw,18px) clamp(10px,1.7vw,18px) clamp(34px,5.2vw,54px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  box-shadow:0 0 0 var(--gri-w) var(--ink);
  background:var(--surface);
}
.A-grundriss .gri-raum b{
  font:700 .68rem/1.3 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-grundriss .gri-raum>span{
  margin-top:.3em;
  font:700 1.02rem/1.3 var(--font-h);
  overflow-wrap:anywhere;
}
.A-grundriss .gri-qm{
  margin-top:auto;
  padding-top:.7em;
  font:600 .76rem/1.3 var(--font-b);
  font-style:normal;
  color:var(--primary);
  letter-spacing:.06em;
}

/* Der groesste Raum traegt die Objektbezeichnung */
.A-grundriss .gri-haupt{
  background:color-mix(in srgb,var(--primary) 7%,var(--surface));
  padding:clamp(14px,2.6vw,28px) clamp(14px,2.6vw,28px) clamp(38px,5.6vw,58px);
  justify-content:center;
}
.A-grundriss .gri-bez{
  display:block;
  font:700 .66rem/1.3 var(--font-b);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-grundriss .gri-name{
  margin:.35em 0 0;
  font:800 clamp(1.5rem,5vw,3rem)/1.03 var(--font-h);
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.A-grundriss .gri-lead{
  margin:.5em 0 0;
  color:var(--muted);
  font-size:clamp(.95rem,1.5vw,1.1rem);
  max-width:34em;
}
.A-grundriss .gri-haupt .gri-qm{padding-top:1.1em}

/* Tuerboegen: ein Viertelkreis mit dem Tuerblatt daran */
.A-grundriss .gri-tuer{
  position:absolute;
  bottom:clamp(7px,1.1vw,11px);
  width:clamp(26px,4.4vw,42px);
  height:clamp(26px,4.4vw,42px);
  border:1px solid color-mix(in srgb,var(--ink) 50%,transparent);
  pointer-events:none;
}
.A-grundriss .gri-tuer-links{
  left:clamp(12px,2.4vw,26px);
  border-top:0;
  border-right:0;
  border-radius:0 0 0 100%;
}
.A-grundriss .gri-tuer-rechts{
  right:clamp(12px,2.4vw,26px);
  border-top:0;
  border-left:0;
  border-radius:0 0 100% 0;
}
.A-grundriss .gri-tuer::after{
  content:"";
  position:absolute;
  bottom:0;
  width:2px;
  height:100%;
  background:color-mix(in srgb,var(--ink) 62%,transparent);
}
.A-grundriss .gri-tuer-links::after{left:0}
.A-grundriss .gri-tuer-rechts::after{right:0}

/* Legende unter dem Plan */
.A-grundriss .gri-legende{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(14px,2.4vw,28px);
  margin-top:clamp(14px,2.2vw,22px);
  padding-top:clamp(12px,2vw,18px);
  border-top:1px solid var(--line);
}
.A-grundriss .gri-angaben{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(12px,2.4vw,30px);
  margin:0;
  flex:1 1 320px;
}
.A-grundriss .gri-angaben dt{
  font:700 .64rem/1.3 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-grundriss .gri-angaben dd{
  margin:.25em 0 0;
  font:700 1.02rem/1.25 var(--font-h);
  overflow-wrap:anywhere;
}
.A-grundriss .gri-kauf dd{
  font-size:clamp(1.25rem,3.2vw,1.8rem);
  color:var(--primary);
}

/* Nordpfeil und Massstab */
.A-grundriss .gri-werkzeug{
  display:flex;
  align-items:flex-end;
  gap:clamp(14px,2.6vw,30px);
}
.A-grundriss .gri-nord{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  color:var(--ink);
}
.A-grundriss .gri-nord svg{
  width:clamp(20px,3vw,26px);
  height:auto;
  display:block;
}
.A-grundriss .gri-nv{fill:currentColor}
.A-grundriss .gri-nh{fill:none;stroke:currentColor;stroke-width:1.4}
.A-grundriss .gri-nord b{
  font:800 .74rem/1 var(--font-h);
  letter-spacing:.1em;
}
.A-grundriss .gri-massstab{
  display:grid;
  grid-template-columns:auto auto;
  justify-content:space-between;
  gap:3px;
  min-width:clamp(90px,16vw,150px);
}
.A-grundriss .gri-massstab i{
  grid-column:1 / -1;
  display:flex;
  height:9px;
  border:1px solid var(--ink);
}
.A-grundriss .gri-massstab em{
  flex:1;
  display:block;
}
.A-grundriss .gri-massstab em:nth-child(odd){background:var(--ink)}
.A-grundriss .gri-massstab small{
  font:600 .64rem/1.2 var(--font-b);
  letter-spacing:.08em;
  color:var(--muted);
}
.A-grundriss .gri-massstab small:last-child{text-align:right}

.A-grundriss .gri-text{
  margin-top:clamp(16px,2.6vw,26px);
  line-height:1.7;
}
.A-grundriss .gri-sc{padding-top:10px}

@media(max-width:780px){
  .A-grundriss .gri-plan{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"h" "a" "b" "c" "d";
    grid-auto-rows:auto;
  }
  .A-grundriss .gri-raum{min-height:clamp(78px,20vw,120px)}
  .A-grundriss .gri-legende{flex-direction:column;align-items:flex-start}
  /* In der Spalte ist die Hauptachse senkrecht: ohne diese Zeile wuerde die
     Flex-Basis der Angaben als Hoehe gelesen und ein leerer Block entstehen. */
  .A-grundriss .gri-angaben{flex:0 1 auto;gap:12px 22px}
}

/* --- Seitentyp: Klingelschild --- */
/* Klingelschild: ein Tableau an der Hauswand. Oben ein Lautsprechergitter aus Punkten,
   darunter Reihe fuer Reihe ein Namensschildchen mit rundem Knopf. Auf dem obersten
   Schildchen steht der Domainname, auf den weiteren die Merkmale, eines bleibt frei.
   Der Preis haengt als eigenes Schild daneben an der Wand. */
.A-klingelschild{
  background:
    linear-gradient(color-mix(in srgb,var(--hero) 14%,var(--bg)),color-mix(in srgb,var(--hero) 14%,var(--bg))),
    repeating-linear-gradient(0deg,transparent 0 46px,color-mix(in srgb,var(--ink) 5%,transparent) 46px 48px),
    var(--bg);
}
.A-klingelschild .klt{
  padding-top:clamp(22px,3.8vw,56px);
  padding-bottom:clamp(20px,3.4vw,44px);
}
.A-klingelschild .klt-in{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(188px,.75fr);
  gap:clamp(14px,2.6vw,32px);
  align-items:start;
}

/* Das Tableau: gebuerstetes Blech mit umlaufendem Rahmen */
.A-klingelschild .klt-tableau{
  position:relative;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--ink) 6%,transparent) 0 1px,
      transparent 1px 4px),
    var(--surface);
  border:1px solid color-mix(in srgb,var(--ink) 34%,transparent);
  border-radius:calc(var(--r) / 2);
  padding:clamp(12px,2.2vw,22px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--surface) 70%,transparent),
    0 16px 34px -28px color-mix(in srgb,var(--ink) 70%,transparent);
}

/* Lautsprechergitter: ein Punktraster in einer eigenen Mulde */
.A-klingelschild .klt-gitter{
  display:block;
  height:clamp(34px,5.4vw,50px);
  border-radius:calc(var(--r) / 3);
  border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  background:
    radial-gradient(circle,color-mix(in srgb,var(--ink) 48%,transparent) 1.3px,transparent 1.6px) 3px 3px / 9px 9px,
    color-mix(in srgb,var(--ink) 7%,var(--surface));
  box-shadow:inset 0 2px 5px -2px color-mix(in srgb,var(--ink) 45%,transparent);
}
.A-klingelschild .klt-haus{
  margin:.7em 0 .8em;
  font:700 .66rem/1.3 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Die Reihen: Schildchen links, Knopf rechts */
.A-klingelschild .klt-reihen{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(7px,1.2vw,11px);
}
.A-klingelschild .klt-reihe{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(10px,1.8vw,18px);
}

/* Namensschildchen: eingeschobenes Kaertchen hinter Glas */
.A-klingelschild .klt-schild{
  display:block;
  min-width:0;
  padding:clamp(7px,1.3vw,11px) clamp(10px,1.8vw,16px);
  background:var(--surface);
  border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);
  border-left:3px solid var(--accent);
  border-radius:3px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--surface) 60%,transparent);
}
.A-klingelschild .klt-schild b{
  display:block;
  font:700 1rem/1.25 var(--font-h);
  overflow-wrap:anywhere;
}
.A-klingelschild .klt-schild small{
  display:block;
  margin-top:.18em;
  font:600 .64rem/1.4 var(--font-b);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
/* Vier leicht verschiedene Schriftbilder, damit die Kaertchen von Hand beschriftet wirken */
.A-klingelschild .klt-et1 b{letter-spacing:.01em}
.A-klingelschild .klt-et2 b{letter-spacing:.07em;text-transform:uppercase;font-size:.92rem}
.A-klingelschild .klt-et3 b{font-weight:600;font-style:italic}
.A-klingelschild .klt-et4 b{letter-spacing:.03em;font-family:var(--font-b)}

.A-klingelschild .klt-schild-gross{
  padding:clamp(11px,2vw,18px) clamp(12px,2.2vw,20px);
  border-left-width:5px;
  border-left-color:var(--primary);
}
.A-klingelschild .klt-name{
  margin:0;
  font:800 clamp(1.4rem,4.6vw,2.5rem)/1.05 var(--font-h);
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.A-klingelschild .klt-lead{
  display:block;
  margin-top:.4em;
  font:500 .9rem/1.45 var(--font-b);
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
}

/* Die freie Partei: leeres Kaertchen, gestrichelt */
.A-klingelschild .klt-leer .klt-schild{
  border-style:dashed;
  border-left-style:solid;
  border-left-color:color-mix(in srgb,var(--ink) 25%,transparent);
  background:color-mix(in srgb,var(--ink) 4%,var(--surface));
}
.A-klingelschild .klt-leer b{color:var(--muted);font-weight:600}

/* Die Knoepfe */
.A-klingelschild .klt-knopf{
  width:clamp(28px,4.8vw,38px);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 34% 30%,
      color-mix(in srgb,var(--surface) 92%,transparent),
      color-mix(in srgb,var(--ink) 18%,var(--surface)));
  box-shadow:
    0 0 0 2px color-mix(in srgb,var(--ink) 24%,transparent),
    inset 0 -2px 4px color-mix(in srgb,var(--ink) 22%,transparent);
}
.A-klingelschild .klt-knopf i{
  display:block;
  width:34%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--primary);
}
.A-klingelschild .klt-knopf-gross{
  width:clamp(34px,5.8vw,46px);
}
.A-klingelschild .klt-leer .klt-knopf i{
  background:color-mix(in srgb,var(--ink) 28%,transparent);
}

/* Das Preisschild daneben */
.A-klingelschild .klt-preisschild{
  position:relative;
  background:var(--hero);
  color:var(--on-hero);
  border:1px solid color-mix(in srgb,var(--on-hero) 22%,var(--hero));
  border-radius:calc(var(--r) / 2);
  padding:clamp(16px,2.6vw,26px) clamp(14px,2.2vw,22px);
  text-align:center;
}
.A-klingelschild .klt-preisschild small{
  display:block;
  font:700 .68rem/1.3 var(--font-b);
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.75;
}
.A-klingelschild .klt-preisschild b{
  display:block;
  margin:.35em 0 .2em;
  font:800 clamp(1.3rem,3.6vw,1.95rem)/1.1 var(--font-h);
  overflow-wrap:anywhere;
}
.A-klingelschild .klt-pz{
  display:block;
  font:600 .74rem/1.4 var(--font-b);
  letter-spacing:.1em;
  opacity:.82;
}
.A-klingelschild .klt-pf{
  display:block;
  margin-top:.9em;
  padding-top:.7em;
  border-top:1px solid color-mix(in srgb,var(--on-hero) 28%,var(--hero));
  font:600 .68rem/1.4 var(--font-b);
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.7;
}
/* Vier Schrauben in den Ecken */
.A-klingelschild .klt-schrauben i{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:color-mix(in srgb,var(--on-hero) 34%,var(--hero));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 55%,var(--hero));
}
.A-klingelschild .klt-schrauben i:nth-child(1){top:8px;left:8px}
.A-klingelschild .klt-schrauben i:nth-child(2){top:8px;right:8px}
.A-klingelschild .klt-schrauben i:nth-child(3){bottom:8px;left:8px}
.A-klingelschild .klt-schrauben i:nth-child(4){bottom:8px;right:8px}

.A-klingelschild .klt-text{
  max-width:900px;
  margin:clamp(16px,2.6vw,26px) auto 0;
  line-height:1.7;
}
.A-klingelschild .klt-sc{padding-top:10px}

@media(max-width:780px){
  .A-klingelschild .klt-in{grid-template-columns:1fr}
  .A-klingelschild .klt-preisschild{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:4px 14px;
    text-align:left;
  }
  .A-klingelschild .klt-preisschild b{margin:0}
  .A-klingelschild .klt-pf{
    width:100%;
    margin-top:.5em;
  }
}

/* --- Seitentyp: Luftpost --- */
/* --- Seitentyp: Luftpost --- */
/* Luftpostbrief: Umschlag mit schraffiertem Rand aus --primary und --accent, Absenderangaben
   links oben, Porto rechts oben, Aufkleber Par Avion, der Name als Empfaenger, Knickkanten;
   darunter der Briefbogen mit Text und Kaufzeile. */
.A-luftpost{background:var(--bg)}
.A-luftpost .lp{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}

.lp-umschlag{max-width:980px;margin:0 auto;padding:clamp(9px,1.5vw,14px);
  border:1px solid var(--line);border-radius:calc(var(--r) / 4);
  box-shadow:0 30px 58px -46px var(--ink);
  background:
    repeating-linear-gradient(45deg,
      var(--primary) 0 10px,
      transparent 10px 20px,
      var(--accent) 20px 30px,
      transparent 30px 40px),
    var(--surface)}
.lp-innen{container-type:inline-size;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:clamp(16px,2.8vw,30px);
  min-height:clamp(220px,32vw,320px);
  padding:clamp(18px,3.2vw,40px);background:var(--surface)}

/* Knickkanten: die beiden Deckellaschen oben, die Querfalte unten */
.lp-knick{position:absolute;pointer-events:none}
.lp-knick-l{left:0;top:0;width:30%;height:1px;transform-origin:left top;transform:rotate(27deg);
  background:color-mix(in srgb,var(--ink) 16%,transparent)}
.lp-knick-r{right:0;top:0;width:30%;height:1px;transform-origin:right top;transform:rotate(-27deg);
  background:color-mix(in srgb,var(--ink) 16%,transparent)}
.lp-knick-u{left:0;right:0;bottom:clamp(38px,7vw,68px);height:1px;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--ink) 18%,transparent) 0 9px,transparent 9px 17px)}

.lp-kopf{position:relative;z-index:1;display:flex;justify-content:space-between;
  align-items:flex-start;gap:clamp(14px,2.6vw,30px);flex-wrap:wrap}
.lp-absender{min-width:0;flex:1 1 220px;max-width:min(100%,300px);
  border-left:3px solid var(--accent);padding-left:clamp(10px,1.7vw,15px)}
.lp-abs-l{display:block;font:700 .58rem var(--font-b);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.lp-abs-n{margin:3px 0 9px;font:700 clamp(.95rem,2.2vw,1.1rem) var(--font-h);overflow-wrap:anywhere}
.lp-merkmale{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.lp-merkmale li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding-bottom:2px;border-bottom:1px dotted var(--line)}
.lp-merkmale span{font:600 .64rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lp-merkmale b{font:800 .88rem var(--font-h);overflow-wrap:anywhere;text-align:right}

.lp-porto{flex:none;text-align:center;min-width:clamp(104px,18cqw,160px);
  padding:clamp(8px,1.5vw,13px) clamp(10px,1.9vw,17px);
  border:2px solid color-mix(in srgb,var(--primary) 48%,transparent);border-radius:2px;
  background:color-mix(in srgb,var(--primary) 9%,var(--surface))}
.lp-porto-l{display:block;font:700 .56rem var(--font-b);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.lp-porto-w{display:block;margin:4px 0;font:900 clamp(1.02rem,3.4cqw,1.55rem)/1.1 var(--font-h);
  color:var(--primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.lp-porto-f{font:600 .6rem var(--font-b);letter-spacing:.14em;color:var(--muted)}

.lp-mitte{position:relative;z-index:1;margin-top:auto;display:flex;align-items:center;
  gap:clamp(14px,3vw,34px);flex-wrap:wrap}
.lp-aufkleber{flex:none;margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:clamp(6px,1.2vw,11px) clamp(11px,2.1vw,20px);border-radius:2px;
  background:var(--primary);color:var(--on-primary);transform:rotate(-4deg);
  box-shadow:0 10px 18px -14px var(--ink)}
.lp-flug{display:block;width:clamp(17px,2.8vw,24px);height:auto;max-width:none}
.lp-pa{font:800 clamp(.78rem,1.9vw,1rem) var(--font-h);letter-spacing:.18em;text-transform:uppercase}
.lp-lp{font:600 .56rem var(--font-b);letter-spacing:.26em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-primary) 78%,var(--primary))}

.lp-empfaenger{flex:1 1 240px;min-width:0}
.lp-an{display:block;font:700 .6rem var(--font-b);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.lp-name{margin:.12em 0 .2em;padding-bottom:.18em;
  font:800 clamp(1.45rem,6.6cqw,3rem)/1.06 var(--font-h);letter-spacing:-.015em;
  overflow-wrap:anywhere;border-bottom:1px solid var(--line)}
.lp-zeile{margin:0;font-size:clamp(.94rem,2.1vw,1.08rem);line-height:1.55;color:var(--muted)}

.lp-bogen{max-width:880px;margin:clamp(12px,2.2vw,22px) auto 0;
  padding:clamp(18px,3vw,34px);background:var(--surface);
  border:1px solid var(--line);border-top:3px double var(--line);
  border-radius:0 0 calc(var(--r) / 2) calc(var(--r) / 2);
  box-shadow:0 22px 44px -40px var(--ink)}
.lp-text{margin:0 0 6px;line-height:1.75}
.A-luftpost .ab-l,.A-luftpost .ab-p{display:none}
.lp-fuss{margin:clamp(16px,2.6vw,24px) 0 0;font:600 .72rem var(--font-b);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}

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

@media (max-width:780px){
  .lp-umschlag{padding:7px}
  .lp-innen{min-height:0;gap:18px}
  .lp-kopf{flex-direction:column;align-items:stretch}
  .lp-absender{max-width:none;flex:0 0 auto}
  .lp-porto{align-self:flex-start}
  .lp-knick-l,.lp-knick-r,.lp-knick-u{display:none}
  .lp-mitte{gap:14px}
}

/* --- Seitentyp: Ausmalbild --- */
/* Malbuch: Ausmalbild mit dicker Umrisskontur, nummerierten Feldern und Malkasten */

.A-malbuch{
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb,var(--ink) 5%,transparent) 0 1px, transparent 1px 26px),
    var(--bg);
}
.A-malbuch .mbu{
  display:flex;
  align-items:flex-start;
  gap:clamp(18px,3vw,34px);
  padding-top:clamp(28px,4.5vw,62px);
  padding-bottom:clamp(24px,4vw,52px);
}

/* --- das Blatt ----------------------------------------------------------- */
.mbu-blatt{
  container-type:inline-size;
  position:relative;
  flex:1 1 420px;
  min-width:0;
  background:var(--surface);
  border:3px solid var(--ink);
  border-radius:var(--r);
  padding:clamp(18px,3vw,34px);
}
.mbu-kopf{
  position:relative;
  margin:0 0 14px;
  font:700 .72rem/1.4 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}

/* über den Rand gemalte Stellen */
.mbu-kleckse{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.mbu-kleckse i{
  position:absolute;
  display:block;
  border-radius:58% 42% 61% 39% / 47% 56% 44% 53%;
}
.mbu-kl1{
  left:-26px;
  top:16%;
  width:92px;
  height:62px;
  background:color-mix(in srgb,var(--accent) 48%,transparent);
  rotate:-14deg;
}
.mbu-kl2{
  right:-20px;
  top:52%;
  width:74px;
  height:88px;
  background:color-mix(in srgb,var(--primary) 34%,transparent);
  rotate:9deg;
}
.mbu-kl3{
  left:18%;
  bottom:-22px;
  width:120px;
  height:46px;
  background:color-mix(in srgb,var(--primary) 26%,var(--accent));
  opacity:.42;
  rotate:-4deg;
}
.mbu-strich{
  position:absolute;
  right:-34px;
  top:-26px;
  width:210px;
  max-width:none;
  height:auto;
  color:color-mix(in srgb,var(--accent) 62%,transparent);
  rotate:7deg;
}

/* --- die Kontur ---------------------------------------------------------- */
.mbu-kontur{
  position:relative;
  z-index:1;
  margin:0;
  letter-spacing:normal;
}
.mbu-sr{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.mbu-reihe{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  overflow-wrap:anywhere;
}
.mbu-b{
  font:900 clamp(2.2rem, calc(155cqw / var(--mbu-n, 8)), 7.5rem)/1.04 var(--font-h);
  letter-spacing:.012em;
  color:transparent;
  -webkit-text-stroke:.085em var(--ink);
  paint-order:stroke fill;
}
/* 0 = gar nicht ausgemalt, 1 = kräftig, 2 = nur halb, 3 = gemischt */
.mbu-g1{color:var(--primary)}
.mbu-g2{
  background-image:linear-gradient(to top, color-mix(in srgb,var(--accent) 78%,var(--surface)) 0 56%, transparent 56%);
  -webkit-background-clip:text;
  background-clip:text;
}
.mbu-g3{color:color-mix(in srgb,var(--primary) 52%,var(--accent))}
.mbu-endung{
  font-size:clamp(1.1rem, calc(52cqw / var(--mbu-n, 8)), 2.6rem);
  -webkit-text-stroke-width:.07em;
  margin-left:.08em;
  padding-bottom:.18em;
}
.mbu-lead{
  position:relative;
  z-index:1;
  margin:14px 0 0;
  max-width:46ch;
  font-size:clamp(1rem,1.5vw,1.14rem);
  color:var(--ink);
  overflow-wrap:anywhere;
}

/* --- nummerierte Felder -------------------------------------------------- */
.mbu-felder{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:clamp(22px,3.4vw,38px);
}
.mbu-feld{
  --mbu-c:var(--primary);
  position:relative;
  border:3px solid var(--ink);
  border-radius:22px 34px 20px 30px / 30px 20px 32px 22px;
  background:color-mix(in srgb,var(--mbu-c) 20%,var(--surface));
  padding:18px 16px 16px 50px;
  min-width:0;
}
.mbu-feld:nth-child(2n){
  border-radius:30px 20px 34px 22px / 22px 32px 20px 30px;
  rotate:.7deg;
}
.mbu-feld:nth-child(3n){rotate:-.8deg}
.mbu-nr{
  position:absolute;
  left:10px;
  top:13px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:3px solid var(--mbu-c);
  border-radius:50%;
  background:var(--surface);
  color:var(--ink);
  font:800 .95rem/1 var(--font-h);
}
.mbu-feld h2{
  margin:0 0 .25em;
  font:800 1rem/1.2 var(--font-h);
  color:var(--ink);
}
.mbu-feld p{
  margin:0;
  font-size:.88rem;
  line-height:1.5;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.mbu-c1{--mbu-c:var(--primary)}
.mbu-c2{--mbu-c:color-mix(in srgb,var(--primary) 50%,var(--accent))}
.mbu-c3{--mbu-c:color-mix(in srgb,var(--accent) 38%,var(--surface))}
.mbu-c4{--mbu-c:var(--hero)}
.mbu-c5{--mbu-c:var(--line)}
/* das noch leere Feld trägt den Preis */
.mbu-leer{
  grid-column:span 2;
  background:var(--surface);
  border-style:dashed;
  border-radius:28px 22px 32px 24px / 24px 30px 22px 28px;
  rotate:-.4deg;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 14px;
  padding-left:52px;
}
.mbu-leer .mbu-nr{border-style:dashed;border-color:var(--ink)}
.mbu-leer h2{
  margin:0;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  flex:0 0 100%;
}
.mbu-preis{
  font:900 clamp(1.7rem,6cqw,2.8rem)/1 var(--font-h);
  letter-spacing:-.03em;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.mbu-rate{font:600 .9rem/1.3 var(--font-b);color:var(--primary)}
.mbu-hinweis{
  margin-left:auto;
  font:700 .7rem/1.3 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}

.mbu-text{
  position:relative;
  z-index:1;
  margin:clamp(20px,3vw,32px) 0 0;
  max-width:64ch;
  overflow-wrap:anywhere;
}
.A-malbuch .mbu-blatt .custom{position:relative;z-index:1;font-size:.94rem}
.A-malbuch .mbu-blatt .ab{position:relative;z-index:1}

/* --- Malkasten ----------------------------------------------------------- */
.mbu-kasten{
  flex:0 0 232px;
  position:sticky;
  top:88px;
  background:var(--surface);
  border:3px solid var(--ink);
  border-radius:var(--r);
  padding:16px 16px 18px;
}
.mbu-kt{
  margin:0 0 12px;
  font:800 .78rem/1.3 var(--font-h);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink);
}
.mbu-legende{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.mbu-legende li{
  display:flex;
  align-items:center;
  gap:11px;
  font:700 .92rem/1.2 var(--font-b);
  color:var(--ink);
}
.mbu-stift{
  flex:0 0 auto;
  width:16px;
  height:54px;
  background:var(--mbu-c);
  clip-path:polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent);
}
.mbu-ohne{
  background:repeating-linear-gradient(45deg, color-mix(in srgb,var(--ink) 26%,transparent) 0 4px, transparent 4px 9px);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 40%,transparent);
}
.mbu-note{
  margin:14px 0 0;
  font-size:.78rem;
  line-height:1.5;
  color:var(--muted);
}

.A-malbuch .mbu-sc{padding-top:8px}

@media (max-width:780px){
  .A-malbuch .mbu{flex-direction:column}
  .mbu-blatt{flex:0 1 auto;width:100%}
  .mbu-kasten{flex:0 1 auto;width:100%;position:static}
  .mbu-legende{grid-template-columns:1fr 1fr}
  .mbu-felder{grid-template-columns:1fr}
  .mbu-leer{grid-column:auto}
  .mbu-kl1{left:-14px;width:62px;height:44px}
  .mbu-kl2{right:-12px;width:50px;height:62px}
  .mbu-strich{right:-16px;width:140px}
}

/* --- Seitentyp: Netzplan --- */
/* Netzplan: ein U-Bahn-Plan. Drei Linien laufen im 45-Grad-Raster als Inline-SVG durch
   das Feld, die Haltepunkte sitzen darauf. Der Domainname ist die Endstation mit dem
   groessten Punkt, die Merkmale sind Zwischenstationen, der Preis haengt an der
   Umsteigestation. Darunter eine Legende mit den Linienkuerzeln.
   Linienfuehrung, Reihenfolge der Halte und Farbzuordnung kommen aus dem Namen der Domain.
   Die Endstation liegt immer links, damit sie auf schmalen Fenstern zuerst im Bild steht. */
.A-netzplan{background:var(--bg)}
.A-netzplan .nzp{
  padding-top:clamp(22px,3.8vw,56px);
  padding-bottom:clamp(20px,3.4vw,44px);
  max-width:1060px;
  margin-left:auto;
  margin-right:auto;
}
.A-netzplan .nzp-kopf{
  margin:0 0 clamp(8px,1.4vw,14px);
  font:700 .68rem/1.4 var(--font-b);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-netzplan .nzp-wisch{display:none}

.A-netzplan .nzp-scroll{overflow-x:auto;overflow-y:hidden}
.A-netzplan .nzp-feld{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:clamp(30px,4.6vw,58px) clamp(44px,8vw,100px) clamp(46px,6.6vw,78px);
}
.A-netzplan .nzp-karte{
  position:relative;
  container-type:inline-size;
  aspect-ratio:120 / 80;
}
/* Das SVG liegt frei im Feld; max-width:none, damit die Regel img,svg{max-width:100%}
   es in keiner Umgebung einschnuert. */
.A-netzplan .nzp-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  overflow:visible;
}

/* Linien und Punkte. Die Farbe kommt ueber currentColor aus den drei Linienklassen. */
.A-netzplan .nzp-f1{color:var(--primary)}
.A-netzplan .nzp-f2{color:var(--accent)}
.A-netzplan .nzp-f3{color:color-mix(in srgb,var(--primary) 45%,var(--accent))}
.A-netzplan .nzp-linie{
  fill:none;
  stroke:currentColor;
  stroke-width:3.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.A-netzplan .nzp-punkt{
  fill:var(--surface);
  stroke:currentColor;
  stroke-width:1.9;
}
.A-netzplan .nzp-ende{fill:currentColor;stroke:none}
.A-netzplan .nzp-kern{fill:var(--surface);stroke:none}
.A-netzplan .nzp-um{
  fill:var(--surface);
  stroke:var(--ink);
  stroke-width:2.4;
}

/* Die Beschriftungen liegen als Text ueber der Karte, damit sie umbrechen koennen.
   Die Groesse richtet sich nach der Karte, nicht nach dem Fenster. */
.A-netzplan .nzp-schild{
  position:absolute;
  display:block;
  width:max-content;
  max-width:clamp(120px,24cqw,230px);
  line-height:1.25;
}
.A-netzplan .nzp-schild b{
  display:block;
  font:700 clamp(.78rem,1.9cqw,1rem)/1.25 var(--font-h);
  overflow-wrap:anywhere;
}
.A-netzplan .nzp-schild small{
  display:block;
  font:600 clamp(.56rem,1.3cqw,.7rem)/1.4 var(--font-b);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.A-netzplan .nzp-no{transform:translate(-50%,calc(-100% - 4.3cqw));text-align:center}
.A-netzplan .nzp-su{transform:translate(-50%,4.3cqw);text-align:center}
.A-netzplan .nzp-ur{transform:translate(3.4cqw,2.8cqw)}
.A-netzplan .nzp-ul{transform:translate(calc(-100% - 3.4cqw),2.8cqw)}
/* Endstation und Umsteigestation haben groessere Punkte, ihre Schilder ruecken weiter ab */
.A-netzplan .nzp-endschild.nzp-no{transform:translate(-50%,calc(-100% - 6.6cqw))}
.A-netzplan .nzp-endschild.nzp-su{transform:translate(-50%,6.6cqw)}
.A-netzplan .nzp-preis.nzp-ur{transform:translate(4.6cqw,3.8cqw)}
.A-netzplan .nzp-preis.nzp-ul{transform:translate(calc(-100% - 4.6cqw),3.8cqw)}

/* Die Endstation traegt den Domainnamen */
.A-netzplan .nzp-endschild{
  max-width:clamp(150px,27cqw,290px);
}
.A-netzplan .nzp-endschild small{
  color:var(--primary);
  letter-spacing:.22em;
}
.A-netzplan .nzp-name{
  margin:.2em 0 0;
  font:800 clamp(1.1rem,3.6cqw,2.1rem)/1.06 var(--font-h);
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.A-netzplan .nzp-lead{
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:.35em;
  font:500 clamp(.68rem,1.5cqw,.86rem)/1.45 var(--font-b);
  color:var(--muted);
}

/* Der Preis an der Umsteigestation */
.A-netzplan .nzp-preis{
  background:var(--hero);
  color:var(--on-hero);
  border-radius:calc(var(--r) / 2);
  padding:clamp(7px,1.3cqw,12px) clamp(10px,1.8cqw,16px);
  max-width:clamp(130px,26cqw,250px);
  border:1px solid color-mix(in srgb,var(--on-hero) 30%,var(--hero));
}
.A-netzplan .nzp-preis small{
  color:inherit;
  opacity:.72;
  letter-spacing:.2em;
}
.A-netzplan .nzp-preis b{
  margin:.2em 0 .1em;
  font-size:clamp(.95rem,2.6cqw,1.45rem);
}
.A-netzplan .nzp-preis>span{
  display:block;
  font:600 clamp(.6rem,1.3cqw,.74rem)/1.4 var(--font-b);
  letter-spacing:.08em;
  opacity:.8;
}

/* Legende mit den Linienkuerzeln */
.A-netzplan .nzp-legende{
  list-style:none;
  margin:clamp(14px,2.2vw,22px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(8px,1.4vw,14px);
}
.A-netzplan .nzp-legende li{
  display:flex;
  align-items:center;
  gap:9px;
  padding:clamp(8px,1.3vw,12px) clamp(10px,1.6vw,15px);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 2);
  background:var(--surface);
  min-width:0;
}
.A-netzplan .nzp-balken{
  flex:none;
  width:26px;
  height:7px;
  border-radius:4px;
  background:currentColor;
}
.A-netzplan .nzp-legende b{
  font:800 .92rem/1 var(--font-h);
  letter-spacing:.02em;
  flex:none;
}
.A-netzplan .nzp-legende span{
  font:600 .82rem/1.3 var(--font-b);
  color:var(--ink);
  min-width:0;
  overflow-wrap:anywhere;
}
.A-netzplan .nzp-legende small{
  margin-left:auto;
  flex:none;
  font:600 .66rem/1.3 var(--font-b);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.A-netzplan .nzp-text{
  margin-top:clamp(16px,2.6vw,26px);
  line-height:1.7;
}
.A-netzplan .nzp-sc{padding-top:10px}

@media(max-width:780px){
  /* Der Plan braucht Breite: auf schmalen Fenstern wird er seitlich geschoben
     statt gestaucht, damit die 45-Grad-Fuehrung und die Schilder lesbar bleiben. */
  .A-netzplan .nzp-feld{
    min-width:620px;
    padding:clamp(28px,6vw,44px) clamp(34px,8vw,60px);
  }
  .A-netzplan .nzp-legende{grid-template-columns:1fr}
  .A-netzplan .nzp-wisch{display:inline}
  .A-netzplan .nzp-wisch::before{content:" · "}
}

/* --- Seitentyp: Paketschein --- */
/* --- Seitentyp: Paketschein --- */
/* Breiter Paketaufkleber: Traegerzeile, Empfaenger in Versalien neben dem Nachnahmebetrag,
   Rasterfelder fuer Gewicht, Format und Zustellart, darunter der grosse Barcode aus
   CSS-Streifen mit der Sendungsnummer. Die Rasterfugen entstehen aus box-shadow je Feld. */
.A-paketschein{background:var(--bg)}
.A-paketschein .pz{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}

.pz-schein{container-type:inline-size;max-width:1080px;margin:0 auto;overflow:hidden;
  background:var(--surface);border:1px solid var(--ink);border-radius:2px;
  box-shadow:0 26px 52px -44px var(--ink)}

.pz-traeger{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:6px 18px;padding:clamp(8px,1.5vw,13px) clamp(14px,2.4vw,26px);
  background:var(--hero);color:var(--on-hero);
  font:700 clamp(.62rem,1.5vw,.74rem) var(--font-b);letter-spacing:.2em;text-transform:uppercase}
.pz-marke{font-weight:900;letter-spacing:.26em}
.pz-art{color:color-mix(in srgb,var(--on-hero) 70%,var(--hero))}
.pz-tag{font-variant-numeric:tabular-nums}

.pz-l{display:block;font:700 .6rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

.pz-oben{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  gap:clamp(14px,2.6vw,32px);
  padding:clamp(16px,2.8vw,30px) clamp(14px,2.4vw,26px);border-bottom:2px solid var(--ink)}
.pz-ziel{min-width:0}
.pz-name{margin:.1em 0 .22em;font:900 clamp(1.35rem,7.2cqw,3rem)/1.02 var(--font-h);
  letter-spacing:-.008em;overflow-wrap:anywhere}
.pz-zeile{margin:0;font-size:clamp(.92rem,2vw,1.05rem);line-height:1.55;color:var(--muted)}
.pz-nachnahme{flex:none;text-align:right;
  padding:clamp(8px,1.5vw,13px) clamp(10px,1.9vw,17px);
  border:2px solid var(--primary);border-radius:2px;
  background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
.pz-betrag{display:block;margin:4px 0;font:900 clamp(1.05rem,3.6cqw,1.75rem)/1.1 var(--font-h);
  color:var(--primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pz-f{font:600 .62rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Rasterfugen: je Feld eine 1px-Kontur als box-shadow, damit kein eingefaerbter Grund
   durch gap-Spalten scheint und die Fugen auch am Rand gleich breit bleiben. */
.pz-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.pz-feld{position:relative;background:var(--surface);box-shadow:0 0 0 1px var(--line);
  padding:clamp(10px,1.8vw,16px) clamp(14px,2.4vw,26px)}
.pz-feld b{display:block;margin-top:3px;font:800 clamp(.98rem,2.2vw,1.18rem) var(--font-h);overflow-wrap:anywhere}

.pz-codeblock{padding:clamp(14px,2.4vw,26px);border-top:2px solid var(--ink)}
.pz-code{display:flex;align-items:stretch;width:100%;height:clamp(54px,9vw,96px)}
.pz-s{flex:2 1 0;min-width:0;background:var(--ink)}
.pz-luft{background:transparent}
.pz-w1{flex-grow:2}
.pz-w2{flex-grow:3}
.pz-w3{flex-grow:5}
.pz-w4{flex-grow:8}
.pz-nr{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 16px;margin:11px 0 0}
.pz-nr b{font:800 clamp(.92rem,2.4vw,1.22rem) var(--font-b);letter-spacing:.24em;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.pz-begleit{max-width:1080px;margin:clamp(16px,2.6vw,28px) auto 0}
.pz-text{margin:0 0 6px;line-height:1.75}
.A-paketschein .ab-l,.A-paketschein .ab-p{display:none}

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

@media (max-width:780px){
  .pz-oben{grid-template-columns:minmax(0,1fr);gap:14px}
  .pz-nachnahme{text-align:left;justify-self:stretch}
  .pz-code{height:clamp(44px,13vw,64px)}
  .pz-nr b{letter-spacing:.16em}
}

/* --- Seitentyp: Bügelperlen --- */
/* Perlenbild: Bügelperlen auf der Stiftplatte, Anfangsbuchstaben als Pixelschrift */

.A-perlenbild{
  --pbd-brett:color-mix(in srgb,var(--ink) 9%,var(--surface));
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--ink) 9%,transparent) 0 1.4px, transparent 1.6px) 0 0/13px 13px,
    var(--bg);
}
.A-perlenbild .pbd{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(18px,3vw,34px);
  padding-top:clamp(24px,4vw,56px);
  padding-bottom:clamp(22px,3.5vw,44px);
}

/* --- die Stiftplatte ----------------------------------------------------- */
.pbd-tafel{
  container-type:inline-size;
  flex:1 1 430px;
  min-width:0;
}
.pbd-motiv,
.pbd-unter{
  margin:0;
  font:700 .7rem/1.4 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.pbd-motiv{margin-bottom:10px}
.pbd-unter{margin-top:10px;text-transform:none;letter-spacing:.02em;font-weight:600;font-size:.8rem}
.pbd-platte{
  display:grid;
  grid-template-columns:repeat(var(--pbd-c,15),1fr);
  gap:0;
  padding:calc(100cqw / var(--pbd-c,15) * .5);
  background:var(--pbd-brett);
  border-radius:calc(var(--r) / 2);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--ink) 20%,transparent),
    inset 0 0 0 2px color-mix(in srgb,var(--ink) 6%,transparent);
}
.pbd-perle{position:relative;display:block}
.pbd-p{aspect-ratio:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent)}
/* der Perlenkörper */
.pbd-perle::before{
  content:"";
  position:absolute;
  inset:6%;
  border-radius:50%;
  background:var(--pbd-f,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent);
}
/* das Loch, durch das die Platte scheint */
.pbd-perle::after{
  content:"";
  position:absolute;
  inset:37%;
  border-radius:50%;
  background:var(--pbd-brett);
}
.pbd-k1{--pbd-f:var(--primary)}
.pbd-k2{--pbd-f:var(--accent)}
.pbd-k3{--pbd-f:color-mix(in srgb,var(--primary) 45%,var(--accent))}
.pbd-k4{--pbd-f:color-mix(in srgb,var(--accent) 28%,var(--surface))}
/* leerer Platz: nur der nackte Stift */
.pbd-k0::before{
  inset:37%;
  background:color-mix(in srgb,var(--ink) 20%,transparent);
  box-shadow:none;
}
.pbd-k0::after{display:none}

/* --- Legende ------------------------------------------------------------- */
.pbd-seite{
  flex:0 0 272px;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:5px solid var(--primary);
  border-radius:calc(var(--r) / 1.6);
  padding:clamp(14px,2vw,20px);
}
.pbd-kl{
  margin:0;
  font:700 .68rem/1.4 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.A-perlenbild .pbd-name{
  margin:.2em 0 0;
  font:800 clamp(1.4rem,3.4vw,2.05rem)/1.06 var(--font-h);
  letter-spacing:-.02em;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.pbd-tld{color:var(--primary);font-weight:700}
.pbd-lead{
  margin:.4em 0 0;
  font-size:.9rem;
  line-height:1.5;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.pbd-lt{
  margin:18px 0 8px;
  font:800 .7rem/1.3 var(--font-h);
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--ink);
  border-top:1px solid var(--line);
  padding-top:12px;
}
.pbd-legende{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:7px;
}
.pbd-legende li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.86rem;
}
.pbd-sw{
  flex:0 0 auto;
  width:22px;
  height:22px;
}
.pbd-legende b{font-weight:700;color:var(--ink)}
.pbd-legende em{
  margin-left:auto;
  font-style:normal;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--muted);
}
.pbd-summe{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:12px 0 0;
  padding-top:9px;
  border-top:1px dashed var(--line);
  font:700 .8rem/1.3 var(--font-b);
  color:var(--muted);
}
.pbd-summe b{
  margin-left:auto;
  font:800 1.1rem/1 var(--font-h);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.pbd-kosten{
  margin-top:14px;
  padding-top:11px;
  border-top:3px double var(--ink);
  display:grid;
  gap:2px;
}
.pbd-kosten span{
  font:800 .68rem/1.3 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
.pbd-kosten b{
  font:900 clamp(1.4rem,3.8vw,2rem)/1.05 var(--font-h);
  letter-spacing:-.03em;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.pbd-kosten small{font:600 .82rem/1.3 var(--font-b);color:var(--primary)}

/* --- Text und Merkmale --------------------------------------------------- */
.pbd-text{
  flex:1 1 100%;
  min-width:0;
  max-width:68ch;
}
.pbd-text>p{margin:0 0 1em;overflow-wrap:anywhere}
.A-perlenbild .pbd-text .custom{font-size:.95rem}
.pbd-merk{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px;
}
.pbd-merk li{
  display:grid;
  gap:2px;
  padding:10px 12px;
  background:var(--surface);
  border-radius:calc(var(--r) / 2);
  box-shadow:0 0 0 1px var(--line);
}
.pbd-merk b{
  font:800 .76rem/1.2 var(--font-h);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--primary);
}
.pbd-merk span{font-size:.85rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.A-perlenbild .pbd-sc{padding-top:8px}

@media (max-width:780px){
  .A-perlenbild .pbd{flex-direction:column;gap:20px}
  .pbd-tafel{flex:0 1 auto;width:100%}
  .pbd-seite{flex:0 1 auto;width:100%}
  .pbd-text{flex:0 1 auto;width:100%}
  .pbd-merk{grid-template-columns:1fr}
  .pbd-platte{padding:calc(100cqw / var(--pbd-c,15) * .3)}
}

/* --- Seitentyp: Postkarte --- */
/* --- Seitentyp: Postkarte --- */
/* Postkarte, Rueckseite: links der handgeschriebene Gruss mit dem Namen als Anrede,
   senkrechte Trennlinie in der Mitte, rechts Markenfeld mit dem Preis, Poststempel
   und das Adressfeld mit Linien. */
.A-postkarte{background:
  radial-gradient(70% 55% at 8% 0,color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%),
  var(--bg)}
.A-postkarte .pk{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}

.pk-karte{container-type:inline-size;max-width:1060px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.12fr) 1px minmax(0,.88fr);
  gap:clamp(16px,2.8vw,36px);
  background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) / 2);
  padding:clamp(20px,3.4vw,46px);box-shadow:0 30px 60px -46px var(--ink)}

/* linke Haelfte: Handschrift */
.pk-seite{min-width:0}
.pk-ort{margin:0 0 .6em;font:600 .72rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pk-anrede{margin:0 0 .3em;font:400 clamp(1.45rem,7cqw,2.6rem)/1.25 var(--font-h);font-style:italic;
  letter-spacing:.012em;overflow-wrap:anywhere;transform:rotate(-1deg);transform-origin:left center}
.pk-hallo{font-size:.62em;color:var(--muted);margin-right:.25em}
.pk-komma{color:var(--muted)}
.pk-gruss{margin:0 0 .8em;font:400 clamp(1.02rem,2.4vw,1.24rem)/1.6 var(--font-h);font-style:italic;
  color:var(--ink);transform:rotate(.35deg);transform-origin:left center}
.pk-text{margin:0 0 6px;font-family:var(--font-h);font-style:italic;line-height:1.85;
  color:color-mix(in srgb,var(--ink) 86%,var(--surface));transform:rotate(-.25deg);transform-origin:left center}
.A-postkarte .desc.custom{font-family:var(--font-h);font-style:italic;line-height:1.85}
.pk-schluss{margin:1.1em 0 0;font:400 clamp(1rem,2.3vw,1.18rem) var(--font-h);font-style:italic;
  transform:rotate(.9deg);transform-origin:left center}
.pk-zug{display:block;width:clamp(86px,17vw,148px);height:26px;margin:2px 0 0;
  transform:rotate(-2.5deg);
  border-bottom:2px solid color-mix(in srgb,var(--primary) 72%,transparent);
  border-left:2px solid color-mix(in srgb,var(--primary) 50%,transparent);
  border-radius:0 0 0 92%}
.A-postkarte .ab-l,.A-postkarte .ab-p{display:none}

/* Trennlinie in der Mitte */
.pk-teiler{background:repeating-linear-gradient(180deg,
  color-mix(in srgb,var(--line) 95%,var(--ink)) 0 7px,transparent 7px 14px)}

/* rechte Haelfte: Marke, Stempel, Anschrift */
.pk-post{display:flex;flex-direction:column;min-width:0}
.pk-kopf{display:flex;justify-content:flex-end;align-items:flex-start;gap:clamp(6px,1.4vw,14px)}
.pk-stempel{order:1;position:relative;z-index:2;flex:none;overflow:hidden;
  width:clamp(82px,15cqw,118px);aspect-ratio:1;padding:0 7%;
  display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;
  gap:1px;text-align:center;
  border:2px solid color-mix(in srgb,var(--ink) 52%,transparent);border-radius:50%;
  color:color-mix(in srgb,var(--ink) 68%,transparent);
  background:color-mix(in srgb,var(--surface) 65%,transparent);
  transform:rotate(-11deg);margin-top:clamp(12px,2.4vw,22px);margin-right:clamp(-26px,-3.4vw,-12px)}
.pk-stempel::before{content:"";position:absolute;inset:6px;border:1px dashed currentColor;border-radius:50%}
.pk-stempel-o{max-width:100%;white-space:nowrap;font:900 clamp(.72rem,1.8cqw,1rem)/1.05 var(--font-h);letter-spacing:.03em}
.pk-stempel-d{white-space:nowrap;font:700 clamp(.5rem,1.3cqw,.6rem) var(--font-b);letter-spacing:.1em}
.pk-stempel-u{white-space:nowrap;font:600 clamp(.42rem,1.1cqw,.52rem) var(--font-b);letter-spacing:.1em;text-transform:uppercase}
.pk-marke{order:2;position:relative;z-index:1;flex:none;
  width:clamp(100px,19cqw,146px);aspect-ratio:4/5;padding:clamp(7px,1.4vw,11px);
  display:flex;flex-direction:column;justify-content:space-between;text-align:center;
  border:2px dashed color-mix(in srgb,var(--line) 70%,var(--ink));border-radius:3px;
  background:color-mix(in srgb,var(--accent) 13%,var(--surface))}
.pk-marke-l{font:700 .56rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pk-wert{font:800 clamp(.9rem,2.6vw,1.3rem)/1.12 var(--font-h);color:var(--primary);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pk-marke-f{font:700 .62rem var(--font-b);letter-spacing:.14em;color:var(--muted)}

.pk-an{margin:clamp(16px,2.6vw,26px) 0 10px;font:700 .62rem var(--font-b);
  letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.pk-anschrift{margin:0;display:grid;gap:clamp(11px,1.9vw,17px)}
.pk-linie{display:flex;align-items:baseline;gap:10px;padding-bottom:5px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 80%,var(--ink))}
.pk-linie dt{flex:none;width:7.2em;font:700 .6rem var(--font-b);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.pk-linie dd{flex:1;min-width:0;margin:0;font:700 clamp(.98rem,2.3vw,1.18rem) var(--font-h);overflow-wrap:anywhere}
.pk-code{margin:auto 0 0;padding-top:clamp(12px,2vw,18px);
  font:600 .72rem var(--font-b);letter-spacing:.44em;color:var(--muted);overflow-wrap:anywhere}

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

@media (max-width:780px){
  .pk-karte{grid-template-columns:minmax(0,1fr);gap:clamp(14px,3vw,20px)}
  .pk-teiler{height:1px;background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--line) 95%,var(--ink)) 0 7px,transparent 7px 14px)}
  .pk-kopf{justify-content:flex-start}
  .pk-stempel{margin-right:clamp(-22px,-5vw,-10px)}
  .pk-linie{flex-direction:column;align-items:stretch;gap:1px}
  .pk-linie dt{width:auto}
  .pk-anrede,.pk-gruss,.pk-text,.pk-schluss{transform:none}
}

/* --- Seitentyp: Sammelalbum --- */
/* Sammelalbum: Albumseite mit Klebefeldern im Raster, eingeklebten Stickern und zwei freien Plätzen */

.A-sammelalbum{
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb,var(--ink) 4%,transparent) 0 3px, transparent 3px 9px),
    color-mix(in srgb,var(--ink) 6%,var(--bg));
}
.A-sammelalbum .sab{
  display:flex;
  justify-content:center;
  padding-top:clamp(22px,4vw,52px);
  padding-bottom:clamp(20px,3vw,40px);
}

/* --- die Albumseite ------------------------------------------------------ */
.sab-seite{
  position:relative;
  width:100%;
  max-width:900px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:0 clamp(16px,3vw,32px) clamp(18px,3vw,30px) clamp(50px,7vw,78px);
  box-shadow:0 10px 26px -22px color-mix(in srgb,var(--ink) 55%,transparent);
  overflow:hidden;
}
/* Heftrand mit Lochung */
.sab-seite::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:clamp(34px,5vw,56px);
  background:
    radial-gradient(circle at 50% 50%, var(--bg) 0 7px, color-mix(in srgb,var(--ink) 26%,transparent) 7px 8.5px, transparent 9px) 0 10px/100% 96px repeat-y,
    color-mix(in srgb,var(--ink) 5%,var(--surface));
  border-right:1px dashed color-mix(in srgb,var(--line) 95%,transparent);
  pointer-events:none;
}

/* Kopf als eigene Bahn, deshalb Text auf --on-hero */
.sab-kopf{
  margin:0 clamp(-32px,-3vw,-16px) clamp(18px,2.6vw,28px) clamp(-78px,-7vw,-50px);
  padding:clamp(16px,2.6vw,26px) clamp(16px,3vw,32px) clamp(16px,2.6vw,26px) clamp(50px,7vw,78px);
  background:var(--hero);
  color:var(--on-hero);
  border-bottom:3px solid color-mix(in srgb,var(--on-hero) 22%,var(--hero));
}
.sab-serie{
  display:block;
  font:800 .7rem/1.3 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.2em;
  opacity:.8;
}
.A-sammelalbum .sab-name{
  margin:.18em 0 0;
  font:800 clamp(1.8rem,5.6vw,3.2rem)/1.04 var(--font-h);
  letter-spacing:-.025em;
  color:var(--on-hero);
  overflow-wrap:anywhere;
}
.sab-tld{color:color-mix(in srgb,var(--on-hero) 62%,var(--hero));font-weight:700}
.sab-lead{
  margin:.4em 0 0;
  max-width:54ch;
  font-size:clamp(.95rem,1.4vw,1.08rem);
  color:color-mix(in srgb,var(--on-hero) 82%,var(--hero));
  overflow-wrap:anywhere;
}

/* --- Raster der Klebefelder ---------------------------------------------- */
.sab-raster{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.6vw,18px);
}
.sab-feld{
  position:relative;
  display:grid;
  place-items:center;
  min-height:clamp(118px,15vw,168px);
  padding:7px;
  border-radius:calc(var(--r) / 1.4);
  background:color-mix(in srgb,var(--ink) 4%,var(--surface));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 14%,transparent) inset;
}
.sab-frei{
  background:none;
  box-shadow:none;
  border:2px dashed color-mix(in srgb,var(--ink) 34%,transparent);
  gap:6px;
  align-content:center;
}
.sab-fl{
  font:800 .74rem/1.3 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.sab-frei small{
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.12em;
  color:color-mix(in srgb,var(--muted) 72%,transparent);
}

/* --- die Sticker --------------------------------------------------------- */
.sab-st{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:3px;
  width:100%;
  height:100%;
  padding:11px 11px 12px;
  border:4px solid var(--surface);
  border-radius:calc(var(--r) / 1.6);
  background:color-mix(in srgb,var(--primary) 12%,var(--surface));
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent),
    0 4px 9px -7px color-mix(in srgb,var(--ink) 50%,transparent);
  overflow:hidden;
}
.sab-st small{
  font:800 .6rem/1 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.sab-st b{
  font:800 .98rem/1.2 var(--font-h);
  color:var(--ink);
  overflow-wrap:anywhere;
}
.sab-st>span{
  font-size:.8rem;
  line-height:1.42;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.sab-s1{background:color-mix(in srgb,var(--primary) 13%,var(--surface));rotate:-1.3deg}
.sab-s2{background:color-mix(in srgb,var(--accent) 22%,var(--surface));rotate:1.1deg}
.sab-s3{background:color-mix(in srgb,var(--accent) 10%,color-mix(in srgb,var(--primary) 8%,var(--surface)));rotate:-.6deg}
.sab-kurz{justify-content:space-between}
.sab-st>span.sab-gross{
  font:900 clamp(1.3rem,3.6vw,2rem)/1 var(--font-h);
  color:var(--primary);
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}

/* --- der glänzende Sticker in der Mitte ---------------------------------- */
.sab-mitte{background:none;box-shadow:none;padding:0}
.sab-glanz{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  width:100%;
  height:100%;
  padding:14px 13px;
  border:5px solid var(--surface);
  border-radius:calc(var(--r) / 1.3);
  background:linear-gradient(142deg,
    color-mix(in srgb,var(--on-primary) 28%,var(--primary)) 0%,
    var(--primary) 46%,
    color-mix(in srgb,var(--primary) 74%,var(--hero)) 100%);
  color:var(--on-primary);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent),
    0 7px 15px -10px color-mix(in srgb,var(--ink) 55%,transparent);
  rotate:1.6deg;
  overflow:hidden;
}
.sab-glanz::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(116deg,
    transparent 30%,
    color-mix(in srgb,var(--on-primary) 26%,transparent) 42%,
    color-mix(in srgb,var(--on-primary) 8%,transparent) 50%,
    transparent 58%);
  pointer-events:none;
}
.sab-glanz small{
  font:800 .64rem/1 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:.85;
}
.sab-glanz b{
  font:900 clamp(1.3rem,3.6vw,2.1rem)/1.04 var(--font-h);
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}
.sab-glanz>span{font:600 .78rem/1.3 var(--font-b);opacity:.88}
.sab-glanz em{
  margin-top:auto;
  font:700 .62rem/1 var(--font-b);
  font-style:normal;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.75;
}

.sab-text{
  margin:clamp(20px,3vw,30px) auto 0;
  max-width:62ch;
  text-align:center;
  overflow-wrap:anywhere;
}
.A-sammelalbum .sab-seite .custom{max-width:62ch;margin:0 auto;font-size:.94rem;text-align:center}
.A-sammelalbum .sab-seite .ab{justify-content:center;margin-top:18px}
.sab-fuss{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:clamp(18px,2.6vw,28px);
  padding-top:10px;
  border-top:1px dashed var(--line);
  font:700 .7rem/1.3 var(--font-b);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
}
.A-sammelalbum .sab-sc{padding-top:8px}

@media (max-width:780px){
  .sab-raster{grid-template-columns:1fr 1fr}
  .sab-mitte{grid-column:span 2}
  .sab-feld{min-height:112px}
  .sab-seite{padding-left:42px}
  .sab-kopf{margin-left:-42px;padding-left:42px}
  .sab-seite::before{width:30px;background-size:100% 76px}
}

/* --- Seitentyp: Verrechnungsscheck --- */
/* --- Seitentyp: Verrechnungsscheck --- */
/* Scheck: querformatiges Blatt mit zwei diagonalen Balken in der Ecke, Empfaenger links,
   Betragskaestchen aus Einzelzellen rechts, Betrag in Worten auf Punktlinie, Magnetzeile unten */
.A-scheck{background:color-mix(in srgb,var(--ink) 5%,var(--bg))}
.A-scheck .vrs{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.vrs-blatt{position:relative;max-width:1020px;margin:0 auto;overflow:hidden;background:
    repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--line) 45%,transparent) 23px 24px),
    linear-gradient(170deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface) 62%);
  border:1px solid var(--line);border-radius:calc(var(--r) * .3);padding:clamp(22px,3.4vw,42px);box-shadow:0 24px 50px -40px var(--ink)}
.vrs-balken{position:absolute;left:0;top:0;width:clamp(102px,13vw,152px);height:clamp(102px,13vw,152px);pointer-events:none;
  background:linear-gradient(48deg,transparent 0 23%,color-mix(in srgb,var(--primary) 62%,transparent) 23% 28%,transparent 28% 39%,color-mix(in srgb,var(--primary) 62%,transparent) 39% 44%,transparent 44%)}
.vrs-kopf{position:relative;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;min-height:clamp(76px,9.5vw,118px);gap:6px 20px;font:700 .68rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.vrs-bank{margin-right:auto;padding-left:clamp(104px,14vw,162px);color:var(--ink)}
.vrs-sperr{color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);padding:3px 8px;letter-spacing:.14em}
.vrs-nr{font-variant-numeric:tabular-nums;letter-spacing:.24em}
.vrs-zeile{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(16px,3vw,36px);margin-top:clamp(18px,2.8vw,30px);padding-bottom:clamp(14px,2.2vw,20px);border-bottom:2px solid var(--ink)}
.vrs-empf{flex:1 1 300px;min-width:0}
.vrs-empf small{display:block;font:700 .64rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.vrs-name{font:800 clamp(1.5rem,4.4vw,2.8rem)/1.04 var(--font-h);margin:.12em 0 0;overflow-wrap:anywhere}
.vrs-lead{margin:.45em 0 0;color:var(--muted);font-size:clamp(.98rem,2vw,1.1rem)}
.vrs-kasten{flex:0 1 auto;text-align:right}
.vrs-kasten>small{display:block;margin-bottom:6px;font:700 .64rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.vrs-ziffern{display:flex;gap:3px;justify-content:flex-end;flex-wrap:wrap}
.vrs-ziffern i{display:grid;place-content:center;min-width:clamp(20px,3.4vw,30px);padding:6px 2px;font:800 clamp(1rem,2.6vw,1.6rem)/1 var(--font-h);font-style:normal;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--primary) 7%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent)}
.vrs-offen{display:inline-block;padding:7px 12px;font:800 clamp(1rem,2.6vw,1.5rem) var(--font-h);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent)}
.vrs-worte{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:clamp(14px,2.2vw,20px) 0 0;padding-bottom:7px;border-bottom:1px dotted color-mix(in srgb,var(--ink) 55%,transparent)}
.vrs-worte small{font:700 .64rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
.vrs-worte b{font:700 clamp(.98rem,2.1vw,1.2rem) var(--font-h);overflow-wrap:anywhere;hyphens:auto}
.vrs-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:clamp(16px,2.4vw,24px) 0 0;border-top:1px solid var(--line)}
.vrs-felder>div{padding:10px 14px 10px 0;border-bottom:1px solid var(--line)}
.vrs-breit{grid-column:1/-1}
.vrs-felder dt{font:700 .62rem var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.vrs-felder dd{margin:3px 0 0;font:700 1.02rem var(--font-h);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.vrs-desc{line-height:1.7;margin:clamp(16px,2.4vw,22px) 0 0}
.vrs-unten{display:flex;flex-wrap:wrap;gap:14px clamp(20px,5vw,60px);margin-top:clamp(22px,3.4vw,38px)}
.vrs-linie{flex:1 1 220px;min-width:0;border-top:1px solid var(--ink);padding-top:6px}
.vrs-linie small{font:700 .64rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vrs-micr{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;margin:clamp(18px,2.6vw,26px) 0 0;padding-top:12px;border-top:1px solid var(--line);
  font:800 clamp(.8rem,1.8vw,1.05rem)/1 var(--mono,ui-monospace,monospace);letter-spacing:.22em;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--ink) 82%,transparent);transform:scaleY(1.22);transform-origin:left bottom}
.vrs-marke{display:inline-block;width:.42em;height:.95em;border-left:.16em solid currentColor;border-right:.16em solid currentColor;vertical-align:-.1em}
.A-scheck .ab{margin-top:18px}
.vrs-sc{padding-top:10px}
@media (max-width:780px){
  .vrs-zeile{flex-direction:column;align-items:stretch}
  .vrs-zeile>*{flex:0 1 auto}
  .vrs-kasten{text-align:left}
  .vrs-ziffern{justify-content:flex-start}
  .vrs-kopf{min-height:clamp(96px,27vw,120px)}
  .vrs-balken{width:clamp(88px,24vw,112px);height:clamp(88px,24vw,112px)}
  .vrs-bank{padding-left:0}
  .vrs-unten{flex-direction:column}
  .vrs-unten>*{flex:0 1 auto}
  .vrs-micr{letter-spacing:.12em;transform:none}
}

/* --- Seitentyp: Sparbuch --- */
/* --- Seitentyp: Sparbuch --- */
/* Sparbuch: aufgeschlagenes Buch mit Falz in der Mitte, links Kontoinhaber und Kontodaten
   mit Zweigstellenstempel, rechts die Buchungsliste mit laufendem Saldo und Schlusssaldo */
.A-sparbuch{background:color-mix(in srgb,var(--ink) 7%,var(--bg))}
.A-sparbuch .spb{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.spb-buch{display:grid;grid-template-columns:minmax(0,1fr) clamp(18px,2.4vw,30px) minmax(0,1.04fr);max-width:1100px;margin:0 auto;border:1px solid var(--line);border-radius:calc(var(--r) * .35);overflow:hidden;background:var(--surface);box-shadow:0 30px 58px -44px var(--ink)}
.spb-links{padding:clamp(22px,3.2vw,40px);background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 8%,var(--surface)),var(--surface) 55%)}
.spb-falz{background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 16%,transparent),color-mix(in srgb,var(--ink) 4%,transparent) 32%,color-mix(in srgb,var(--ink) 2%,transparent) 50%,color-mix(in srgb,var(--ink) 4%,transparent) 68%,color-mix(in srgb,var(--ink) 16%,transparent))}
.spb-rechts{padding:clamp(20px,3vw,34px);background:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--line) 70%,transparent) 31px 32px),var(--surface)}
.spb-institut{margin:0;font:700 .68rem var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.spb-art{margin:.25em 0 clamp(16px,2.4vw,24px);font:800 clamp(1.1rem,2.4vw,1.4rem) var(--font-h);letter-spacing:.06em;color:var(--primary)}
.spb-feldname{display:block;font:700 .62rem var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.spb-name{font:800 clamp(1.5rem,4.2vw,2.6rem)/1.06 var(--font-h);margin:.12em 0 0;overflow-wrap:anywhere}
.spb-lead{margin:.5em 0 clamp(16px,2.4vw,22px);color:var(--muted);font-size:clamp(.98rem,2vw,1.1rem)}
.spb-konto{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;margin:0 0 clamp(16px,2.4vw,22px);padding:clamp(12px,1.8vw,16px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spb-konto dt{font:700 .64rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);align-self:center}
.spb-konto dd{margin:0;text-align:right;font:700 1.04rem var(--font-h);font-variant-numeric:tabular-nums;letter-spacing:.06em;overflow-wrap:anywhere}
.spb-desc{line-height:1.7;margin:0 0 6px}
.spb-stempel{width:clamp(118px,16vw,152px);aspect-ratio:1;margin:clamp(26px,4vw,40px) 0 4px;display:grid;place-content:center;text-align:center;gap:2px;border-radius:50%;transform:rotate(-9deg);color:var(--primary);border:2px solid color-mix(in srgb,var(--primary) 62%,transparent);box-shadow:inset 0 0 0 4px transparent,inset 0 0 0 5px color-mix(in srgb,var(--primary) 34%,transparent);opacity:.82}
.spb-stempel b{font:900 clamp(1rem,2.4vw,1.4rem) var(--font-h);letter-spacing:.04em;overflow-wrap:anywhere}
.spb-stempel span{font:700 .58rem var(--font-b);letter-spacing:.18em;text-transform:uppercase}
.spb-stempel-o{border-bottom:1px solid color-mix(in srgb,var(--primary) 40%,transparent);padding-bottom:3px}
.spb-stempel-u{border-top:1px solid color-mix(in srgb,var(--primary) 40%,transparent);padding-top:3px;font-variant-numeric:tabular-nums}
.spb-liste{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spb-liste caption{text-align:left;font:700 .64rem var(--font-b);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.spb-liste th,.spb-liste td{padding:9px 6px;text-align:right;vertical-align:baseline}
.spb-liste thead th{font:700 .6rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink)}
.spb-liste thead th:first-child,.spb-liste tbody th{text-align:left}
.spb-liste tbody th{font:600 .96rem var(--font-b);color:var(--ink);overflow-wrap:break-word;hyphens:auto}
.spb-liste tbody tr{border-bottom:1px solid color-mix(in srgb,var(--line) 85%,transparent)}
.spb-d{font-size:.86rem;color:var(--muted);white-space:nowrap}
.spb-b{font-size:.94rem;color:var(--muted)}
.spb-s{font:800 clamp(.98rem,2vw,1.12rem) var(--font-h);color:var(--ink)}
.spb-liste tfoot th{text-align:left;vertical-align:middle;font:700 .68rem var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-top:2px solid var(--ink);padding-top:14px}
.spb-liste tfoot td{vertical-align:middle;border-top:2px solid var(--ink);padding-top:14px;font:900 clamp(1.2rem,3vw,1.9rem)/1.05 var(--font-h);color:var(--primary);white-space:nowrap}
.spb-fussnote{margin:14px 0 0;font:700 .6rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.A-sparbuch .ab{margin-top:18px}
.spb-sc{padding-top:10px}
@media (max-width:780px){
  .spb-buch{grid-template-columns:1fr}
  .spb-falz{height:3px;background:linear-gradient(0deg,color-mix(in srgb,var(--ink) 16%,transparent),color-mix(in srgb,var(--ink) 3%,transparent))}
  .spb-stempel{margin-top:clamp(20px,6vw,30px)}
  .spb-liste th,.spb-liste td{padding:8px 4px}
  .spb-d{font-size:.76rem}
  .spb-liste tbody th{font-size:.88rem}
  .spb-b{font-size:.82rem}
  .spb-s{font-size:.95rem}
  .spb-liste tfoot td{font-size:clamp(1.05rem,5vw,1.4rem);white-space:normal;overflow-wrap:anywhere}
}

/* --- Seitentyp: Zollinhaltserklaerung --- */
/* --- Seitentyp: Zollinhaltserklaerung --- */
/* Zollerklaerung: kleiner zweisprachiger Formularzettel mit Ankreuzkaestchen, Warentabelle,
   Rasterfeldern mit Fugen aus box-shadow, Unterschriftszug und Abrisskante unten */
.A-zollerklaerung{background:color-mix(in srgb,var(--ink) 8%,var(--bg))}
.A-zollerklaerung .zie{padding-top:clamp(28px,5vw,64px);padding-bottom:20px}
.zie-zettel{position:relative;max-width:620px;margin:0 auto;padding:clamp(18px,3vw,30px) clamp(16px,2.8vw,28px) clamp(26px,4vw,38px);
  background:color-mix(in srgb,var(--accent) 13%,var(--surface));
  border:2px solid color-mix(in srgb,var(--ink) 62%,transparent);box-shadow:0 20px 44px -38px var(--ink)}
.zie-zettel::before{content:"";position:absolute;inset:4px;border:1px solid color-mix(in srgb,var(--ink) 26%,transparent);pointer-events:none}
.zie-kopf{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-bottom:10px;border-bottom:2px solid color-mix(in srgb,var(--ink) 62%,transparent)}
.zie-marke{flex:0 0 auto;padding:4px 8px;font:900 .8rem/1 var(--font-h);letter-spacing:.1em;color:var(--on-primary);background:var(--primary)}
.zie-titel{flex:1 1 auto;min-width:0;font:800 clamp(.86rem,2.4vw,1.08rem)/1.25 var(--font-h);letter-spacing:.02em;overflow-wrap:anywhere}
.zie-nr{flex:0 0 auto;font:700 .6rem var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.zie-wahlen{position:relative;display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 34%,transparent)}
.zie-wahl{display:inline-flex;align-items:center;gap:7px;font:600 .82rem var(--font-b);color:var(--muted)}
.zie-wahl b{font-weight:800;color:var(--ink)}
.zie-kasten{position:relative;width:15px;height:15px;flex:0 0 auto;border:1.5px solid color-mix(in srgb,var(--ink) 65%,transparent);background:var(--surface)}
.zie-an .zie-kasten{color:var(--primary)}
.zie-an .zie-kasten::before{content:"";position:absolute;inset:1px;background:linear-gradient(45deg,transparent 42%,currentColor 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,currentColor 42% 58%,transparent 58%)}
.zie-tab{position:relative;width:100%;border-collapse:collapse;margin-top:12px;font-variant-numeric:tabular-nums}
.zie-tab th,.zie-tab td{padding:8px 8px;text-align:right;vertical-align:top}
.zie-tab thead th{font:700 .58rem var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent)}
.zie-tab thead th:first-child,.zie-tab tbody th,.zie-tab tfoot th{text-align:left}
.zie-tab tbody th{font:600 .92rem var(--font-b);overflow-wrap:anywhere}
.zie-tab tbody tr{border-bottom:1px dashed color-mix(in srgb,var(--ink) 28%,transparent)}
.zie-tab td{font-size:.92rem}
.zie-name{font:800 clamp(1.25rem,5vw,2.1rem)/1.06 var(--font-h);margin:0;overflow-wrap:anywhere}
.zie-lead{display:block;margin-top:.35em;font:400 .84rem/1.45 var(--font-b);color:var(--muted)}
.zie-wert{font:800 clamp(.98rem,2.6vw,1.2rem) var(--font-h);white-space:nowrap}
.zie-tab tfoot th{font:700 .62rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-top:2px solid color-mix(in srgb,var(--ink) 62%,transparent);padding-top:12px}
.zie-tab tfoot td{border-top:2px solid color-mix(in srgb,var(--ink) 62%,transparent);padding-top:12px}
.zie-tab tfoot .zie-wert{font-size:clamp(1.1rem,3.4vw,1.5rem);color:var(--primary)}
.zie-raster{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.zie-feld{padding:8px 10px;background:var(--surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 34%,transparent)}
.zie-feld-breit{grid-column:1/-1}
.zie-feld small{display:block;font:700 .56rem var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.zie-feld b{display:block;margin-top:2px;font:700 .95rem var(--font-h);overflow-wrap:anywhere}
.zie-desc{position:relative;margin:16px 0 0;line-height:1.65;font-size:.95rem}
.A-zollerklaerung .ab{margin-top:16px}
.zie-sig{position:relative;margin-top:clamp(20px,3.4vw,30px);max-width:260px}
.zie-sig svg{display:block;max-width:none;width:clamp(130px,34vw,170px);height:auto;color:color-mix(in srgb,var(--ink) 78%,transparent)}
.zie-sig small{display:block;margin-top:2px;padding-top:6px;border-top:1px solid color-mix(in srgb,var(--ink) 60%,transparent);font:700 .58rem var(--font-b);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.zie-hinweis{position:relative;margin:clamp(16px,2.6vw,22px) 0 0;padding:10px 12px;background:var(--surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent);font-size:.76rem;line-height:1.5;color:var(--muted)}
.zie-hinweis span{display:block}
.zie-hinweis span+span{margin-top:4px;font-style:italic}
.zie-riss{position:absolute;left:0;right:0;bottom:0;height:7px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 55%,transparent) 0 6px,transparent 6px 12px)}
.zie-sc{padding-top:10px}
@media (max-width:780px){
  .zie-kopf{gap:6px 10px}
  .zie-nr{width:100%;order:3}
  .zie-tab th,.zie-tab td{padding:7px 4px}
  .zie-wert{white-space:normal}
  .zie-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}

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

/* --- Seitentyp: Abreisskalender --- */
/* --- Seitentyp: Abreisskalender --- */
/* Abreisskalender: ein dickes Blatt am Drahtblock. Die grosse Tagesziffer steht oben, darunter
   der Domainname als Spruch des Tages, die Merkmale erscheinen als Kalenderangaben in einem
   Raster aus Feldern. Unten laeuft eine Reisskante aus, darunter haengt das halb abgerissene
   Blatt mit dem Preis auf seiner Rueckseite. */
.A-abreisskalender{background:color-mix(in srgb,var(--ink) 6%,var(--bg))}
.A-abreisskalender .akd{
  padding-top:clamp(30px,5vw,64px);
  padding-bottom:clamp(22px,3.6vw,48px);
}

.A-abreisskalender .akd-block{
  position:relative;
  max-width:620px;margin:0 auto;
  padding-top:14px;
}

/* Die Bindung: offene Drahtringe ueber der Schnittkante */
.A-abreisskalender .akd-draht{
  position:absolute;left:8%;right:8%;top:0;z-index:3;
  display:flex;justify-content:space-between;
  pointer-events:none;
}
.A-abreisskalender .akd-draht span{
  width:clamp(11px,2.4vw,15px);height:clamp(24px,5vw,32px);
  border:2px solid color-mix(in srgb,var(--ink) 42%,transparent);
  border-radius:50%;
  background:transparent;
}

/* Das Blatt */
.A-abreisskalender .akd-blatt{
  position:relative;z-index:2;width:100%;
  container-type:inline-size;
  background:var(--surface);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:calc(var(--r) / 2) calc(var(--r) / 2) 0 0;
  padding:clamp(20px,3.6vw,32px) clamp(16px,3.2vw,34px) clamp(18px,3vw,30px);
  text-align:center;
}
/* Schnittkante des Blocks: das Blatt sitzt auf vielen weiteren */
.A-abreisskalender .akd-blatt::before{
  content:"";position:absolute;left:0;right:0;top:0;height:7px;
  border-radius:calc(var(--r) / 2) calc(var(--r) / 2) 0 0;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--ink) 15%,var(--surface)) 0 3px,
    color-mix(in srgb,var(--ink) 5%,var(--surface)) 3px 6px);
}
.A-abreisskalender .akd-kopf{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin:0 0 .4em;
  padding-bottom:.5em;
  border-bottom:1px solid var(--line);
  font:700 clamp(.6rem,1.5vw,.76rem)/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.A-abreisskalender .akd-ziffer{
  display:block;margin:.02em 0 0;
  font:800 clamp(3.2rem,30cqw,8.4rem)/.86 var(--font-h);
  color:var(--primary);letter-spacing:-.04em;
  font-variant-numeric:lining-nums;
}
.A-abreisskalender .akd-kl{
  margin:.5em 0 .2em;
  font:700 clamp(.56rem,1.4vw,.7rem)/1 var(--font-b);
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.A-abreisskalender .akd-name{
  margin:0;
  font:800 clamp(1.4rem,7.5cqw,2.5rem)/1.1 var(--font-h);
  overflow-wrap:anywhere;
}
.A-abreisskalender .akd-lead{
  margin:.5em auto clamp(16px,2.6vw,24px);max-width:44ch;
  color:var(--muted);font-size:clamp(.92rem,1.5vw,1.04rem);
}

/* Kalenderangaben als Raster, Fugen je Feld als Schatten */
.A-abreisskalender .akd-angaben{
  margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  text-align:left;
}
.A-abreisskalender .akd-angaben>div{
  display:flex;flex-direction:column;gap:.1em;min-width:0;
  padding:clamp(8px,1.6vw,12px) clamp(9px,1.8vw,14px);
  background:color-mix(in srgb,var(--ink) 4%,var(--surface));
  box-shadow:0 0 0 1px var(--line);
}
.A-abreisskalender .akd-angaben dt{
  font:700 clamp(.52rem,1.2vw,.64rem)/1.3 var(--font-b);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.A-abreisskalender .akd-angaben dd{
  margin:0;font-weight:700;font-size:clamp(.84rem,1.6vw,.98rem);
  overflow-wrap:anywhere;
}

/* Reisskante */
.A-abreisskalender .akd-kante{
  position:absolute;left:0;right:0;bottom:-8px;
  display:block;width:100%;height:9px;max-width:none;
  color:var(--surface);
}
.A-abreisskalender .akd-kante path{fill:currentColor}

/* Das halb abgerissene Blatt, von hinten gesehen */
.A-abreisskalender .akd-rueck{
  position:relative;z-index:1;
  margin:15px auto 0;max-width:88%;
  background-color:var(--hero);
  background-image:repeating-linear-gradient(-14deg,
    color-mix(in srgb,var(--on-hero) 6%,transparent) 0 1px,
    transparent 1px 11px);
  color:var(--on-hero);
  transform:rotate(-1.6deg);
  transform-origin:top center;
  border-radius:0 0 var(--r) var(--r);
  padding:clamp(16px,3vw,26px) clamp(14px,2.8vw,28px) clamp(16px,3vw,26px);
  text-align:center;
}
.A-abreisskalender .akd-kante-o{
  top:-8px;bottom:auto;color:var(--hero);
}
.A-abreisskalender .akd-rl{
  margin:0 0 .4em;
  font:700 clamp(.52rem,1.3vw,.66rem)/1.3 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 58%,var(--hero));
}
.A-abreisskalender .akd-rp{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:.08em;
}
.A-abreisskalender .akd-rp span{
  font:700 clamp(.54rem,1.3vw,.68rem)/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 70%,var(--hero));
}
.A-abreisskalender .akd-rp b{
  font:800 clamp(1.6rem,5.4vw,2.9rem)/1.08 var(--font-h);
  color:var(--on-hero);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.A-abreisskalender .akd-rp small{
  font-size:clamp(.72rem,1.4vw,.86rem);
  color:color-mix(in srgb,var(--on-hero) 78%,var(--hero));
}

.A-abreisskalender .akd-text{
  max-width:62ch;margin:clamp(26px,3.6vw,40px) auto 0;text-align:center;
  font-size:clamp(1rem,1.5vw,1.06rem);
}
.A-abreisskalender .akd-text p{margin:0 0 1em}
.A-abreisskalender .akd-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-abreisskalender .akd-draht{left:5%;right:5%}
  .A-abreisskalender .akd-angaben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .A-abreisskalender .akd-rueck{max-width:100%;transform:rotate(-1deg)}
  .A-abreisskalender .akd-kopf{letter-spacing:.1em}
}
@media (max-width:460px){
  .A-abreisskalender .akd-angaben{grid-template-columns:minmax(0,1fr)}
}

/* --- Seitentyp: Anagramm --- */
/* --- Seitentyp: Anagramm --- */
/* Anagrammtafel: die Zeichen des Namens einmal richtig und darunter dreimal umgestellt,
   mit Pfeilen zwischen den Reihen, Hinweisen am rechten Rand, dem Preis als Lösung in
   der untersten Reihe, alles auf einem Raster aus gestrichelten Linien. */
.A-anagramm{background:var(--bg)}
.A-anagramm .agm{padding-top:clamp(24px,4.4vw,58px);padding-bottom:clamp(18px,3vw,36px)}

/* Die Tafel mit dem gestrichelten Raster */
.agm-tafel{
  position:relative;overflow:hidden;
  max-width:1060px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(16px,2.8vw,32px);
  padding:clamp(16px,2.8vw,32px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 1.5);
  box-shadow:0 26px 56px -44px color-mix(in srgb,var(--ink) 78%,transparent);
}
.agm-netz{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(34px,5vw,54px),1fr));
  grid-auto-rows:clamp(34px,5vw,54px);
  opacity:.6;
}
.agm-netz i{display:block;border-right:1px dashed var(--line);border-bottom:1px dashed var(--line)}

.agm-inhalt{position:relative;flex:1 1 380px;min-width:0}
.agm-kl{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 clamp(10px,1.6vw,15px);font:700 clamp(.62rem,1.4vw,.72rem)/1.4 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.agm-kl span:first-child{color:var(--primary)}

/* Die Reihen aus Zeichen */
.agm-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(3px,.8vw,7px);margin:0;position:relative}
.agm-st{
  display:grid;place-items:center;flex:0 0 auto;
  width:clamp(27px,6.2vw,46px);aspect-ratio:1;
  border-radius:calc(var(--r) / 3);
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line);
  font:700 clamp(.9rem,2.7vw,1.45rem)/1 var(--font-h);
  text-transform:uppercase;letter-spacing:0;color:var(--ink);
}
.A-anagramm .agm-start{color:var(--on-hero)}
.agm-start .agm-st{background:var(--hero);color:var(--on-hero);box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 28%,var(--hero))}
.agm-tld{margin-left:4px;font:700 clamp(.78rem,2vw,1.05rem)/1 var(--font-h);color:var(--primary);overflow-wrap:anywhere}
.agm-vl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.agm-lead{position:relative;margin:.7em 0 0;max-width:52ch;font-size:clamp(.95rem,2vw,1.08rem);line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.agm-um{margin-top:0}
.agm-um .agm-st{background:color-mix(in srgb,var(--ink) 5%,var(--surface));color:color-mix(in srgb,var(--ink) 72%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 85%,transparent)}
.agm-nr{margin-left:8px;font:700 .64rem/1.3 var(--font-b);font-style:normal;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}

/* Pfeile zwischen den Reihen */
.agm-pfeil{
  display:block;position:relative;
  width:clamp(27px,6.2vw,46px);
  height:clamp(17px,2.8vw,26px);
  margin:3px 0;
}
.agm-pfeil::before{content:"";position:absolute;left:50%;top:0;bottom:7px;width:2px;transform:translateX(-50%);background:color-mix(in srgb,var(--primary) 50%,transparent)}
.agm-pfeil::after{content:"";position:absolute;left:50%;bottom:2px;width:8px;height:8px;transform:translateX(-50%) rotate(45deg);border-right:2px solid var(--primary);border-bottom:2px solid var(--primary)}
.agm-pz::before{bottom:6px;width:3px}
.agm-pz::after{width:10px;height:10px;border-width:3px}

/* Die unterste Reihe: der Preis als Lösung */
.agm-loesung{position:relative;margin-top:4px}
.agm-lt{display:block;margin-bottom:.45em;font:800 clamp(.62rem,1.4vw,.72rem)/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--primary)}
.agm-ls{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 1px var(--primary);font-variant-numeric:tabular-nums}
.agm-luecke{display:block;flex:0 0 auto;width:clamp(7px,1.6vw,13px);height:1px}
.agm-rate{display:block;margin-top:.7em;font:600 .84rem/1.3 var(--font-b);color:var(--primary)}

/* Hinweise am Rand */
.agm-hinweise{
  position:relative;flex:1 1 232px;min-width:0;
  background:color-mix(in srgb,var(--surface) 88%,var(--bg));
  border-left:3px solid var(--accent);
  border-radius:calc(var(--r) / 4);
  padding:clamp(12px,1.9vw,17px);
}
.agm-ht{margin:0 0 9px;font:800 .68rem/1.3 var(--font-h);text-transform:uppercase;letter-spacing:.2em;color:var(--ink)}
.agm-hl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.agm-hl li{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;line-height:1.45;color:var(--muted)}
.agm-hl b{flex:0 0 auto;width:1.6em;height:1.6em;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--accent) 24%,var(--surface));font:700 .7rem/1 var(--font-b);color:var(--ink)}
.agm-hl span{min-width:0;overflow-wrap:anywhere}
.agm-hl em{font-style:normal;font-weight:700;color:var(--ink)}
.agm-hf{margin:12px 0 0;padding-top:10px;border-top:1px dashed var(--line);font:600 .74rem/1.45 var(--font-b);color:var(--muted)}

/* Text und Kaufzeile */
.agm-text{max-width:68ch;margin:clamp(20px,3vw,34px) auto 0;text-align:center;color:var(--muted);line-height:1.7}
.agm-text>p{margin:0 0 1em;overflow-wrap:anywhere}
.A-anagramm .agm-text .custom{font-size:.95rem}
.A-anagramm .agm-text .ab{margin-top:16px}
.A-anagramm .agm-sc{padding-top:8px}

@media (max-width:780px){
  .A-anagramm .agm{padding-top:20px}
  .agm-tafel{flex-direction:column;gap:18px;padding:14px}
  .agm-inhalt{flex:0 1 auto;width:100%}
  .agm-hinweise{flex:0 1 auto;width:100%}
  .agm-netz{grid-template-columns:repeat(auto-fill,minmax(32px,1fr));grid-auto-rows:32px}
  .agm-nr{flex:1 1 100%;margin-left:0;margin-top:3px}
}

/* Lange Namen: kleinere Zeichen, damit die Tafel nicht ins Endlose wächst */
.agm-dicht .agm-st{width:clamp(20px,4.2vw,33px);font-size:clamp(.7rem,1.9vw,1.02rem);border-radius:calc(var(--r) / 4)}
.agm-dicht .agm-pfeil{width:clamp(20px,4.2vw,33px)}
.agm-dicht .agm-ls{width:clamp(24px,5vw,39px);font-size:clamp(.82rem,2.2vw,1.2rem)}
.agm-dicht .agm-zeile{gap:clamp(2px,.6vw,5px)}

/* --- Seitentyp: Barometer --- */
/* --- Seitentyp: Barometer --- */
/* Barometer: ein rundes Instrument auf einem Brett. Die Skala laeuft ueber 240 Grad von Sturm
   bis Trocken, der Zeiger steht auf einer festen Stellung, ein duenner Stellzeiger merkt den
   vorigen Stand. Der Domainname ist auf das Zifferblatt gedruckt, der Preis sitzt im Fenster
   unter der Mitte, Temperatur und Feuchte laufen als Nebenskalen unter dem Gehaeuse. */
.A-barometer{background:var(--bg)}
.A-barometer .bra{
  padding-top:clamp(22px,4vw,56px);
  padding-bottom:clamp(20px,3.4vw,44px);
}

/* Das Brett, auf dem das Instrument sitzt */
.A-barometer .bra-brett{
  max-width:560px;margin:0 auto;
  background-color:var(--hero);
  background-image:repeating-linear-gradient(0deg,
    color-mix(in srgb,var(--on-hero) 6%,transparent) 0 1px,
    transparent 1px 9px);
  color:var(--on-hero);
  border:1px solid color-mix(in srgb,var(--on-hero) 22%,var(--hero));
  border-radius:var(--r);
  padding:clamp(16px,3vw,30px) clamp(14px,2.8vw,30px) clamp(16px,3vw,28px);
  text-align:center;
}
.A-barometer .bra-kl{
  margin:0 0 clamp(10px,2vw,18px);
  font:700 clamp(.56rem,1.3vw,.7rem)/1 var(--font-b);
  letter-spacing:.32em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 62%,var(--hero));
}

/* Das Gehaeuse */
.A-barometer .bra-gehaeuse{
  position:relative;width:100%;max-width:440px;margin:0 auto;
  aspect-ratio:1;container-type:inline-size;
}
.A-barometer .bra-svg{
  display:block;max-width:none;width:100%;height:100%;
  color:var(--ink);
}
.A-barometer .bra-fassung{
  fill:color-mix(in srgb,var(--on-hero) 16%,var(--hero));
  stroke:var(--accent);stroke-width:2;
}
.A-barometer .bra-flaeche{fill:var(--surface)}
.A-barometer .bra-tick{
  fill:none;stroke:currentColor;stroke-width:1.4;opacity:.5;stroke-linecap:round;
}
.A-barometer .bra-tick-g{stroke-width:3;opacity:.9}
.A-barometer .bra-sl{
  fill:currentColor;opacity:.72;
  font:700 10px/1 var(--font-b);letter-spacing:.06em;
  text-anchor:middle;dominant-baseline:central;
  text-transform:uppercase;
}
.A-barometer .bra-bogen{
  fill:none;stroke:currentColor;stroke-width:1.2;opacity:.34;stroke-linecap:round;
}
.A-barometer .bra-stell{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 4;stroke-linecap:round;
}
.A-barometer .bra-stell-p{fill:none;stroke:var(--accent);stroke-width:2}
.A-barometer .bra-zeiger{fill:var(--primary)}
.A-barometer .bra-nabe{fill:var(--primary);stroke:var(--surface);stroke-width:2.4}

/* Zifferblattaufdruck: Name oben, Fenster unter der Mitte */
.A-barometer .bra-mitte{
  position:absolute;inset:52% 20% 13%;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:4cqw;pointer-events:none;text-align:center;
}
.A-barometer .bra-name{
  margin:0;color:var(--ink);
  font:800 clamp(.68rem,4.8cqw,1.5rem)/1.14 var(--font-h);
  letter-spacing:.01em;overflow-wrap:anywhere;
}
.A-barometer .bra-fenster{
  margin:0;width:min(100%,30cqw);
  display:flex;flex-direction:column;align-items:center;gap:.04em;
  padding:.3em .5em .34em;
  background:var(--hero);color:var(--on-hero);
  border-radius:calc(var(--r) / 2.4);
  box-shadow:0 0 0 1px var(--accent);
}
.A-barometer .bra-fenster span{
  font:700 clamp(.42rem,1.9cqw,.6rem)/1 var(--font-b);
  letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 68%,var(--hero));
}
.A-barometer .bra-fenster b{
  font:800 clamp(.68rem,3.2cqw,1.1rem)/1.1 var(--font-h);
  color:var(--on-hero);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}

.A-barometer .bra-lead{
  margin:clamp(12px,2.2vw,20px) auto 0;max-width:44ch;
  font-size:clamp(.92rem,1.5vw,1.04rem);
  color:color-mix(in srgb,var(--on-hero) 78%,var(--hero));
}
.A-barometer .bra-rate{
  display:inline-block;margin-left:.35em;
  padding:.1em .55em;border:1px solid var(--accent);border-radius:999px;
  font-size:.86em;color:var(--on-hero);white-space:nowrap;
}

/* Nebenskalen */
.A-barometer .bra-neben{
  list-style:none;margin:clamp(14px,2.6vw,22px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(10px,2vw,18px);
}
.A-barometer .bra-neben li{
  display:flex;flex-direction:column;align-items:center;gap:.1em;min-width:0;
  padding:clamp(8px,1.6vw,14px) clamp(6px,1.4vw,12px) clamp(9px,1.8vw,14px);
  background:color-mix(in srgb,var(--on-hero) 9%,var(--hero));
  border:1px solid color-mix(in srgb,var(--on-hero) 20%,var(--hero));
  border-radius:calc(var(--r) / 1.8);
}
.A-barometer .bra-nsvg{
  display:block;max-width:none;width:clamp(72px,14vw,118px);height:auto;
  color:var(--on-hero);
}
.A-barometer .bra-nbogen{
  fill:none;stroke:currentColor;stroke-width:2;opacity:.42;stroke-linecap:round;
}
.A-barometer .bra-ntick{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.55}
.A-barometer .bra-nzeiger{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round}
.A-barometer .bra-nnabe{fill:currentColor}
.A-barometer .bra-nt{
  font:700 clamp(.5rem,1.2vw,.64rem)/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 64%,var(--hero));
}
.A-barometer .bra-nw{
  font:800 clamp(1.05rem,2.6vw,1.5rem)/1.1 var(--font-h);
  color:var(--on-hero);overflow-wrap:anywhere;
}
.A-barometer .bra-nl{
  font-size:clamp(.62rem,1.3vw,.76rem);
  color:color-mix(in srgb,var(--on-hero) 66%,var(--hero));
}

/* Gravuren auf dem Brett */
.A-barometer .bra-gravur{
  list-style:none;margin:clamp(12px,2.2vw,18px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.3em clamp(16px,3vw,32px);
}
.A-barometer .bra-gravur li{display:flex;align-items:baseline;gap:.45em;min-width:0}
.A-barometer .bra-gravur span{
  font:700 clamp(.5rem,1.2vw,.64rem)/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 60%,var(--hero));
}
.A-barometer .bra-gravur b{
  font:700 clamp(.82rem,1.7vw,.98rem)/1.2 var(--font-h);
  color:var(--on-hero);overflow-wrap:anywhere;
}

.A-barometer .bra-text{
  max-width:62ch;margin:clamp(22px,3.2vw,36px) auto 0;text-align:center;
  font-size:clamp(1rem,1.5vw,1.06rem);
}
.A-barometer .bra-text p{margin:0 0 1em}
.A-barometer .bra-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-barometer .bra-gehaeuse{max-width:340px}
  .A-barometer .bra-neben{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .A-barometer .bra-neben li{flex:0 1 auto}
  .A-barometer .bra-sl{font-size:11px;letter-spacing:.02em}
  .A-barometer .bra-gravur{gap:.3em 16px}
}
@media (max-width:420px){
  .A-barometer .bra-neben{grid-template-columns:minmax(0,1fr)}
}

/* --- Seitentyp: Buchstabenspiel --- */
/* --- Seitentyp: Buchstabenspiel --- */
/* Legespiel: ein Spielfeld mit Prämienfeldern, auf dem der Name aus Buchstabensteinen
   liegt, Merkmale als senkrecht gekreuzte Wörter, daneben der Punktezettel mit dem
   Preis als Endstand, darunter das Ablagebrett mit den Reststeinen. */
.A-buchstabenspiel{
  --bsl-holz:color-mix(in srgb,var(--ink) 14%,var(--surface));
  background:var(--bg);
}
.A-buchstabenspiel .bsl{padding-top:clamp(24px,4.4vw,58px);padding-bottom:clamp(18px,3vw,36px)}
.bsl-tisch{max-width:1060px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(16px,2.8vw,32px)}
.bsl-feldseite{flex:1 1 400px;min-width:0}
.bsl-kl{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 10px;font:700 clamp(.62rem,1.4vw,.72rem)/1.4 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.bsl-kl span:first-child{color:var(--primary)}

/* Das Brett: Fugen je Feld, damit beim Umbruch nichts aufreißt */
.bsl-brett{
  container-type:inline-size;width:100%;
  display:grid;grid-template-columns:repeat(var(--bsl-c,11),1fr);gap:0;
  padding:clamp(5px,1vw,9px);
  background:var(--bsl-holz);
  border-radius:calc(var(--r) / 2);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent),0 26px 54px -40px color-mix(in srgb,var(--ink) 75%,transparent);
}
.bsl-f{position:relative;aspect-ratio:1;display:grid;place-items:center;background:var(--surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent)}
.bsl-f small{font:700 calc(100cqw / var(--bsl-c,11) * .25)/1 var(--font-b);letter-spacing:.02em;color:var(--ink);opacity:.72;white-space:nowrap}
.bsl-p1{background:color-mix(in srgb,var(--accent) 20%,var(--surface))}
.bsl-p2{background:color-mix(in srgb,var(--accent) 40%,var(--surface))}
.bsl-p3{background:color-mix(in srgb,var(--primary) 18%,var(--surface))}
.bsl-p4{background:color-mix(in srgb,var(--primary) 38%,var(--surface))}

/* Die Steine, mit dem Punktwert in der Ecke */
.bsl-stein{
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  color:var(--ink);
  border-radius:calc(var(--r) / 3);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 80%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--ink) 20%,transparent),0 0 0 1px color-mix(in srgb,var(--ink) 34%,transparent);
}
.bsl-stein b{font-weight:800;font-family:var(--font-h);text-transform:uppercase;line-height:1}
.bsl-stein i{position:absolute;right:9%;bottom:3%;font-style:normal;font-weight:700;font-family:var(--font-b);font-variant-numeric:tabular-nums;line-height:1;opacity:.75}
.bsl-brett .bsl-stein b{font-size:calc(100cqw / var(--bsl-c,11) * .5)}
.bsl-brett .bsl-stein i{font-size:calc(100cqw / var(--bsl-c,11) * .24)}

/* Ablagebrett mit den Reststeinen */
.bsl-bank{
  margin-top:clamp(10px,1.8vw,16px);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:clamp(8px,1.4vw,12px) clamp(10px,1.6vw,14px);
  background:var(--bsl-holz);
  border-radius:calc(var(--r) / 2);
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--ink) 14%,transparent);
}
.bsl-bt,.bsl-rest{font:700 .68rem/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.bsl-rest{margin-left:auto;text-transform:none;letter-spacing:.02em;font-weight:600;font-size:.76rem}
.bsl-leiste{display:flex;gap:4px}
.bsl-rst{position:relative;display:grid;place-items:center;width:clamp(26px,5.6vw,38px);aspect-ratio:1}
.bsl-rst b{font-size:clamp(.85rem,2.4vw,1.15rem)}
.bsl-rst i{font-size:clamp(.5rem,1.3vw,.62rem)}

/* Der Punktezettel */
.bsl-zettel{
  flex:1 1 268px;min-width:0;
  background:
    repeating-linear-gradient(var(--surface) 0 26px,color-mix(in srgb,var(--line) 70%,transparent) 26px 27px),
    var(--surface);
  border:1px solid var(--line);
  border-top:4px solid var(--primary);
  border-radius:calc(var(--r) / 3);
  padding:clamp(13px,2vw,19px);
}
.bsl-zk{margin:0;font:700 .66rem/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.A-buchstabenspiel .bsl-name{margin:.15em 0 0;font:800 clamp(1.4rem,3.6vw,2.05rem)/1.08 var(--font-h);letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.bsl-tld{color:var(--primary);font-weight:700}
.bsl-lead{margin:.35em 0 0;font-size:.9rem;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.bsl-zuege{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:0}
.bsl-zuege li{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.86rem;color:var(--muted)}
.bsl-zuege b{font:700 .92rem/1.3 var(--font-b);color:var(--ink);overflow-wrap:anywhere;min-width:0}
.bsl-zuege span{font-size:.74rem}
.bsl-zuege em{margin-left:auto;flex:0 0 auto;font:800 1rem/1 var(--font-h);font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink)}
.bsl-haupt b{color:var(--primary)}
.bsl-haupt em{color:var(--primary)}
.bsl-end{margin-top:12px;padding-top:11px;border-top:3px double var(--ink);display:grid;gap:2px}
.bsl-end span{font:800 .66rem/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.bsl-end b{font:900 clamp(1.35rem,3.8vw,1.95rem)/1.05 var(--font-h);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bsl-end small{font:600 .8rem/1.3 var(--font-b);color:var(--primary)}

/* Text und Kaufzeile */
.bsl-text{max-width:72ch;margin:clamp(20px,3vw,34px) auto 0;color:var(--muted);line-height:1.7}
.bsl-text>p{margin:0 0 1em;overflow-wrap:anywhere}
.A-buchstabenspiel .bsl-text .custom{font-size:.95rem}
.A-buchstabenspiel .bsl-text .ab{margin-top:16px}
.A-buchstabenspiel .bsl-sc{padding-top:8px}

@media (max-width:780px){
  .A-buchstabenspiel .bsl{padding-top:20px}
  .bsl-tisch{flex-direction:column;gap:18px}
  .bsl-feldseite{flex:0 1 auto;width:100%}
  .bsl-zettel{flex:0 1 auto;width:100%}
  .bsl-f small{letter-spacing:0}
  .bsl-rest{margin-left:0;width:100%}
}

/* --- Seitentyp: Filmklappe --- */
/* --- Seitentyp: Filmklappe --- */
/* Filmklappe: oben der schraeg gestreifte Klappbalken, darunter die Schiefertafel mit den
   Feldern Produktion, Regie, Szene, Take und Datum; der Domainname ist der Titel der Produktion,
   der Preis steht im Feld Szene, alle Beschriftungen haben Kreidestrich-Anmutung. */
.A-filmklappe{background:var(--bg)}
.A-filmklappe .fkl{
  max-width:940px;margin-left:auto;margin-right:auto;
  padding-top:clamp(24px,4.4vw,58px);
  padding-bottom:clamp(22px,3.6vw,46px);
}

/* Die Klappe insgesamt */
.A-filmklappe .fkl-klappe{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--r) / 2);
  background:color-mix(in srgb,var(--on-hero) 9%,var(--hero));
  color:var(--on-hero);
  border:1px solid color-mix(in srgb,var(--on-hero) 18%,transparent);
  box-shadow:0 24px 54px -40px color-mix(in srgb,var(--on-hero) 70%,var(--hero));
}

/* Der gestreifte Klappbalken, leicht angehoben wie eine offene Klappe */
.A-filmklappe .fkl-balken{
  position:relative;
  height:clamp(40px,6.2vw,66px);
  clip-path:polygon(0 0,100% 0,100% 58%,0 94%);
}
.A-filmklappe .fkl-streifen{
  position:absolute;inset:0;
  background:repeating-linear-gradient(112deg,
    color-mix(in srgb,var(--on-hero) 92%,var(--hero)) 0 26px,
    color-mix(in srgb,var(--on-hero) 6%,var(--hero)) 26px 52px);
  border-bottom:2px solid color-mix(in srgb,var(--on-hero) 40%,var(--hero));
}
.A-filmklappe .fkl-scharnier{
  position:absolute;left:3.2%;top:50%;
  width:13px;height:13px;margin-top:-7px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 70%,var(--on-hero));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--on-hero) 18%,var(--hero));
}

/* Die Tafel */
.A-filmklappe .fkl-tafel{
  position:relative;
  padding:clamp(20px,3.4vw,40px) clamp(16px,3vw,34px) clamp(18px,3vw,34px);
}
.A-filmklappe .fkl-tafel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(72deg,
    color-mix(in srgb,var(--on-hero) 5%,transparent) 0 2px,
    transparent 2px 11px);
  opacity:.55;
}
.A-filmklappe .fkl-kl{
  margin:0;
  font:700 .68rem/1 var(--font-b);
  letter-spacing:.3em;text-transform:uppercase;
  opacity:.7;
}
.A-filmklappe .fkl-name{
  margin:.4em 0 0;
  color:var(--on-hero);
  font:800 clamp(1.5rem,4.6vw,3rem)/1.04 var(--font-h);
  letter-spacing:.01em;
  overflow-wrap:anywhere;
  text-shadow:0 0 1px currentColor;
}
.A-filmklappe .fkl-lead{
  margin:.5em 0 clamp(16px,2.6vw,26px);
  font-size:clamp(.95rem,1.6vw,1.1rem);
  opacity:.84;
  text-shadow:0 0 1px currentColor;
}

/* Die beschriebenen Felder, Fugen als Ring je Feld */
.A-filmklappe .fkl-raster{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.A-filmklappe .fkl-feld{
  min-width:0;
  padding:.7em .85em .75em;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 32%,transparent);
}
.A-filmklappe .fkl-lb{
  display:block;
  font:700 .62rem/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;
  opacity:.66;
}
.A-filmklappe .fkl-feld b{
  display:block;margin-top:.4em;
  font:700 clamp(.92rem,1.7vw,1.1rem)/1.25 var(--font-h);
  overflow-wrap:anywhere;
  text-shadow:0 0 1px currentColor;
}
.A-filmklappe .fkl-szene{
  grid-column:span 2;
  background:color-mix(in srgb,var(--on-hero) 7%,transparent);
}
.A-filmklappe .fkl-preis{
  font:800 clamp(1.5rem,5vw,2.8rem)/1.02 var(--font-h)!important;
  letter-spacing:-.01em;
  color:var(--on-hero);
}
.A-filmklappe .fkl-zu{
  margin-left:.7em;
  font:700 .6rem/1 var(--font-b);
  letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 60%,var(--on-hero));
}

/* Text und Kaufzeile unter der Klappe */
.A-filmklappe .fkl-text{
  margin-top:clamp(18px,3vw,34px);
  max-width:68ch;
  font-size:clamp(1rem,1.5vw,1.08rem);
  line-height:1.75;
}
.A-filmklappe .fkl-text p{margin:0 0 1em}
.A-filmklappe .fkl-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-filmklappe .fkl-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .A-filmklappe .fkl-szene{grid-column:span 2}
  .A-filmklappe .fkl-balken{height:clamp(30px,7.4vw,44px);clip-path:polygon(0 0,100% 0,100% 64%,0 96%)}
  .A-filmklappe .fkl-streifen{background:repeating-linear-gradient(112deg,
    color-mix(in srgb,var(--on-hero) 92%,var(--hero)) 0 17px,
    color-mix(in srgb,var(--on-hero) 6%,var(--hero)) 17px 34px)}
}
@media (max-width:460px){
  .A-filmklappe .fkl-raster{grid-template-columns:1fr}
  .A-filmklappe .fkl-szene{grid-column:span 1}
}

/* --- Seitentyp: Filmstreifen --- */
/* --- Seitentyp: Filmstreifen --- */
/* Filmstreifen: ein waagerecht liegender Streifen mit Perforation oben und unten, darin fuenf
   Einzelbilder nebeneinander; das groesste traegt den Domainnamen, zwischen den Bildern stehen
   die Bildnummern, der Preis laeuft als Randbelichtung in sehr kleiner Schrift am Streifen entlang. */
.A-filmstreifen{background:var(--bg)}
.A-filmstreifen .fsr{
  padding-top:clamp(24px,4.4vw,58px);
  padding-bottom:clamp(22px,3.6vw,46px);
}

/* Der Streifen selbst: Filmgrund, immer zum Textton hin gemischt */
.A-filmstreifen .fsr-streifen{
  position:relative;
  background:color-mix(in srgb,var(--on-hero) 10%,var(--hero));
  color:var(--on-hero);
  border:1px solid color-mix(in srgb,var(--on-hero) 16%,transparent);
  border-radius:3px;
  padding:0;
  overflow:hidden;
  box-shadow:0 22px 50px -38px color-mix(in srgb,var(--on-hero) 60%,var(--hero));
}

/* Perforation: Loecher in der Farbe des Seitengrunds, oben und unten */
.A-filmstreifen .fsr-perf{
  display:block;
  height:clamp(13px,1.8vw,19px);
  background:repeating-linear-gradient(90deg,
    transparent 0 9px,
    var(--bg) 9px 23px,
    transparent 23px 32px);
}

/* Randbelichtung: sehr kleine Schrift laengs am Streifen, traegt den Preis */
.A-filmstreifen .fsr-belicht{
  margin:0;
  padding:2px clamp(10px,1.8vw,18px) 3px;
  font:700 clamp(.5rem,1.05vw,.66rem)/1.5 var(--font-b);
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip;
  color:color-mix(in srgb,var(--accent) 55%,var(--on-hero));
}
.A-filmstreifen .fsr-belicht b{font-weight:800;letter-spacing:.14em}
.A-filmstreifen .fsr-belicht-u{
  text-align:right;
  color:color-mix(in srgb,var(--on-hero) 62%,var(--hero));
}

/* Reihe der Einzelbilder */
.A-filmstreifen .fsr-reihe{
  container-type:inline-size;
  width:100%;
  display:flex;
  align-items:stretch;
  gap:0;
  padding:0 clamp(5px,1vw,9px) 1px;
}
.A-filmstreifen .fsr-kader{
  flex:1 1 130px;
  min-width:0;
  margin:3px;
  aspect-ratio:3 / 2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.25em;
  padding:clamp(8px,1.4vw,14px);
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 22% 12%,color-mix(in srgb,var(--on-hero) 20%,transparent),transparent 62%),
    linear-gradient(152deg,
      color-mix(in srgb,var(--primary) 20%,var(--hero)),
      color-mix(in srgb,var(--on-hero) 16%,var(--hero)) 58%,
      color-mix(in srgb,var(--accent) 16%,var(--hero)));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 30%,transparent);
}
.A-filmstreifen .fsr-haupt{
  flex:2.5 1 230px;
  container-type:inline-size;
  aspect-ratio:auto;
  min-height:21cqw;
  justify-content:center;
  background:
    radial-gradient(130% 110% at 78% 18%,color-mix(in srgb,var(--on-hero) 26%,transparent),transparent 66%),
    linear-gradient(118deg,
      color-mix(in srgb,var(--on-hero) 22%,var(--hero)),
      color-mix(in srgb,var(--primary) 26%,var(--hero)) 54%,
      var(--hero));
}
.A-filmstreifen .fsr-kl{
  font:700 .6rem/1 var(--font-b);
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.68;
}
.A-filmstreifen .fsr-wert{
  font:800 clamp(.95rem,1.9vw,1.3rem)/1.15 var(--font-h);
  overflow-wrap:anywhere;
}
.A-filmstreifen .fsr-name{
  margin:.25em 0 0;
  color:var(--on-hero);
  font:800 clamp(1.05rem,8.2cqw,2.5rem)/1.04 var(--font-h);
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.A-filmstreifen .fsr-lead{
  margin:.45em 0 0;
  font-size:clamp(.76rem,3.2cqw,.98rem);
  line-height:1.4;
  opacity:.82;
}

/* Bildnummern in den Stegen zwischen den Bildern */
.A-filmstreifen .fsr-nr{
  align-self:center;
  writing-mode:vertical-rl;
  padding:0 1px;
  font:700 .56rem/1 var(--font-b);
  letter-spacing:.18em;
  color:color-mix(in srgb,var(--accent) 50%,var(--on-hero));
  opacity:.85;
}

/* Unter dem Streifen: Text links, Kaufzeile rechts */
.A-filmstreifen .fsr-unten{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  align-items:start;
  margin-top:clamp(18px,3vw,34px);
}
.A-filmstreifen .fsr-text{min-width:0;font-size:clamp(1rem,1.5vw,1.08rem);line-height:1.75}
.A-filmstreifen .fsr-text p{margin:0 0 1em}
.A-filmstreifen .fsr-kauf{min-width:0;padding-top:2px;border-top:2px solid var(--primary)}
.A-filmstreifen .fsr-kauf .ab{margin-top:14px}
.A-filmstreifen .fsr-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  /* Schmal: der Streifen stellt sich auf, Perforation links und rechts */
  .A-filmstreifen .fsr-streifen{
    display:grid;
    grid-template-columns:clamp(11px,3.4vw,15px) minmax(0,1fr) clamp(11px,3.4vw,15px);
    grid-template-rows:auto 1fr auto;
  }
  .A-filmstreifen .fsr-perf{
    height:auto;
    background:repeating-linear-gradient(180deg,
      transparent 0 9px,
      var(--bg) 9px 23px,
      transparent 23px 32px);
  }
  .A-filmstreifen .fsr-perf:first-child{grid-column:1;grid-row:1 / 4}
  .A-filmstreifen .fsr-perf:last-child{grid-column:3;grid-row:1 / 4}
  .A-filmstreifen .fsr-belicht{grid-column:2;grid-row:1;letter-spacing:.1em;padding:3px 6px}
  .A-filmstreifen .fsr-belicht-u{grid-row:3}
  .A-filmstreifen .fsr-reihe{grid-column:2;grid-row:2;flex-direction:column;padding:0 0 2px}
  .A-filmstreifen .fsr-kader{
    flex:0 1 auto;width:auto;aspect-ratio:auto;
    min-height:82px;margin:3px 0;
  }
  .A-filmstreifen .fsr-haupt{flex:0 1 auto;min-height:40cqw;width:100%}
  .A-filmstreifen .fsr-nr{
    writing-mode:horizontal-tb;align-self:flex-end;
    padding:1px 4px;font-size:.54rem;
  }
  .A-filmstreifen .fsr-unten{grid-template-columns:1fr}
}

/* --- Seitentyp: Knopfkarte --- */
/* --- Seitentyp: Knopfkarte --- */
/* Knopfkarte: ein Stück Karton mit Aufhängelöchern, auf das Knöpfe mit Faden aufgenäht sind.
   Jeder Knopf ist ein Inline-SVG mit zwei oder vier Löchern und einem durchgezogenen Faden,
   daneben steht das zugehörige Merkmal. Der grösste Knopf trägt den Preis. Oben der
   Domainname als Sortenbezeichnung, unten die Angabe zu Linien und Stückzahl.
   Lochzahl, Durchmesser und Neigung jedes Knopfes kommen aus crc32 des Domainnamens. */

.A-knopfkarte{background:var(--bg)}
.A-knopfkarte .knk{padding-top:clamp(26px,4.8vw,62px);padding-bottom:20px}

/* Der Karton. Er ist der Container: alle Knopfdurchmesser rechnen in cqw seiner Breite. */
.knk-karte{position:relative;container-type:inline-size;max-width:880px;margin:0 auto;
  padding:clamp(34px,5cqw,52px) clamp(18px,3.4cqw,38px) clamp(18px,2.8cqw,30px);
  border:1px solid color-mix(in srgb,var(--ink) 20%,var(--line));border-radius:calc(var(--r) / 2);
  background:
    repeating-linear-gradient(94deg,color-mix(in srgb,var(--ink) 4%,transparent) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(6deg,color-mix(in srgb,var(--ink) 3%,transparent) 0 1px,transparent 1px 9px),
    color-mix(in srgb,var(--ink) 7%,var(--surface));
  box-shadow:0 26px 48px -44px color-mix(in srgb,var(--ink) 48%,transparent)}

/* Zwei gestanzte Aufhängelöcher in der Oberkante */
.knk-stanz{position:absolute;top:clamp(11px,1.8cqw,17px);width:clamp(13px,2.2cqw,18px);
  height:clamp(13px,2.2cqw,18px);border-radius:50%;background:var(--bg);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent)}
.knk-stanz-l{left:clamp(18px,3.4cqw,38px)}
.knk-stanz-r{right:clamp(18px,3.4cqw,38px)}

.knk-kopf{border-bottom:1px solid color-mix(in srgb,var(--ink) 16%,var(--line));
  padding-bottom:clamp(12px,2cqw,20px);margin-bottom:clamp(16px,2.6cqw,28px)}
.knk-sorte{margin:0;font:700 clamp(.6rem,1.3cqw,.72rem)/1.3 var(--font-b);letter-spacing:.26em;
  text-transform:uppercase;color:var(--primary)}
.knk-name{margin:.3em 0 0;font:800 clamp(1.5rem,5.4cqw,2.8rem)/1.06 var(--font-h);letter-spacing:-.03em;
  color:var(--ink);overflow-wrap:anywhere}
.knk-zeile{margin:.5em 0 0;font-size:clamp(.92rem,1.9cqw,1.08rem);line-height:1.5;color:var(--muted);
  max-width:48ch}

.knk-feld{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(18px,3.4cqw,44px);
  align-items:center}

/* Die aufgenähten Knöpfe, je Zeile einer mit seinem Merkmal */
.knk-reihe{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,1.8cqw,18px);
  --knk-b:clamp(58px,9.2cqw,88px)}
.knk-reihe li{display:flex;align-items:center;gap:clamp(10px,2cqw,20px);min-width:0}
.knk-knopf{flex:0 0 auto;display:block;width:calc(var(--knk-b) * var(--knk-g))}
.knk-knopf svg{display:block;width:100%;height:auto;max-width:none;transform:rotate(var(--knk-d))}
.knk-scheibe{fill:color-mix(in srgb,var(--primary) 26%,var(--surface));
  stroke:color-mix(in srgb,var(--ink) 34%,transparent)}
.knk-rille{fill:none;stroke:color-mix(in srgb,var(--ink) 20%,transparent)}
.knk-loch{fill:color-mix(in srgb,var(--ink) 15%,var(--surface));
  stroke:color-mix(in srgb,var(--ink) 32%,transparent);stroke-width:1.2}
/* Der Akzent trägt hier keinen Text, er ist nur Faden. Zum Textton hin gemischt bleibt
   er in jeder Farbwelt sichtbar, auch wo der Akzent selbst sehr hell ist. */
.knk-faden{stroke:color-mix(in srgb,var(--accent) 66%,var(--ink));stroke-linejoin:round}
.knk-merk{display:flex;flex-direction:column;min-width:0}
.knk-merk b{font:700 clamp(.98rem,2.1cqw,1.2rem)/1.25 var(--font-h);color:var(--ink);
  overflow-wrap:anywhere}
.knk-merk small{margin-top:.15em;font:600 .66rem var(--font-b);letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}

/* Der grösste Knopf: er trägt den Preis und richtet seine Schrift nach sich selbst */
.knk-gross{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4cqw,14px)}
.knk-grossknopf{position:relative;container-type:inline-size;
  width:clamp(152px,24cqw,218px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--primary);color:var(--on-primary);
  /* Kein kräftiger Schatten aus --ink: in den dunklen Farbwelten ist --ink hell und aus
     dem Schatten wird ein Schein. Die Wölbung kommt darum von innen. */
  box-shadow:inset 0 clamp(-8px,-1.4cqw,-4px) 0 color-mix(in srgb,var(--on-primary) 15%,transparent),
    0 14px 26px -22px color-mix(in srgb,var(--ink) 38%,transparent)}
.knk-grosssvg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.knk-grossknopf .knk-rille{stroke:color-mix(in srgb,var(--on-primary) 38%,transparent)}
.knk-grossknopf .knk-loch{fill:color-mix(in srgb,var(--on-primary) 24%,var(--primary));
  stroke:color-mix(in srgb,var(--on-primary) 52%,transparent)}
.knk-grossknopf .knk-faden{stroke:color-mix(in srgb,var(--on-primary) 72%,transparent)}
.knk-preis{position:relative;z-index:1;display:block;text-align:center;padding:0 14cqw}
.knk-preis small{display:block;font:700 clamp(.5rem,4.4cqw,.66rem)/1.3 var(--font-b);
  letter-spacing:.22em;text-transform:uppercase;opacity:.8}
.knk-preis b{display:block;margin-top:.2em;font:800 clamp(.95rem,13cqw,1.5rem)/1.05 var(--font-h);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.knk-rate{margin:0;font-size:clamp(.7rem,1.5cqw,.82rem);font-weight:600;color:var(--primary)}

.knk-fuss{margin:clamp(16px,2.6cqw,28px) 0 0;padding-top:clamp(10px,1.8cqw,16px);
  border-top:1px solid color-mix(in srgb,var(--ink) 16%,var(--line));
  font-size:clamp(.6rem,1.2cqw,.7rem);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:center}

.knk-text{max-width:880px;margin:clamp(20px,3.2vw,38px) auto 0}
.knk-text p{margin:0;line-height:1.75;color:var(--muted);max-width:66ch}
.knk-text .desc{margin:1em 0 0}
.knk-sc{padding-top:10px}

@media (max-width:780px){
  /* Aus Nebeneinander wird Untereinander. Die Knopfspalte darf dann nicht mehr auf eine
     Mindestbreite wachsen, sonst bleibt neben dem Preisknopf eine leere Spalte stehen. */
  .knk-feld{grid-template-columns:minmax(0,1fr);justify-items:center}
  .knk-reihe{width:100%;max-width:420px}
  .knk-gross{flex:0 1 auto}
  .knk-grossknopf{width:clamp(150px,44vw,200px)}
}

/* --- Seitentyp: Kontaktbogen --- */
/* --- Seitentyp: Kontaktbogen --- */
/* Kontaktbogen: ein Raster aus zwoelf kleinen Negativen, eines mit Stift umkreist und abgehakt,
   der Domainname als Beschriftung des Bogens oben, die Merkmale als Angaben zu Film, Blende und
   Entwicklung, der Preis liegt bei der umkreisten Aufnahme. */
.A-kontaktbogen{background:var(--bg)}
.A-kontaktbogen .kbg{
  max-width:1000px;margin-left:auto;margin-right:auto;
  padding-top:clamp(28px,5vw,66px);
  padding-bottom:clamp(22px,3.6vw,46px);
}

/* Beschriftung des Bogens */
.A-kontaktbogen .kbg-kopf{
  display:flex;flex-direction:column;gap:.18em;
  padding-bottom:clamp(10px,1.6vw,16px);
  margin-bottom:clamp(12px,2vw,20px);
  border-bottom:2px solid var(--primary);
}
.A-kontaktbogen .kbg-kl{
  font:700 .66rem/1 var(--font-b);
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.A-kontaktbogen .kbg-name{
  margin:.2em 0 0;color:var(--ink);
  font:800 clamp(1.5rem,4.2vw,2.8rem)/1.05 var(--font-h);
  letter-spacing:-.02em;overflow-wrap:anywhere;
}
.A-kontaktbogen .kbg-lead{margin:.2em 0 0;color:var(--muted);font-size:clamp(.95rem,1.5vw,1.08rem)}

/* Der Bogen: Raster ohne Fugen, die Trennlinien liegen als Ring an jedem Feld */
.A-kontaktbogen .kbg-bogen{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  padding:clamp(8px,1.4vw,14px);
  background:color-mix(in srgb,var(--on-hero) 14%,var(--hero));
  border:1px solid var(--line);
  border-radius:calc(var(--r) / 2);
  box-shadow:0 20px 44px -36px color-mix(in srgb,var(--on-hero) 70%,var(--hero));
}
.A-kontaktbogen .kbg-feld{
  container-type:inline-size;
  width:100%;
  position:relative;
  margin:0;
  aspect-ratio:3 / 2;
  color:var(--on-hero);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--on-hero) 24%,transparent);
}
.A-kontaktbogen .kbg-neg{
  position:absolute;inset:0;
  background:
    radial-gradient(58% 54% at var(--kbg-x,42%) var(--kbg-y,38%),
      color-mix(in srgb,var(--on-hero) 52%,transparent),transparent 72%),
    radial-gradient(34% 40% at calc(100% - var(--kbg-x,42%)) calc(100% - var(--kbg-y,38%)),
      color-mix(in srgb,var(--accent) 34%,transparent),transparent 68%),
    linear-gradient(var(--kbg-a,40deg),
      color-mix(in srgb,var(--primary) 26%,var(--hero)),
      color-mix(in srgb,var(--on-hero) 12%,var(--hero)));
}
.A-kontaktbogen .kbg-bz{
  position:absolute;left:4px;top:3px;
  font:700 clamp(.52rem,4cqw,.7rem)/1 var(--font-b);
  letter-spacing:.14em;
  color:color-mix(in srgb,var(--on-hero) 78%,var(--hero));
}

/* Die umkreiste Aufnahme */
.A-kontaktbogen .kbg-wahl{z-index:2}
.A-kontaktbogen .kbg-kreis{
  position:absolute;inset:-7px;
  border:3px solid var(--accent);
  border-width:3px 4px 2px 4px;
  border-radius:50%;
  transform:rotate(-6deg);
  opacity:.92;
  pointer-events:none;
}
.A-kontaktbogen .kbg-kreis::after{
  content:"";position:absolute;inset:3px -3px -2px 2px;
  border:2px solid var(--accent);
  border-radius:50%;
  transform:rotate(5deg);
  opacity:.6;
}
.A-kontaktbogen .kbg-haken{
  position:absolute;right:-13px;top:-15px;
  width:clamp(26px,20cqw,42px);height:auto;max-width:none;
  stroke:var(--accent);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(7deg);
}
.A-kontaktbogen .kbg-preis{
  position:absolute;left:5px;right:5px;bottom:5px;
  display:flex;flex-direction:column;gap:.1em;
  padding:.35em .5em .4em;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  border-radius:calc(var(--r) / 3);
}
.A-kontaktbogen .kbg-preis small{
  font:700 clamp(.5rem,3.4cqw,.62rem)/1 var(--font-b);
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.A-kontaktbogen .kbg-preis b{
  font:800 clamp(.8rem,9cqw,1.3rem)/1.05 var(--font-h);
  color:var(--primary);overflow-wrap:anywhere;
}
.A-kontaktbogen .kbg-wahlnote{
  margin:.7em 0 clamp(14px,2.4vw,24px);
  font:700 .72rem/1.4 var(--font-b);
  letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 60%,var(--ink));
}

/* Angaben zu Film, Blende, Entwicklung */
.A-kontaktbogen .kbg-angaben{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:0 0 clamp(16px,2.6vw,28px);
}
.A-kontaktbogen .kbg-z{
  min-width:0;
  padding:.65em .8em;
  box-shadow:0 0 0 1px var(--line);
  background:var(--surface);
}
.A-kontaktbogen .kbg-z dt{
  font:700 .62rem/1 var(--font-b);
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.A-kontaktbogen .kbg-z dd{margin:.35em 0 0;font-weight:700;overflow-wrap:anywhere}

.A-kontaktbogen .kbg-text{max-width:68ch;font-size:clamp(1rem,1.5vw,1.08rem);line-height:1.75}
.A-kontaktbogen .kbg-text p{margin:0 0 1em}
.A-kontaktbogen .kbg-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-kontaktbogen .kbg-bogen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .A-kontaktbogen .kbg-angaben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .A-kontaktbogen .kbg-haken{right:-8px;top:-10px}
}
@media (max-width:460px){
  .A-kontaktbogen .kbg-bogen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .A-kontaktbogen .kbg-angaben{grid-template-columns:1fr}
}

/* --- Seitentyp: Kreuzworträtsel --- */
/* --- Seitentyp: Kreuzworträtsel --- */
/* Kreuzwort: ein Gitter aus weißen und schwarzen Feldern, der Name waagerecht,
   ein Merkmal senkrecht, daneben die Fragen als nummerierte Liste, der Preis
   als Lösungswort in einer eigenen, hervorgehobenen Zeile unter dem Gitter. */
.A-kreuzwort{background:var(--bg)}
.A-kreuzwort .kwr{padding-top:clamp(24px,4.4vw,58px);padding-bottom:clamp(18px,3vw,36px)}

/* Kopf: Rätselnummer, Name, Zeile */
.kwr-kopf{max-width:1060px;margin:0 auto clamp(14px,2.2vw,24px)}
.kwr-nr{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 .5em;font:700 clamp(.62rem,1.4vw,.72rem)/1.4 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.kwr-nr span:first-child{color:var(--primary)}
.A-kreuzwort .kwr-name{margin:0;font:800 clamp(1.6rem,5.2vw,2.7rem)/1.05 var(--font-h);letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.kwr-tld{color:var(--primary);font-weight:700}
.kwr-lead{margin:.4em 0 0;max-width:62ch;font-size:clamp(.95rem,2vw,1.08rem);line-height:1.5;color:var(--muted);overflow-wrap:anywhere}

/* Blatt: links das Gitter, rechts die Fragen */
.kwr-blatt{max-width:1060px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(16px,2.8vw,32px)}
.kwr-links{flex:1 1 380px;min-width:0}
.kwr-rechts{flex:1 1 268px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) / 2);padding:clamp(13px,2vw,19px)}

/* Das Gitter: Fugen je Feld, nie über gap */
.kwr-gitter{container-type:inline-size;width:100%;display:grid;grid-template-columns:repeat(var(--kwr-c,12),1fr);gap:0;background:var(--surface);
  box-shadow:0 0 0 2px var(--ink),0 22px 48px -36px color-mix(in srgb,var(--ink) 72%,transparent)}
.kwr-feld{position:relative;aspect-ratio:1;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line)}
.kwr-feld b{font:700 calc(100cqw / var(--kwr-c,12) * .52)/1 var(--font-h);text-transform:uppercase;letter-spacing:0}
.kwr-feld i{position:absolute;top:4%;left:7%;font:700 calc(100cqw / var(--kwr-c,12) * .26)/1 var(--font-b);font-style:normal;font-variant-numeric:tabular-nums;color:var(--muted)}
.kwr-o{background:var(--surface)}
.kwr-x{background:color-mix(in srgb,var(--ink) 84%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 84%,var(--surface))}
.kwr-w,.kwr-s{background:color-mix(in srgb,var(--primary) 15%,var(--surface));color:var(--ink)}
.kwr-w{box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 55%,var(--line))}
.kwr-s b{color:var(--primary)}

/* Lösungswort: der Preis, Feld für Feld */
.kwr-loesung{margin-top:clamp(12px,2vw,18px);container-type:inline-size;width:100%}
.kwr-lt{display:block;font:800 clamp(.62rem,1.4vw,.72rem)/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-bottom:.5em}
.kwr-lz{display:flex;flex-wrap:wrap;align-items:stretch;gap:5px;margin:0;position:relative}
.kwr-lz .kwr-feld{flex:0 0 auto;width:clamp(26px,7cqw,44px);aspect-ratio:1;box-shadow:none}
.kwr-lw{background:var(--primary);color:var(--on-primary);border-radius:2px}
.kwr-lw b{font-size:clamp(.95rem,4cqw,1.5rem);color:var(--on-primary);font-variant-numeric:tabular-nums}
.kwr-luecke{display:block;flex:0 0 auto;width:clamp(8px,2cqw,14px)}
.kwr-vl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kwr-rate{display:block;margin-top:.7em;font:600 .84rem/1.3 var(--font-b);color:var(--primary)}

/* Fragen */
.kwr-ht{margin:0;font:800 clamp(.68rem,1.5vw,.78rem)/1.3 var(--font-h);text-transform:uppercase;letter-spacing:.2em;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:9px}
.kwr-gt{margin:14px 0 6px;font:700 .7rem/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.14em;color:var(--primary)}
.kwr-fl{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.kwr-fl li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;line-height:1.45;color:var(--muted)}
.kwr-fl b{flex:0 0 auto;min-width:1.55em;height:1.55em;display:grid;place-items:center;border:1px solid var(--line);border-radius:3px;font:700 .72rem/1 var(--font-b);font-variant-numeric:tabular-nums;color:var(--ink);background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
.kwr-fl span{min-width:0;overflow-wrap:anywhere}
.kwr-fl em{font-style:normal;font-weight:700;color:var(--ink)}
.kwr-hin{margin:14px 0 0;padding-top:10px;border-top:1px dashed var(--line);font:600 .74rem/1.4 var(--font-b);color:var(--muted)}

/* Fuß: Text und Kaufzeile */
.kwr-fuss{max-width:72ch;margin:clamp(20px,3vw,34px) auto 0;color:var(--muted);line-height:1.7}
.kwr-fuss>p{margin:0 0 1em;overflow-wrap:anywhere}
.A-kreuzwort .kwr-fuss .custom{font-size:.95rem}
.A-kreuzwort .kwr-fuss .ab{margin-top:16px}
.A-kreuzwort .kwr-sc{padding-top:8px}

@media (max-width:780px){
  .A-kreuzwort .kwr{padding-top:20px}
  .kwr-blatt{flex-direction:column;gap:18px}
  .kwr-links{flex:0 1 auto;width:100%}
  .kwr-rechts{flex:0 1 auto;width:100%}
  .kwr-gitter{box-shadow:0 0 0 2px var(--ink)}
  .kwr-lz{gap:4px}
}

/* --- Seitentyp: Lochkarte --- */
/* --- Seitentyp: Lochkarte --- */
/* Lochkarte: querformatige Karte mit abgeschraegter Ecke, 80 Spalten gestanzter Loecher,
   Merkmale als Feldbeschriftungen ueber Spaltenbereichen, Preis gestanzt in den letzten acht Spalten */
.A-lochkarte{background:var(--bg)}
.A-lochkarte .lkt{padding-top:clamp(22px,4.6vw,54px);padding-bottom:clamp(18px,3.6vw,40px)}

/* Der Schatten folgt der abgeschraegten Ecke nur ueber filter, nicht ueber box-shadow */
.lkt-huelle{max-width:1080px;margin:0 auto;filter:drop-shadow(0 20px 34px color-mix(in srgb,var(--ink) 26%,transparent))}
/* Haarlinie als Rand: aussen --line, innen --surface, beide mit derselben Schraege */
.lkt-blatt{--lkt-ecke:clamp(18px,3.6vw,38px);padding:1px;background:var(--line);clip-path:polygon(var(--lkt-ecke) 0,100% 0,100% 100%,0 100%,0 var(--lkt-ecke))}
.lkt-karte{--lkt-ecke:clamp(17px,3.5vw,37px);padding:clamp(18px,3.2vw,32px) clamp(16px,3vw,30px) clamp(12px,2.2vw,20px);background:var(--surface);color:var(--ink);clip-path:polygon(var(--lkt-ecke) 0,100% 0,100% 100%,0 100%,0 var(--lkt-ecke))}

.lkt-kopf{padding-left:clamp(14px,2.8vw,32px);margin-bottom:clamp(14px,2.6vw,22px)}
.lkt-marke{margin:0;font:700 .62rem/1.4 var(--font-b);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.lkt-name{margin:.14em 0 0;font:700 clamp(1.3rem,4.4vw,2.6rem)/1.08 var(--font-h);letter-spacing:.02em;color:var(--ink);overflow-wrap:anywhere}
.lkt-lead{margin:.35em 0 0;max-width:66ch;font:400 clamp(.86rem,1.8vw,1rem)/1.5 var(--font-b);color:var(--muted)}

/* Feldbeschriftungen ueber Spaltenbereichen; Fugen je Feld als Innenrahmen, nicht als Luecke */
.lkt-felder{display:grid;grid-template-columns:repeat(80,minmax(0,1fr));background:color-mix(in srgb,var(--primary) 7%,var(--surface))}
.lkt-feld{grid-column:var(--lkt-a) / var(--lkt-b);min-width:0;padding:.4em .55em;box-shadow:0 0 0 1px var(--line)}
.lkt-feld small{display:block;font-size:.53rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.lkt-feld b{display:block;font:700 clamp(.72rem,1.4vw,.92rem)/1.25 var(--font-h);overflow-wrap:anywhere}
.lkt-feld-preis{background:var(--primary);color:var(--on-primary);box-shadow:0 0 0 1px var(--primary)}
.lkt-feld-preis small{color:color-mix(in srgb,var(--on-primary) 76%,var(--primary))}
.lkt-feld-preis b{font-size:clamp(.78rem,1.6vw,1.05rem);font-variant-numeric:tabular-nums}

/* 80 Spalten mal 12 Zeilen; nur gestanzte Stellen sind Elemente, der Rest ist Aufdruck */
.lkt-matrix{display:grid;grid-template-columns:repeat(80,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));aspect-ratio:80 / 13;background-image:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--line) 70%,transparent) 0 1px,transparent 1px 1.25%),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--line) 80%,transparent) 0 1px,transparent 1px 8.3333%);
    border-left:1px solid var(--line);border-right:1px solid var(--line)}
.lkt-loch{grid-column:var(--lkt-c);grid-row:var(--lkt-r);align-self:center;justify-self:center;width:58%;height:62%;border-radius:1px;background:color-mix(in srgb,var(--ink) 84%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--surface) 55%,transparent)}
.lkt-loch-preis{background:var(--primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 45%,transparent)}

.lkt-spalten{display:grid;grid-template-columns:repeat(80,minmax(0,1fr));margin:.4em 0 0;font:700 .5rem/1.4 var(--font-b);letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.lkt-spalten span{grid-column:var(--lkt-a) / var(--lkt-b);text-align:right;padding-right:.2em}

.lkt-beleg{max-width:1080px;margin:clamp(18px,3vw,28px) auto 0;border-top:1px solid var(--line);padding-top:clamp(14px,2.4vw,20px)}
.lkt-bk{margin:0 0 .5em;font:700 .64rem/1.3 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--primary)}
.lkt-text{margin:0;line-height:1.75;color:var(--muted);max-width:68ch}
.A-lochkarte .desc.custom{margin-top:.8em;line-height:1.7;color:var(--muted)}
.A-lochkarte .ab{margin-top:clamp(14px,2.4vw,20px)}
.lkt-sc{padding-top:12px}

@media (max-width:780px){
  .lkt-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lkt-feld{grid-column:auto}
  .lkt-feld-preis{grid-column:1 / -1}
  .lkt-matrix{aspect-ratio:80 / 17}
  .lkt-spalten{display:none}
  .lkt-marke{letter-spacing:.18em}
}

/* --- Seitentyp: Nähetikett --- */
/* --- Seitentyp: Nähetikett --- */
/* Nähetikett: Blick in einen Kragen. Aus dem Halsausschnitt hängt ein schmales, eingenähtes
   Band, das die ganze Verkaufsseite trägt: Marke, Pflegesymbole als Inline-SVG, die Merkmale
   als Materialangaben in Prozent, der Preis als UVP und unten eine Fusszeile in sehr kleiner
   Schrift mit dem Herstellungsland. Das Band ist selbst der Container, alle Maße darin
   rechnen in cqw seiner Breite. */

.A-naehetikett{background:var(--bg)}
.A-naehetikett .nek{padding-top:clamp(20px,4vw,52px);padding-bottom:20px}

/* Kragen: das Kleidungsstück als Fläche, darin der ausgeschnittene Hals */
.nek-kragen{position:relative;display:flex;justify-content:center;
  padding-top:clamp(64px,10.4vw,110px);margin-bottom:clamp(18px,3vw,34px)}
.nek-stoff{position:absolute;z-index:0;left:50%;top:0;transform:translateX(-50%);
  width:min(720px,100%);height:clamp(148px,23vw,232px);
  /* nie --ink in --hero mischen: in neun Farbwelten ist --hero hell. Zum Textton hin
     mischen verschiebt die Fläche in jeder Farbwelt gleich und hält sie von --bg getrennt. */
  background:color-mix(in srgb,var(--on-hero) 13%,var(--hero));
  border-radius:0 0 16% 16% / 0 0 34% 34%;
  box-shadow:inset 0 clamp(-8px,-1.2vw,-5px) 0 color-mix(in srgb,var(--on-hero) 24%,var(--hero))}
.nek-stoff::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-hero) 12%,transparent) 0 1px,transparent 1px 5px)}
.nek-ausschnitt{position:absolute;z-index:1;left:50%;top:0;transform:translateX(-50%);
  width:clamp(186px,30vw,252px);height:clamp(62px,9.4vw,94px);background:var(--bg);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  border-bottom:clamp(5px,.9vw,8px) solid color-mix(in srgb,var(--on-hero) 38%,var(--hero))}

/* Das eingenähte Band: schmal, hochformatig, mit Webkanten links und rechts */
.nek-band{position:relative;z-index:2;container-type:inline-size;
  width:clamp(228px,33vw,310px);background:var(--surface);
  border:1px solid var(--line);border-radius:calc(var(--r) / 3);
  padding:clamp(18px,7cqw,26px) clamp(15px,6cqw,22px) clamp(14px,5cqw,20px);
  text-align:center;
  box-shadow:0 20px 40px -34px color-mix(in srgb,var(--ink) 70%,transparent)}
.nek-band::before,.nek-band::after{content:"";position:absolute;top:0;bottom:0;width:clamp(4px,1.8cqw,6px);
  background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--primary) 34%,transparent) 0 3px,transparent 3px 7px)}
.nek-band::before{left:0}
.nek-band::after{right:0}

/* Naht: die Zickzackstiche, mit denen das Band oben und unten eingefasst ist */
.nek-naht{position:absolute;left:clamp(10px,4cqw,16px);right:clamp(10px,4cqw,16px);height:clamp(5px,2cqw,7px);
  background:
    repeating-linear-gradient(68deg,color-mix(in srgb,var(--primary) 70%,transparent) 0 1.4px,transparent 1.4px 6px),
    repeating-linear-gradient(-68deg,color-mix(in srgb,var(--primary) 70%,transparent) 0 1.4px,transparent 1.4px 6px)}
.nek-naht-o{top:clamp(6px,2.4cqw,9px)}
.nek-naht-u{bottom:clamp(6px,2.4cqw,9px)}

.nek-oben{margin:0;font:700 clamp(.55rem,2.4cqw,.68rem)/1.3 var(--font-b);
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.nek-marke{margin:.45em 0 0;font:800 clamp(1.15rem,8.6cqw,1.85rem)/1.1 var(--font-h);
  letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.nek-marke span{color:var(--primary)}
.nek-zeile{margin:.7em 0 0;font-size:clamp(.74rem,3.3cqw,.88rem);line-height:1.5;color:var(--muted)}

/* Pflegesymbole: vier Zeichen in einer Reihe, jedes mit seiner Angabe darunter */
.nek-pflege{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(4px,1.6cqw,8px);
  margin:clamp(14px,5.4cqw,20px) 0;padding:clamp(10px,4cqw,15px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nek-pflege span{display:flex;flex-direction:column;align-items:center;gap:clamp(3px,1.4cqw,6px);
  color:var(--ink)}
.nek-pflege svg{width:clamp(22px,11cqw,32px);height:auto;max-width:none}
.nek-pflege i{font-style:normal;font-size:clamp(.44rem,2.1cqw,.56rem);line-height:1.25;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* Materialangaben: die Merkmale als Zusammensetzung in Prozent */
.nek-material{margin:0;text-align:left}
.nek-material div{display:flex;align-items:baseline;gap:6px;padding:clamp(3px,1.4cqw,5px) 0}
.nek-material dt{font:600 clamp(.64rem,2.9cqw,.78rem)/1.3 var(--font-b);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.nek-material div::after{content:"";flex:1 1 auto;border-bottom:1px dotted var(--line);
  transform:translateY(-.22em)}
.nek-material dd{order:3;margin:0;font:700 clamp(.74rem,3.3cqw,.9rem)/1.3 var(--font-h);
  color:var(--ink);font-variant-numeric:tabular-nums}
.nek-groesse{margin:clamp(8px,3cqw,12px) 0 0;padding-top:clamp(8px,3cqw,12px);
  border-top:1px solid var(--line);font-size:clamp(.66rem,2.9cqw,.78rem);color:var(--muted);
  letter-spacing:.06em;overflow-wrap:anywhere}
.nek-groesse b{color:var(--ink)}

/* Der Preis als unverbindliche Preisempfehlung, der einzige kräftige Block im Band */
.nek-uvp{margin:clamp(12px,4.6cqw,18px) 0 0;padding:clamp(10px,4cqw,15px) clamp(8px,3cqw,12px);
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--primary) 32%,var(--line));
  border-radius:calc(var(--r) / 3)}
.nek-uvp small{display:block;font:700 clamp(.5rem,2.2cqw,.62rem)/1.3 var(--font-b);
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.nek-uvp b{display:block;margin-top:.3em;font:800 clamp(1.15rem,8cqw,1.7rem)/1.05 var(--font-h);
  color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.nek-uvp i{display:block;margin-top:.35em;font-style:normal;font-size:clamp(.6rem,2.7cqw,.72rem);
  color:var(--primary);font-weight:600}

.nek-herkunft{margin:clamp(12px,4.6cqw,18px) 0 0;font-size:clamp(.42rem,2cqw,.54rem);line-height:1.5;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}

.nek-text{max-width:60ch;margin:0 auto;text-align:center}
.nek-text p{line-height:1.75;color:var(--muted);margin:0 0 1em}
.nek-text .desc{margin:0 auto 1em;text-align:left}
.nek-sc{padding-top:10px}

@media (max-width:780px){
  .nek-kragen{padding-top:clamp(50px,13vw,74px)}
  .nek-stoff{height:clamp(124px,30vw,172px)}
  .nek-ausschnitt{width:clamp(160px,42vw,210px);height:clamp(52px,13vw,76px)}
  .nek-band{width:min(300px,100%)}
  .nek-text{text-align:left}
  .nek-text .ab{justify-content:flex-start;text-align:left}
}

/* --- Seitentyp: Netzwerkplan --- */
/* --- Seitentyp: Netzwerkplan --- */
/* Netzwerkplan: beschriftete Geraetekaesten (Router, Schalter, Rechner) mit Verbindungslinien als
   Inline-SVG, der Domainname am zentralen Geraet, die Merkmale als Beschriftung an den Verbindungen,
   der Preis am Uebergang ins Internet in einer Wolke */
.A-netzwerkplan{background:var(--bg)}
.A-netzwerkplan .nwp{padding-top:clamp(22px,4.6vw,54px);padding-bottom:clamp(18px,3.6vw,40px)}

.nwp-kopf{max-width:1060px;margin:0 auto clamp(10px,2vw,18px);font:700 .64rem/1.3 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.nwp-plan{max-width:1060px;margin:0 auto;padding:clamp(12px,2.4vw,26px);background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r) / 2);box-shadow:0 24px 56px -46px var(--ink);background-image:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--line) 40%,transparent) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--line) 40%,transparent) 0 1px,transparent 1px 40px)}
/* Die Buehne ist der Bezugsrahmen: Groessen rechnen in cqw, damit sie am Telefon nicht kippen */
.nwp-buehne{position:relative;width:100%;container-type:inline-size;aspect-ratio:200 / 136}

.nwp-leitungen{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;color:color-mix(in srgb,var(--primary) 55%,var(--line))}
.nwp-wan{stroke-dasharray:7 5}

/* Geraetekaesten */
.nwp-geraet{position:absolute;z-index:1;left:var(--nwp-x);top:var(--nwp-y);transform:translate(-50%,-50%);display:block;width:22cqw;max-width:none;padding:1.4cqw 1.6cqw;text-align:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:calc(var(--r) / 3);box-shadow:0 6px 16px -12px var(--ink)}
.nwp-geraet small{display:block;font-size:1.45cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nwp-geraet b{display:block;margin-top:.15em;font:700 1.95cqw/1.25 var(--font-h);overflow-wrap:anywhere}

/* Symbole der Geraete, rein aus Verlaeufen gezeichnet */
.nwp-sym{display:block;width:5cqw;max-width:34px;height:2.2cqw;max-height:16px;margin:0 auto .5em;border-radius:2px;background:color-mix(in srgb,var(--primary) 26%,var(--surface));box-shadow:inset 0 0 0 1px var(--line)}
.nwp-sym-router{border-radius:999px;background:repeating-linear-gradient(90deg,var(--primary) 0 2px,transparent 2px 7px),color-mix(in srgb,var(--primary) 18%,var(--surface))}
.nwp-sym-schalter{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 50%,var(--surface)) 0 2px,transparent 2px 6px),color-mix(in srgb,var(--primary) 14%,var(--surface))}
.nwp-sym-rechner{background:color-mix(in srgb,var(--ink) 16%,var(--surface));box-shadow:inset 0 0 0 1px var(--line),0 2px 0 0 var(--line)}
.nwp-sym-server{background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 45%,var(--surface)) 0 1px,transparent 1px 4px),color-mix(in srgb,var(--primary) 12%,var(--surface))}

/* Das zentrale Geraet traegt den Domainnamen */
.nwp-kern{width:34cqw;max-width:none;padding:2.2cqw 2cqw;background:var(--primary);color:var(--on-primary);border-color:var(--primary);box-shadow:0 14px 34px -22px var(--ink)}
.nwp-kern small{color:color-mix(in srgb,var(--on-primary) 74%,var(--primary))}
.nwp-kern .nwp-sym-router{background:repeating-linear-gradient(90deg,var(--on-primary) 0 2px,transparent 2px 7px),color-mix(in srgb,var(--on-primary) 22%,var(--primary));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-primary) 40%,transparent)}
/* h1 traegt in lander.css fest --ink: am Kerngeraet ausdruecklich umsetzen */
.nwp-name{margin:.18em 0 0;font:800 2.6cqw/1.12 var(--font-h);letter-spacing:-.015em;color:var(--on-primary);overflow-wrap:anywhere}

/* Beschriftung an der Verbindung: Geschwindigkeit, Protokoll, Merkmal */
.nwp-marke{position:absolute;z-index:2;left:var(--nwp-x);top:var(--nwp-y);transform:translate(-50%,-50%);display:block;width:17cqw;max-width:none;padding:1cqw 1.2cqw;text-align:center;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:calc(var(--r) / 4)}
.nwp-marke em{display:block;font:700 1.3cqw/1.3 var(--font-b);font-style:normal;letter-spacing:.12em;color:var(--primary);font-variant-numeric:tabular-nums}
.nwp-marke small{display:block;margin-top:.15em;font-size:1.25cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nwp-marke b{display:block;font:700 1.8cqw/1.2 var(--font-h);color:var(--ink);overflow-wrap:anywhere}
.nwp-marke-wan{border-left-style:dashed}

/* Der Uebergang ins Internet: die Wolke traegt den Preis */
.nwp-wolke{position:absolute;z-index:1;left:var(--nwp-x);top:var(--nwp-y);transform:translate(-50%,-50%);display:grid;place-items:center;width:26cqw;max-width:none;aspect-ratio:120 / 64;color:color-mix(in srgb,var(--on-hero) 40%,var(--hero))}
.nwp-wolke-form{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.nwp-wolke-text{position:relative;display:block;padding-top:2cqw;text-align:center;color:var(--on-hero)}
.nwp-wolke-text small{display:block;font-size:1.25cqw;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 76%,var(--hero))}
.nwp-wolke-text b{display:block;font:800 2.8cqw/1.15 var(--font-h);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.nwp-unterschrift{max-width:1060px;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}
.nwp-doku{max-width:1060px;margin:clamp(14px,2.4vw,22px) auto 0;border-top:1px solid var(--line);padding-top:clamp(14px,2.4vw,20px)}
.nwp-dk{margin:0 0 .5em;font:700 .64rem/1.3 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--primary)}
.nwp-text{margin:0;line-height:1.75;color:var(--muted);max-width:68ch}
.A-netzwerkplan .desc.custom{margin-top:.8em;line-height:1.7;color:var(--muted)}
.A-netzwerkplan .ab{margin-top:clamp(14px,2.4vw,20px)}
.nwp-sc{padding-top:12px}

/* Schmales Fenster: der Plan wird zum Strang, die Linien entfallen */
@media (max-width:900px){
  .nwp-buehne{aspect-ratio:auto;display:grid;gap:9px;padding-left:16px;border-left:2px solid color-mix(in srgb,var(--primary) 55%,var(--line))}
  .nwp-leitungen{display:none}
  .nwp-geraet,.nwp-marke,.nwp-wolke{position:static;transform:none;width:auto;max-width:none}
  .nwp-geraet,.nwp-marke{text-align:left;padding:9px 12px}
  .nwp-geraet small,.nwp-geraet b,.nwp-marke em,.nwp-marke small,.nwp-marke b,.nwp-wolke-text small,.nwp-wolke-text b{font-size:inherit}
  .nwp-geraet small,.nwp-marke small,.nwp-marke em{font-size:.6rem}
  .nwp-geraet b,.nwp-marke b{font-size:.95rem}
  .nwp-name{font-size:clamp(1.1rem,6vw,1.7rem)}
  .nwp-sym{margin:0 0 .4em;width:28px;height:12px}
  .nwp-wolke{aspect-ratio:auto;display:block;padding:11px 14px 13px;background:var(--hero);border-radius:999px 999px calc(var(--r) / 3) calc(var(--r) / 3)}
  .nwp-wolke-form{display:none}
  .nwp-wolke-text{padding-top:0;text-align:left}
  .nwp-wolke-text small{font-size:.6rem}
  .nwp-wolke-text b{font-size:clamp(1.1rem,5.4vw,1.5rem)}
  .nwp-kopf{letter-spacing:.18em}
}

/* --- Seitentyp: Patchfeld --- */
/* --- Seitentyp: Patchfeld --- */
/* Patchfeld: Frontblech im Serverschrank mit Montageohren, zwei Reihen nummerierter Netzwerkbuchsen,
   Beschriftungsstreifen mit den Merkmalen darueber, Preis auf dem Kabelschild der belegten Buchse */
.A-patchfeld{background:var(--bg)}
.A-patchfeld .pfd{padding-top:clamp(22px,4.6vw,54px);padding-bottom:clamp(18px,3.6vw,40px)}

.pfd-blech{display:flex;align-items:stretch;max-width:1060px;margin:0 auto;background:var(--hero);color:var(--on-hero);border:1px solid color-mix(in srgb,var(--on-hero) 28%,var(--hero));border-radius:calc(var(--r) / 2.5);box-shadow:0 26px 60px -44px var(--ink)}

/* Montageohren mit Schraubloechern */
.pfd-ohr{flex:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;width:clamp(22px,3.2vw,34px);padding:clamp(10px,1.8vw,16px) 0;background:color-mix(in srgb,var(--on-hero) 12%,var(--hero));border-left:1px solid color-mix(in srgb,var(--on-hero) 22%,var(--hero));border-right:1px solid color-mix(in srgb,var(--on-hero) 22%,var(--hero))}
.pfd-ohr i{display:block;width:clamp(8px,1.2vw,11px);height:clamp(8px,1.2vw,11px);border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--on-hero) 45%,var(--hero))}

.pfd-kern{flex:1 1 auto;min-width:0;padding:clamp(14px,2.6vw,24px) clamp(14px,2.8vw,28px) clamp(16px,3vw,26px)}

.pfd-kopf{margin-bottom:clamp(14px,2.6vw,22px);padding-bottom:clamp(10px,2vw,16px);border-bottom:1px dashed color-mix(in srgb,var(--on-hero) 34%,var(--hero))}
.pfd-marke{margin:0;font:700 .62rem/1.4 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 70%,var(--hero))}
/* h1 traegt in lander.css fest --ink: auf dem Frontblech ausdruecklich umsetzen */
.pfd-name{margin:.2em 0 0;font:800 clamp(1.3rem,4.6vw,2.7rem)/1.06 var(--font-h);letter-spacing:-.02em;color:var(--on-hero);overflow-wrap:anywhere}
.pfd-lead{margin:.4em 0 0;max-width:62ch;font:400 clamp(.86rem,1.8vw,1rem)/1.5 var(--font-b);color:color-mix(in srgb,var(--on-hero) 78%,var(--hero))}

.pfd-reihe{margin-top:clamp(12px,2.2vw,18px)}

/* Beschriftungsstreifen: Fugen je Feld als Innenrahmen, nicht als Luecke auf eingefaerbtem Grund */
.pfd-streifen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--surface);color:var(--ink);border-radius:2px;overflow:hidden}
.pfd-feldname{display:block;min-width:0;padding:.42em .7em;box-shadow:0 0 0 1px var(--line)}
.pfd-feldname small{display:block;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pfd-feldname b{display:block;font:700 clamp(.8rem,1.7vw,.98rem)/1.25 var(--font-h);overflow-wrap:anywhere}

/* Die Buchsenreihe */
.pfd-buchsen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(3px,.7vw,7px);margin-top:clamp(5px,1vw,9px)}
.pfd-buchse{display:block;min-width:0;text-align:center}
/* RJ45: Rechteck mit Nase unten, darin die Kontaktreihe */
.pfd-schacht{position:relative;display:block;aspect-ratio:1 / 1.15;background:color-mix(in srgb,var(--on-hero) 14%,var(--hero));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 38%,var(--hero));clip-path:polygon(0 0,100% 0,100% 100%,66% 100%,66% 78%,34% 78%,34% 100%,0 100%)}
.pfd-schacht::after{content:"";position:absolute;left:18%;right:18%;top:16%;height:34%;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-hero) 52%,var(--hero)) 0 1px,transparent 1px 25%)}
.pfd-buchse small{display:block;margin-top:.25em;font:700 .55rem/1.2 var(--font-b);letter-spacing:.06em;color:color-mix(in srgb,var(--on-hero) 62%,var(--hero));font-variant-numeric:tabular-nums}

/* Belegte Buchsen: der Stecker fuellt den Schacht, die Kabelfarbe kommt aus den Variablen */
.pfd-belegt .pfd-schacht{background:var(--pfd-kabel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-hero) 50%,var(--hero))}
.pfd-belegt .pfd-schacht::after{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-hero) 30%,transparent) 0 1px,transparent 1px 25%)}
.pfd-belegt small{color:var(--on-hero)}
.pfd-haupt .pfd-schacht{outline:2px solid var(--on-hero);outline-offset:2px}
.pfd-k1{--pfd-kabel:var(--primary)}
.pfd-k2{--pfd-kabel:var(--accent)}
.pfd-k3{--pfd-kabel:color-mix(in srgb,var(--primary) 45%,var(--accent))}

/* Das Kabel der Hauptbuchse laeuft nach unten und traegt das Schild mit dem Preis */
.pfd-abgang{display:flex;align-items:stretch;gap:clamp(10px,2vw,16px);max-width:1060px;margin:0 auto;padding-left:clamp(26px,5vw,62px)}
.pfd-strang{flex:none;width:clamp(8px,1.4vw,12px);background:var(--pfd-kabel);border-radius:0 0 999px 999px;box-shadow:inset -2px 0 0 color-mix(in srgb,var(--ink) 22%,transparent)}
.pfd-schild{display:block;margin-top:clamp(14px,2.6vw,24px);padding:clamp(9px,1.8vw,15px) clamp(13px,2.4vw,22px);background:var(--surface);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:calc(var(--r) / 3);box-shadow:0 14px 30px -24px var(--ink)}
.pfd-schild small{display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.pfd-schild b{display:block;margin-top:.1em;font:800 clamp(1.25rem,3.6vw,2.1rem)/1.1 var(--font-h);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pfd-schild em{display:block;margin-top:.15em;font:italic 400 clamp(.78rem,1.6vw,.9rem)/1.4 var(--font-b);color:var(--muted)}

.pfd-doku{max-width:1060px;margin:clamp(18px,3vw,28px) auto 0;border-top:1px solid var(--line);padding-top:clamp(14px,2.4vw,20px)}
.pfd-dk{margin:0 0 .5em;font:700 .64rem/1.3 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--primary)}
.pfd-text{margin:0;line-height:1.75;color:var(--muted);max-width:68ch}
.A-patchfeld .desc.custom{margin-top:.8em;line-height:1.7;color:var(--muted)}
.A-patchfeld .ab{margin-top:clamp(14px,2.4vw,20px)}
.pfd-sc{padding-top:12px}

@media (max-width:780px){
  .pfd-streifen{grid-template-columns:1fr}
  .pfd-buchsen{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .pfd-ohr{width:18px}
  .pfd-abgang{padding-left:22px}
  .pfd-marke{letter-spacing:.16em}
}

/* --- Seitentyp: Platine --- */
/* --- Seitentyp: Platine --- */
/* Platine: gruener Traeger aus --hero mit Leiterbahnen im 45-Grad-Raster, grosser Baustein mit dem
   Domainnamen, kleine Bauteile mit den Merkmalen, Preis als Bestueckungswert auf dem Randdruck */
.A-platine{background:var(--bg)}
.A-platine .lpt{padding-top:clamp(22px,4.6vw,54px);padding-bottom:clamp(18px,3.6vw,40px)}

/* Der Traeger: Farbe kommt aus --hero, Aufdruck aus --on-hero */
.lpt-brett{position:relative;isolation:isolate;max-width:1000px;margin:0 auto;padding:clamp(26px,4.4vw,44px) clamp(18px,3.6vw,38px) clamp(16px,2.8vw,26px);background:var(--hero);color:var(--on-hero);border:2px solid color-mix(in srgb,var(--on-hero) 32%,var(--hero));border-radius:calc(var(--r) / 1.4);overflow:hidden;box-shadow:0 28px 64px -46px var(--ink)}

/* Leiterbahnen und Loetaugen liegen unter allem */
.lpt-bahnen{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;max-width:none;color:color-mix(in srgb,var(--on-hero) 30%,var(--hero))}

/* Befestigungsbohrungen in den Ecken */
.lpt-bohrung{position:absolute;width:clamp(9px,1.5vw,13px);height:clamp(9px,1.5vw,13px);border-radius:50%;background:var(--bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--on-hero) 42%,var(--hero))}
.lpt-bohrung-a{left:clamp(8px,1.4vw,14px);top:clamp(8px,1.4vw,14px)}
.lpt-bohrung-b{right:clamp(8px,1.4vw,14px);top:clamp(8px,1.4vw,14px)}
.lpt-bohrung-c{left:clamp(8px,1.4vw,14px);bottom:clamp(8px,1.4vw,14px)}
.lpt-bohrung-d{right:clamp(8px,1.4vw,14px);bottom:clamp(8px,1.4vw,14px)}

.lpt-kopf{display:flex;flex-wrap:wrap;gap:.3em 1.5em;justify-content:center;margin:0 0 clamp(16px,3vw,28px);font:700 .64rem/1.3 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 72%,var(--hero))}

.lpt-feld{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);align-items:center;gap:clamp(12px,2.4vw,26px)}
.lpt-spalte{display:grid;gap:clamp(9px,1.8vw,16px)}

/* Kleine Bauteile: Kennung, Beschriftung, zwei Anschlussfahnen */
.lpt-teil{display:flex;align-items:center;gap:.5em;min-width:0}
.lpt-teil-k{flex:none;font:700 .62rem/1 var(--font-b);letter-spacing:.14em;color:color-mix(in srgb,var(--on-hero) 76%,var(--hero));font-variant-numeric:tabular-nums}
.lpt-teil-b{position:relative;flex:1 1 auto;min-width:0;padding:.45em .7em;background:var(--surface);color:var(--ink);border-radius:2px;box-shadow:0 0 0 1px var(--line),0 2px 0 0 color-mix(in srgb,var(--ink) 24%,transparent)}
.lpt-teil-b::before,.lpt-teil-b::after{content:"";position:absolute;top:50%;width:.5em;height:4px;margin-top:-2px;background:color-mix(in srgb,var(--on-hero) 58%,var(--hero))}
.lpt-teil-b::before{right:100%}
.lpt-teil-b::after{left:100%}
.lpt-teil-b small{display:block;font-size:.56rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.lpt-teil-b b{display:block;font:700 clamp(.82rem,1.7vw,1rem)/1.25 var(--font-h);overflow-wrap:anywhere}

/* Der grosse Baustein traegt den Domainnamen als Bauteilbezeichnung */
.lpt-ic{display:grid;justify-items:center;gap:0;min-width:0}
.lpt-pins{display:flex;gap:clamp(4px,1vw,9px);padding:0 1.6em}
.lpt-pins i{display:block;width:clamp(5px,1vw,9px);height:clamp(7px,1.2vw,11px);background:color-mix(in srgb,var(--on-hero) 62%,var(--hero));border-radius:1px}
.lpt-ic-kern{position:relative;width:100%;container-type:inline-size;padding:clamp(16px,3vw,30px) clamp(14px,2.6vw,28px);background:var(--primary);color:var(--on-primary);border-radius:3px;text-align:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--on-primary) 30%,transparent),0 10px 26px -18px var(--ink)}
.lpt-kerbe{position:absolute;left:50%;top:0;width:clamp(16px,2.6vw,24px);height:clamp(8px,1.3vw,12px);margin-left:calc(clamp(16px,2.6vw,24px) / -2);border-radius:0 0 999px 999px;background:var(--hero)}
.lpt-ic-k{margin:.3em 0 0;font:700 .6rem/1.2 var(--font-b);letter-spacing:.3em;text-transform:uppercase;color:color-mix(in srgb,var(--on-primary) 72%,var(--primary))}
/* h1 traegt in lander.css fest --ink: auf dem Baustein ausdruecklich umsetzen */
.lpt-name{margin:.22em 0 0;font:800 clamp(1.15rem,7.4cqw,2.7rem)/1.06 var(--font-h);letter-spacing:-.02em;color:var(--on-primary);overflow-wrap:anywhere}
.lpt-ic-l{margin:.55em auto 0;max-width:34ch;font:400 clamp(.78rem,2.6cqw,.98rem)/1.5 var(--font-b);color:color-mix(in srgb,var(--on-primary) 80%,var(--primary))}

/* Bestueckungsdruck am Rand: gestrichelte Umrandung, darin der Preis als Bestueckungswert */
.lpt-druck{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6em 1.2em;margin-top:clamp(18px,3.4vw,32px);padding:clamp(9px,1.7vw,15px) clamp(10px,2vw,18px);border:1px dashed color-mix(in srgb,var(--on-hero) 50%,var(--hero));border-radius:3px}
.lpt-druck-k{font:700 .62rem/1.3 var(--font-b);letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 70%,var(--hero))}
.lpt-wert{display:flex;align-items:baseline;gap:.5em;min-width:0}
.lpt-wert small{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--on-hero) 70%,var(--hero))}
.lpt-wert b{font:800 clamp(1.1rem,3.2vw,1.8rem)/1.1 var(--font-h);color:var(--on-hero);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.lpt-datenblatt{max-width:1000px;margin:clamp(16px,2.8vw,26px) auto 0;border-top:1px solid var(--line);padding-top:clamp(14px,2.4vw,20px)}
.lpt-dk{margin:0 0 .5em;font:700 .64rem/1.3 var(--font-b);letter-spacing:.26em;text-transform:uppercase;color:var(--primary)}
.lpt-text{margin:0;line-height:1.75;color:var(--muted);max-width:68ch}
.A-platine .desc.custom{margin-top:.8em;line-height:1.7;color:var(--muted)}
.A-platine .ab{margin-top:clamp(14px,2.4vw,20px)}
.lpt-sc{padding-top:12px}

@media (max-width:780px){
  .lpt-feld{grid-template-columns:1fr}
  .lpt-ic{order:-1}
  .lpt-spalte{gap:9px}
  .lpt-druck{justify-content:flex-start}
  .lpt-kopf{letter-spacing:.16em;gap:.3em .9em}
}

/* --- Seitentyp: Sanduhr --- */
/* --- Seitentyp: Sanduhr --- */
/* Sanduhr: zwei Glaskegel uebereinander in einem hoelzernen Rahmen. Die Fuellstaende oben und
   unten kommen aus crc32, einzelne Koerner fallen durch den Hals. Der Domainname steht als
   Brandzeichen auf dem oberen Rahmenbrett, die Merkmale sitzen als Markierungen mit Strich an
   der Seite des Glases, der Preis liegt im unteren Glas als das, was schon durchgelaufen ist. */
.A-sanduhr{background:var(--bg)}
.A-sanduhr .sdu{
  padding-top:clamp(22px,4vw,56px);
  padding-bottom:clamp(20px,3.4vw,44px);
}

/* Das Objekt: Brett, Glas, Brett */
.A-sanduhr .sdu-objekt{
  max-width:760px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
}

/* Die hoelzernen Bretter */
.A-sanduhr .sdu-brett{
  background-color:var(--hero);
  background-image:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--on-hero) 7%,transparent) 0 2px,
    transparent 2px 13px);
  color:var(--on-hero);
  padding:clamp(14px,2.6vw,26px) clamp(14px,2.6vw,30px);
  text-align:center;
}
.A-sanduhr .sdu-kl{
  margin:0 0 .45em;
  font:700 clamp(.54rem,1.3vw,.68rem)/1 var(--font-b);
  letter-spacing:.3em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 60%,var(--hero));
}
.A-sanduhr .sdu-name{
  margin:0;color:var(--on-hero);
  font:800 clamp(1.5rem,4.6vw,2.9rem)/1.06 var(--font-h);
  letter-spacing:-.01em;overflow-wrap:anywhere;
}
.A-sanduhr .sdu-lead{
  margin:.5em auto 0;max-width:46ch;
  font-size:clamp(.92rem,1.5vw,1.05rem);
  color:color-mix(in srgb,var(--on-hero) 78%,var(--hero));
}
.A-sanduhr .sdu-fuss{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.4em clamp(16px,3vw,34px);
  font:500 clamp(.68rem,1.4vw,.82rem)/1.4 var(--font-b);
  letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 68%,var(--hero));
}
.A-sanduhr .sdu-fuss b{color:var(--on-hero);font-variant-numeric:tabular-nums}

/* Glas und Markierungen nebeneinander */
.A-sanduhr .sdu-koerper{
  display:flex;align-items:stretch;justify-content:center;
  gap:clamp(14px,3vw,34px);
  padding:clamp(18px,3vw,34px) clamp(14px,2.6vw,30px);
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 5%,transparent),transparent 60%);
}
.A-sanduhr .sdu-glas{
  position:relative;flex:0 0 auto;
  width:min(250px,48vw);
}
.A-sanduhr .sdu-svg{
  display:block;max-width:none;width:100%;height:auto;
  color:var(--ink);
}
.A-sanduhr .sdu-kegel{
  fill:color-mix(in srgb,var(--ink) 5%,transparent);
  stroke:color-mix(in srgb,var(--ink) 40%,transparent);
  stroke-width:2.2;stroke-linejoin:round;
}
.A-sanduhr .sdu-sand{fill:var(--primary)}
.A-sanduhr .sdu-strahl{
  fill:none;stroke:var(--primary);stroke-width:1.6;
  stroke-linecap:round;stroke-dasharray:3 5;
}
.A-sanduhr .sdu-korn{fill:var(--primary)}
.A-sanduhr .sdu-glanz{
  fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);
  stroke-width:3;stroke-linecap:round;
}

/* Der Preis liegt im unteren Glas, auf dem Sand */
.A-sanduhr .sdu-preis{
  position:absolute;left:50%;top:var(--sdu-py);
  transform:translate(-50%,-50%);
  margin:0;width:68%;
  display:flex;flex-direction:column;align-items:center;gap:.05em;
  text-align:center;color:var(--on-primary);
}
.A-sanduhr .sdu-pl{
  font:700 clamp(.46rem,1.5vw,.6rem)/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;
  opacity:.78;
}
.A-sanduhr .sdu-pp{
  font:800 clamp(.95rem,3.6vw,1.5rem)/1.12 var(--font-h);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.A-sanduhr .sdu-pr{font-size:clamp(.56rem,1.6vw,.72rem);opacity:.84}

/* Merkmale als Markierungen an der Seite */
.A-sanduhr .sdu-marken{
  list-style:none;margin:0;padding:clamp(10px,2vw,22px) 0;
  flex:0 1 230px;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(8px,1.6vw,16px);
}
.A-sanduhr .sdu-marken li{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;gap:0 10px;
}
.A-sanduhr .sdu-marken i{
  grid-row:1 / 3;align-self:center;
  width:clamp(14px,3vw,26px);height:2px;
  background:var(--accent);
}
.A-sanduhr .sdu-marken span{
  font:700 clamp(.54rem,1.2vw,.66rem)/1.3 var(--font-b);
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.A-sanduhr .sdu-marken b{
  font:700 clamp(.9rem,2vw,1.12rem)/1.25 var(--font-h);
  color:var(--ink);overflow-wrap:anywhere;
}

.A-sanduhr .sdu-text{
  max-width:64ch;margin:clamp(20px,3vw,34px) auto 0;text-align:center;
  font-size:clamp(1rem,1.5vw,1.06rem);
}
.A-sanduhr .sdu-text p{margin:0 0 1em}
.A-sanduhr .sdu-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-sanduhr .sdu-koerper{flex-direction:column;align-items:center}
  .A-sanduhr .sdu-glas{width:min(230px,62vw)}
  .A-sanduhr .sdu-marken{
    flex:0 1 auto;width:100%;
    flex-direction:row;flex-wrap:wrap;justify-content:center;
    padding:0;gap:10px 18px;
  }
  .A-sanduhr .sdu-marken li{
    grid-template-columns:auto auto;align-items:center;
    gap:0 8px;
  }
  .A-sanduhr .sdu-marken i{width:12px}
}

/* --- Seitentyp: Schuhkarton --- */
/* --- Seitentyp: Schuhkarton --- */
/* Schuhkarton: die kurze Stirnseite eines Kartons, quer liegend, oben und unten die
   angeschnittene Wellpappe. Der Domainname ist der Modellname, darunter die Größentabelle
   als Kästchenreihe mit genau einer angekreuzten Größe, dann Farbcode, Artikelnummer und
   Status. Der Preis steht nicht im Satzspiegel, sondern auf einem schräg aufgeklebten
   Rabattschild. Größe, Farbcode und Nummer kommen aus crc32 des Domainnamens. */

.A-schuhkarton{background:color-mix(in srgb,var(--ink) 6%,var(--bg))}
.A-schuhkarton .shk{padding-top:clamp(26px,4.8vw,62px);padding-bottom:20px}

/* Der Karton ist der Container: alles darin rechnet in cqw seiner Breite, nicht in vw.
   Das Verhältnis Karton zu Fenster ist am Telefon ein ganz anderes als am Schreibtisch. */
.shk-karton{container-type:inline-size;max-width:860px;margin:0 auto;background:var(--surface);
  border:1px solid color-mix(in srgb,var(--ink) 22%,var(--line));border-radius:calc(var(--r) / 2);
  overflow:hidden;box-shadow:0 30px 56px -42px color-mix(in srgb,var(--ink) 70%,transparent)}

/* Wellpappe: die angeschnittene Welle an Ober- und Unterkante des Kartons */
.shk-welle{display:block;height:clamp(11px,2.5cqw,17px);
  background:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 26%,transparent) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 9%,transparent) 0 4px,transparent 4px 9px),
    color-mix(in srgb,var(--ink) 7%,var(--surface))}
.shk-welle-o{border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,var(--line))}
.shk-welle-u{border-top:1px solid color-mix(in srgb,var(--ink) 20%,var(--line))}

.shk-stirn{position:relative;padding:clamp(20px,4.6cqw,40px) clamp(18px,4.1cqw,38px);
  display:grid;gap:clamp(14px,3.3cqw,26px);
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"kopf schild" "groessen groessen" "daten daten";
  align-items:start}

.shk-kopf{grid-area:kopf;min-width:0}
.shk-reihe{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 .5em}
.shk-reihe span{font:700 clamp(.6rem,1.9cqw,.72rem)/1.3 var(--font-b);letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.shk-reihe span:first-child{color:var(--primary)}
.shk-modell{margin:0;font:800 clamp(1.5rem,6.3cqw,2.9rem)/1.06 var(--font-h);letter-spacing:-.03em;
  color:var(--ink);overflow-wrap:anywhere}
.shk-zeile{margin:.55em 0 0;font-size:clamp(.92rem,2.6cqw,1.08rem);line-height:1.5;color:var(--muted);
  max-width:46ch}

/* Rabattschild: aufgeklebt, darum schräg und mit Schlagschatten auf die Pappe */
.shk-schild{grid-area:schild;justify-self:end;margin:0;
  transform:rotate(-3.5deg);transform-origin:80% 20%;
  padding:clamp(9px,2.2cqw,15px) clamp(14px,3.3cqw,24px);text-align:center;
  background:var(--primary);color:var(--on-primary);border-radius:calc(var(--r) / 3);
  box-shadow:0 14px 26px -18px color-mix(in srgb,var(--ink) 75%,transparent)}
.shk-schild span{display:block;font:700 clamp(.56rem,1.8cqw,.68rem)/1.3 var(--font-b);
  letter-spacing:.24em;text-transform:uppercase;opacity:.82}
.shk-schild b{display:block;margin-top:.22em;font:800 clamp(1.3rem,4.7cqw,2.1rem)/1.05 var(--font-h);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.shk-schild i{display:block;margin-top:.25em;font-style:normal;font-size:clamp(.6rem,1.8cqw,.72rem);
  font-weight:600;opacity:.85}

/* Größentabelle: eine Reihe Kästchen, genau eines ist angekreuzt */
.shk-groessen{grid-area:groessen;border-top:1px solid var(--line);padding-top:clamp(10px,2.5cqw,18px)}
.shk-groessen small{display:block;margin-bottom:.6em;font:700 clamp(.6rem,1.9cqw,.72rem)/1.3 var(--font-b);
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.shk-groessen ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(4px,1.1cqw,7px)}
.shk-groessen li{position:relative;display:grid;place-items:center;
  width:clamp(32px,6cqw,44px);height:clamp(32px,6cqw,44px);
  border:1px solid var(--line);border-radius:calc(var(--r) / 4);
  font:600 clamp(.72rem,2.1cqw,.88rem)/1 var(--font-b);color:var(--muted);
  font-variant-numeric:tabular-nums}
.shk-groessen li span{position:relative;z-index:1}
.shk-gewaehlt{border:2px solid var(--primary);color:var(--ink);font-weight:800;
  background:color-mix(in srgb,var(--primary) 12%,transparent)}
/* Das Kreuz liegt hinter der Zahl und bleibt blass, sonst ist die gewählte Größe
   ausgerechnet die einzige, die man nicht mehr lesen kann. */
.shk-kreuz{position:absolute;inset:14%;width:auto;height:auto;max-width:none;z-index:0;
  color:color-mix(in srgb,var(--primary) 30%,transparent)}

/* Angaben: Farbcode, Artikelnummer, Endung, Status */
.shk-daten{grid-area:daten;margin:0;border-top:1px solid var(--line);padding-top:clamp(10px,2.5cqw,18px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(8px,2.2cqw,18px)}
.shk-daten div{display:grid;gap:3px;min-width:0}
.shk-daten dt{font:700 .64rem var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.shk-daten dd{margin:0;font:700 clamp(.88rem,2.5cqw,1.02rem)/1.3 var(--font-h);color:var(--ink);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.shk-text{max-width:860px;margin:clamp(20px,3.2vw,38px) auto 0}
.shk-text p{margin:0;line-height:1.75;color:var(--muted);max-width:66ch}
.shk-text .desc{margin:1em 0 0}
.shk-sc{padding-top:10px}

@media (max-width:780px){
  /* Vom Nebeneinander auf Untereinander: das Schild bleibt oben rechts, rutscht aber
     in eine eigene Zeile, damit der Modellname die volle Breite behält. */
  .shk-stirn{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"schild" "kopf" "groessen" "daten"}
  .shk-schild{justify-self:start;transform:rotate(-2.5deg);transform-origin:20% 50%}
  .shk-groessen li{width:clamp(30px,11cqw,40px);height:clamp(30px,11cqw,40px)}
}

/* --- Seitentyp: Sofortbild --- */
/* --- Seitentyp: Sofortbild --- */
/* Sofortbild: ein quadratisches Bildfeld mit breitem Rand unten, darauf handschriftlich der
   Domainname und mit Filzstift der Preis; das Bildfeld zeigt nur einen Verlauf, dessen
   Entwicklungsstand aus dem Namen stammt. Das Bild liegt leicht gekippt und ist mit einem
   Klebestreifen befestigt, die Merkmale stehen als kleine Notizen daneben. */
.A-sofortbild{background:var(--bg)}
.A-sofortbild .sbd{
  max-width:980px;margin-left:auto;margin-right:auto;
  padding-top:clamp(30px,5vw,66px);
  padding-bottom:clamp(22px,3.6vw,46px);
}
.A-sofortbild .sbd-buehne{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,56px);
  align-items:center;
}

/* Das Sofortbild selbst */
.A-sofortbild .sbd-bild{
  container-type:inline-size;
  width:100%;
  max-width:420px;
  position:relative;
  margin:0;
  padding:clamp(11px,2.6cqw,16px) clamp(11px,2.6cqw,16px) clamp(14px,3.6cqw,22px);
  background:
    linear-gradient(178deg,var(--surface),color-mix(in srgb,var(--ink) 4%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  border-radius:3px;
  transform:rotate(var(--sbd-k,-1.6deg));
  box-shadow:0 18px 38px -26px color-mix(in srgb,var(--muted) 62%,transparent);
}

/* Der Klebestreifen oben links */
.A-sofortbild .sbd-band{
  position:absolute;
  top:-16px;left:-26px;
  width:112px;height:30px;
  transform:rotate(-31deg);
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--muted) 16%,transparent),
    color-mix(in srgb,var(--muted) 30%,transparent) 50%,
    color-mix(in srgb,var(--muted) 16%,transparent));
  border-left:1px dashed color-mix(in srgb,var(--muted) 45%,transparent);
  border-right:1px dashed color-mix(in srgb,var(--muted) 45%,transparent);
}

/* Das Bildfeld: nur Verlauf, oben noch nicht durchentwickelt */
.A-sofortbild .sbd-feld{
  position:relative;
  display:block;
  aspect-ratio:1;
  overflow:hidden;
  background:
    radial-gradient(112% 92% at 34% 26%,color-mix(in srgb,var(--on-hero) 24%,transparent),transparent 70%),
    linear-gradient(var(--sbd-d,22deg),
      color-mix(in srgb,var(--primary) 48%,var(--hero)) 0,
      color-mix(in srgb,var(--accent) 32%,var(--hero)) var(--sbd-e,50%),
      color-mix(in srgb,var(--on-hero) 13%,var(--hero)) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);
}
.A-sofortbild .sbd-feld::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    transparent 0,
    transparent var(--sbd-e,50%),
    color-mix(in srgb,var(--surface) 88%,transparent) 100%);
}

/* Der breite Rand unten, handschriftlich beschrieben */
.A-sofortbild .sbd-rand{
  display:flex;flex-direction:column;gap:.25em;
  min-height:clamp(44px,13cqw,68px);
  padding:clamp(12px,3.6cqw,20px) clamp(2px,1cqw,8px) clamp(6px,2cqw,12px);
}
.A-sofortbild .sbd-name{
  margin:0;
  color:var(--ink);
  font:italic 600 clamp(.95rem,7.2cqw,1.7rem)/1.1 var(--font-h);
  letter-spacing:.015em;
  overflow-wrap:anywhere;
  transform:rotate(-.9deg);
  transform-origin:0 50%;
}
.A-sofortbild .sbd-preis{
  margin:0;
  display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
  transform:rotate(.7deg);
  transform-origin:0 50%;
}
.A-sofortbild .sbd-preis small{
  font:700 clamp(.5rem,2.6cqw,.64rem)/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.A-sofortbild .sbd-preis b{
  font:800 clamp(1rem,6.4cqw,1.6rem)/1.05 var(--font-h);
  color:var(--primary);
  overflow-wrap:anywhere;
  text-shadow:0 0 3px color-mix(in srgb,var(--primary) 30%,transparent);
}

/* Kleine Notizen am Rand */
.A-sofortbild .sbd-notizen{
  list-style:none;margin:0;padding:0;
  min-width:0;
}
.A-sofortbild .sbd-notizen li{
  position:relative;
  padding:.5em 0 .5em 26px;
  border-bottom:1px dashed color-mix(in srgb,var(--line) 90%,transparent);
}
.A-sofortbild .sbd-notizen li::before{
  content:"";position:absolute;left:0;top:1.15em;
  width:16px;height:1px;
  background:var(--accent);
}
.A-sofortbild .sbd-notizen span{
  display:block;
  font:700 .62rem/1 var(--font-b);
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.A-sofortbild .sbd-notizen b{
  display:block;margin-top:.25em;
  font:700 clamp(.98rem,1.8vw,1.18rem)/1.2 var(--font-h);
  overflow-wrap:anywhere;
}

.A-sofortbild .sbd-lead{
  margin:clamp(22px,3.6vw,40px) 0 .7em;
  max-width:62ch;
  font-size:clamp(1.05rem,2vw,1.35rem);
  font-weight:600;line-height:1.4;
}
.A-sofortbild .sbd-text{
  max-width:68ch;
  font-size:clamp(1rem,1.5vw,1.08rem);line-height:1.75;
}
.A-sofortbild .sbd-text p{margin:0 0 1em}
.A-sofortbild .sbd-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-sofortbild .sbd-buehne{grid-template-columns:1fr;gap:clamp(26px,6vw,36px)}
  .A-sofortbild .sbd-bild{max-width:340px;margin-left:auto;margin-right:auto}
  .A-sofortbild .sbd-band{left:-18px;width:92px}
}

/* --- Seitentyp: Sonnenuhr --- */
/* --- Seitentyp: Sonnenuhr --- */
/* Sonnenuhr: eine halbrunde Steinscheibe mit roemischen Stundenziffern als Inline-SVG. Der
   Schattenstab wirft seinen Schatten auf eine aus crc32 gerechnete Stunde, dort haengt der
   Preis. Der Domainname steht als Inschrift auf dem Sockel unter der Scheibe, die Merkmale
   laufen als kleinere Inschriften am Rand der Horizontlinie entlang. */
.A-sonnenuhr{background:var(--bg)}
.A-sonnenuhr .suh{
  padding-top:clamp(24px,4.4vw,60px);
  padding-bottom:clamp(22px,3.6vw,48px);
}

/* Der Stein: Scheibe und Sockel sind ein Block aus derselben Flaeche */
.A-sonnenuhr .suh-stein{
  max-width:860px;margin:0 auto;
  background-color:var(--hero);
  background-image:
    radial-gradient(circle at 22% 18%,color-mix(in srgb,var(--on-hero) 9%,transparent),transparent 58%),
    radial-gradient(circle at 78% 74%,color-mix(in srgb,var(--on-hero) 7%,transparent),transparent 54%);
  color:var(--on-hero);
  border:1px solid color-mix(in srgb,var(--on-hero) 22%,var(--hero));
  border-radius:var(--r);
  padding:clamp(16px,2.8vw,34px) clamp(14px,2.6vw,34px) clamp(18px,3vw,36px);
}

/* Scheibe mit Ueberlagerungen */
.A-sonnenuhr .suh-blatt{position:relative;width:100%}
.A-sonnenuhr .suh-scheibe{width:100%;aspect-ratio:420 / 250;container-type:inline-size}
.A-sonnenuhr .suh-svg{
  display:block;max-width:none;width:100%;height:100%;
  color:var(--on-hero);overflow:visible;
}
.A-sonnenuhr .suh-bogen,
.A-sonnenuhr .suh-horizont,
.A-sonnenuhr .suh-strich{
  fill:none;stroke:currentColor;stroke-linecap:round;
}
.A-sonnenuhr .suh-bogen{stroke-width:2.4;opacity:.72}
.A-sonnenuhr .suh-bogen-i{stroke-width:1.1;opacity:.4}
.A-sonnenuhr .suh-horizont{stroke-width:1.6;opacity:.46}
.A-sonnenuhr .suh-strich{stroke-width:2;opacity:.6}
.A-sonnenuhr .suh-strich-a{stroke:var(--accent);stroke-width:3.4;opacity:1}
.A-sonnenuhr .suh-zahl{
  fill:currentColor;opacity:.84;
  font:700 18px/1 var(--font-h);letter-spacing:.06em;
  text-anchor:middle;dominant-baseline:central;
}
.A-sonnenuhr .suh-zahl-a{opacity:1;font-size:23px}
.A-sonnenuhr .suh-schatten{
  fill:color-mix(in srgb,var(--on-hero) 34%,transparent);
}
.A-sonnenuhr .suh-stab{
  fill:color-mix(in srgb,var(--on-hero) 80%,var(--hero));
  stroke:var(--hero);stroke-width:1.2;
}
.A-sonnenuhr .suh-stab-k{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}

/* Der Preis haengt an der Stunde, auf die der Schatten faellt */
.A-sonnenuhr .suh-preis{
  position:absolute;left:var(--suh-x);top:var(--suh-y);
  transform:translate(-50%,-50%);
  margin:0;display:flex;flex-direction:column;align-items:center;gap:.08em;
  padding:.35em .75em .45em;white-space:nowrap;
  background:color-mix(in srgb,var(--on-hero) 10%,var(--hero));
  border:1px solid var(--accent);
  border-radius:calc(var(--r) / 1.4);
}
.A-sonnenuhr .suh-pl{
  font:700 clamp(.52rem,1.25vw,.66rem)/1 var(--font-b);
  letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 68%,var(--hero));
}
.A-sonnenuhr .suh-pp{
  font:800 clamp(.95rem,2.6vw,1.65rem)/1.1 var(--font-h);
  color:var(--on-hero);font-variant-numeric:tabular-nums;
}
.A-sonnenuhr .suh-pr{
  font-size:clamp(.62rem,1.3vw,.8rem);
  color:color-mix(in srgb,var(--on-hero) 74%,var(--hero));
}

/* Merkmale als Inschriften entlang der Horizontlinie */
.A-sonnenuhr .suh-inschriften{
  position:absolute;left:2%;right:2%;top:88.5%;
  list-style:none;margin:0;padding:0;
  display:flex;justify-content:space-between;gap:clamp(6px,1.6vw,20px);
}
.A-sonnenuhr .suh-inschriften li{
  display:flex;flex-direction:column;align-items:center;gap:.1em;min-width:0;
}
.A-sonnenuhr .suh-inschriften span{
  font:700 clamp(.5rem,1.15vw,.64rem)/1 var(--font-b);
  letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 56%,var(--hero));
}
.A-sonnenuhr .suh-inschriften b{
  font:700 clamp(.72rem,1.6vw,.95rem)/1.2 var(--font-h);
  letter-spacing:.06em;overflow-wrap:anywhere;text-align:center;
  color:var(--on-hero);
}

/* Sockel mit der Hauptinschrift */
.A-sonnenuhr .suh-sockel{
  margin-top:clamp(42px,6vw,66px);
  padding-top:clamp(14px,2.4vw,24px);
  border-top:1px solid color-mix(in srgb,var(--on-hero) 26%,var(--hero));
  text-align:center;
}
.A-sonnenuhr .suh-kl{
  margin:0 0 .5em;
  font:700 clamp(.56rem,1.3vw,.7rem)/1 var(--font-b);
  letter-spacing:.34em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-hero) 58%,var(--hero));
}
.A-sonnenuhr .suh-name{
  margin:0;color:var(--on-hero);
  font:700 clamp(1.7rem,5.2vw,3.3rem)/1.06 var(--font-h);
  letter-spacing:.04em;overflow-wrap:anywhere;
}
.A-sonnenuhr .suh-lead{
  margin:.55em auto 0;max-width:50ch;
  font-size:clamp(.95rem,1.6vw,1.1rem);
  color:color-mix(in srgb,var(--on-hero) 78%,var(--hero));
}

.A-sonnenuhr .suh-text{
  max-width:66ch;margin:clamp(20px,3.2vw,36px) auto 0;text-align:center;
  font-size:clamp(1rem,1.5vw,1.08rem);
}
.A-sonnenuhr .suh-text p{margin:0 0 1em}
.A-sonnenuhr .suh-sc{padding-top:8px;padding-bottom:8px}

@media (max-width:780px){
  .A-sonnenuhr .suh-blatt{display:flex;flex-direction:column;gap:14px}
  .A-sonnenuhr .suh-preis{
    position:static;transform:none;align-self:center;
    white-space:normal;text-align:center;
  }
  .A-sonnenuhr .suh-inschriften{
    position:static;flex-wrap:wrap;justify-content:center;
    gap:10px 18px;
  }
  .A-sonnenuhr .suh-inschriften li{flex:0 1 auto}
  .A-sonnenuhr .suh-sockel{margin-top:clamp(14px,3vw,22px)}
  .A-sonnenuhr .suh-zahl{font-size:19px}
  .A-sonnenuhr .suh-zahl-a{font-size:24px}
}

/* --- Seitentyp: Stoffmuster --- */
/* --- Seitentyp: Stoffmuster --- */
/* Stoffmuster: Musterkarte, deren Stoffproben alle an einer Öse hängen und von dort
   aufgefächert sind. Jede Probe zeigt ein Webmuster aus reinen CSS-Verläufen
   (Köper, Leinwand, Karo, Streifen) und trägt unten einen Anhänger mit einem Merkmal.
   Die vorderste Probe ist länger als die anderen, ihr breiter Anhänger hängt unter dem
   Fächer und führt den Namen. Der Preis steht als Meterpreis im Kartenkopf.
   Bindung und Reihenfolge der Proben kommen aus crc32 des Domainnamens. */

.A-stoffmuster{background:
  repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(0deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 7px),
  var(--bg)}
.A-stoffmuster .sfk{padding-top:clamp(26px,4.8vw,62px);padding-bottom:20px}

.sfk-karte{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(14px,2.4vw,30px);
  grid-template-columns:minmax(300px,420px) minmax(0,1fr);
  grid-template-areas:"kopf kopf" "buehne text";
  box-shadow:0 26px 54px -46px color-mix(in srgb,var(--ink) 65%,transparent)}

/* Kartenkopf: Bezeichnung links, Meterpreis rechts */
.sfk-kopf{grid-area:kopf;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px clamp(14px,2.4vw,26px);
  border-bottom:2px solid var(--ink);padding-bottom:clamp(8px,1.4vw,14px)}
.sfk-kopf small{font:700 clamp(.66rem,1.5vw,.78rem)/1.3 var(--font-b);letter-spacing:.22em;
  text-transform:uppercase;color:var(--primary)}
.sfk-serie{font:600 clamp(.62rem,1.4vw,.72rem)/1.3 var(--font-b);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.sfk-meter{margin:0 0 0 auto;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;text-align:right}
.sfk-meter b{font:800 clamp(1.3rem,3.2vw,2rem)/1 var(--font-h);color:var(--ink);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sfk-meter span{font:700 clamp(.6rem,1.3vw,.7rem)/1.3 var(--font-b);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.sfk-meter i{font-style:normal;font-size:clamp(.68rem,1.5vw,.8rem);color:var(--primary);font-weight:600}

/* Die Bühne trägt die Maße des Fächers: alles in cqw ihrer eigenen Breite, nicht in vw,
   damit die Proben am Telefon dasselbe Verhältnis behalten wie am Schreibtisch. */
.sfk-buehne{grid-area:buehne;container-type:inline-size;padding-bottom:clamp(14px,4cqw,30px)}
.sfk-faecher{position:relative;display:flex;justify-content:center;padding-top:clamp(18px,4cqw,28px)}

/* Öse: der Ring, durch den alle Proben gezogen sind, genau im Drehpunkt des Fächers */
.sfk-oese{position:absolute;z-index:6;left:50%;top:clamp(28px,5.6cqw,40px);transform:translate(-50%,-50%);
  width:clamp(24px,5cqw,34px);height:clamp(24px,5cqw,34px);border-radius:50%;background:transparent;
  border:clamp(3px,.7cqw,5px) solid color-mix(in srgb,var(--ink) 42%,var(--surface))}

/* Alle Proben gleich breit: nur so bleibt von jeder hinteren ein Streifen Gewebe sichtbar.
   Die Längen sind gestaffelt, sonst stossen die Anhänger im Bogen aneinander. */
.sfk-probe{display:flex;flex-direction:column;align-items:center;width:clamp(74px,19cqw,96px)}
.sfk-r0,.sfk-r1,.sfk-r2,.sfk-r3{position:absolute;top:clamp(18px,4cqw,28px);left:50%;
  transform-origin:50% clamp(10px,1.6cqw,12px)}
.sfk-r0{z-index:1;transform:translateX(-50%) rotate(58deg)}
.sfk-r1{z-index:2;transform:translateX(-50%) rotate(30deg)}
.sfk-r2{z-index:2;transform:translateX(-50%) rotate(-30deg)}
.sfk-r3{z-index:1;transform:translateX(-50%) rotate(-58deg)}
.sfk-vorn{position:relative;z-index:4;container-type:inline-size}

/* Das Loch, durch das die Öse greift */
.sfk-loch{position:absolute;z-index:3;left:50%;top:clamp(3px,.7cqw,5px);transform:translateX(-50%);
  width:clamp(11px,2.3cqw,15px);height:clamp(11px,2.3cqw,15px);border-radius:50%;background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line)}

/* Gewebe: die Fläche der Probe, unten die aufgetrennten Fäden der Schnittkante */
.sfk-gewebe{position:relative;align-self:stretch;height:clamp(150px,39cqw,190px);
  margin-top:clamp(16px,3.4cqw,24px);border:1px solid var(--line);
  border-radius:calc(var(--r) / 2);overflow:hidden;
  box-shadow:0 12px 22px -20px color-mix(in srgb,var(--ink) 70%,transparent);
  --sfk-kett:color-mix(in srgb,var(--primary) 46%,transparent);
  --sfk-schuss:color-mix(in srgb,var(--accent) 40%,transparent);
  --sfk-grund:color-mix(in srgb,var(--primary) 7%,var(--surface))}
.sfk-r1 .sfk-gewebe,.sfk-r2 .sfk-gewebe{height:clamp(150px,39cqw,190px)}
.sfk-r0 .sfk-gewebe,.sfk-r3 .sfk-gewebe{height:clamp(110px,29cqw,140px)}
.sfk-vorn .sfk-gewebe{height:clamp(240px,62cqw,300px)}
.sfk-gewebe::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(6px,1.4cqw,9px);
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 45%,transparent) 0 1px,transparent 1px 4px)}

/* Die vier Bindungen, allein aus Verläufen. Halbdurchsichtige Fäden kreuzen sich und
   dunkeln an den Kreuzungen ab, dadurch wirkt die Fläche gewebt und nicht bedruckt. */
.sfk-w-leinwand{background:
  repeating-linear-gradient(90deg,var(--sfk-kett) 0 4px,transparent 4px 8px),
  repeating-linear-gradient(0deg,var(--sfk-schuss) 0 4px,transparent 4px 8px),
  var(--sfk-grund)}
.sfk-w-koeper{background:
  repeating-linear-gradient(45deg,var(--sfk-kett) 0 4px,transparent 4px 9px),
  repeating-linear-gradient(45deg,var(--sfk-schuss) 0 2px,transparent 2px 18px),
  var(--sfk-grund)}
.sfk-w-karo{background:
  repeating-linear-gradient(90deg,var(--sfk-kett) 0 11px,transparent 11px 18px,var(--sfk-schuss) 18px 21px,transparent 21px 36px),
  repeating-linear-gradient(0deg,var(--sfk-kett) 0 11px,transparent 11px 18px,var(--sfk-schuss) 18px 21px,transparent 21px 36px),
  var(--sfk-grund)}
.sfk-w-streifen{background:
  repeating-linear-gradient(90deg,var(--sfk-kett) 0 7px,transparent 7px 13px,var(--sfk-schuss) 13px 15px,transparent 15px 23px),
  var(--sfk-grund)}

/* Anhänger: das Pappschild am Fuß jeder Probe */
.sfk-anhaenger{width:100%;margin-top:clamp(5px,1.3cqw,8px);text-align:center;
  padding:clamp(6px,1.4cqw,10px) clamp(5px,1.2cqw,9px) clamp(8px,1.8cqw,12px);
  background:color-mix(in srgb,var(--ink) 3%,var(--surface));
  border:1px solid var(--line);border-radius:calc(var(--r) / 2)}
.sfk-anhaenger small{display:block;font:700 clamp(.52rem,1.3cqw,.64rem)/1.3 var(--font-b);
  letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.sfk-anhaenger b{display:block;margin-top:.35em;font:700 clamp(.72rem,1.9cqw,.9rem)/1.25 var(--font-h);
  color:var(--ink);overflow-wrap:anywhere}
.sfk-anhaenger i{display:block;margin-top:.25em;font-style:normal;
  font-size:clamp(.5rem,1.2cqw,.62rem);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Hauptanhänger: breiter als die Probe, hängt unterhalb des Fächers und trägt den Namen.
   Die Maße richten sich nach der vordersten Probe, darum ist sie selbst der Container. */
.sfk-haupt{width:clamp(196px,250cqw,268px);margin-top:clamp(13px,17cqw,22px);
  padding:clamp(9px,11cqw,15px) clamp(9px,11cqw,14px) clamp(11px,13cqw,17px);
  background:var(--surface);box-shadow:0 16px 30px -26px color-mix(in srgb,var(--ink) 70%,transparent)}
.sfk-haupt small{font-size:clamp(.56rem,7cqw,.7rem)}
.sfk-haupt i{font-size:clamp(.54rem,6.6cqw,.66rem)}
.sfk-name{margin:.45em 0 .3em;font:800 clamp(1rem,15cqw,1.6rem)/1.14 var(--font-h);
  letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}

/* Rechte Spalte: Zeile, Text, Kaufzeile, Warenangaben */
.sfk-text{grid-area:text;align-self:center}
.sfk-zeile{margin:0 0 .7em;font:600 clamp(1.05rem,2.4vw,1.35rem)/1.4 var(--font-h);color:var(--ink);
  overflow-wrap:anywhere}
.sfk-satz{margin:0;line-height:1.75;color:var(--muted);max-width:58ch}
.sfk-text .desc{margin:1em 0 0}
.sfk-liste{margin:clamp(18px,2.6vw,28px) 0 0;padding-top:clamp(10px,1.6vw,16px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:clamp(8px,1.6vw,18px)}
.sfk-liste div{display:grid;gap:2px}
.sfk-liste dt{font:700 .64rem var(--font-b);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sfk-liste dd{margin:0;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.sfk-sc{padding-top:10px}

@media (max-width:780px){
  .sfk-karte{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "buehne" "text"}
  .sfk-meter{margin-left:0;text-align:left}
  /* width:100% ist Pflicht: ein Feld mit container-type:inline-size hat keine eigene
     Inhaltsbreite mehr, und der automatische Seitenrand schaltet das Dehnen im Raster ab.
     Ohne die Angabe fällt die Bühne auf null zusammen und der Fächer verschwindet. */
  .sfk-buehne{width:100%;max-width:420px;margin-inline:auto}
  .sfk-text{align-self:start}
}

/* --- Seitentyp: Telefonbuch --- */
/* --- Seitentyp: Telefonbuch --- */
/* Telefonbucheintrag: eine zweispaltige Buchseite in sehr kleiner Schrift mit vielen
   Nachbareinträgen, in der Mitte der Name als fett gesetzter Eintrag mit Merkmalen
   als Berufsangaben, der Preis als Anschlussnummer, oben die Kolumnentitel. */
.A-telefonbuch{background:var(--bg)}
.A-telefonbuch .tbu{padding-top:clamp(20px,3.6vw,48px);padding-bottom:clamp(18px,3vw,36px)}

/* Die Buchseite */
.tbu-blatt{
  max-width:980px;margin:0 auto;
  background:var(--surface);
  padding:clamp(16px,3vw,40px) clamp(14px,3vw,38px) clamp(18px,3vw,34px);
  box-shadow:0 0 0 1px var(--line),0 30px 60px -48px color-mix(in srgb,var(--ink) 80%,transparent);
}

/* Kolumnentitel: erster und letzter Eintrag der Seite */
.tbu-kopf{
  display:flex;align-items:baseline;gap:10px;
  padding-bottom:7px;margin-bottom:clamp(10px,1.6vw,16px);
  border-bottom:2px solid var(--ink);
}
.tbu-kt{flex:1 1 0;min-width:0;font:700 clamp(.76rem,1.8vw,.95rem)/1.2 var(--font-h);letter-spacing:.02em;color:var(--ink);overflow-wrap:anywhere}
.tbu-kr{text-align:right}
.tbu-sz{flex:0 0 auto;font:700 .62rem/1.2 var(--font-b);text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}

/* Zwei Spalten, sehr kleine Schrift */
.tbu-spalten{
  list-style:none;margin:0;padding:0;
  column-count:2;
  column-gap:clamp(16px,3vw,34px);
  column-rule:1px solid var(--line);
  font-family:var(--font-b);
}
.tbu-z{
  display:flex;align-items:baseline;gap:4px;
  break-inside:avoid;
  font-size:clamp(.62rem,1.5vw,.7rem);
  line-height:1.55;
  color:var(--muted);
}
.tbu-e{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
.tbu-z::after{content:"";flex:1 1 auto;min-width:8px;align-self:center;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 4px)}
.tbu-n{order:3;flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--ink)}

/* Der eigene Eintrag, fett gesetzt und eingerahmt */
.tbu-haupt{
  break-inside:avoid;
  display:block;
  margin:9px 0;
  padding:clamp(9px,1.6vw,13px) clamp(10px,1.8vw,14px);
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
  border-top:3px solid var(--primary);
  border-bottom:1px solid var(--line);
}
.tbu-hz{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.A-telefonbuch .tbu-name{
  flex:1 1 auto;min-width:0;margin:0;
  font:800 clamp(1rem,3vw,1.35rem)/1.15 var(--font-h);
  letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere;
}
.tbu-an{
  flex:0 0 auto;
  font:800 clamp(.88rem,2.4vw,1.1rem)/1.2 var(--font-h);
  font-variant-numeric:tabular-nums;
  color:var(--primary);
  overflow-wrap:anywhere;
}
.tbu-bz{
  display:block;
  margin-top:3px;padding-left:1.1em;text-indent:-1.1em;
  font-size:clamp(.64rem,1.55vw,.73rem);
  line-height:1.5;color:var(--muted);overflow-wrap:anywhere;
}
.tbu-bz em{font-style:normal;font-weight:700;color:var(--ink)}
.tbu-bk{font-weight:600;color:var(--ink)}
.tbu-fuss{
  display:block;margin-top:6px;padding-top:5px;
  border-top:1px dotted var(--line);
  font:700 .6rem/1.4 var(--font-b);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
}

/* Rahmenanzeige am Fuß der Seite */
.tbu-anzeige{
  margin-top:clamp(16px,2.6vw,28px);
  border:2px solid var(--ink);
  padding:clamp(13px,2.2vw,20px);
  color:var(--muted);
}
.tbu-at{
  margin:0 0 .7em;
  font:800 .6rem/1.3 var(--font-b);text-transform:uppercase;letter-spacing:.24em;color:var(--muted);
  border-bottom:1px solid var(--line);padding-bottom:.5em;
}
.tbu-text{margin:0 0 1em;font-size:.9rem;line-height:1.65;overflow-wrap:anywhere}
.A-telefonbuch .tbu-anzeige .custom{font-size:.9rem;line-height:1.65}
.A-telefonbuch .tbu-anzeige .ab{margin-top:14px}
.A-telefonbuch .tbu-sc{padding-top:8px}

@media (max-width:780px){
  .A-telefonbuch .tbu{padding-top:16px}
  .tbu-blatt{padding:14px 12px 16px}
  .tbu-spalten{column-count:1;column-rule:none}
  .tbu-z{font-size:.72rem}
  .tbu-kopf{flex-wrap:wrap;gap:2px 8px}
  .tbu-kt{flex:1 1 42%}
  .tbu-sz{order:3;flex:1 1 100%}
}