:root {

  --s-xxl:    2.5rem;     
  --s-xl:     1.75rem;    
  --s-l:      1.45rem;    
  --s-m:      1.25rem;    
  --s-normal: 1.0625rem;  
  --s-klein:  .9375rem;   
  --s-mini:   .85rem;     

  --r:        9px;        
  --r-klein:  4px;        
  --r-rund:   999px;      

  --grund:    #eef2f7;
  --flaeche:  #ffffff;
  --flaeche2: #e9eef5;   
  --tinte:    #14181d;   
  --tinte-2:  #55606f;   

  --linie:        #bac7d8;
  --linie-stark:  #79859a;

  --akzent:   #0063a0;   
  --akzent-2: #004b7a;
  --akzent-weich: #e4eef8;
  --auf-akzent: #ffffff; 

  --rot:      #9b2f32;   
  --rot-2:    #7f2427;
  --auf-rot:  #ffffff;   
  --rot-weich:#fbe9e9;

  --gruen:    #1d6b48;
  --gruen-weich:#e6f3ec;

  --warnung:  #7a5310;
  --warnung-weich:#f8ebd4;

  --knopf-schatten:      0 1px 1px rgba(16,32,52,.10), 0 2px 5px rgba(16,32,52,.09);
  --knopf-schatten-hoch: 0 2px 3px rgba(16,32,52,.12), 0 6px 14px rgba(16,32,52,.13);
  --knopf-schatten-tief: inset 0 2px 4px rgba(16,32,52,.18);

  --feldring:   rgba(0, 99, 160, .32);
  --fehlerring: rgba(155, 47, 50, .30);

  --bewegung: cubic-bezier(.2,.7,.3,1);

  --polster:      1.1rem 1.2rem;
  --polster-eng:  .75rem .9rem;
  --kante: 3px;          

  --rollschatten: rgba(16, 32, 52, .30);
  --schatten: 0 1px 2px rgba(16,32,52,.06), 0 1px 8px rgba(16,32,52,.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) {
    --grund:   #0f1319;
    --flaeche: #1a2028;
    --flaeche2:#232b36;
    --tinte:   #e8edf4;
    --tinte-2: #9aa6b6;
    --linie:       #3b4757;
    --linie-stark: #6d7b8d;
    --akzent:  #6fb3e8;
    --akzent-2:#8ec6f2;
    --akzent-weich: #17293c;
    --auf-akzent: #0a1a26;   

    --rot:     #e28a8d;
    --rot-2:   #f0a6a8;
    --auf-rot: #1a0d0e;      
    --rot-weich:#3a2022;
    --gruen:   #78c39c;
    --gruen-weich:#162a20;
    --warnung: #e0b063;
    --warnung-weich:#33260f;
    --knopf-schatten:      0 1px 2px rgba(0,0,0,.50);
    --knopf-schatten-hoch: 0 2px 4px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.45);
    --knopf-schatten-tief: inset 0 2px 5px rgba(0,0,0,.55);
    --feldring:   rgba(111, 179, 232, .40);
    --fehlerring: rgba(226, 138, 141, .40);
    --rollschatten: rgba(0, 0, 0, .65);
    --schatten: none;
  }
}

:root[data-darstellung="hell"]   { color-scheme: light; }
:root[data-darstellung="dunkel"] { color-scheme: dark; }

:root[data-darstellung="dunkel"] {
    --grund:   #0f1319;
    --flaeche: #1a2028;
    --flaeche2:#232b36;
    --tinte:   #e8edf4;
    --tinte-2: #9aa6b6;
    --linie:       #3b4757;
    --linie-stark: #6d7b8d;
    --akzent:  #6fb3e8;
    --akzent-2:#8ec6f2;
    --akzent-weich: #17293c;
    --auf-akzent: #0a1a26;   

    --rot:     #e28a8d;
    --rot-2:   #f0a6a8;
    --auf-rot: #1a0d0e;      
    --rot-weich:#3a2022;
    --gruen:   #78c39c;
    --gruen-weich:#162a20;
    --warnung: #e0b063;
    --warnung-weich:#33260f;
    --knopf-schatten:      0 1px 2px rgba(0,0,0,.50);
    --knopf-schatten-hoch: 0 2px 4px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.45);
    --knopf-schatten-tief: inset 0 2px 5px rgba(0,0,0,.55);
    --feldring:   rgba(111, 179, 232, .40);
    --fehlerring: rgba(226, 138, 141, .40);
    --rollschatten: rgba(0, 0, 0, .65);
    --schatten: none;
  }

* { box-sizing: border-box; }
body {
  margin: 0;

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--grund);
  color: var(--tinte);
  font: var(--s-normal)/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.blatt.weit > p,
.blatt.weit > ul:not(.pruefstand):not(.satz):not(.probleme):not(.lernen):not(.kennzahlen),.blatt.weit > ol:not(.leute):not(.wegmarke):not(.streckenschritte),.blatt.weit > section > p,
.blatt.weit > section > ul:not(.pruefstand):not(.satz):not(.probleme):not(.lernen):not(.kennzahlen),
.blatt.weit > .hinweiskasten,
.blatt.weit > .warnkasten,
.blatt.weit > .karte { max-width: 42rem; }

