@layer basis, teile, seiten;
@layer basis {
:root { --nacht:#111214; --kohle:#1E1F22; --rot:#D82828; --rottief:#A81C1E; --kreide:#F4F3F1; --tinte:#1A1B1D; --grau:#5B5D62; --linie:#DFDEDB; --gruen:#1E8E4A; --breit:1200px; }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#fff; color:var(--tinte); font:400 17px/1.6 "Source Sans 3",system-ui,sans-serif; overflow-wrap:break-word; }
img { max-inline-size:100%; block-size:auto; display:block; }
a { color:inherit; }
h1,h2,h3 { font-family:"Albert Sans",system-ui,sans-serif; line-height:1.2; margin:0 0 .5em; font-weight:600; letter-spacing:-.01em; }
h1 { font-size:clamp(1.85rem,4vw,2.9rem); }
h2 { font-size:clamp(1.45rem,2.6vw,2rem); }
h3 { font-size:1.15rem; }
p { margin:0 0 1em; }
.rahmen { inline-size:min(100% - 32px,var(--breit)); margin-inline:auto; }
button { font:inherit; }
}
@layer teile {
.griffknopf { display:block; inline-size:100%; max-inline-size:400px; padding:0; border:0; background:none; cursor:pointer; transition:transform .12s; }
.griffknopf:hover { transform:translateY(-1px); }
.griffknopf:focus-visible,.kopfleiste a:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.griffknopf img { inline-size:100%; }
.griffknopf--klein { inline-size:210px; }
.kopfleiste { background:var(--nacht); color:#fff; position:sticky; inset-block-start:0; z-index:20; }
.kopfleiste__zeile { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; min-block-size:68px; }
.kopfleiste__wege { display:flex; gap:26px; }
.kopfleiste__wege a { text-decoration:none; font-weight:600; font-size:.98rem; padding-block:6px; border-block-end:2px solid transparent; }
.kopfleiste__wege a:hover,.kopfleiste__wege a[aria-current] { border-color:var(--rot); }
.kopfleiste__marke img { inline-size:150px; }
.kopfleiste__ziel { justify-self:end; }
.burger { display:none; inline-size:42px; block-size:42px; background:none; border:0; color:#fff; padding:9px; cursor:pointer; }
.burger span { display:block; block-size:2px; background:currentColor; margin-block:5px; }
.statement { background:var(--nacht); color:#fff; text-align:center; padding-block:34px 0; }
.statement h2 { font-weight:500; }
.statement p { max-inline-size:760px; margin-inline:auto; color:#d7d7d8; }
.faktenzeile { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 34px; list-style:none; margin:18px 0 0; padding:12px 16px; border-block-start:1px solid #333; font-style:italic; font-weight:600; font-size:.95rem; }
.karte { display:flex; flex-direction:column; border:1px solid var(--linie); border-radius:6px; padding:16px; background:#fff; }
.karte__bild { display:block; aspect-ratio:1; }
.karte__bild img { inline-size:100%; block-size:100%; object-fit:contain; }
.karte h3 { margin:14px 0 6px; font-weight:700; font-family:"Albert Sans",sans-serif; }
.karte h3 a { text-decoration:none; }
.karte h3 a:hover { color:var(--rottief); }
.karte__text { font-size:.95rem; color:var(--grau); margin:0 0 10px; flex:1; }
.sterne { color:#E8A317; letter-spacing:1px; }
.wertung { font-size:.92rem; color:var(--grau); margin:0 0 6px; }
.preis { margin:0 0 10px; }
.preis strong { display:block; font:700 1.5rem/1.2 "Albert Sans",sans-serif; }
.preis small { color:var(--grau); font-size:.82rem; }
.raster3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.stimmen { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; }
.stimme { background:var(--kreide); border-radius:12px; padding:22px; text-align:center; }
.stimme h3 { font-size:1.02rem; margin:6px 0 8px; }
.stimme p { font-size:.95rem; margin-block-end:12px; }
.stimme footer { font-size:.86rem; color:var(--grau); border-block-start:1px solid var(--linie); padding-block-start:10px; }
.stimme cite { font-weight:700; color:var(--tinte); }
.aufklapp { border-block-end:1px solid var(--linie); }
.aufklapp summary { cursor:pointer; padding-block:13px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.aufklapp summary::-webkit-details-marker { display:none; }
.aufklapp summary::after { content:"+"; font-size:1.3rem; line-height:1; color:var(--rot); }
.aufklapp[open] summary::after { content:"–"; }
.aufklapp > div { padding-block-end:12px; font-size:.97rem; }
.krumen { font-size:.86rem; color:var(--grau); padding-block:12px; }
.krumen ol { list-style:none; display:flex; flex-wrap:wrap; gap:4px 8px; margin:0; padding:0; }
.krumen li + li::before { content:"›"; margin-inline-end:8px; }
.krumen a { text-decoration:none; }
.krumen a:hover { text-decoration:underline; }
.tippkarte { border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgb(0 0 0 / .08); background:#fff; text-decoration:none; display:block; text-align:center; }
.tippkarte img { inline-size:100%; aspect-ratio:16/9; object-fit:cover; }
.tippkarte:nth-child(3) img { object-position:50% 0; }
.tippkarte h3 { padding:16px 18px 4px; margin:0; font-weight:500; font-size:1.2rem; }
.tippkarte p { padding:4px 18px 18px; margin:0; font-size:.93rem; color:var(--grau); }
.tippreihe { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.nummernliste { margin:0 0 22px; padding-inline-start:22px; }
.nummernliste a { color:var(--rottief); }
.fuss { background:var(--nacht); color:#cfcfd1; font-size:.95rem; padding-block:44px 22px; margin-block-start:56px; }
.fuss__spalten { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; }
.fuss h2 { color:#fff; font-size:1.05rem; margin-block-end:12px; }
.fuss a { text-decoration:none; }
.fuss a:hover { color:#fff; text-decoration:underline; }
.fuss ul { list-style:none; margin:0; padding:0; columns:1; }
.fuss li { margin-block-end:5px; }
.fuss__logo { inline-size:170px; margin-block-end:14px; }
.fuss__rest { border-block-start:1px solid #333; margin-block-start:28px; padding-block-start:14px; font-size:.84rem; }
}
@layer seiten {
.start { background:var(--nacht); color:#fff; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.start__text { padding:clamp(28px,6vw,84px) clamp(16px,5vw,64px); align-self:center; justify-self:end; max-inline-size:640px; }
.start__text p { color:#dcdcdd; font-size:1.08rem; margin-block-end:22px; }
.start__bild img { inline-size:100%; block-size:100%; max-block-size:620px; object-fit:cover; }
.regal { padding-block:50px 10px; }
.regal__kopf { text-align:center; max-inline-size:760px; margin:0 auto 24px; }
.regal h3.linie { font-size:1.3rem; margin:30px 0 14px; padding-block-end:8px; border-block-end:2px solid var(--tinte); }
.bandbild { margin-block:26px; border-radius:6px; overflow:hidden; }
.bandbild img { inline-size:100%; }
.welle { display:block; inline-size:100%; block-size:44px; margin-block-start:44px; background:#fff; }
.schritte { background:var(--nacht); color:#fff; padding-block:14px 50px; text-align:center; }
.schritte__reihe { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-block-start:20px; }
.schritt { background:var(--kohle); border-radius:12px; overflow:hidden; }
.schritt img { inline-size:100%; aspect-ratio:1/1; object-fit:cover; }
.schritt:nth-child(3) img { object-position:29% 50%; }
.schritt h3 { margin:14px 14px 6px; }
.schritt p { margin:0 14px 16px; font-size:.95rem; color:#d7d7d8; }
.teiler { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px); align-items:center; padding-block:46px 0; }
.teiler h2 { font-weight:500; }
.teiler img { border-radius:12px; inline-size:100%; }
.teiler--um > :first-child { order:2; }
.vergleich { background:#ECE9E5; border-radius:12px; padding:18px; }
.vergleich__zeile { display:grid; grid-template-columns:1fr 84px 84px; gap:8px; align-items:center; background:#fff; border-radius:8px; padding:10px 12px; margin-block-start:8px; font-weight:600; font-size:.95rem; }
.vergleich__kopf { background:none; color:var(--rottief); font-family:"Albert Sans",sans-serif; text-align:center; font-size:.9rem; padding-block:0; margin:0; }
.vergleich__zeile > span { text-align:center; font-weight:700; font-size:.9rem; }
.ja { color:var(--gruen); } .nein { color:var(--rot); } .halb { color:var(--grau); }
.block { padding-block:50px 0; }
.block__kopf { text-align:center; max-inline-size:720px; margin:0 auto 22px; }
.beratung { max-inline-size:900px; }
.beratung h3 { font-size:1.2rem; margin-block-start:22px; }
.rubrik { display:grid; grid-template-columns:230px 1fr; gap:36px; }
.seitenspalte { font-size:.95rem; }
.seitenspalte strong { display:block; padding-block-end:8px; border-block-end:1px solid var(--linie); font-family:"Albert Sans",sans-serif; }
.seitenspalte ul { list-style:none; padding:0; margin:0; }
.seitenspalte a { display:block; text-decoration:none; padding:7px 8px; border-block-end:1px solid var(--linie); }
.seitenspalte a[aria-current] { background:var(--kreide); box-shadow:inset 3px 0 0 var(--rot); font-weight:600; }
.anzahl { font-weight:600; color:var(--grau); margin-block-end:10px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-block-end:18px; }
.chips a { border:1px solid var(--linie); border-radius:4px; padding:5px 12px; text-decoration:none; font-size:.92rem; background:var(--kreide); }
.chips a:hover { border-color:var(--rot); }
.paarbild { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-block:22px; }
.paarbild img { border-radius:6px; inline-size:100%; }
.kauf { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(20px,4vw,44px); padding-block:6px 30px; align-items:start; }
.galerie { position:sticky; inset-block-start:84px; }
.galerie__gross { border:1px solid var(--linie); border-radius:12px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; padding:10px; }
.galerie__gross img { max-block-size:100%; object-fit:contain; inline-size:100%; block-size:100%; }
.galerie__leiste { display:flex; flex-wrap:wrap; gap:8px; margin-block-start:10px; }
.galerie__leiste button { inline-size:66px; block-size:66px; padding:2px; border:2px solid var(--linie); border-radius:8px; background:#fff; cursor:pointer; }
.galerie__leiste button[aria-pressed=true] { border-color:var(--rot); }
.galerie__leiste img { inline-size:100%; block-size:100%; object-fit:cover; border-radius:5px; }
.zitatkasten { border:1px solid var(--linie); border-radius:10px; padding:12px 14px; font-size:.95rem; background:var(--kreide); margin-block-end:14px; }
.zitatkasten p { margin:0 0 4px; font-style:italic; }
.zitatkasten cite { font-style:normal; font-size:.85rem; color:var(--grau); }
.punkte { list-style:none; padding:0; margin:0 0 16px; }
.punkte li { padding-inline-start:26px; position:relative; margin-block-end:6px; }
.punkte li::before { content:"✓"; position:absolute; inset-inline-start:2px; color:var(--rot); font-weight:800; }
.pack { display:grid; gap:8px; margin-block-end:14px; }
.pack a { display:grid; grid-template-columns:20px 1fr auto; gap:10px; align-items:center; border:1px solid var(--linie); border-radius:10px; padding:10px 12px; text-decoration:none; }
.pack a::before { content:""; inline-size:16px; block-size:16px; border-radius:50%; border:2px solid #9a9a9a; }
.pack a[aria-current] { border:2px solid var(--rot); background:#FDF3F3; }
.pack a[aria-current]::before { border:5px solid var(--rot); }
.pack small { display:block; color:var(--grau); font-size:.82rem; }
.pack b { font-family:"Albert Sans",sans-serif; }
.lesen { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(20px,4vw,44px); padding-block:26px; }
.lesen__rand { display:grid; gap:14px; align-content:start; }
.lesen__rand img { border-radius:10px; inline-size:100%; }
.vierer { background:var(--kohle); color:#fff; padding-block:42px; margin-block:24px; }
.vierer__gitter { display:grid; grid-template-columns:1fr 300px 1fr; gap:26px; align-items:center; text-align:center; }
.vierer__gitter img { border-radius:12px; inline-size:100%; }
.vierer__seite { display:grid; gap:24px; }
.vierer h3 { margin-block-end:6px; }
.vierer p { margin:0; font-size:.95rem; color:#d7d7d8; }
.ratgeber { max-inline-size:820px; margin-inline:auto; }
.ratgeber__bild { border-radius:12px; margin-block:12px 18px; inline-size:100%; }
.ratgeber__lead { font-size:1.14rem; }
.hinweiskarte { display:grid; grid-template-columns:130px 1fr; gap:16px; align-items:center; border:1px solid var(--linie); border-radius:12px; padding:14px; margin-block:26px; }
.hinweiskarte h2 { font-size:1.1rem; margin-block-end:4px; }
.hinweiskarte p { font-size:.93rem; margin-block-end:8px; color:var(--grau); }
.dienst { max-inline-size:860px; margin-inline:auto; }
.dienst figure { margin:18px 0; }
.dienst figure img { border-radius:10px; inline-size:100%; }
.dienst figure:not(:first-of-type) img { max-inline-size:520px; margin-inline:auto; }
.dienst blockquote { border-inline-start:4px solid var(--rot); margin:18px 0; padding:4px 14px; font:500 1.2rem/1.4 "Albert Sans",sans-serif; }
.dienst dl { margin:14px 0; }
.dienst dt { font-weight:700; margin-block-start:12px; }
.dienst dd { margin:2px 0 0; color:var(--grau); }
.dienst ol { padding-inline-start:22px; }
.dienst ol li { margin-block-end:8px; }
.anschrift { background:var(--kreide); border-radius:12px; padding:18px 20px; font-style:normal; margin-block-end:18px; }
.verlaufen { text-align:center; padding-block:70px; }
}
@media (max-width:1000px) {
  .rubrik { grid-template-columns:1fr; gap:14px; }
  .seitenspalte { display:none; }
  .vierer__gitter { grid-template-columns:1fr 1fr; }
  .vierer__gitter > img,.vierer__gitter > picture { grid-column:1 / -1; grid-row:1; max-inline-size:320px; margin-inline:auto; }
  .raster3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .raster3 { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:800px) {
  body { font-size:16px; }
  .kopfleiste__zeile { grid-template-columns:42px auto 1fr; gap:6px; min-block-size:58px; }
  .burger { display:block; }
  .kopfleiste__wege { display:none; position:absolute; inset-inline:0; inset-block-start:100%; flex-direction:column; gap:0; background:var(--nacht); padding:6px 16px 14px; border-block-start:1px solid #333; }
  .auf-nav .kopfleiste__wege { display:flex; }
  .kopfleiste__wege a { padding-block:10px; }
  .kopfleiste__marke img { inline-size:104px; }
  .griffknopf--klein { inline-size:168px; }
  .galerie { position:static; }
  .start { grid-template-columns:1fr; }
  .start__text { justify-self:start; max-inline-size:none; }
  .start__bild { grid-row:1; }
  .start__bild img { max-block-size:300px; }
  .schritte__reihe,.teiler,.kauf,.lesen { grid-template-columns:minmax(0,1fr); }
  .teiler--um > :first-child { order:0; }
  .fuss__spalten { grid-template-columns:1fr; }
  .vierer__gitter { text-align:start; }
  .vergleich__zeile { grid-template-columns:1fr 62px 62px; font-size:.88rem; padding:9px; }
  .hinweiskarte { grid-template-columns:84px 1fr; }
}