/* Papierkram Handwerk: Magazin-Look, Kraftpapier + Anthrazit + Signalorange, Serifen aus Systemschriften */
:root{
  --papier:#f4ecdd;--papier-2:#ebe0cb;--kraft:#d9c4a0;--kraft-2:#c9ae83;--weiss:#fbf7ef;
  --anth:#2b2a28;--anth-2:#4a4743;--anth-3:#6f6a61;--linie:#d6c7ab;--linie-2:#bfae8e;
  --signal:#d9481c;--signal-dunkel:#b33a13;--signal-hell:#f8dccd;
  --gruen:#3d6b4f;--blau:#2f5570;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --w:1180px;--lesen:680px
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--anth);font:18px/1.7 var(--serif);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--signal-dunkel);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--anth)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.sr{position:absolute;left:-9999px;top:0;background:var(--anth);color:#fff;padding:10px 14px;z-index:99}
.sr:focus{left:10px;top:10px}
.t{display:block;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--anth-3);margin-bottom:10px}

/* Kopf: Zeitungskopf mit Streifen, zentrierter Wortmarke und Rubrikenleiste */
.streifen{background:var(--anth);color:#e9dfcc;font:12.5px/1 var(--sans);letter-spacing:.04em}
.streifen .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.kopf-in{display:flex;justify-content:center;padding-top:26px;padding-bottom:18px}
.marke{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--anth)}
.marke svg{width:44px;height:44px;flex:none}
.marke-t{font-family:var(--serif);font-size:clamp(28px,4.4vw,44px);font-weight:700;letter-spacing:-.01em;line-height:1}
.marke-t em{font-style:italic;font-weight:400;color:var(--signal-dunkel)}
.marke.klein svg{width:32px;height:32px}.marke.klein .marke-t{font-size:24px}
.rubriken{border-top:3px double var(--anth);border-bottom:1px solid var(--anth)}
.rubriken .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 26px;padding-top:10px;padding-bottom:10px}
.rubriken a{font:600 14px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--anth-2);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.rubriken a:hover{color:var(--anth);border-bottom-color:var(--linie-2)}
.rubriken a[aria-current]{color:var(--anth);border-bottom-color:var(--signal)}
@media (max-width:640px){
  .streifen-r{display:none}.streifen .wrap{justify-content:center}
  .kopf-in{padding-top:18px;padding-bottom:12px}.marke svg{width:34px;height:34px}.marke{gap:10px}
  .rubriken .wrap{gap:0 16px;padding-top:6px;padding-bottom:6px}.rubriken a{font-size:12.5px;padding:7px 0}
}

/* Startseite */
.auftakt{padding:54px 0 30px;text-align:center}
.auftakt.klein{padding:44px 0 18px}
.ausgabe{font:600 13px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--signal-dunkel);margin:0 0 14px}
.auftakt h1{font-family:var(--serif);font-weight:700;font-size:clamp(38px,6.4vw,74px);line-height:1.02;letter-spacing:-.02em;margin:0 auto 18px;max-width:15ch}
.auftakt-t{font-size:clamp(18px,1.8vw,21px);color:var(--anth-2);max-width:58ch;margin:0 auto;font-style:italic}
.aufmacher{padding:26px 0 44px}
.aufmacher .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:center}
.aufmacher-b img{border:1px solid var(--anth);box-shadow:8px 8px 0 var(--kraft-2)}
.aufmacher h2{font-family:var(--serif);font-size:clamp(28px,3.2vw,40px);line-height:1.12;letter-spacing:-.012em;margin:12px 0 12px}
.aufmacher h2 a{color:var(--anth);text-decoration:none}
.aufmacher h2 a:hover{text-decoration:underline;text-decoration-color:var(--signal)}
.aufmacher p{margin:0 0 12px;color:var(--anth-2)}
@media (max-width:860px){.aufmacher .wrap{grid-template-columns:1fr;gap:22px}.aufmacher-b img{box-shadow:5px 5px 0 var(--kraft-2)}}
.start-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start;padding-bottom:56px;border-top:1px solid var(--anth);padding-top:8px}
@media (max-width:1000px){.start-raster{grid-template-columns:minmax(0,1fr);gap:28px}}
.abschnitt-t{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:22px 0 4px;color:var(--anth)}