.blatt {
  flex: 1;
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 1.5rem 1.1rem calc(2.5rem + env(safe-area-inset-bottom));
}

.blatt.weit { max-width: 64rem; }

.blatt.voll { max-width: 96rem; }

@media (min-width: 52rem) {
  .blatt { max-width: 44rem; }
  .blatt.schmal { max-width: 30rem; }
  .blatt { padding-top: 2.2rem; }

  form > button { align-self: flex-start; min-width: 12rem; }
}

.kopfzeile {
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  padding: 0 1.1rem;
}
.kopfzeile > .inner {
  width: 100%; max-width: 64rem; margin: 0 auto;
  display: flex; align-items: center; gap: .9rem;
  min-height: 3.75rem; flex-wrap: wrap;
}
.marke { display: flex; align-items: center; gap: .55rem;
         text-decoration: none; color: var(--tinte); font-weight: 700;
         letter-spacing: -.01em; white-space: nowrap; }
.marke img { width: 30px; height: 30px; border-radius: var(--r-klein); display: block; }
.marke .wort { font-size: var(--s-normal); }

blockquote.hervor { margin: 1rem 0; padding: .8rem 1rem;
                    border-left: 4px solid var(--akzent);
                    background: var(--akzent-weich);
                    border-radius: var(--r-klein); }
blockquote.hervor > :first-child { margin-top: 0; }
blockquote.hervor > :last-child { margin-bottom: 0; }

a.textverweis { overflow-wrap: anywhere; }

ol.quellnummer { list-style: none; padding-left: 0; }

ol.quellnummer > li { margin-bottom: .4rem; }
.marke-gross { width: 46px; height: 46px; border-radius: var(--r);
               display: block; margin: 0 0 1rem; }

.verkaufskopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
  padding: 0 1.1rem;
}
.verkaufskopf > .inner {
  width: 100%; max-width: 64rem; margin: 0 auto;
  display: flex; align-items: center; gap: .9rem;
  min-height: 3.5rem;
}
.verkaufskopf .luecke { flex: 1 1 auto; }

.verkaufskopf .kopfknopf {
  min-width: 0; min-height: 2.75rem; padding: .45rem .9rem;
  font-size: var(--s-klein); white-space: nowrap;
}

@media (max-width: 26rem) {
  .verkaufskopf .marke .wort { display: none; }
}

.kopfzeile .luecke { flex: 1 1 auto; }

.kopfzeile .wer { display: none; }
@media (min-width: 52rem) {

  .kopfzeile .wer { display: block; font-size: var(--s-klein); color: var(--tinte-2);
                    white-space: nowrap; overflow: hidden;
                    text-overflow: ellipsis; max-width: 11rem; }
}
.kopfzeile .raus { font-size: var(--s-klein); color: var(--tinte-2);
                   text-decoration: none; white-space: nowrap;
                   min-height: 2.75rem; display: flex; align-items: center;
                   padding: 0 .25rem; }

.vertragsband { background: var(--flaeche2, var(--flaeche));
                border-bottom: 1px solid var(--linie);
                border-left: 4px solid var(--akzent);
                padding: .6rem 1.1rem; font-size: var(--s-klein); }
.vertragsband > .inner { width: 100%; max-width: 64rem; margin: 0 auto;
                         display: flex; align-items: center; gap: .9rem;
                         flex-wrap: wrap; }
.vertragsband span { flex: 1 1 18rem; }

.hilfeband { background: var(--warnung-weich); color: var(--warnung);
             border-bottom: 1px solid var(--linie);
             border-left: 6px solid var(--warnung);
             padding: .6rem 1.1rem; font-size: var(--s-klein); }
.hilfeband > .inner { width: 100%; max-width: 64rem; margin: 0 auto;
                      display: flex; flex-direction: row; align-items: center;
                      gap: .9rem; flex-wrap: wrap; }
.hilfeband span { flex: 1 1 18rem; }
.hilfeband form { margin: 0; display: flex; flex-direction: row; }

.vorfuehrband { background: var(--flaeche2, var(--flaeche));
                border-bottom: 1px solid var(--linie);
                border-left: 6px solid var(--akzent);
                padding: .6rem 1.1rem; font-size: var(--s-klein); }
.vorfuehrband > .inner { width: 100%; max-width: 64rem; margin: 0 auto;
                         display: flex; flex-direction: row;
                         align-items: center; gap: .9rem; flex-wrap: wrap; }
.vorfuehrband span { flex: 1 1 18rem; }

form.ansicht-stufe { display: inline-flex; flex-direction: row;
                     flex-wrap: wrap; gap: .55rem; align-items: center;
                     margin: 0; }
form.ansicht-stufe b { font-weight: 600; color: var(--tinte); }
form.ansicht-stufe button[type=submit] {
  background: none; border: 0; box-shadow: none; padding: 0;
  width: auto; min-width: 0; min-height: 2.75rem; font: inherit;
  color: var(--tinte-2); cursor: pointer; }
@media (hover: hover) {
  form.ansicht-stufe button[type=submit]:hover {
    color: var(--akzent); text-decoration: underline; background: none; }
}

.kopfzeile .raus.testrueckweg { color: var(--akzent); font-weight: 600; }
@media (hover: hover) {
  .kopfzeile .raus:hover { color: var(--akzent); }
}

