/* Lunwerk: Gestaltung aus der Welt des Handwerks.
   Farben (Rollen): Blaumann = Aktionen und Links, Zollstock = Markierung (sparsam), Beton = Flächen und Linien,
   Graphit = Text, Kreide = Seite, Signal = überfällig, Grün = freigegeben.
   Schriften: Barlow Condensed (Beschriftung, Überschriften, Zahlen: angelehnt an Schilder und Normschrift),
   Literata (Fließtext, gut lesbar auch auf kleinen Displays auf der Baustelle). */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/literata-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:700;font-style:normal;font-display:swap;src:url(fonts/literata-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Literata;font-weight:400;font-style:italic;font-display:swap;src:url(fonts/literata-latin-400-italic.woff2) format("woff2")}
:root{
  --kreide:#fbfbfa;--beton:#e6e7e4;--beton-2:#cdd0cc;--graphit:#1c1f22;--graphit-2:#4b5258;
  --blaumann:#1d4f91;--blaumann-2:#153d73;--zollstock:#f5c400;--signal:#b8321b;--gruen:#2b7a4b;
  --ui:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--text:Literata,Georgia,"Times New Roman",serif;
  --w:72rem;--gap:clamp(1rem,3vw,2rem)
}
@media (prefers-color-scheme:dark){:root{--kreide:#14171a;--beton:#1e2327;--beton-2:#343b41;--graphit:#e8eaea;--graphit-2:#a5adb3;--blaumann:#7fb0f0;--blaumann-2:#a9caf6;--signal:#ff8a70;--gruen:#6fd09a}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kreide);color:var(--graphit);font:400 1.0625rem/1.65 var(--text);text-rendering:optimizeLegibility}
img,svg{max-width:100%}a{color:var(--blaumann);text-underline-offset:.18em;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--zollstock);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--graphit);color:var(--kreide);padding:.6rem 1rem;z-index:99}.skip:focus{left:0}
h1,h2,h3,h4{font-family:var(--ui);font-weight:700;line-height:1.08;margin:0 0 .5em;letter-spacing:.005em}
h1{font-size:clamp(2.4rem,4.6vw,3.9rem)}h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}h3{font-size:1.45rem;font-weight:600}
p{margin:0 0 1em;max-width:42rem}.lead{font-size:1.2rem;color:var(--graphit-2);max-width:36rem}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gap)}
.section{padding:clamp(3rem,7vw,5.5rem) 0}.section--beton{background:var(--beton)}
/* Kopf */
.top{position:sticky;top:0;z-index:20;background:var(--kreide);border-bottom:1px solid var(--beton-2)}
.top__in{max-width:var(--w);margin:0 auto;padding:.7rem var(--gap);display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.55rem;font:700 1.7rem/1 var(--ui);color:var(--graphit);text-decoration:none;letter-spacing:.01em}
.brand__tick{width:1.5rem;height:.62rem;background:repeating-linear-gradient(90deg,transparent 0 .3rem,rgba(28,31,34,.7) .3rem .34rem),var(--zollstock);border:1px solid #1c1f22;border-radius:1px}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem;font:600 1.1rem/1 var(--ui)}
.nav a{color:var(--graphit);text-decoration:none;padding:.4rem 0;border-bottom:2px solid transparent}.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--zollstock)}
.nav .nav__login{color:var(--graphit-2)}.nav a.btn--small{padding:.65rem 1.1rem;margin-left:.3rem}.navtoggle,.navbtn{display:none}
.btn{display:inline-block;background:var(--blaumann);color:#fff;font:600 1.15rem/1 var(--ui);text-decoration:none;padding:.95rem 1.5rem;border-radius:3px;border:0;cursor:pointer;letter-spacing:.01em}
.btn:hover{background:var(--blaumann-2);text-decoration:none}.btn--small{padding:.7rem 1rem;font-size:1.05rem;color:#fff!important;border-bottom:0!important}
@media (prefers-color-scheme:dark){.btn{color:#0e1216}.btn--small{color:#0e1216!important}}
.textlink{font:600 1.1rem var(--ui)}
@media (max-width:52rem){
  .navbtn{display:block;margin-left:auto;font:600 1.1rem var(--ui);padding:.5rem .8rem;border:1px solid var(--beton-2);border-radius:3px;cursor:pointer}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--kreide);border-bottom:1px solid var(--beton-2);padding:1rem var(--gap);flex-direction:column;align-items:flex-start;gap:1rem}
  .navtoggle:checked~.nav{display:flex}.nav a{font-size:1.25rem}
}
/* Start: Kopfbereich mit Beispielzettel */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.hero h1{margin-top:.2em}.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.6rem;margin:1.6rem 0 .8rem}
.hero__note{font-size:.95rem;color:var(--graphit-2)}
@media (max-width:60rem){.hero__grid{grid-template-columns:1fr}}
.mark{background:linear-gradient(transparent 62%,var(--zollstock) 62% 92%,transparent 92%)}
/* Der Zettel: echte Tabelle, kein Bild */
.sheet{background:#fff;color:#1c1f22;border:1px solid var(--beton-2);border-top:.55rem solid var(--blaumann);padding:1.1rem 1.2rem 1.3rem;font-family:var(--ui);position:relative}
@media (prefers-color-scheme:dark){.sheet{background:#1b2024;color:#e8eaea;border-color:var(--beton-2)}}
.sheet__head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem;font-size:1.05rem}
.sheet__title{font-weight:700;font-size:1.35rem;line-height:1.1}.sheet__sub{color:var(--graphit-2);font-weight:500}
.sheet table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:1.08rem;font-weight:500}
.sheet th{font-weight:600;text-align:left;font-size:.98rem;color:var(--graphit-2);border-bottom:2px solid var(--graphit);padding:.35rem .5rem .35rem 0;white-space:nowrap}
.sheet td{border-bottom:1px dotted var(--beton-2);padding:.5rem .5rem .5rem 0;white-space:nowrap}.sheet td.r,.sheet th.r{text-align:right}
.sheet th[scope=row]{border-bottom:1px dotted var(--beton-2);font-size:1.02rem;width:7.5rem;padding:.5rem .8rem .5rem 0;vertical-align:top;white-space:normal}.sheet td{vertical-align:top}.sheet tfoot td{border-bottom:0;border-top:2px solid var(--graphit);font-weight:700;padding-top:.6rem}
.sheet__scroll{overflow-x:auto}
.stamp{display:inline-block;font:700 .95rem/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:.28rem .5rem;border:2px solid currentColor;border-radius:2px}
.stamp--ok{color:var(--gruen)}.stamp--due{color:var(--signal)}.stamp--open{color:var(--graphit-2)}
.sheet__cap{font:500 .95rem var(--ui);color:var(--graphit-2);margin:.7rem 0 0}
.sheet--fill tbody tr{opacity:0;transform:translateY(4px);animation:rowin .45s ease forwards}
.sheet--fill tbody tr:nth-child(1){animation-delay:.25s}.sheet--fill tbody tr:nth-child(2){animation-delay:.5s}.sheet--fill tbody tr:nth-child(3){animation-delay:.75s}.sheet--fill tbody tr:nth-child(4){animation-delay:1s}.sheet--fill tbody tr:nth-child(5){animation-delay:1.25s}
@keyframes rowin{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sheet--fill tbody tr{animation:none;opacity:1;transform:none}*{scroll-behavior:auto!important}}
/* Zeilen statt Karten: Begriff links, Erklärung rechts */
.rows{margin:0;display:grid;gap:0}.rows>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1rem 2.5rem;padding:1.4rem 0;border-top:1px solid var(--beton-2)}
.rows>div:last-child{border-bottom:1px solid var(--beton-2)}.rows dt{font:700 1.5rem/1.15 var(--ui)}.rows dd{margin:0}.rows dd p:last-child{margin-bottom:0}
@media (max-width:48rem){.rows>div{grid-template-columns:1fr;gap:.4rem}}
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}.split--rev{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
@media (max-width:56rem){.split,.split--rev{grid-template-columns:1fr}}
.notlist{list-style:none;margin:0;padding:0;max-width:44rem}.notlist li{padding:.9rem 0;border-top:1px solid var(--beton-2)}.notlist li:last-child{border-bottom:1px solid var(--beton-2)}.notlist b{font:700 1.25rem var(--ui);display:block}
/* Preisvergleich als Tabelle */
.compare{width:100%;border-collapse:collapse;font-size:1rem;background:var(--kreide)}.compare caption{text-align:left;font:600 1.1rem var(--ui);color:var(--graphit-2);padding-bottom:.6rem}
.compare th,.compare td{border:1px solid var(--beton-2);padding:.8rem .9rem;text-align:left;vertical-align:top}.compare thead th{font:700 1.35rem/1.1 var(--ui);background:var(--beton)}
.compare .price{font:700 2rem/1 var(--ui)}.compare .price small{font:500 1rem var(--text);color:var(--graphit-2)}.compare tbody th{font:600 1.05rem var(--ui);width:28%}
.compare__wrap{overflow-x:auto}
/* FAQ */
details{border-top:1px solid var(--beton-2);padding:1rem 0}details:last-of-type{border-bottom:1px solid var(--beton-2)}
summary{font:600 1.3rem/1.25 var(--ui);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}summary::-webkit-details-marker{display:none}summary::after{content:"+";font-size:1.6rem;line-height:1}details[open] summary::after{content:"−"}
details p{margin:.7rem 0 0}
/* Fließtext, Ratgeber, Hilfe */
.prose{max-width:42rem}.prose h2{margin-top:2.2rem;font-size:1.9rem}.prose h3{margin-top:1.6rem}.prose ul,.prose ol{padding-left:1.3rem;max-width:42rem}.prose li{margin:.3rem 0}
.prose blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:4px solid var(--zollstock);font-style:italic}
.prose table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:1rem}.prose th,.prose td{border-bottom:1px solid var(--beton-2);padding:.55rem .6rem .55rem 0;text-align:left}.prose th{font:600 1.05rem var(--ui)}
.meta{font:500 1rem var(--ui);color:var(--graphit-2)}.crumbs{font:500 1rem var(--ui);color:var(--graphit-2);margin-bottom:1rem}.crumbs a{color:var(--graphit-2)}
.hint{border:1px solid var(--beton-2);border-left:6px solid var(--blaumann);padding:.9rem 1.1rem;margin:1.4rem 0;background:var(--beton)}.hint p{margin:0}
.posts{list-style:none;margin:0;padding:0;max-width:46rem}.posts li{padding:1.3rem 0;border-top:1px solid var(--beton-2)}.posts li:last-child{border-bottom:1px solid var(--beton-2)}
.posts h3{margin:0 0 .2rem;font-size:1.6rem}.posts h3 a{color:var(--graphit);text-decoration:none}.posts h3 a:hover{color:var(--blaumann)}.posts__meta{font:500 1rem var(--ui);color:var(--graphit-2);margin:0 0 .4rem}.posts p{margin:0}
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 2.5rem;margin:1.5rem 0 0;padding:0;list-style:none}.topics li{border-top:1px solid var(--beton-2);padding:.9rem 0}.topics a{font:600 1.25rem var(--ui);text-decoration:none}.topics span{display:block;color:var(--graphit-2);font-size:.98rem}
/* Formulare */
.form{max-width:28rem}.form label{display:block;font:600 1.05rem var(--ui);margin:1rem 0 .3rem}.form input,.form select,.form textarea{width:100%;font:400 1.05rem var(--text);padding:.7rem .8rem;border:1.5px solid var(--graphit-2);border-radius:3px;background:var(--kreide);color:var(--graphit)}
.form textarea{min-height:9rem}.form .btn{margin-top:1.4rem}.form__msg{margin-top:1rem;font-weight:700;min-height:1.5rem}.form__small{font-size:.95rem;color:var(--graphit-2);margin-top:1rem}
/* Status */
.state{display:flex;gap:1rem;align-items:center;padding:1rem 0;border-top:1px solid var(--beton-2)}.state:last-child{border-bottom:1px solid var(--beton-2)}.state b{font:600 1.3rem var(--ui);flex:1}.dot{width:.8rem;height:.8rem;border-radius:50%;background:var(--gruen)}
/* Fuß */
.foot{background:var(--graphit);color:#e8eaea;padding:2.6rem 0 1.2rem;margin-top:0}@media (prefers-color-scheme:dark){.foot{background:#0d1012}}
.foot a{color:#e8eaea}.foot__in{max-width:var(--w);margin:0 auto;padding:0 var(--gap);display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.foot__links{list-style:none;margin:0;padding:0;font:500 1.1rem/1.9 var(--ui)}.foot__firm{font-size:.98rem;line-height:1.7}
.foot__fine{max-width:var(--w);margin:2rem auto 0;padding:1rem var(--gap) 0;font-size:.9rem;color:#a5adb3;border-top:1px solid #343b41}
@media (max-width:48rem){.foot__in{grid-template-columns:1fr}}
.cookie{position:fixed;left:1rem;bottom:1rem;z-index:40;max-width:26rem;background:var(--graphit);color:#e8eaea;padding:1rem 1.1rem;border-radius:3px;font-size:.95rem;line-height:1.5;border-top:4px solid var(--zollstock)}.cookie[hidden]{display:none}.cookie a{color:#e8eaea}.cookie p{margin:0 0 .8rem}
.cookie .btn{background:var(--zollstock);color:#1c1f22!important}