/* Artikel- und Katalogseiten – Redesign 2026 (aus bgp-neu/entwuerfe/katalog-eintrag-v3.html) */

/* Artikelansicht */
.hero--seite{padding-block:clamp(28px,3.5vw,48px)}
.hero--seite h1{font-size:clamp(28px,3.4vw,44px);margin-bottom:14px}
.hero--seite .hero__intro{max-width:40em;font-size:17px}
.krumen{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none;font-size:13px;color:rgba(255,255,255,.6)}
.krumen li+li::before{content:"/";margin-right:6px;opacity:.6}
.krumen a{color:rgba(255,255,255,.85)}
.krumen a:hover{color:var(--gelb)}
.artikel-meta{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:20px;font-size:13px;color:rgba(255,255,255,.72)}
.artikel-meta span{display:inline-flex;align-items:center;gap:6px}
.artikel-meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gelb)}

.band--artikel{padding-top:clamp(28px,4vw,48px)}
.artikel{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px 64px;align-items:start}
@media (max-width:980px){.artikel{grid-template-columns:minmax(0,1fr)}}
.artikel__haupt{max-width:700px}

.text{font-size:17.5px;line-height:1.75;color:var(--text)}
.text > * + *{margin-top:1.1em}
.text h2{font-size:clamp(22px,2.2vw,27px);margin-top:1.9em;scroll-margin-top:96px}
.text h2 + *{margin-top:.7em}
.text strong{color:var(--tinte);font-weight:700}
.text a{color:var(--blau);text-decoration:underline;text-underline-offset:3px}
.text ul,.text ol{padding-left:0;list-style:none;display:grid;gap:.55em}
.text ul li{position:relative;padding-left:26px}
.text ul li::before{content:"";position:absolute;left:4px;top:.72em;width:8px;height:8px;background:var(--gelb);border-radius:1px;transform:rotate(45deg)}
.text ol{counter-reset:n}
.text ol li{position:relative;padding-left:40px;counter-increment:n}
.text ol li::before{content:counter(n);position:absolute;left:0;top:.2em;width:26px;height:26px;border-radius:50%;background:var(--asphalt);color:#fff;font:800 13px/26px var(--titel);text-align:center}
.text p.bildnachweis{margin-top:.6em;font-size:12.5px;color:var(--gedaempft)}
.text p.bildnachweis a{color:inherit}
.text p.hinweis{margin-top:2.4em;padding-top:18px;border-top:1px solid var(--linie);font-size:14px;line-height:1.6;color:var(--gedaempft)}

.kurz{margin-block:1.8em;padding:22px 24px;background:var(--weiss);border:1px solid var(--linie);border-left:4px solid var(--gelb);border-radius:var(--radius)}
.kurz__titel{font:750 13px/1 var(--titel);letter-spacing:.12em;text-transform:uppercase;color:var(--ocker);margin-bottom:14px}
.kurz ul{font-size:16px;line-height:1.55}

.inline-cta{margin-block:2.2em;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:22px 24px;background:var(--asphalt);border-radius:var(--radius);color:rgba(255,255,255,.8);font-size:15px;line-height:1.5}
.inline-cta div{flex:1 1 300px}
.inline-cta strong{display:block;color:#fff;font:750 19px/1.25 var(--titel);margin-bottom:4px}
.inline-cta .knopf{text-decoration:none}
/* Buttons im Fließtext: nicht die blaue Linkfarbe von .text a übernehmen */
.text a.knopf{text-decoration:none}
.text a.knopf--gelb,.text a.knopf--gelb:hover{color:var(--asphalt)}
.text a.knopf--dunkel,.text a.knopf--dunkel:hover{color:#fff}

.teilen{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:36px;padding-top:22px;border-top:1px solid var(--linie)}
.teilen b{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gedaempft);margin-right:6px}
.teilen a,.teilen button{display:inline-flex;align-items:center;height:36px;padding:0 12px;border:1px solid var(--linie);border-radius:var(--radius);background:var(--weiss);font:600 13px var(--schrift);color:var(--tinte);cursor:pointer}
.teilen a:hover,.teilen button:hover{border-color:var(--blau);color:var(--blau)}

.seitenleiste{position:sticky;top:calc(73px + 24px + env(safe-area-inset-top,0px));display:grid;gap:20px}
@media (max-width:980px){.seitenleiste{position:static;order:-1}}
.toc{border-top:3px solid var(--asphalt)}
.toc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:14px 0 10px;font:750 13px/1 var(--titel);letter-spacing:.12em;text-transform:uppercase;color:var(--tinte);cursor:default}
.toc summary::-webkit-details-marker{display:none}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{counter-increment:t;border-bottom:1px solid var(--linie)}
.toc a{display:grid;grid-template-columns:22px 1fr;gap:6px;padding:9px 0;font-size:14px;line-height:1.4;color:var(--text)}
.toc a::before{content:counter(t);font-weight:700;color:var(--gedaempft);font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--blau)}
.toc a.aktiv{color:var(--tinte);font-weight:700}
.toc a.aktiv::before{color:var(--ocker)}
@media (max-width:980px){
  .toc{border:1px solid var(--linie);border-top:3px solid var(--asphalt);padding:0 16px;border-radius:var(--radius)}
  .toc summary{cursor:pointer}
  .toc summary::after{content:"";width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);transition:transform .2s}
  .toc[open] summary::after{transform:rotate(-135deg)}
  .toc li:last-child{border-bottom:0}
}
.sidecta{padding:18px 18px 20px;background:var(--tint);border-radius:var(--radius)}
.sidecta strong{display:block;font:750 17px/1.25 var(--titel);color:var(--tinte)}
.sidecta p{font-size:13.5px;color:var(--text);margin:6px 0 14px}
.sidecta .knopf{width:100%}
@media (max-width:980px){.sidecta{display:none}}