.nav { display: flex; gap: .15rem; flex-wrap: wrap;
       margin: 0 -1.1rem; padding: 0 1.1rem .45rem;
       width: calc(100% + 2.2rem); order: 3; }

.nav a { flex: 0 0 auto; text-decoration: none; color: var(--tinte-2);
         font-size: var(--s-klein); font-weight: 600; padding: .6rem .75rem;
         min-height: 2.75rem; display: flex; align-items: center;
         border-radius: var(--r); white-space: nowrap; }
@media (hover: hover) {
  .nav a:hover { color: var(--akzent); background: var(--flaeche2); }
}
.nav a.hier { color: var(--akzent); background: var(--akzent-weich); }

@media (max-width: 26rem) {
  .kopfzeile .marke .wort { display: none; }
  .kopfzeile > .inner { gap: .5rem; }
  .nav a { padding: .6rem .4rem; }
}
@media (min-width: 52rem) {
  .nav { order: 0; margin: 0 0 0 .6rem; padding: 0; width: auto;
         flex-wrap: nowrap; }
}

.navgruppe { position: relative; display: flex; align-items: center;
             gap: 0; flex: 0 0 auto; }
.navgruppe > a { padding-right: .35rem; }

.navmenue > summary { min-height: 2.75rem; width: 2rem; padding: 0;
                      justify-content: center; border-radius: var(--r); }
.navmenue > summary::before { content: "›"; transform: rotate(90deg);
                              color: var(--tinte-2); font-size: var(--s-normal); }
.navmenue[open] > summary::before { transform: rotate(270deg); }
@media (hover: hover) {
  .navmenue > summary:hover { background: var(--flaeche2); }
  .navmenue > summary:hover::before { color: var(--akzent); }
}
.navgruppe.hier .navmenue > summary::before { color: var(--akzent); }

.navfach { position: absolute; top: 100%; left: 0; z-index: 20;
           min-width: 14rem; flex-direction: column;
           padding: .3rem; background: var(--flaeche);
           border: 1px solid var(--linie); border-radius: var(--r);
           box-shadow: var(--schatten); }
.navmenue[open] > .navfach { display: flex; }

.navmenue:not([open]) > .navfach { display: none; }

.navschliesser > summary { display: none; }
.navschliesser > summary::-webkit-details-marker { display: none; }
.nav:has(.navmenue[open]) .navschliesser > summary {
  display: block; position: fixed; inset: 0; z-index: 19;
  list-style: none; cursor: default;
}

.navschliesser { display: contents; }

.navfach a { display: block; width: 100%; max-width: 20rem;
             white-space: normal; min-height: 0;
             padding: .5rem .6rem; line-height: 1.35; }
.navfach a b { display: block; color: var(--tinte); font-weight: 600; }
.navfach a span { display: block; font-size: var(--s-mini);
                  color: var(--tinte-2); font-weight: 400; }
@media (hover: hover) {
  .navfach a:hover b { color: var(--akzent); }
}

h1 { font-size: var(--s-xl); line-height: 1.2; margin: 0 0 .3rem;
     letter-spacing: -.015em; overflow-wrap: break-word; hyphens: auto; }
h2 { font-size: var(--s-m); margin: 1.8rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: var(--s-normal); margin: 1.2rem 0 .4rem; }
.unter { color: var(--tinte-2); margin: 0 0 1.6rem; }

form { display: flex; flex-direction: column; gap: 1.1rem; }

.warum { background: var(--flaeche); border: 1px solid var(--linie);
         border-left: 4px solid var(--akzent); border-radius: var(--r);
         padding: .9rem 1.1rem; font-size: var(--s-klein);
         margin: 1.2rem 0; }

caption { text-align: left; color: var(--tinte-2); padding-bottom: .4rem; }

.teamleiste { display: flex; gap: .4rem; overflow-x: auto; margin: 0 0 1rem;
              padding-bottom: .2rem; }

.teamleiste a { display: flex; align-items: center; gap: .35rem;
                min-height: 2.75rem; padding: .3rem .8rem; white-space: nowrap;
                background: var(--flaeche); border: 1px solid var(--linie);
                border-radius: var(--r); text-decoration: none;
                color: var(--tinte); font-size: var(--s-klein); }
.teamleiste a.hier { border-color: var(--akzent); color: var(--akzent);
                     font-weight: 600; }
.schritte { margin: .8rem 0; padding-left: 1.3rem; }
.schritte li { margin-bottom: .7rem; }
.schritte a { display: inline-block; margin-top: .2rem; color: var(--akzent);
              text-decoration: none; font-weight: 600; }

table { width: 100%; border-collapse: collapse; font-size: var(--s-klein); }

.liste thead th { text-align: left; font-size: var(--s-klein);
            text-transform: none; letter-spacing: 0;
            color: var(--tinte-2); font-weight: 600;
            padding: .55rem .6rem .45rem 0;
            border-bottom: 1px solid var(--linie);
            white-space: nowrap; }

.liste tbody th { text-align: left; font-weight: 600; color: var(--tinte);
            padding: .6rem .6rem .6rem 0;
            border-bottom: 1px solid var(--linie); vertical-align: top; }