/* Beitragsliste: Datum | Text | kleines Bild */
.liste{list-style:none;margin:0;padding:0}
.zeile{display:grid;grid-template-columns:86px minmax(0,1fr) 200px;gap:26px;padding:26px 0;border-bottom:1px dashed var(--linie-2);align-items:start}
.zeile:last-child{border-bottom:0}
.dat{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--sans);padding-top:4px}
.dat b{font:700 42px/1 var(--serif);color:var(--anth)}
.dat span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--anth-3);margin-top:4px}
.zeile h3{font-family:var(--serif);font-size:25px;line-height:1.2;margin:8px 0 8px;letter-spacing:-.005em}
.zeile h3 a{color:var(--anth);text-decoration:none}
.zeile h3 a:hover{text-decoration:underline;text-decoration-color:var(--signal)}
.zeile p{margin:0 0 10px;color:var(--anth-2);font-size:17px;line-height:1.6}
.lz{display:inline-flex;align-items:center;gap:6px;font:13px/1 var(--sans);color:var(--anth-3)}
.lz svg{width:14px;height:14px}
.zeile-b img{border:1px solid var(--anth);aspect-ratio:1600/840;object-fit:cover}
@media (max-width:700px){
  .zeile{grid-template-columns:62px minmax(0,1fr);gap:16px;padding:22px 0}
  .zeile-b{display:none}
  .dat b{font-size:32px}.dat span{font-size:11px}
  .zeile h3{font-size:21px}.zeile p{font-size:16px}
}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px 5px;border:1px solid currentColor;text-decoration:none;color:var(--anth-2);background:transparent}
a.tag:hover{background:var(--anth);color:var(--papier);border-color:var(--anth)}
.tag-buero{color:var(--blau)}.tag-geld{color:var(--signal-dunkel)}.tag-digital{color:var(--gruen)}
.meta{display:flex;flex-wrap:wrap;gap:4px 18px;font:14px/1.5 var(--sans);color:var(--anth-3);margin:0}
.meta>*:not(:first-child)::before{content:"·";margin-right:18px;color:var(--linie-2)}