.weiterlesen{margin-top:clamp(56px,7vw,88px);padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--linie)}
.weiterlesen .band__kopf{margin-bottom:28px}
@media (min-width:601px) and (max-width:900px){.weiterlesen .beitraege{grid-template-columns:repeat(2,minmax(0,1fr))}.weiterlesen .beitrag + .beitrag{padding-top:0;border-top:0}}
.beitrag h3{font-size:19px}
.beitrag p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Katalogeintrag */
.eckdaten{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.eckdaten div{padding:10px 14px;background:rgba(255,255,255,.08);border:1px solid var(--linie-hell);border-radius:var(--radius);min-width:150px}
.eckdaten span{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.eckdaten b{display:block;margin-top:2px;font:750 17px/1.25 var(--titel);color:#fff}
.eckdaten b em{font-style:normal;color:var(--gelb)}

.bkat{margin-block:1.4em 1.8em;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.bkat__kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:14px 18px;background:var(--asphalt);color:#fff}
.bkat__kopf strong,.text .bkat__kopf strong{font:750 16px/1.3 var(--titel);color:#fff}
.bkat__kopf span{font-size:13px;color:rgba(255,255,255,.7)}
.bkat__huelle{overflow-x:auto}
.bkat table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.4}
.bkat thead th{text-align:left;padding:10px 12px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gedaempft);background:var(--tint);white-space:nowrap}
.bkat tbody th,.bkat tbody td{padding:11px 12px;border-top:1px solid var(--linie);text-align:left;vertical-align:middle}
.bkat tbody th{font-weight:600;color:var(--tinte)}
.bkat tr.unter th{font-weight:400;color:var(--text);padding-left:28px}
.bkat tr.gruppe th{padding:14px 12px 8px;font:750 13px/1.3 var(--titel);letter-spacing:.02em;color:var(--ocker);background:var(--weiss)}
.bkat td.b{font-weight:700;color:var(--tinte);white-space:nowrap;font-variant-numeric:tabular-nums}
.bkat td.fv{color:var(--rot);font-weight:700;white-space:nowrap}
.bkat td.e{text-align:right}
.bkat .pruefen{display:inline-block;padding:4px 10px;border-radius:var(--radius);background:var(--gelb);color:var(--asphalt)!important;font-size:12.5px;font-weight:700;text-decoration:none!important;white-space:nowrap}
.bkat .pruefen:hover{background:var(--gelb-dunkel)}
.bkat__quelle{margin:0!important;padding:10px 18px;border-top:1px solid var(--linie);font-size:12.5px;color:var(--gedaempft)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.bkat--klein table{font-size:15px}

.fall{margin:1.6em 0;border:1px solid var(--linie);border-radius:var(--radius)}
.fall figcaption{padding:14px 18px;border-bottom:1px solid var(--linie);font:750 17px/1.3 var(--titel);color:var(--tinte)}
.fall figcaption span{display:block;margin-bottom:3px;font:700 11px/1 var(--schrift);letter-spacing:.14em;text-transform:uppercase;color:var(--ocker)}
.fall dl{margin:0}
.fall dl div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:4px 16px;padding:10px 18px;border-bottom:1px solid var(--linie)}
.fall dl div:last-child{border-bottom:0}
.fall dt{font-size:13.5px;color:var(--gedaempft);padding-top:1px}
.fall dd{margin:0;font-size:15.5px;line-height:1.45;color:var(--tinte);font-weight:600}
@media (max-width:560px){.fall dl div{grid-template-columns:minmax(0,1fr)}}

.info{margin-block:1.6em;padding:18px 22px;background:var(--tint);border-radius:var(--radius)}
.info__titel{font:750 16px/1.3 var(--titel);color:var(--tinte);margin:0 0 6px!important}
.info p{font-size:15.5px;line-height:1.6;margin:0}

.faq{margin-top:.8em;border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:20px;padding:16px 0;font:750 17px/1.35 var(--titel);color:var(--tinte);cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint);display:grid;place-items:center;font:600 18px/1 var(--schrift);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--gelb)}
.faq details p{margin:0 0 18px;padding-right:44px;font-size:16px}

.quellen{margin-top:2.4em;padding-top:18px;border-top:1px solid var(--linie);font-size:13.5px;line-height:1.55}
.quellen__titel{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gedaempft);margin:0 0 8px!important}
.text .quellen ol{display:grid;gap:4px;counter-reset:q}
.text .quellen ol li{padding-left:28px;counter-increment:q}
.text .quellen ol li::before{content:"[" counter(q) "]";width:auto;height:auto;background:none;color:var(--gedaempft);font:600 13px/1.55 var(--schrift);top:0;border-radius:0}
.text .quellen a{color:var(--text)}