.liste > tbody:first-child th, .liste > tr th { font-weight: 600; }
.liste td { padding: .6rem .6rem .6rem 0; border-bottom: 1px solid var(--linie);
            vertical-align: top; }
.liste tr:last-child td, .liste tbody tr:last-child th { border-bottom: 0; }
.liste .zahlen, .liste .zahl-spalte { text-align: right; white-space: nowrap;
                                      font-variant-numeric: tabular-nums; }

.liste tbody tr { transition: background-color .09s ease; }

@media (hover: hover) {
  .liste tbody tr:hover { background: var(--flaeche2); }
}
.liste tbody tr:focus-within { background: var(--flaeche2); }

.liste td, .liste tbody th { white-space: normal;
                             overflow-wrap: anywhere; hyphens: auto; }

.liste tbody th { hyphens: manual; }

.tabellenrahmen .liste td,
.tabellenrahmen .liste tbody th,
.tabellenrahmen table td { overflow-wrap: break-word; }
.tabellenrahmen .haelt tbody th { min-width: 8rem; }
.liste .zahlen, .liste .zahl-spalte { white-space: nowrap; }

form:not(.raster) input[type=text],
form:not(.raster) input[type=password],
form:not(.raster) input[type=email],
form:not(.raster) input[type=tel],
form:not(.raster) input[type=number],
form:not(.raster) select { max-width: 28rem; }
.paar input, .paar select,
form.raster input, form.raster select { max-width: 100%; }

.paar { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: .8rem; }
.paar > * { min-width: 0; }
.paar input, .paar select { max-width: 100%; }

.paar.eng { grid-template-columns: 9rem minmax(0,1fr); }

.paar:has(input[type=date], input[type=month]) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.25rem), 1fr));
}

.paar.buendig { row-gap: 0; }
.paar.buendig > * { display: grid; grid-row: span 3;
                    grid-template-rows: subgrid; row-gap: 0; }
.paar.buendig > * > label { align-self: end; }

p.alle { margin: .2rem 0 .6rem; }

@media (min-width: 52rem) {
  form.raster { display: grid;
                grid-template-columns: minmax(0,1fr) minmax(0,1fr);
                gap: 1.2rem 1.4rem; align-items: start; }
  form.raster > * { min-width: 0; }
  form.raster > h2,
  form.raster > h3,
  form.raster > p,
  form.raster > button,
  form.raster > .breit,
  form.raster > .paar,
  form.raster > .schranke,
  form.raster > .warum,
  form.raster > .hinweis,
  form.raster > .meldung,

  form.raster > details { grid-column: 1 / -1; }

  form.raster > button { justify-self: start; min-width: 14rem; }
}

.trichter { display: grid; gap: 1.4rem; }
@media (min-width: 52rem) {
  .trichter { grid-template-columns: minmax(0,1fr) 19rem;
              gap: 2.4rem; align-items: start; }
  .trichter > .neben { grid-column: 2; grid-row: 1; }
  .trichter > :not(.neben) { grid-column: 1; grid-row: 1; }

  .trichter > .neben { position: sticky; top: 1.5rem; }
}
.neben { background: var(--flaeche); border: 1px solid var(--linie);
         border-radius: var(--r); padding: 1.1rem 1.2rem;
         font-size: var(--s-klein); }
.neben h2 { font-size: var(--s-normal); margin: 0 0 .5rem; }
.neben h2 + p { margin-top: 0; }
.neben p { margin: 0 0 .8rem; }
.neben p:last-child { margin-bottom: 0; }
.neben .preis { font-size: var(--s-l); font-weight: 700; color: var(--tinte);
                letter-spacing: -.02em; display: block; }
.neben ol { margin: 0 0 .9rem; padding-left: 1.2rem; }
.neben ol li { margin: 0 0 .3rem; }
.neben ul.haken-liste { list-style: none; margin: 0; padding: 0; }
.neben ul.haken-liste li { padding-left: 1.5rem; position: relative;
                           margin: 0 0 .35rem; }
.neben ul.haken-liste li::before { content: "✓"; position: absolute; left: 0;
                                   color: var(--gruen); font-weight: 700; }
label { display: block; font-weight: 600; margin-bottom: .35rem; }

label { display: block; font-weight: 600; margin-bottom: .35rem; }

.freiwillig { display: inline-block; margin-left: .4rem;
              padding: .05rem .45rem; border-radius: var(--r-rund);
              background: var(--flaeche2); color: var(--tinte-2);
              font-size: var(--s-mini); font-weight: 400;
              letter-spacing: .02em; vertical-align: .08em; }
.pflicht    { color: var(--rot); font-weight: 700; margin-left: .15rem; }

input:not([type]),
input[type=text], input[type=password], input[type=email],
input[type=tel], input[type=number], input[type=search],
input[type=date], input[type=time], input[type=month],
input[type=url], input[type=file], select, textarea {
  width: 100%; min-height: 3rem; padding: .7rem .85rem;
  font-family: inherit; font-size: var(--s-normal); line-height: 1.4;
  color: var(--tinte); background-color: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r);
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }

input[type=number], input[type=time], input[type=date], input[type=month] {
  font-variant-numeric: tabular-nums; }

