@layer grund, kopf, bogen, stueck, fuss;
@layer grund {
:root{--blau:#1e88d6;--blau-tief:#0d5ca0;--krone:#f7c400;--tinte:#18222c;--grau:#5b6672;--linie:#e3e8ee;--papier:#fff;--nebel:#f3f5f8;
 --pfirsich:#f8e6d9;--salbei:#dcebe4;--sand:#efe5d6;--himmel:#e3f0fb;--flieder:#ebe5f6;--rose:#f9e1e6;--butter:#fff3c9;--minze:#ddf2ea;
 --rund:14px;--breite:1240px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:16px/1.6 "Figtree",system-ui,sans-serif;overflow-x:hidden}
img{max-inline-size:100%;block-size:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Lexend",system-ui,sans-serif;font-weight:600;line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.75rem,3.4vw,2.6rem)} h2{font-size:clamp(1.4rem,2.4vw,1.95rem)} h3{font-size:1.15rem}
p{margin:0 0 1em}
.rahmen{inline-size:min(100% - 32px,var(--breite));margin-inline:auto}
.leiste-text{color:var(--grau)}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0)}
button{font:inherit}
}
@layer kopf {
.vorspann{background:var(--nebel);font-size:.82rem;color:var(--grau)}
.vorspann ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 28px;margin:0;padding:7px 0;list-style:none}
.vorspann li::before{content:"♛";color:var(--krone);margin-inline-end:6px}
.kopfsteg{background:#fff;border-block-end:1px solid var(--linie);position:sticky;inset-block-start:0;z-index:20}
.kopfsteg .rahmen{display:flex;align-items:center;gap:20px;min-block-size:76px}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marke img{inline-size:44px}
.marke b{font:600 1.2rem/1 "Lexend",sans-serif;color:var(--tinte);white-space:nowrap}
.marke b i{font-style:normal;color:var(--blau)}
.regal{display:flex;align-items:center;gap:0;margin-inline:auto;flex-wrap:nowrap}
.regal>a,.regal summary{font-size:.9rem;padding:8px 9px;text-decoration:none;border-radius:8px;cursor:pointer;list-style:none;white-space:nowrap}
.regal>a:hover,.regal summary:hover{background:var(--himmel)}
.regal>a.da{color:var(--blau);box-shadow:inset 0 -2px 0 var(--blau)}
.regal summary::-webkit-details-marker{display:none}
.regal summary::after{content:" ▾";font-size:.75em}
.regal details{position:relative}
.regal .lade{position:absolute;inset-inline-start:0;inset-block-start:100%;background:#fff;border:1px solid var(--linie);border-radius:12px;padding:10px;
 display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px;box-shadow:0 12px 30px rgba(20,40,60,.12);z-index:30}
.regal .lade a{padding:7px 10px;text-decoration:none;border-radius:8px;font-size:.92rem}
.regal .lade a:hover{background:var(--himmel)}
.kopf-knopf{flex:none;inline-size:200px}
.klappe{display:none;background:none;border:1px solid var(--linie);border-radius:10px;inline-size:44px;block-size:44px;cursor:pointer}
.klappe span,.klappe span::before,.klappe span::after{display:block;inline-size:20px;block-size:2px;background:var(--tinte);margin:auto;position:relative}
.klappe span::before,.klappe span::after{content:"";position:absolute}
.klappe span::before{inset-block-start:-6px}.klappe span::after{inset-block-start:6px}
@media (max-width:1180px){
 .klappe{display:block;order:3}
 .kopfsteg .rahmen{flex-wrap:wrap;gap:10px;min-block-size:64px}
 .marke{margin-inline-end:auto}
 .kopf-knopf{inline-size:170px}
 .regal{display:none;order:4;inline-size:100%;flex-direction:column;align-items:stretch;padding-block-end:12px}
 .kopfsteg.offen .regal{display:flex}
 .regal .lade{position:static;box-shadow:none;border:0;grid-template-columns:1fr 1fr}
}
@media (max-width:420px){.marke b{display:none}.kopf-knopf{inline-size:165px}}
}
@layer bogen {
.pfad{font-size:.84rem;color:var(--grau);padding-block:14px 0}
.pfad a{text-decoration:none}.pfad a:hover{text-decoration:underline}
.pfad span+span::before{content:"›";margin-inline:7px;color:#aab}
.buehne{position:relative;background:#eef1f4}
.buehne>img{inline-size:100%;block-size:clamp(260px,40vw,520px);object-fit:cover}
.buehne .tafel{position:absolute;inset-block:0;inset-inline-end:max(16px,calc((100% - var(--breite))/2));display:flex;align-items:center}
.buehne .tafel>div{background:rgba(255,255,255,.94);border-radius:var(--rund);padding:28px 30px;max-inline-size:470px;box-shadow:0 10px 40px rgba(20,40,60,.12)}
.buehne h1{color:var(--blau-tief);font-size:clamp(1.6rem,2.8vw,2.3rem)}
.buehne p{color:var(--grau)}
@media (max-width:820px){.buehne .tafel{position:static}.buehne .tafel>div{max-inline-size:none;border-radius:0;box-shadow:none;padding:22px 16px}}
.zeichen{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-block:30px;border-block-end:1px solid var(--linie)}
.zeichen div{display:flex;gap:12px;align-items:flex-start}
.zeichen img,.zeichen svg{inline-size:46px;block-size:46px;flex:none;object-fit:contain}
.zeichen b{display:block;font:600 .82rem/1.3 "Lexend",sans-serif;text-transform:uppercase;letter-spacing:.03em;margin-block-end:3px}
.zeichen small{color:var(--grau);font-size:.85rem;line-height:1.4;display:block}
@media (max-width:900px){.zeichen{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.zeichen{grid-template-columns:1fr}}
.abschnitt{padding-block:52px}
.abschnitt.band-sand{background:var(--sand)}.abschnitt.band-salbei{background:var(--salbei)}.abschnitt.band-pfirsich{background:var(--pfirsich)}
.abschnitt.band-nebel{background:var(--nebel)}
.kopfzeile{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-block-end:24px}
.kopfzeile p{margin:0;color:var(--grau);max-inline-size:640px}
.kopfzeile.mitte{display:block;text-align:center}.kopfzeile.mitte p{margin-inline:auto}
.pille{display:inline-block;background:var(--blau);color:#fff;text-decoration:none;font:600 .9rem/1 "Lexend",sans-serif;padding:12px 20px;border-radius:99px;white-space:nowrap}
.pille:hover{background:var(--blau-tief)}
.pille.hell{background:#fff;color:var(--blau-tief)}
.faecher{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fach{background:#fff;border-radius:var(--rund);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(20,40,60,.08)}
.fach .flaeche{aspect-ratio:3/2;padding:18px;overflow:hidden}
.fach .flaeche img{inline-size:100%;block-size:100%;mix-blend-mode:multiply;object-fit:contain;transform:rotate(-4deg)}
.fach .text{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.fach h3{margin:0;font-size:1.2rem}
.fach .ab{font:600 1.15rem "Lexend",sans-serif}
.fach .ab small{font:400 .85rem "Figtree",sans-serif;color:var(--grau)}
.fach p{color:var(--grau);font-size:.92rem;margin:0;flex:1}
.fach .pille{align-self:flex-start;margin-block-start:6px}
@media (max-width:900px){.faecher{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.faecher{grid-template-columns:1fr}}
.wem{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wem a{text-decoration:none}
.wem img{aspect-ratio:1;object-fit:cover;border-radius:var(--rund);inline-size:100%}
.wem span{display:block;font:600 .82rem/1.3 "Lexend",sans-serif;text-transform:uppercase;letter-spacing:.04em;margin-block-start:10px}
@media (max-width:820px){.wem{grid-template-columns:1fr 1fr}}
.sortierer{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:14px;margin-block-end:18px;border-block:1px solid var(--linie);font-size:.92rem}
.sortierer select{font:inherit;padding:7px 10px;border:1px solid var(--linie);border-radius:8px;background:#fff}
.stapel{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1100px){.stapel{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.stapel{grid-template-columns:1fr 1fr;gap:12px}}
.abzug{background:#fff;border-radius:var(--rund);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(20,40,60,.1)}
.abzug .flaeche{display:block;aspect-ratio:1;padding:14px;background:var(--f,#e3f0fb);overflow:hidden}
.abzug .flaeche img{inline-size:100%;block-size:100%;object-fit:contain;mix-blend-mode:multiply}
.abzug .text{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.sterne{font-size:.8rem;color:var(--grau);display:flex;align-items:center;gap:6px}
.sterne i{font-style:normal;color:#f2a900;letter-spacing:1px}
.abzug h3{font:500 1rem/1.3 "Lexend",sans-serif;margin:0}
.abzug h3 a{text-decoration:none}.abzug h3 a:hover{color:var(--blau)}
.abzug .preis{font:600 1.15rem "Lexend",sans-serif;margin-block-start:auto}
.abzug .preis small{font:400 .8rem "Figtree",sans-serif;color:var(--grau)}
.marke-chip{display:inline-block;font-size:.72rem;border:1px solid var(--linie);border-radius:6px;padding:2px 7px;color:var(--grau);align-self:flex-start}
.stempel{background:none;border:0;padding:0;cursor:pointer;display:block;inline-size:100%}
.stempel img{inline-size:100%}
.stempel:hover img{filter:brightness(1.06)}
.stempel:focus-visible{outline:3px solid var(--krone);outline-offset:3px;border-radius:99px}
.spalt{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:var(--rund);overflow:hidden;margin-block-end:22px}
.spalt img{inline-size:100%;block-size:100%;object-fit:cover;min-block-size:280px}
.spalt>div{padding:36px 38px;display:flex;flex-direction:column;justify-content:center}
.spalt.dreh>img{order:2}
@media (max-width:760px){.spalt{grid-template-columns:1fr}.spalt.dreh>img{order:0}.spalt>div{padding:22px 18px}}
.anlaesse{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.anlass{background:#fff;border-radius:var(--rund);overflow:hidden;display:flex;flex-direction:column}
.anlass img{aspect-ratio:5/1;object-fit:cover;inline-size:100%}
.anlass div{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.anlass h3{margin:0}.anlass p{color:var(--grau);font-size:.92rem;flex:1;margin:0}
.anlass .pille{align-self:flex-start}
@media (max-width:900px){.anlaesse{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.anlaesse{grid-template-columns:1fr}}
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stimme{border:1px solid var(--linie);border-radius:10px;padding:16px 18px;background:#fff;display:flex;flex-direction:column;gap:6px}
.stimme .sterne i{font-size:1.05rem}
.stimme b{font-family:"Lexend",sans-serif;font-weight:600}
.stimme p{font-size:.92rem;margin:0;color:#2c3640}
.stimme small{color:var(--grau);font-size:.8rem;margin-block-start:auto}
.stimme small a{color:var(--blau)}
@media (max-width:900px){.stimmen{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stimmen{grid-template-columns:1fr}}
.versprechen{background:#0f4e7f;color:#fff;padding-block:56px}
.versprechen .rahmen{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:center}
.versprechen h2{font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:700}
.versprechen .kicker{font-size:.85rem;opacity:.85;margin-block-end:8px;display:block}
.zusage{background:#e4f1fb;color:var(--tinte);border-radius:12px;padding:16px 20px;margin-block-end:14px}
.zusage em{display:inline-block;font:600 .72rem/1 "Lexend",sans-serif;font-style:normal;background:var(--krone);border-radius:99px;padding:6px 12px;margin-block-end:8px}
.zusage:nth-child(2) em{background:#9db8f5}.zusage:nth-child(3) em{background:#9ee0c4}
.zusage h3{margin:0 0 4px}.zusage p{margin:0;font-size:.92rem}
@media (max-width:820px){.versprechen .rahmen{grid-template-columns:1fr}}
.lesetext{max-inline-size:1000px}
.lesetext h2{margin-block-start:.2em}
.lesetext h3{margin-block-start:1.4em;font-size:1.15rem}
.lesetext ol,.lesetext ul{padding-inline-start:1.3em}
.lesetext li{margin-block-end:.5em}
.fragen details{border-block-end:1px solid var(--linie);padding-block:4px}
.fragen summary{cursor:pointer;list-style:none;padding:14px 36px 14px 0;font:500 1.02rem/1.4 "Lexend",sans-serif;position:relative}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;inset-inline-end:6px;inset-block-start:10px;font-size:1.5rem;color:var(--blau)}
.fragen details[open] summary::after{content:"−"}
.fragen details p{color:var(--grau);margin:0 0 14px}
.band-bild img{inline-size:100%;border-radius:var(--rund);aspect-ratio:5/1;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{border:1px solid var(--linie);border-radius:99px;padding:7px 14px;text-decoration:none;font-size:.9rem;background:#fff}
.chips a:hover,.chips a.da{border-color:var(--blau);color:var(--blau)}
.kachel-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.kachel-liste a{text-decoration:none;display:block;background:#fff;border-radius:var(--rund);overflow:hidden;box-shadow:0 1px 3px rgba(20,40,60,.08)}
.kachel-liste img{aspect-ratio:5/1;object-fit:cover;inline-size:100%}
.kachel-liste span{display:flex;justify-content:space-between;padding:12px 16px;font:500 1rem "Lexend",sans-serif}
.kachel-liste small{color:var(--grau);font:400 .85rem "Figtree",sans-serif}
@media (max-width:640px){.kachel-liste{grid-template-columns:1fr}}
}
@layer stueck {
.werk{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;padding-block:22px 40px}
.galerie .gross{background:var(--f,#e3f0fb);border-radius:var(--rund);aspect-ratio:1;padding:24px;overflow:hidden}
.galerie .gross img{inline-size:100%;block-size:100%;object-fit:contain;mix-blend-mode:multiply}
.galerie .daumen{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-block-start:10px}
.galerie .daumen button{border:2px solid transparent;border-radius:10px;background:var(--nebel);padding:4px;cursor:pointer}
.galerie .daumen button.da{border-color:var(--blau)}
.galerie .daumen img{aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.angaben h1{font-size:clamp(1.45rem,2.4vw,2rem)}
.angaben .preis{font:600 2rem "Lexend",sans-serif;margin-block:6px 2px}
.angaben .stand{font-size:.8rem;color:var(--grau);margin-block-end:16px}
.sorten{border:0;padding:0;margin:0 0 18px}
.sorten legend{font:500 .9rem "Lexend",sans-serif;margin-block-end:8px}
.sorten div{display:flex;flex-wrap:wrap;gap:8px}
.sorten label{border:1px solid var(--linie);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:.88rem;background:#fff}
.sorten label small{color:var(--grau)}
.sorten input{position:absolute;opacity:0;pointer-events:none}
.sorten label:has(input:checked){border-color:var(--blau);box-shadow:inset 0 0 0 1px var(--blau);background:var(--himmel)}
.sorten input:focus-visible+span{outline:2px solid var(--krone)}
.angaben .stempel{max-inline-size:440px;margin-block:6px 16px}
.haken{list-style:none;padding:0;margin:0;font-size:.9rem;color:var(--grau)}
.haken li{padding-inline-start:24px;position:relative;margin-block-end:4px}
.haken li::before{content:"♛";position:absolute;inset-inline-start:0;color:var(--krone)}
@media (max-width:860px){.werk{grid-template-columns:1fr;gap:22px}}
.druckbogen{display:grid;grid-template-columns:1.2fr 1fr;gap:34px}
.druckbogen ul{padding-inline-start:1.2em}
.druckbogen table{inline-size:100%;border-collapse:collapse;font-size:.92rem}
.druckbogen th,.druckbogen td{text-align:start;padding:8px 10px;border-block-end:1px solid var(--linie);vertical-align:top}
.druckbogen th{color:var(--grau);font-weight:500;inline-size:42%}
@media (max-width:760px){.druckbogen{grid-template-columns:1fr}.druckbogen table,.druckbogen tbody,.druckbogen tr,.druckbogen th,.druckbogen td{display:block;inline-size:auto}.druckbogen th{border:0;padding-block-end:0}}
.schritte{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:0}
.schritte li{background:#fff;border-radius:12px;padding:18px 18px 18px 64px;position:relative}
.schritte li::before{counter-increment:s;content:counter(s);position:absolute;inset-inline-start:18px;inset-block-start:16px;inline-size:34px;block-size:34px;border-radius:50%;background:var(--blau);color:#fff;display:grid;place-items:center;font:600 1rem "Lexend",sans-serif}
@media (max-width:760px){.schritte{grid-template-columns:1fr}}
.tipp{background:var(--butter);border-radius:12px;padding:18px 22px;margin-block:22px}
.tipp ul{margin:0;padding-inline-start:1.2em}
.kontaktkarte{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.kontaktkarte>div{background:var(--nebel);border-radius:12px;padding:22px}
@media (max-width:700px){.kontaktkarte{grid-template-columns:1fr}}
.zeitleiste{list-style:none;padding:0;margin:0;border-inline-start:3px solid var(--himmel)}
.zeitleiste li{padding:0 0 18px 22px;position:relative}
.zeitleiste li::before{content:"";position:absolute;inset-inline-start:-9px;inset-block-start:4px;inline-size:15px;block-size:15px;border-radius:50%;background:var(--blau)}
.paragraphen{counter-reset:p}
.paragraphen h2{font-size:1.2rem}
.paragraphen h2::before{counter-increment:p;content:"§ " counter(p) " ";color:var(--blau)}
}
@layer fuss {
.fusssteg{background:var(--nebel);margin-block-start:56px;font-size:.92rem}
.fusssteg .boxen{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-block:34px;border-block-end:1px solid var(--linie)}
.fusssteg .boxen>div{display:flex;gap:16px;align-items:flex-start}
.fusssteg .boxen .rund{inline-size:58px;block-size:58px;border-radius:50%;background:#e1ecf6;display:grid;place-items:center;flex:none}
.fusssteg .boxen b{font:600 1.02rem "Lexend",sans-serif;display:block;margin-block-end:2px}
.fusssteg .spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-block:32px}
.fusssteg h4{font-size:.95rem;margin-block-end:10px}
.fusssteg ul{list-style:none;padding:0;margin:0}
.fusssteg li{margin-block-end:6px}
.fusssteg .spalten a{color:#3a4652}
.fusssteg address{font-style:normal;line-height:1.6}
.fusssteg .unten{border-block-start:1px solid var(--linie);padding-block:18px 26px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;color:var(--grau);font-size:.84rem}
.fusssteg .unten img{inline-size:34px;display:inline-block;vertical-align:middle;margin-inline-end:8px}
@media (max-width:860px){.fusssteg .spalten{grid-template-columns:1fr 1fr}.fusssteg .boxen{grid-template-columns:1fr}}
}