.verwandt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.verwandt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.verwandt{grid-template-columns:minmax(0,1fr)}}
.verwandt a{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:14px;border:1px solid var(--linie);border-radius:var(--radius)}
.verwandt a:hover{border-color:var(--asphalt)}
.verwandt img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius)}
.verwandt strong{display:block;font:750 16px/1.25 var(--titel);color:var(--tinte)}
.verwandt a:hover strong{color:var(--blau)}
.verwandt span span{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--gedaempft)}
.verwandt small{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ocker);margin-bottom:3px}

/* ---------- Redesign-Ergänzungen für umgewandelte Snapshots ---------- */
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.text img{max-width:100%;height:auto;border-radius:var(--radius)}
.text figure{margin:1.4em 0}
.text figcaption{margin-top:6px;font-size:13px;color:var(--gedaempft)}
.text sup{font-size:.62em;line-height:0}
.text blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:4px solid var(--gelb);font-size:17px;color:var(--tinte)}
.text table{width:100%;border-collapse:collapse;font-size:15px}
.text .bkat td,.text .bkat th{white-space:normal}
.text .bkat td:nth-child(n+2){white-space:nowrap;font-variant-numeric:tabular-nums}
.text .bkat td:last-child a.pruefen{white-space:nowrap}
.text .bkat td.lang{white-space:normal;min-width:96px}
.bkat table:has(td.lang) thead th{white-space:normal;letter-spacing:.06em}
.bkat table:has(td.lang) tbody>tr>*{vertical-align:top}
/* Bildtabelle (Blitzermodelle) als Liste mit Foto */
.text .modellliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:1.4em 0 1.8em;padding:0;list-style:none}
.text .modellliste li{margin:0;padding:0}
.text .modellliste li::before{content:none}
.text .modellliste a,.text .modellliste li>div{display:flex;gap:14px;align-items:center;height:100%;padding:12px;border:1px solid var(--linie);border-radius:var(--radius);background:var(--weiss);color:var(--text);text-decoration:none!important;transition:border-color .15s,box-shadow .15s}
.text .modellliste a:hover{border-color:var(--asphalt);box-shadow:0 10px 24px rgba(12,58,90,.1)}
.text .modellliste img{flex:none;width:72px;height:72px;object-fit:cover;border-radius:calc(var(--radius) - 1px)}
.modellliste__text{display:grid;gap:2px;min-width:0}
.text .modellliste strong{font:750 16px/1.25 var(--titel);color:var(--tinte)}
.text .modellliste a:hover strong{color:var(--blau)}
.modellliste small{font-size:13.5px;color:var(--gedaempft)}
.modellliste__text>span{margin-top:4px;font-size:13px;line-height:1.4;color:var(--text)}
.kurz{margin:0 0 1.6em}
.kurz p{font-size:16px;line-height:1.6;margin:0}
.inline-cta span{display:block}
.titelbild{margin:0 0 32px}
.titelbild img{width:100%;height:auto;aspect-ratio:auto;border-radius:var(--radius)}
.artikel-meta .update{padding:2px 7px;border-radius:var(--radius);background:var(--gelb);color:var(--asphalt);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.artikel-meta .update::before{display:none}

/* Hilfsklassen aus dem Altbestand (nur innerhalb des Textes, u. a. für die Bußgeldrechner) */
.text .d-none{display:none!important}
.text .d-block{display:block}
.text .d-flex{display:flex}
.text .flex-wrap{flex-wrap:wrap}
.text .align-items-center{align-items:center}
.text .flex-grow-1{flex-grow:1}
.text .flex-shrink-0{flex-shrink:0}
.text .fw-bold{font-weight:700}
.text .small,.text small{font-size:.875em}
.text .text-muted{color:var(--gedaempft)}
.text .text-center{text-align:center}
.text .w-100{width:100%}
.text .row{display:flex;flex-wrap:wrap;gap:16px}
.text .row > [class*="col"]{flex:1 1 220px;min-width:0}
.text .col-12{flex-basis:100%}
.text .form-label{display:block;margin-bottom:6px;font-size:12px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gedaempft)}
.text .form-check{display:flex;align-items:center;gap:6px}
.text .form-check-inline{display:inline-flex;margin-right:14px}
.text .form-check-input{width:18px;height:18px;accent-color:var(--asphalt);margin:0}
.text .form-check-label{font-size:15px}
.text .form-control{width:100%;height:44px;padding:0 12px;border:1px solid var(--linie);border-radius:var(--radius);font:600 16px var(--schrift);color:var(--tinte);background:var(--weiss)}
.text .form-control:focus{outline:none;border-color:var(--asphalt);box-shadow:0 0 0 3px rgba(12,58,90,.12)}
.text .input-group{display:flex}
.text .input-group .form-control{border-radius:var(--radius) 0 0 var(--radius)}
.text .input-group-text{display:flex;align-items:center;padding:0 12px;border:1px solid var(--linie);border-left:0;border-radius:0 var(--radius) var(--radius) 0;background:var(--tint);font-size:14px;color:var(--gedaempft)}
.text .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius);font:700 14px var(--schrift);cursor:pointer;text-decoration:none}
.text .btn-info,.text .btn-warning{background:var(--gelb);border-color:var(--gelb);color:var(--asphalt)!important}
.text .btn-info:hover,.text .btn-warning:hover{background:var(--gelb-dunkel)}