input[type=date], input[type=time], input[type=month] {
  min-width: 0; max-width: 100%; }
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value {
  text-align: left; min-height: 1.4em; margin: 0; }
@supports (-webkit-touch-callout: none) {
  input[type=date], input[type=time], input[type=month] {
    -webkit-appearance: none; appearance: none; }
}

::placeholder { color: var(--tinte-2); opacity: 1; }

@media (hover: hover) {
  input[type=text]:not([disabled]):not([readonly]):hover,
  input[type=password]:not([disabled]):hover,
  input[type=email]:not([disabled]):hover,
  input[type=tel]:not([disabled]):hover,
  input[type=number]:not([disabled]):hover,
  input[type=search]:not([disabled]):hover,
  input[type=date]:not([disabled]):hover,
  input[type=time]:not([disabled]):hover,
  input[type=month]:not([disabled]):hover,
  input[type=url]:not([disabled]):hover,
  select:not([disabled]):hover,
  textarea:not([disabled]):not([readonly]):hover { border-color: var(--tinte-2); }
}

input[disabled], select[disabled], textarea[disabled] {
  color: var(--tinte-2); background-color: var(--flaeche2);
  border-color: var(--linie); cursor: not-allowed; }
input[readonly], textarea[readonly] {
  background-color: var(--flaeche2); cursor: text; }
@media (hover: hover) {
  input[readonly]:hover, textarea[readonly]:hover { border-color: var(--linie-stark); }
}

input:focus, textarea:focus { border-color: var(--akzent); }
@media (hover: hover) and (pointer: fine) {
  select:focus { border-color: var(--akzent); }
  input:focus:not(:focus-visible), select:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible) { box-shadow: 0 0 0 3px var(--feldring); }
}

input[type][aria-invalid="true"], select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--rot);
  background-color: var(--rot-weich);    }

@media (hover: hover) and (pointer: fine) {
  input[type][aria-invalid="true"]:hover, select[aria-invalid="true"]:hover,
  textarea[aria-invalid="true"]:hover { border-color: var(--rot); }
  input[type][aria-invalid="true"]:focus:not(:focus-visible),
  select[aria-invalid="true"]:focus:not(:focus-visible),
  textarea[aria-invalid="true"]:focus:not(:focus-visible) {
    box-shadow: 0 0 0 3px var(--fehlerring); }
}

select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.4rem; cursor: pointer;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--tinte-2) 50%),
    linear-gradient(135deg, var(--tinte-2) 50%, transparent 50%);
  background-position: right 1.05rem center, right .75rem center;
  background-size: .32rem .32rem, .32rem .32rem;
  background-repeat: no-repeat;
}
select[disabled] { cursor: not-allowed; }

select option { background: var(--flaeche); color: var(--tinte); }

select:invalid { color: var(--tinte-2); }

input[type=file] { padding: .5rem .55rem; cursor: pointer;
                   font-size: var(--s-klein); color: var(--tinte-2); }
input[type=file]::file-selector-button {
  min-height: 2.75rem; margin-right: .8rem; padding: .4rem 1rem;
  font: inherit; font-size: var(--s-klein); font-weight: 600;
  color: var(--akzent); background: var(--flaeche);
  border: 1px solid var(--akzent); border-radius: var(--r);
  cursor: pointer; transition: background-color .12s ease; }
@media (hover: hover) {
  input[type=file]::file-selector-button:hover { background: var(--akzent-weich); }
}

div.text[role="region"]:focus-visible {
  outline: 3px solid var(--akzent); outline-offset: -3px; }

.tabellenrahmen :is(a, button, select, summary):focus-visible,
.ergebnis summary:focus-visible { outline-offset: -3px; }

html { scroll-padding-top: 3.5rem; }   

form:not(.raster) input[type=text],
form:not(.raster) input[type=password],
form:not(.raster) input[type=email],
form:not(.raster) input[type=tel],
form:not(.raster) input[type=number],
form:not(.raster) input[type=search],
form:not(.raster) input[type=date],
form:not(.raster) input[type=time],
form:not(.raster) input[type=month],
form:not(.raster) input[type=url],
form:not(.raster) input[type=file],
form:not(.raster) select,
form:not(.raster) textarea { max-width: 28rem; }
.paar input, .paar select, .paar textarea,
form.raster input, form.raster select, form.raster textarea { max-width: 100%; }

input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, summary:focus-visible,
button:focus-visible, .knopfartig:focus-visible, .abbrechen:focus-visible {
  outline: 3px solid var(--akzent); outline-offset: 2px;
}
button:focus-visible, .knopfartig.haupt:focus-visible, .jaweg:focus-visible {
  outline-color: var(--tinte);
}
button.zweit:focus-visible { outline-color: var(--akzent); }

button, .knopfartig {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  min-height: 3.25rem; padding: .75rem 1.5rem;
  font-size: var(--s-normal); font-weight: 600; font-family: inherit;
  line-height: 1.25; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer;
  transition: background-color .13s ease, border-color .13s ease,
              box-shadow .13s ease, transform .07s ease, color .13s ease;
}

button, .knopfartig.haupt {
  color: var(--auf-akzent); background: var(--akzent);
  border-color: var(--akzent); box-shadow: var(--knopf-schatten);
}
@media (hover: hover) {
  button:hover, .knopfartig.haupt:hover {
    background: var(--akzent-2); border-color: var(--akzent-2);
    box-shadow: var(--knopf-schatten-hoch);
  }
}

