* { box-sizing: border-box; }

body {
  margin: 0;
  background: #f6f2e9;
  color: #1d2a30;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; }
a { color: #0b4a57; text-decoration: underline; text-underline-offset: 0.15em; }
a, button, select, .knopf { outline: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.breite { max-width: 68rem; margin: 0 auto; padding: 0 1rem; }

.kopf { background: #ffffff; }
.dienstzeile { background: #083640; color: #5f8f98; }
.dienst-innen { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-top: 0.35rem; padding-bottom: 0.35rem; min-height: 2.9rem; }
.dienstzeile a { color: #5f8f98; display: inline-block; padding: 0.2rem 0; }

.service { position: relative; margin-left: auto; }
.service-knopf { display: inline-block; border: 2px solid #5f8f98; border-radius: 0.25rem; padding: 0.2rem 0.7rem; cursor: pointer; }
.service-knopf::after { content: " ▾"; }
.service-liste { display: none; position: absolute; right: 0; top: 100%; z-index: 15; background: #ffffff; border: 2px solid #083640; min-width: 15rem; padding: 0.4rem 0; }
.service:hover .service-liste { display: block; }
.service-liste a { color: #0b4a57; display: block; padding: 0.45rem 0.9rem; }
.service-liste a:hover { background: #dcecee; }

.markenzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.marke { display: inline-flex; align-items: center; gap: 0.7rem; }
.marke a { display: inline-flex; }
.marke-name { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.direkt { padding: 0.45rem 0.5rem; border: 2px solid #5b6b72; border-radius: 0.25rem; background: #ffffff; min-width: 13rem; }

.hauptnav { background: linear-gradient(#0b4a57, #0d5261); }
.hauptnav a { display: inline-block; color: #ffffff; text-decoration: none; padding: 0.65rem 1rem; font-weight: 600; }
.hauptnav a:hover { text-decoration: underline; }
.hauptnav a.hier { background: #ffffff; color: #0b4a57; text-decoration: underline; }

.themen { background: #dcecee; border-bottom: 1px solid #c9d2d5; overflow: hidden; }
.themen .breite { width: 78rem; max-width: none; display: flex; justify-content: space-between; }
.themen a { display: block; padding: 0.45rem 0.7rem; font-size: 0.95rem; white-space: nowrap; }

.inhalt { padding: 1.75rem 0 3rem; }

.t1, .t2, .t3 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-weight: 700; line-height: 1.2; margin: 0 0 0.6rem; }
.t1 { font-size: 2.3rem; }
.t1-lang { white-space: nowrap; overflow: hidden; }
.t2 { font-size: 1.45rem; margin-top: 2rem; }
.t3 { font-size: 1.15rem; }
.t4 { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.4rem; }
.absatz { margin: 0 0 1rem; max-width: 46rem; }
.vorspann { font-size: 1.15rem; max-width: 46rem; margin: 0 0 1rem; }

.titelzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 0.4rem; }
.titelzeile .t1 { margin: 0; min-width: 0; }
.wz { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.9rem; height: 2.9rem; border: 2px solid #0b4a57; border-radius: 0.3rem; background: #ffffff; }

.knopf {
  display: inline-block; background: #0b4a57; color: #ffffff; border: 2px solid #0b4a57;
  border-radius: 0.3rem; padding: 0.55rem 1.1rem; font-weight: 700; text-decoration: none; cursor: pointer;
}
.knopf:hover { background: #083640; }
.knopf.leise { background: #ffffff; color: #0b4a57; }
.knopf.leise:hover { background: #dcecee; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

.banner { display: block; margin: 1.5rem 0; }

.lauf { background: #ffffff; border-left: 0.3rem solid #a8480e; overflow: hidden; white-space: nowrap; padding: 0.5rem 0; }
.lauf-innen { display: inline-block; padding-left: 100%; animation: lauf 26s linear infinite; }
@keyframes lauf { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .lauf { white-space: normal; padding: 0.5rem 0.8rem; }
  .lauf-innen { animation: none; padding-left: 0; }
}

.karten { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 1rem; }
.karte { background: #ffffff; border: 1px solid #c9d2d5; flex: 1 1 15rem; }
.karte img { display: block; width: 100%; }
.karte-text { padding: 0.9rem 1rem 1rem; }
.karte .t3 { margin-bottom: 0.3rem; }
.zeile-klein { color: #9aa7ab; font-size: 0.95rem; margin-bottom: 0.5rem; }
.karte-wege { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }

.regal-liste { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 0.75rem; }
.eintrag { background: #ffffff; border: 1px solid #c9d2d5; padding: 0.8rem; display: grid; grid-template-columns: 3rem 1fr; gap: 0.1rem 0.8rem; align-items: start; flex: 1 1 13rem; }
.buch { grid-row: span 2; width: 3rem; height: 4.2rem; border-radius: 0.15rem; border-left: 0.4rem solid rgba(0, 0, 0, 0.35); }
.buch-a { background: #0b4a57; } .buch-b { background: #a8480e; } .buch-c { background: #5f8f5a; }
.buch-d { background: #1d2a30; } .buch-e { background: #c98a1a; } .buch-f { background: #7a3b69; }
.buch-titel { font-weight: 700; }
.buch-art { color: #4a5a61; font-size: 0.95rem; }
.regal-steuerung { display: flex; align-items: center; gap: 0.75rem; }
.pfeil { width: 2.75rem; height: 2.75rem; padding: 0; background: #ffffff; border: 2px solid #0b4a57; border-radius: 0.3rem; cursor: pointer; position: relative; }
.pfeil::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.55rem; height: 0.55rem; border-left: 3px solid #0b4a57; border-bottom: 3px solid #0b4a57; }
.pl::before { transform: translate(-30%, -50%) rotate(45deg); }
.pr::before { transform: translate(-70%, -50%) rotate(-135deg); }

.zeiten { max-width: 30rem; margin: 0 0 1rem; }
.zeiten b { display: inline-block; min-width: 12rem; }

.seitennav { background: #ffffff; border: 1px solid #c9d2d5; padding: 0.8rem 1rem; max-width: 46rem; margin: 0 0 1rem; }
.seitennav a { display: inline-block; padding: 0.15rem 0; margin-right: 1.25rem; }

.punktliste { max-width: 46rem; padding-left: 1.3rem; margin: 0 0 1rem; }
.punktliste li { margin-bottom: 0.3rem; }

.tabelle { border-collapse: collapse; background: #ffffff; margin: 0 0 1rem; }
.tabelle td { border: 1px solid #5b6b72; padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.tabelle tr:first-child td { background: #dcecee; }
.tabelle tr.r td { color: #c0392b; }

.kasten { background: #dcecee; border-left: 0.4rem solid #0b4a57; padding: 0.9rem 1.1rem; max-width: 46rem; margin: 1.25rem 0; }
.kasten p { margin: 0; }

.frage { background: #ffffff; border: 1px solid #c9d2d5; padding: 0.7rem 1rem; font-weight: 700; max-width: 46rem; cursor: pointer; margin-top: 0.5rem; }
.frage::before { content: "▸ "; }
.frage.offen::before { content: "▾ "; }
.antwort { display: none; background: #ffffff; border: 1px solid #c9d2d5; border-top: 0; padding: 0.7rem 1rem 0.9rem; max-width: 46rem; }
.frage.offen + .antwort { display: block; }

.termine { list-style: none; margin: 0; padding: 0; }
.termin { background: #ffffff; border: 1px solid #c9d2d5; display: flex; margin-bottom: 1.25rem; }
.termin img { display: block; width: 16rem; flex: none; object-fit: cover; }
.termin-text { padding: 1rem 1.2rem 1.1rem; }
.termin .t2 { margin-top: 0; }
.fakten { font-weight: 600; margin: 0 0 1rem; }

.schritte { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; }
.schritt { background: #ffffff; border: 2px solid #c9d2d5; padding: 0.4rem 0.9rem; color: #4a5a61; }
.schritt.hier { border-color: #0b4a57; background: #0b4a57; color: #ffffff; font-weight: 700; text-decoration: underline; }
.schritt b { margin-right: 0.3rem; }

.bez { font-weight: 700; margin-bottom: 0.25rem; }
.kachel { position: relative; background: #ffffff; border: 2px solid #5b6b72; border-radius: 0.3rem; padding: 0.75rem 1rem 0.75rem 3rem; margin-bottom: 0.6rem; cursor: pointer; max-width: 46rem; }
.kachel .punkt { position: absolute; left: 0.85rem; top: 0.9rem; width: 1.5rem; height: 1.5rem; border: 2px solid #5b6b72; border-radius: 50%; background: #ffffff; }
.kachel.gewaehlt { border-color: #0b4a57; box-shadow: inset 0 0 0 2px #0b4a57; background: #dcecee; }
.kachel.gewaehlt .punkt { border-color: #0b4a57; box-shadow: inset 0 0 0 0.22rem #ffffff; background: #0b4a57; }
.kachel-titel { display: block; font-weight: 700; }
.kachel-zeile { display: block; margin: 0; font-size: 1rem; }

.zaehler { display: flex; align-items: stretch; gap: 0.4rem; margin: 0.3rem 0 1.2rem; }
.zk { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; font-size: 1.4rem; font-weight: 700; line-height: 1; background: #ffffff; color: #0b4a57; border: 2px solid #0b4a57; border-radius: 0.3rem; cursor: pointer; user-select: none; }
.zf { width: 4.5rem; text-align: center; padding: 0.55rem 0.6rem; border: 2px solid #5b6b72; border-radius: 0.25rem; background: #ffffff; }
.summe { font-size: 1.15rem; font-weight: 700; background: #ffffff; border: 1px solid #c9d2d5; padding: 0.6rem 0.9rem; max-width: 46rem; }

.raster { display: grid; grid-template-columns: 18rem 18rem; gap: 1.2rem 1.5rem; margin-bottom: 1.2rem; }
.raster input, .stapel input, .formular input[type="text"], .formular select, .formular textarea {
  width: 100%; padding: 0.55rem 0.6rem; border: 2px solid #5b6b72; border-radius: 0.25rem; background: #ffffff;
}
.raster input::placeholder, .stapel input::placeholder { color: #4a5a61; opacity: 1; }
.stapel { width: 30rem; display: grid; gap: 1.2rem; margin-bottom: 1.2rem; }
.zusatz { display: flex; gap: 0.6rem; align-items: flex-start; }
.zusatz input { width: 1.5rem; height: 1.5rem; margin: 0.05rem 0 0; accent-color: #0b4a57; }
.mld { color: #c0392b; font-weight: 700; margin: 0 0 1rem; }
.markiert { border-color: #c0392b !important; }

.formular { width: 34rem; }
.formular .bez { margin-top: 1.1rem; }
.formular textarea { min-height: 8rem; resize: vertical; }
.haken { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1.2rem; cursor: pointer; }
.box { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; border: 2px solid #5b6b72; border-radius: 0.2rem; background: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; }
.haken.gesetzt .box { background: #0b4a57; border-color: #0b4a57; color: #ffffff; }
.haken.gesetzt .box::before { content: "✓"; }
.dank { display: none; background: #dcecee; border-left: 0.4rem solid #0b4a57; padding: 0.7rem 1rem; font-weight: 700; max-width: 46rem; margin: 0 0 1rem; }

.angaben { background: #ffffff; border: 1px solid #c9d2d5; padding: 0.9rem 1.1rem; max-width: 46rem; margin-bottom: 1rem; }
.angaben div { display: flex; gap: 1rem; padding: 0.25rem 0; }
.angaben b { flex: none; width: 11rem; }
.verbindlich { background: #fff3cf; border-left: 0.4rem solid #a8480e; padding: 0.8rem 1rem; max-width: 46rem; margin-top: 1.5rem; }
.bescheid { background: #dcecee; border-left: 0.4rem solid #0b4a57; padding: 0.9rem 1.1rem; max-width: 46rem; font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem; }

.zwei-spalten { display: flex; gap: 2.5rem; }
.zwei-spalten > div { flex: 1 1 50%; min-width: 17rem; }
.plan { display: block; border: 1px solid #c9d2d5; }

.fuss { background: #083640; color: #ffffff; padding: 1.75rem 0 0.5rem; }
.fuss a { color: #ffffff; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.fuss-innen > div { flex: 1 1 14rem; }
.fuss-klein { margin: 1.25rem 0 0; font-size: 0.9rem; color: #5f8f98; }
.fuss-klein a { color: #5f8f98; }
.fuss-wege { margin-top: 0.75rem; }
.fuss-wege a { margin-right: 1.25rem; }

.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff3cf; border-top: 2px solid #a8480e; padding: 0.7rem 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.leiste-zu { cursor: pointer; font-size: 1.5rem; line-height: 1; font-weight: 700; padding: 0 0.4rem; }