/* Bußgeldrechner */
.text #rechner{margin:1.6em 0!important;border:1px solid var(--linie);border-top:4px solid var(--asphalt);border-radius:var(--radius);overflow:hidden}
.text #rechner > .d-flex:first-child{background:var(--tint);border-bottom:1px solid var(--linie)}
.text #rechner .tab-btn{min-height:48px;padding:0 18px;border:0!important;border-radius:0;background:none;color:var(--gedaempft);font-size:14px}
.text #rechner .tab-btn.active{background:var(--weiss);color:var(--tinte);box-shadow:inset 0 -3px 0 var(--gelb)}
.text #rechner .tab-btn:hover:not(.active){background:rgba(255,255,255,.6)}
.text #rechner .tab-content{padding:20px!important}
.text #rechner .border,.text #rechner .rounded{border-color:var(--linie)!important}
.verwandt__platz{width:64px;height:64px;border-radius:var(--radius);background:var(--tint)}

/* Tabellen mobil: jede Zeile als Karte, Werte mit Spaltenüberschrift */
@media (max-width:600px){
  .bkat thead{display:none}
  .bkat table,.bkat tbody,.bkat tr,.bkat td,.bkat tbody th{display:block}
  .bkat tr{padding:12px 16px;border-top:1px solid var(--linie)}
  .bkat tbody tr:first-child{border-top:0}
  .bkat td,.bkat tbody th{padding:3px 0!important;border:0!important;white-space:normal!important}
  .bkat td:first-child,.bkat tbody th:first-child{padding-bottom:6px!important;font-weight:600;color:var(--tinte)}
  .bkat td[data-label]:not(:first-child){display:flex;justify-content:space-between;gap:16px;text-align:right}
  .bkat td[data-label]:not(:first-child)::before{content:attr(data-label);color:var(--gedaempft);font-size:13px;font-weight:500;text-align:left}
  .bkat td.e,.bkat td:has(> a.pruefen){display:block!important;padding-top:8px!important}
  .bkat td.e::before,.bkat td:has(> a.pruefen)::before{content:none!important}
  .bkat td.lang[data-label]{display:block!important;text-align:left!important}
  .bkat td.lang[data-label]::before{display:block;margin-bottom:2px}
}