.knopfartig, button.zweit {
  color: var(--akzent); background: var(--flaeche);
  border-color: var(--akzent);
  box-shadow: inset 0 0 0 1px var(--akzent);
}
@media (hover: hover) {
  .knopfartig:hover, button.zweit:hover {
    background: var(--akzent-weich);        
    border-color: var(--akzent-2);
    box-shadow: inset 0 0 0 1px var(--akzent-2);
  }
}

.knopfartig:visited { color: var(--akzent); }
.knopfartig.haupt:visited { color: var(--auf-akzent); }

button.jaweg, .jaweg {
  color: var(--auf-rot); background: var(--rot);
  border-color: var(--rot); box-shadow: var(--knopf-schatten);
}
@media (hover: hover) {
  button.jaweg:hover, .jaweg:hover {
    background: var(--rot-2); border-color: var(--rot-2);
    box-shadow: var(--knopf-schatten-hoch);
  }
}

.abbrechen {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .75rem 1rem;
  font-size: var(--s-normal); font-weight: 500;
  color: var(--tinte-2); background: none;
  border: 1px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: color .13s ease, background-color .13s ease, border-color .13s ease;
}
@media (hover: hover) {
  .abbrechen:hover { color: var(--tinte); background: var(--flaeche2);
                     border-color: var(--linie-stark); text-decoration: underline; }
}
.abbrechen:visited { color: var(--tinte-2); }

button:active, .knopfartig:active, .jaweg:active, .abbrechen:active {
  transform: translateY(1px); }
button:active, .knopfartig.haupt:active, .jaweg:active {
  box-shadow: var(--knopf-schatten-tief); }
.knopfartig:active, button.zweit:active {
  background: var(--akzent-weich);
  box-shadow: inset 0 0 0 1px var(--akzent), var(--knopf-schatten-tief); }

button[disabled], button[aria-disabled="true"],
.knopfartig[aria-disabled="true"], .abbrechen[aria-disabled="true"] {
  color: var(--tinte-2); background: var(--flaeche2);
  border-color: var(--linie-stark); box-shadow: none;
  cursor: not-allowed; transform: none; filter: none; text-decoration: none;
}

@media (hover: hover) {
  button[disabled]:hover, button[aria-disabled="true"]:hover,
  .knopfartig[aria-disabled="true"]:hover,
  .abbrechen[aria-disabled="true"]:hover {
    color: var(--tinte-2); background: var(--flaeche2);
    border-color: var(--linie-stark); box-shadow: none;
    cursor: not-allowed; transform: none; filter: none; text-decoration: none;
  }
}
button[disabled]:active, .knopfartig[aria-disabled="true"]:active {
  transform: none; box-shadow: none; }

@keyframes knopf-dreht { to { transform: rotate(360deg); } }

button[aria-busy="true"], button[aria-busy="true"][disabled],
.knopfartig.haupt[aria-busy="true"] {
  color: var(--auf-akzent); background: var(--akzent);
  border-color: var(--akzent); box-shadow: var(--knopf-schatten);
  cursor: progress; transform: none;
}
@media (hover: hover) {
  button[aria-busy="true"]:hover, button[aria-busy="true"][disabled]:hover {
    background: var(--akzent); border-color: var(--akzent);
    box-shadow: var(--knopf-schatten); }
}
button.zweit[aria-busy="true"], .knopfartig[aria-busy="true"]:not(.haupt) {
  color: var(--akzent); background: var(--flaeche);
  border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
button[aria-busy="true"]::before, .knopfartig[aria-busy="true"]::before {
  content: ""; flex: none;
  width: 1.05em; height: 1.05em;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: var(--r-rund);
  animation: knopf-dreht .7s linear infinite;
}

.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem;
              align-items: center; margin: 1.2rem 0 0; }
@media (min-width: 52rem) {
  .knopfreihe > .abbrechen:last-child { margin-left: auto; }
}

.knopf-klein { min-width: 0; min-height: 2.75rem; padding: .4rem .7rem;
               font-size: var(--s-klein); }

.schnellwahl { display: flex; gap: .4rem; margin: .4rem 0 0; }

.schnellwahl[hidden] { display: none; }

.pausenknopf { flex: 1 1 0; min-width: 0;
               font-size: var(--s-klein);
               font-variant-numeric: tabular-nums; }

button.pausenknopf { color: var(--akzent); background: var(--flaeche);
                     border-color: var(--akzent);
                     box-shadow: inset 0 0 0 1px var(--akzent); }
button.pausenknopf[aria-pressed="true"] {
  color: var(--auf-akzent); background: var(--akzent);
  border-color: var(--akzent); box-shadow: var(--knopf-schatten); }
@media (hover: hover) {
  button.pausenknopf:hover { background: var(--akzent-weich);
                             border-color: var(--akzent-2); }
  button.pausenknopf[aria-pressed="true"]:hover {
    background: var(--akzent-2); border-color: var(--akzent-2); }
}
@media (min-width: 52rem) {
  form > button.knopf-klein, form.raster > button.knopf-klein {
    min-width: 0; justify-self: start; }

  form.raster > fieldset { grid-column: 1 / -1; }
}