/* Rand: Zettel, Rubriken, machmal-Kasten */
.rand{display:flex;flex-direction:column;gap:26px;padding-top:26px}
.zettel{background:var(--weiss);border:1px solid var(--linie-2);padding:22px 22px 20px;position:relative;transform:rotate(-.6deg);box-shadow:3px 4px 0 var(--papier-2)}
.zettel::before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:#e6d6b5;opacity:.9;transform:rotate(2deg);border:1px solid #d3bf98}
.zettel p{margin:0 0 10px;font-size:16.5px;line-height:1.6}
.zettel a{font:600 14px var(--sans)}
.rubrik-liste ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--anth)}
.rubrik-liste li a{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--linie);color:var(--anth);text-decoration:none;font-size:18px}
.rubrik-liste li a:hover{color:var(--signal-dunkel)}
.rubrik-liste li span{font:600 13px/1.9 var(--sans);color:var(--anth-3)}
.rand-kasten{background:var(--anth);color:#eadfcb;padding:22px 22px 20px;border-top:5px solid var(--signal)}
.rand-kasten .t{color:#f3c9b4}
.rand-kasten p{margin:0 0 12px;font-size:16px;line-height:1.6}
.rand-kasten a{display:inline-flex;align-items:center;gap:8px;color:#fff;font:600 14.5px var(--sans);text-decoration:none;border-bottom:1px solid var(--signal);padding-bottom:2px}
.rand-kasten a svg,.praxis a svg{width:16px;height:16px}
.rand-kasten a:hover{color:#f3c9b4}

/* Beitrag */
.brot{font:13.5px/1.5 var(--sans);color:var(--anth-3);padding:22px 0 0;display:flex;flex-wrap:wrap;gap:4px 8px}
.brot a{color:var(--anth-3);text-decoration:none}.brot a:hover{color:var(--signal-dunkel)}
.brot span[aria-hidden]{color:var(--linie-2)}
.art-kopf{max-width:900px;margin:0 auto;text-align:center;padding:34px 0 30px}
.art-kopf .tags{justify-content:center}
.art-kopf h1{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5.4vw,62px);line-height:1.06;letter-spacing:-.02em;margin:18px 0 18px}
.art-kopf .lead{font-size:clamp(18.5px,1.9vw,22px);font-style:italic;color:var(--anth-2);max-width:62ch;margin:0 auto 20px;line-height:1.55}
.art-kopf .meta{justify-content:center}
.titelbild{margin:0 0 10px}
.titelbild img{width:100%;border:1px solid var(--anth)}
.art-raster{display:grid;grid-template-columns:minmax(0,var(--lesen)) 290px;gap:64px;justify-content:center;align-items:start;padding:30px 0 56px}
@media (max-width:1060px){.art-raster{grid-template-columns:minmax(0,var(--lesen));gap:24px}}
.rand .toc{position:static}
@media (min-width:1061px){.art-raster .rand{position:sticky;top:20px;padding-top:0}}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:t;border-top:1px solid var(--anth)}
.toc li{counter-increment:t;border-bottom:1px solid var(--linie)}
.toc li a{display:flex;gap:10px;padding:9px 0;color:var(--anth-2);text-decoration:none;font-size:15.5px;line-height:1.4}
.toc li a::before{content:counter(t,decimal-leading-zero);font:600 12px/1.9 var(--sans);color:var(--signal-dunkel)}
.toc li a:hover{color:var(--anth)}
@media (max-width:1060px){.art-raster .toc{display:none}}

.inhalt>p:first-of-type::first-letter{float:left;font-size:4.1em;line-height:.82;font-weight:700;margin:.08em .1em 0 0;color:var(--signal-dunkel)}
.inhalt h2{font-family:var(--serif);font-size:clamp(25px,2.6vw,31px);line-height:1.2;letter-spacing:-.01em;margin:46px 0 14px;scroll-margin-top:20px}
.inhalt h2::before{content:"";display:block;width:44px;height:3px;background:var(--signal);margin-bottom:16px}
.inhalt h3{font-family:var(--sans);font-size:17px;font-weight:700;margin:28px 0 8px}
.inhalt p,.inhalt li{font-size:18.5px;line-height:1.72}
.inhalt ul,.inhalt ol{padding-left:22px}
.inhalt li{margin:6px 0}
.inhalt li::marker{color:var(--signal-dunkel)}
.inhalt strong{font-weight:700}
.notiz{background:var(--weiss) repeating-linear-gradient(transparent 0 31px,#e7dcc6 31px 32px);border:1px solid var(--linie-2);border-left:4px solid var(--anth);padding:20px 22px 14px;margin:0 0 32px}
.notiz ul{margin:0;padding-left:20px}
.notiz li{font-size:17px;line-height:1.6;margin:0 0 8px}
.praxis{border-left:4px solid var(--signal);background:var(--signal-hell);padding:18px 22px;margin:30px 0}
.praxis .t{color:var(--signal-dunkel)}
.praxis p{margin:0 0 10px;font-size:17.5px}
.praxis a{display:inline-flex;align-items:center;gap:8px;font:600 14.5px var(--sans);color:var(--anth)}
.kasten{border:1px solid var(--anth);background:var(--weiss);padding:18px 22px;margin:26px 0}
.kasten p:last-child,.kasten ul:last-child{margin-bottom:0}
.kasten.beispiel{border-style:dashed;border-color:var(--signal-dunkel)}
.muster{font-family:var(--sans);font-size:16px;line-height:1.6;background:var(--weiss);border:1px solid var(--linie-2);padding:16px 18px;margin:18px 0;white-space:normal}
.muster p{font-size:16px;margin:0 0 8px}.muster p:last-child{margin:0}
.tabelle{overflow-x:auto;margin:22px 0;border-top:2px solid var(--anth);border-bottom:1px solid var(--anth)}
.tabelle table{border-collapse:collapse;width:100%;font:15.5px/1.5 var(--sans)}
.tabelle th{text-align:left;font-weight:700;padding:10px 12px 8px 0;border-bottom:1px solid var(--anth);vertical-align:bottom}
.tabelle td{padding:10px 12px 10px 0;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle tr:last-child td{border-bottom:0}
.ablauf{list-style:none;padding:0;margin:24px 0;border-left:2px solid var(--anth)}
.ablauf li{position:relative;padding:0 0 18px 26px;margin:0}
.ablauf li::before{content:"";position:absolute;left:-7px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--papier);border:2px solid var(--signal)}
.ablauf .zeit{display:block;font:700 13px/1.4 var(--sans);letter-spacing:.08em;color:var(--signal-dunkel)}
.faq{border-top:1px solid var(--anth)}
.faq details{border-bottom:1px solid var(--linie-2)}
.faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;font-weight:700;font-size:18.5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 26px/1 var(--sans);color:var(--signal-dunkel)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 18px;font-size:17.5px}
.stand{font:14px/1.6 var(--sans);color:var(--anth-3);border-top:1px solid var(--linie);padding-top:16px;margin-top:40px}
.weiterlesen{background:var(--papier-2);border-top:1px solid var(--anth);padding:30px 0 20px}
.weiterlesen h2{font:700 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0}

/* Rechtliches/Über uns nutzen .seite-einfach */
.einfach{max-width:var(--lesen);margin:0 auto;padding:10px 0 60px}
.einfach h2{font-size:26px;margin:36px 0 10px}
.einfach p{font-size:18px}

/* Fuss */
.fuss{background:var(--anth);color:#d9ceb9;padding:46px 0 26px;font-family:var(--sans)}
.fuss .marke{color:#f4ecdd}.fuss .marke-t em{color:#f09a76}
.fuss-raster{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.fuss p{font-size:15px;line-height:1.6;margin:14px 0 0;max-width:44ch}
.fuss .t{color:#a99f8d}
.fuss ul{list-style:none;margin:0;padding:0}
.fuss li{margin:0 0 8px}
.fuss a{color:#f4ecdd;text-decoration:none;font-size:15px}.fuss a:hover{color:#f09a76}
.unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;border-top:1px solid #4a4743;margin-top:34px;padding-top:18px;font-size:13px;color:#a99f8d}
@media (max-width:760px){.fuss-raster{grid-template-columns:1fr 1fr}.fuss-raster>div:first-child{grid-column:1/-1}}

/* Feinschliff nach QA */
.notiz{padding:0 22px 8px;line-height:32px}
.notiz .t{margin:0;line-height:32px;padding-top:0}
.notiz li{line-height:32px;margin:0}
.inhalt .stand{font:14px/1.6 var(--sans);color:var(--anth-3)}
.praxis a{display:inline}
.praxis a svg{display:inline-block;vertical-align:-3px;margin-left:4px}
@media (max-width:640px){
  .meta{gap:2px 14px}.meta>*::before{display:none}
  .tabelle{overflow:visible;border-bottom:0}
  .tabelle thead{display:none}
  .tabelle tr{display:block;border-bottom:1px solid var(--anth);padding:10px 0}
  .tabelle td{display:grid;grid-template-columns:38% 1fr;gap:10px;border:0;padding:3px 0}
  .tabelle td::before{content:attr(data-l);font-weight:700;color:var(--anth-3);font-size:13.5px}
  .tabelle td[data-l=""]::before{content:none}
  .tabelle td[data-l=""]{display:block;font-weight:700;padding-bottom:6px}
}