/* Kartenraster im Text (z. B. Blitzermodelle) */
.text .karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:1.4em 0 1.8em}
@media (max-width:640px){.text .karten{grid-template-columns:minmax(0,1fr)}}
.text .karte-mini{display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;text-decoration:none!important;color:var(--text);transition:border-color .15s,box-shadow .15s}
.text .karte-mini:hover{border-color:var(--asphalt);box-shadow:0 10px 24px rgba(12,58,90,.1)}
.text .karte-mini img{width:100%;aspect-ratio:442/208;object-fit:cover;border-radius:0}
.text .karte-mini__text{display:grid;gap:4px;padding:14px 16px 16px}
.text .karte-mini strong{font:750 17px/1.25 var(--titel);color:var(--tinte)}
.text .karte-mini:hover strong{color:var(--blau)}
.text .karte-mini small{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--ocker)}
.text .karte-mini span span,.text .karte-mini__text > span{font-size:14.5px;line-height:1.5;color:var(--gedaempft)}
.verwandt span span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Rechtstexte */
[hidden]{display:none!important}
.hero--recht{padding-block:clamp(24px,3vw,40px)}
.hero--recht h1{font-size:clamp(30px,3.4vw,42px);margin-bottom:8px}
.text h2{scroll-margin-top:96px}
.text h3{font-size:18px;margin-top:1.6em}
.angaben{border:1px solid var(--linie);border-top:3px solid var(--asphalt);border-radius:var(--radius)}
.angaben div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 20px;padding:14px 18px;border-bottom:1px solid var(--linie)}
.angaben div:last-child{border-bottom:0}
.angaben dt{font-size:13.5px;color:var(--gedaempft);padding-top:2px}
.angaben dd{margin:0;font-size:16px;line-height:1.5;color:var(--tinte);font-weight:600}
.angaben button{margin-left:10px;border:0;background:none;padding:0;font:700 12.5px var(--schrift);color:var(--blau);cursor:pointer}
@media (max-width:560px){.angaben div{grid-template-columns:minmax(0,1fr)}}
.verweise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:2em}
@media (max-width:560px){.verweise{grid-template-columns:minmax(0,1fr)}}
.verweise a{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--linie);border-radius:var(--radius);font-weight:700;color:var(--tinte)!important;text-decoration:none!important}
.verweise a:hover{border-color:var(--asphalt);color:var(--blau)!important}
.verweise small{display:block;font-weight:500;font-size:13px;color:var(--gedaempft)}
.text p.lead-recht{font-size:19px;line-height:1.6;color:var(--tinte)}
.merkmale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-block:1.6em}
@media (max-width:640px){.merkmale{grid-template-columns:minmax(0,1fr)}}
.merkmale div{padding:14px 16px;border-radius:var(--radius);background:var(--tint)}
.merkmale strong{display:block;font:750 15.5px/1.3 var(--titel);color:var(--tinte)}
.merkmale span{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--text)}

/* Schlichte Seiten (Kontakt, Rechtstexte) */
.band--schlicht{padding-bottom:clamp(64px,8vw,104px)}
.formular{display:grid;gap:14px;max-width:560px;margin-top:1.4em}
.formular .feld{display:grid;gap:6px}
.formular label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gedaempft)}
.formular input,.formular textarea{width:100%;padding:12px;border:1px solid var(--linie);border-radius:var(--radius);font:500 16px var(--schrift);color:var(--tinte);background:var(--weiss)}
.formular textarea{min-height:160px;resize:vertical;line-height:1.5}
.formular input:focus,.formular textarea:focus{outline:none;border-color:var(--asphalt);box-shadow:0 0 0 3px rgba(12,58,90,.12)}
.formular .knopf{justify-self:start}
.meldung{margin-top:1.2em;padding:14px 16px;border-radius:var(--radius);font-size:15px;font-weight:600}
.meldung--ok{background:#E7F5EC;color:#17613F;border:1px solid #BFE3CC}
.meldung--fehler{background:#FBE9EA;color:#A0302E;border:1px solid #F3C5C3}
.spamfalle{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}