.werbend { margin-top: 1.6rem; padding-top: 1.1rem;
           border-top: 1px solid var(--linie); }
.werbend a { font-weight: 600; }

.angebot { margin-top: 1.6rem; padding-top: 1.1rem;
           border-top: 1px solid var(--linie); }
.angebot > p { margin: 0 0 .6rem; }
.angebot > p:last-child { margin-bottom: 0; }
.hinweis { font-size: var(--s-klein); color: var(--tinte-2); margin: .35rem 0 0; }

.meldung {
  padding: .85rem 1rem; border-radius: var(--r); margin: 0 0 1.2rem;
  background: var(--rot-weich); color: var(--rot);
  border-left: 4px solid var(--rot); font-weight: 500;
}

.meldung.gut { background: var(--gruen-weich); color: var(--gruen);
               border-left-color: var(--gruen); }

.meldung.hinweisend { background: var(--flaeche2); color: var(--tinte-2);
                      border-left: 3px solid var(--linie); font-weight: 400; }

.meldung::before, .warnkasten::before, p.gut::before {
  content: ""; display: inline-block; vertical-align: -.05em;
  width: .72em; height: .72em; margin-right: .5em;
  background: currentColor; border-radius: 2px;   
}
.meldung.gut::before, p.gut::before { border-radius: 50%; }   

p.gut { color: var(--gruen); font-weight: 500; margin: 0 0 1rem; }
.warnkasten::before {                                          
  border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  width: .82em; height: .74em;
}

.warnkasten { border-left-style: dashed; }

.warnkasten { padding: .8rem 1rem; border-radius: var(--r); margin: 0 0 1rem;
              background: var(--warnung-weich); color: var(--warnung);
              border-left-width: 4px; border-left-color: var(--warnung); }
.warnkasten a { color: var(--warnung); font-weight: 600; }

div:is(.meldung, .warnkasten)::before { float: left; margin: .3em .5em 0 0; }
div:is(.meldung, .warnkasten) > p:first-child { margin-top: 0; }

div:is(.meldung, .warnkasten) > p:last-child { margin-bottom: 0; }

.prokasten { border-left-color: var(--akzent); border-left-style: solid;
             background: var(--akzent-weich); color: var(--tinte); }
.prokasten a { color: var(--akzent); }
.prokasten::before { display: none; }
.prokasten p { margin: 0 0 .5rem; }
.prokasten p:last-child { margin-bottom: 0; }

.meldung.hinweisend::before { display: none; }

.zeichen-vorrat { position: absolute; }
.nurvorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); padding: 1.1rem 1.2rem; margin-bottom: .9rem;
  box-shadow: var(--schatten);
}

.karte > :first-child { margin-top: 0; }
.karte > :last-child  { margin-bottom: 0; }

.karte a { color: var(--akzent); text-decoration: none; font-weight: 600; }
@media (hover: hover) {
  .karte a:hover { text-decoration: underline; }
}

.karte.fertig { border-left: var(--kante) solid var(--gruen); }

.leer { color: var(--tinte-2); font-style: normal; }

.warnzeichen { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em;
               margin-right: .15rem; color: var(--warnung);
               fill: none; stroke: currentColor; stroke-width: 1.7;
               stroke-linecap: round; stroke-linejoin: round; }

.leerstelle {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .5rem; margin: 1rem 0 1.2rem; padding: 1.4rem 1.2rem;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--r); color: var(--tinte);
}
.leerstelle b { font-weight: 600; font-size: var(--s-normal); }
.leerstelle p { margin: 0; font-size: var(--s-klein); color: var(--tinte-2);
                max-width: 42rem; }

.leerstelle .suchwort { font-weight: 600; color: var(--tinte); }

.blaettern { display: flex; flex-wrap: wrap; justify-content: space-between;
             gap: .35rem; margin: 0 0 1.2rem; font-size: var(--s-klein); }
.blaettern a { color: var(--akzent); text-decoration: none;
               padding: .55rem .7rem; border-radius: var(--r);
               min-height: 2.75rem; display: flex; align-items: center;
               background: var(--flaeche); border: 1px solid var(--linie); }
@media (hover: hover) {
  .blaettern a:hover { border-color: var(--akzent); }
}

.andere-wege { margin: .8rem 0 1rem; font-size: var(--s-klein); color: var(--tinte-2); }
.andere-wege > summary { font-weight: 400; color: var(--akzent); }
.andere-wege ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.andere-wege li { margin: .3rem 0; }

.blaettern .blaettern-kurz { display: none; }
@media (max-width: 26rem) {
  .blaettern { gap: .2rem; }
  .blaettern a { padding: .55rem .35rem; }
  .blaettern .blaettern-lang { display: none; }
  .blaettern .blaettern-kurz { display: inline; }
}
@media (min-width: 52rem) {

  .blaettern { justify-content: flex-start; }
}

main a { color: var(--akzent); }

.zurueck { margin: 0 0 .6rem; font-size: var(--s-klein); }
.zurueck a { text-decoration: none; }

.zurueck a, .dateien a, .werkzeug a, .weiter,
p.klein > a, .hinweiskasten p > a,

