@font-face{
  font-family:"Nunito Sans"; font-style:normal; font-display:swap; font-weight:200 1000;
  src:url("../schrift/nunito-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../schrift/nunito-sans-latin-wght-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Nunito Sans"; font-style:italic; font-display:swap; font-weight:200 1000;
  src:url("../schrift/nunito-sans-latin-wght-italic.woff2") format("woff2-variations"), url("../schrift/nunito-sans-latin-wght-italic.woff2") format("woff2");
}
:root{
  --leinen:#F6F2EC; --sand:#EDE6DA; --schiefer:#3A3F3C; --nebel:#5F6662;
  --nebel-hell:#7A817C; --linie:#DED5C6; --salbei:#8A9A86; --salbei-tief:#5A6B57;
  --auf-akzent:#F6F2EC;
  --weich: 0 1px 2px rgba(58,63,60,.04), 0 10px 30px rgba(58,63,60,.07);
  --weich-klein: 0 1px 2px rgba(58,63,60,.04), 0 4px 14px rgba(58,63,60,.05);
  --rand: clamp(20px, 5vw, 40px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--leinen); color:var(--schiefer);
  font-family:"Nunito Sans", system-ui, -apple-system, sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
.rand{max-width:1120px; margin:0 auto; padding:0 var(--rand);}
.schmal{max-width:68ch;}

/* Kopf */
header{position:sticky; top:0; z-index:20; background:rgba(246,242,236,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid transparent; transition:border-color .25s ease;}
header.fest{border-bottom-color:var(--linie);}
.kopf{display:flex; align-items:center; gap:24px; padding-top:14px; padding-bottom:14px;}
.marke img{height:38px; width:auto; display:block;}
nav{margin-left:auto; display:flex; gap:28px; align-items:center;}
nav a{color:var(--nebel); text-decoration:none; font-size:.9375rem; font-weight:600;}
nav a:hover{color:var(--salbei-tief);}
@media (max-width:760px){ nav .sprung{display:none;} }

.knopf{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 26px; border-radius:8px;
  background:var(--salbei-tief); color:var(--auf-akzent); font-weight:700;
  text-decoration:none; font-size:1.0625rem; border:none; cursor:pointer;
  box-shadow:var(--weich-klein); transition:transform .18s ease, box-shadow .18s ease;
}
.knopf:hover{transform:translateY(-1px); box-shadow:var(--weich);}
.knopf.klein{min-height:44px; padding:10px 18px; font-size:.9375rem; border-radius:8px;}

/* Bänder */
.band{padding:clamp(56px, 9vw, 104px) 0;}
.band.sand{background:var(--sand);}
.band + .band.leinen{border-top:1px solid var(--linie);}

h1{font-size:clamp(2.1rem, 5.2vw, 3.25rem); line-height:1.12; font-weight:800; letter-spacing:-.015em; margin:0 0 20px;}
h2{font-size:clamp(1.5rem, 3.2vw, 2.125rem); line-height:1.2; font-weight:800; letter-spacing:-.01em; margin:0 0 20px;}
h3{font-size:1.125rem; font-weight:800; margin:0 0 8px;}
p{margin:0 0 18px;}
.b{font-weight:800;}
.vorsatz{font-size:.8125rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--salbei-tief); margin:0 0 14px;}
.gross{font-size:clamp(1.0625rem, 1.6vw, 1.25rem); color:var(--nebel);}
.neben{color:var(--nebel);}

/* Einstieg */
.einstieg{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center;}
@media (max-width:860px){ .einstieg{grid-template-columns:1fr;} }
.einstieg img{width:100%; height:auto; border-radius:8px; display:block; box-shadow:var(--weich);}
.preis{font-size:.9375rem; color:var(--nebel); margin:0 0 20px;}

/* Zweispalter */
.paar{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center;}
.paar.gedreht .text{order:2;}
@media (max-width:860px){ .paar{grid-template-columns:1fr;} .paar.gedreht .text{order:0;} }
.paar img{width:100%; height:auto; border-radius:8px; display:block; box-shadow:var(--weich);}

.uebersicht{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:30px; margin-top:36px;}
.uebersicht > div{border-top:2px solid var(--salbei); padding-top:18px;}
.uebersicht h3{margin:0 0 8px;}
.uebersicht p{margin:0; color:var(--nebel); font-size:.9375rem;}
.paar.lang{align-items:stretch;}
.paar.lang .bild img{position:sticky; top:96px;}

/* Karten */
.karten{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:20px; margin-top:32px;}
.karte{background:var(--leinen); border:1px solid var(--linie); border-radius:8px; padding:26px; box-shadow:var(--weich-klein);}
.band.leinen .karte{background:var(--sand);}

/* Bilderleiste */
.leiste-rahmen{position:relative; margin:36px 0 0; --kachel:min(86vw, 330px);}
.leiste{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
.leiste::-webkit-scrollbar{display:none;}
.kachel{flex:0 0 var(--kachel); margin:0; scroll-snap-align:start;}
.geraet{background:var(--schiefer); padding:9px; border-radius:34px; box-shadow:var(--weich);}
.kachel img{width:100%; height:auto; display:block; border-radius:26px; background:var(--sand);}
.kachel figcaption{border-left:1px solid var(--linie); padding-left:16px; margin-top:22px; font-size:.9375rem; line-height:1.6;}
.js .kachel figcaption{margin-top:78px;}
.steuer{display:none;}
.js .steuer{display:flex; position:absolute; left:0; right:0; top:var(--reglertop, 100%); height:48px; align-items:center;}
.bahn{position:relative; flex:1; height:10px; border-radius:8px; background:var(--leinen); border:1px solid var(--linie); cursor:pointer; touch-action:none;}
.band.leinen .bahn{background:var(--sand);}
.griff{position:absolute; top:-1px; left:0; height:10px; border-radius:8px; background:var(--salbei-tief); min-width:48px;}
.griff:focus-visible{outline:2px solid var(--salbei-tief); outline-offset:6px;}

/* Kauf */
.kaufkarte{background:var(--leinen); border:1px solid var(--linie); border-radius:8px; padding:clamp(28px,4vw,48px); box-shadow:var(--weich); text-align:center; max-width:720px; margin:0 auto;}
.zahl{font-size:clamp(2.4rem,6vw,3.4rem); font-weight:800; line-height:1; letter-spacing:-.02em; margin:0 0 6px;}

/* Porträt */
.portraet{width:100%; max-width:620px; height:auto; border-radius:8px; display:block; margin:0 auto 36px; box-shadow:var(--weich);}

/* Fragen */
details{background:var(--leinen); border:1px solid var(--linie); border-radius:8px; margin-bottom:12px; box-shadow:var(--weich-klein);}
.band.leinen details{background:var(--sand);}
details>summary{min-height:56px; padding:16px 54px 16px 22px; cursor:pointer; font-weight:800; list-style:none; position:relative;}
details>summary::-webkit-details-marker{display:none;}
details>summary::after{content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); color:var(--salbei-tief); font-weight:400; font-size:1.5rem; line-height:1;}
details[open]>summary::after{content:"\2212";}
.antwort{padding:0 22px 20px;}
.mehr{background:none; border:none; box-shadow:none; margin-top:20px;}
.mehr>summary{color:var(--salbei-tief); padding-left:0;}
.mehr>summary::after{right:auto; margin-left:10px; position:static; transform:none; display:inline-block; vertical-align:middle;}
.offen{color:var(--nebel); font-style:italic;}

footer{background:var(--sand); border-top:1px solid var(--linie); padding:44px 0 64px; color:var(--nebel); font-size:.9375rem;}
footer a{color:var(--salbei-tief);}

/* ruhiges Erscheinen */
.js .auf{opacity:0; transform:translateY(14px);}
.js .auf.da{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .js .auf{opacity:1; transform:none;}
  .knopf:hover{transform:none;}
}

/* Rechtsseiten */
.marke a{display:block;}
.recht{max-width:68ch;}
.recht h1{font-size:clamp(1.9rem, 4.4vw, 2.6rem); margin:0 0 32px;}
.recht h2{font-size:1.1875rem; line-height:1.3; margin:36px 0 10px;}
.recht h2:first-of-type{margin-top:0;}
.recht p{margin:0 0 14px;}
.recht a{color:var(--salbei-tief);}

/* Kontaktformular */
.formular{display:flex; flex-direction:column; gap:8px; margin:28px 0 20px;}
.formular label{font-weight:700; margin-top:12px;}
.formular input, .formular textarea{font:inherit; color:var(--schiefer); background:var(--sand); border:1px solid var(--linie); border-radius:8px; padding:12px 14px; width:100%;}
.formular textarea{resize:vertical; min-height:180px;}
.formular input:focus, .formular textarea:focus{outline:2px solid var(--salbei-tief); outline-offset:2px;}
.formular .knopf{align-self:flex-start; margin-top:20px; font-family:inherit;}
.falle{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.formular .pflicht{font-size:.9375rem; margin:8px 0 0;}

/* Ratgeber-Seiten */
.ratgeber{max-width:68ch; margin-inline:auto;}
.ratgeber h1{font-size:clamp(1.9rem, 4.4vw, 2.6rem); margin:0 0 20px;}
.ratgeber .gross{margin-bottom:8px;}
.ratgeber h2{font-size:clamp(1.3rem, 2.6vw, 1.625rem); line-height:1.25; margin:52px 0 14px; scroll-margin-top:96px;}
.ratgeber h3{font-size:1.0625rem; margin:28px 0 6px;}
.ratgeber p{margin:0 0 14px;}
.ratgeber ul{margin:0 0 14px; padding-left:1.25em;}
.ratgeber li{margin:0 0 6px; padding-left:.25em;}
.ratgeber li::marker{color:var(--salbei-tief);}
.ratgeber a{color:var(--salbei-tief);}
.ratgeber .kasten{background:var(--sand); border:1px solid var(--linie); border-radius:8px; padding:clamp(22px,3.5vw,32px); margin:52px 0 32px; box-shadow:var(--weich-klein);}
.ratgeber .kasten .vorsatz{margin-bottom:10px;}
.ratgeber .kasten .knopf{color:var(--auf-akzent); margin-top:6px;}
.ratgeber .hinweis{font-size:.9375rem; color:var(--nebel);}
.ratgeber .autorin{font-size:.9375rem; color:var(--nebel); margin:40px 0 0;}
.ratgeber li strong{font-weight:700;}
.ratgeber .quellen{font-size:.9375rem; color:var(--nebel);}
.ratgeber .quellen a{overflow-wrap:anywhere;}
.ratgeber ol{margin:0 0 14px; padding-left:1.4em;}
.ratgeber ol li::marker{color:var(--salbei-tief); font-weight:700;}
.ratgeber .weiter{margin-top:8px;}
.ratgeber .zeichnung{margin:8px auto 22px; max-width:280px;}
.ratgeber .zeichnung img{display:block; width:100%; height:auto;}
.ratgeber .tabelle{overflow-x:auto; margin:6px 0 18px;}
.ratgeber table{width:100%; border-collapse:collapse; font-size:.9375rem; line-height:1.45;}
.ratgeber table{table-layout:fixed;}
.ratgeber th,.ratgeber td{text-align:left; vertical-align:top; padding:10px 8px; border-bottom:1px solid var(--linie); hyphens:auto; overflow-wrap:break-word;}
.ratgeber th:first-child,.ratgeber td:first-child{padding-left:0;}
.ratgeber thead th{font-weight:700; color:var(--salbei-tief); border-bottom:2px solid var(--linie);}
.ratgeber tbody th{font-weight:700;}
.ratgeber thead th:first-child{width:32%;}
.ratgeber .tipp{background:var(--sand); border-radius:8px; padding:16px 18px;}
/* Ratgeber-Kärtchen als Links */
.karte-link{display:flex; flex-direction:column; gap:10px; color:inherit; text-decoration:none; transition:border-color .2s ease;}
.karte-link h2,.karte-link h3{margin:0; font-size:1.125rem; line-height:1.3;}
.karte-link .neben{margin:0;}
.karte-link .mehr{margin-top:auto; font-weight:700; color:var(--salbei-tief);}
.karte-link:hover,.karte-link:focus-visible{border-color:var(--salbei-tief); outline:none;}
.karte-link:hover .mehr{text-decoration:underline;}
.ratgeber .karten.liste{grid-template-columns:1fr; margin-top:28px;}

/* Sprungmarken: Ueberschrift nicht unter der Kopfzeile (schmale Bildschirme) */
@media (max-width:760px){ section[id]{scroll-margin-top:28px;} }

/* Glossar */
.ratgeber .inhalt{list-style:none; padding:0; margin:8px 0 8px; display:flex; flex-wrap:wrap; gap:8px 18px;}
.ratgeber .inhalt a{font-weight:700;}
.ratgeber .glossar{margin:0;}
.ratgeber .glossar dt{font-weight:700; margin:22px 0 4px; scroll-margin-top:96px;}
.ratgeber .glossar dd{margin:0;}
.ratgeber .vorsatz-zeile{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; margin-bottom:14px;}
.ratgeber .vorsatz-zeile .vorsatz{margin:0;}
.ratgeber .suche{flex:0 1 260px;}
.ratgeber .suche input{width:100%; box-sizing:border-box; font:inherit; font-size:.9375rem; padding:8px 14px; border:1px solid var(--linie); border-radius:8px; background:#fff; color:inherit;}
.ratgeber .suche input:focus{outline:2px solid var(--salbei-tief); outline-offset:2px;}
#glossar-leer{margin:12px 0 0;}
@media (max-width:520px){ .ratgeber .suche{flex:1 1 100%;} }
.ratgeber .suche input{padding-left:40px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235B6B57' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 14px center;}
.ratgeber .suche input:focus::placeholder{color:transparent;}
.ratgeber [hidden]{display:none !important;}
@media (min-width:900px){ #ratgeber .karten{grid-template-columns:repeat(3,1fr);} }
.ratgeber .tabelle table:has(.hervor){border-collapse:separate; border-spacing:0;}
.ratgeber .tabelle .hervor{color:var(--schiefer); font-weight:600; padding-left:12px; padding-right:12px; border-left:2px solid var(--linie); border-right:2px solid var(--linie);}
.ratgeber .tabelle thead .hervor{background:var(--sand); font-weight:800; border-top:2px solid var(--linie); border-radius:8px 8px 0 0;}
.ratgeber .tabelle .stern{color:var(--salbei-tief); font-size:.9em; margin-left:2px;}
.ratgeber .tabelle tbody tr:last-child .hervor{border-bottom:2px solid var(--linie); border-radius:0 0 8px 8px;}
.ratgeber .tabelle thead .hervor{white-space:nowrap;}
@media (max-width:520px){
  .ratgeber .tabelle table:has(.hervor){font-size:.875rem;}
  .ratgeber .tabelle table:has(.hervor) thead th:first-child{width:24%;}
  .ratgeber .tabelle table:has(.hervor) th,.ratgeber .tabelle table:has(.hervor) td{padding-left:6px; padding-right:6px;}
  .ratgeber .tabelle table:has(.hervor) th:first-child{padding-left:0;}
  .ratgeber .tabelle .hervor{padding-left:8px; padding-right:8px;}
}