.karte p > a, .frage dd > a, .kopf b > a, .kopf > a,

summary {
  display: inline-flex; align-items: center; min-height: 2.75rem;
}

label.haken {
  display: flex; flex-wrap: nowrap; align-items: flex-start;
  gap: .1rem .4rem; min-height: 2.75rem; min-width: 0;
  padding-block: .55rem; box-sizing: border-box;
  font-weight: 400;
}
label.haken > input { margin-top: .1rem; }
label.haken > span, label.haken > b { min-width: 0; flex: 1 1 0; }

label.haken input, label.person input { flex: 0 0 auto;
                                        width: 1.35rem; height: 1.35rem; }
.marke { min-height: 2.75rem; }
.sprachwahl { margin-top: 2.5rem; text-align: center; font-size: var(--s-klein);
              color: var(--tinte-2); }

.sprachwahl a { color: var(--akzent); text-decoration: none;
                display: inline-block; padding: .7rem .6rem; }

.sprachwahl b { display: inline-block; padding: .7rem .6rem; }

.fuss { border-top: 1px solid var(--linie); margin-top: 3rem;
        padding: 1.2rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom));
        font-size: var(--s-klein); color: var(--tinte-2); }

.darstellungswahl { display: inline-flex; gap: .55rem; align-items: baseline; }

.darstellungswahl b { font-weight: 600; color: var(--tinte); }
.fuss .inner { max-width: 64rem; margin: 0 auto;
               display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.fuss a { color: var(--tinte-2); text-decoration: none;
          display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss .inner > span { display: inline-flex; align-items: center;
                      min-height: 2.75rem; }
@media (hover: hover) {
  .fuss a:hover { color: var(--akzent); text-decoration: underline; }
}

.zeichen { width: 1.15em; height: 1.15em; flex: none;
           fill: none; stroke: currentColor; stroke-width: 1.7;
           stroke-linecap: round; stroke-linejoin: round;
           vertical-align: -.18em; }

details > summary { list-style: none; cursor: pointer; display: flex;
                    align-items: center; gap: .5rem; min-height: 2.75rem;
                    font-weight: 600; color: var(--tinte); }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "›"; display: inline-block;
                            font-size: var(--s-l); line-height: 1;
                            color: var(--akzent); transform: rotate(90deg);
                            transition: transform .15s; flex: none; }
details[open] > summary::before { transform: rotate(270deg); }
@media (hover: hover) {
  details > summary:hover { color: var(--akzent); }
}
details > summary .klein { font-weight: 400; color: var(--tinte-2); }

.uebernahme { margin-top: .5rem; border-left: var(--kante) solid var(--rot);
              padding-left: .7rem; }
.uebernahme > summary { color: var(--rot); font-size: var(--s-klein); }
.uebernahme > summary::before { color: var(--rot); }
@media (hover: hover) {
  .uebernahme > summary:hover { color: var(--rot-2); }
}
.uebernahme form { margin-top: .6rem; }

input[type=checkbox], input[type=radio] {
  accent-color: var(--akzent);
  width: 1.35rem; height: 1.35rem; min-height: 0;
  flex: none; margin: 0; padding: 0; cursor: pointer; }
input[type=checkbox]:disabled, input[type=radio]:disabled { cursor: not-allowed; }

label.person {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .1rem .4rem; min-height: 2.75rem; min-width: 0;
  font-weight: 400; cursor: pointer; }
label.haken { cursor: pointer; }
label.haken:has(input:disabled) { color: var(--tinte-2); cursor: not-allowed; }

fieldset.stufenwahl { border: 0; padding: 0; margin: 1.4rem 0 .4rem;
                      display: grid; gap: .6rem; }

.stufenwahl > legend { padding: 0; margin: 0; float: left; width: 100%;
                       font-weight: 600; }

.stufenwahl > .hinweis { grid-column: 1 / -1; margin-top: .1rem; }

.stufenname { grid-column: 2; font-weight: 600; font-size: var(--s-m);
              letter-spacing: -.01em; overflow-wrap: break-word; }

.stufenpreis { grid-column: -2 / -1; grid-row: 1; margin: 0;
               text-align: right; font-size: var(--s-m); font-weight: 700;
               letter-spacing: -.02em; font-variant-numeric: tabular-nums;
               white-space: nowrap; }
.stufenpreis > span { display: block; font-size: var(--s-mini);
                      font-weight: 400; color: var(--tinte-2);
                      letter-spacing: 0; }
.stufenregel, .stufenwas {
  grid-column: 2 / -1; margin: 0; font-size: var(--s-klein);
  font-weight: 400; color: var(--tinte-2); line-height: 1.45; }

.stufen { display: grid; gap: .7rem; margin: .8rem 0 1rem; }
.stufe { display: grid; grid-template-columns: minmax(0,1fr) auto;
         align-items: baseline; column-gap: .6rem;
         background: var(--flaeche); border: 1px solid var(--linie-stark);
         border-radius: var(--r); padding: .9rem 1rem; }
.stufe.empfohlen { border: 2px solid var(--akzent); }
.stufe h3 { grid-column: 1; margin: 0; font-size: var(--s-m); }
.stufe .haken-liste { grid-column: 1 / -1; margin: 0; font-size: var(--s-klein); }