/* www.konstanze-muenstermann.de – Facelift 2026: Orange und Dunkelrot wie bisher, hellere Inhaltsfläche, Systemschrift, responsiv */
:root {
  --orange: #ff9900; --dunkelrot: #660000; --rot: #990000; --text: #2b1d14; --grau: #6b5b50;
  --papier: #fffaf2; --linie: #ead9c4; --breite: 1000px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--text); background: var(--orange); }
a { color: var(--rot); }
a:hover { color: var(--dunkelrot); }
img { max-width: 100%; height: auto; }
a[href^="tel:"] { white-space: nowrap; }
.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 10; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.rahmen { max-width: var(--breite); margin: 0 auto; background: var(--dunkelrot); border: 1px solid #fff; border-top: 0; }

/* Kopf: Originalgrafik, auf breiten Bildschirmen mittig auf Orange */
.kopf { background: #d7740f; text-align: center; line-height: 0; border-bottom: 1px solid #fff; }
.kopf img { width: 800px; }

.spalten { display: grid; grid-template-columns: 230px minmax(0, 1fr); }

/* Menü: orange Spalte mit der Rose unten wie bisher */
.menue { position: relative; background: var(--orange); padding: 3rem 0 160px; }
.menue::after { content: ""; position: absolute; left: 50%; bottom: 18px; width: 200px; height: 123px; margin-left: -100px; border-radius: 8px; background: no-repeat center / cover; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue > ul { border-top: 1px solid var(--dunkelrot); }
.menue li { border-bottom: 1px solid var(--dunkelrot); }
.menue a { display: block; padding: .5rem 1rem .5rem 1.4rem; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.menue a:hover, .menue a.bereich { background: var(--rot); color: #fff; }
.menue a[aria-current] { background: var(--dunkelrot); color: #fff; }
.menue li ul { background: #ffad33; }
.menue li li { border-bottom: 0; border-top: 1px solid rgba(102,0,0,.25); }
.menue li li a { font-weight: 500; padding-left: 2.2rem; color: var(--dunkelrot); }
.menue li li a:hover { color: #fff; }

.blume1::after { background-image: url(/static/blume1.jpg); }
.blume2::after { background-image: url(/static/blume2.jpg); }
.blume3::after { background-image: url(/static/blume3.jpg); }
.blume4::after { background-image: url(/static/blume4.jpg); }
.blume5::after { background-image: url(/static/blume5.jpg); }
.blume6::after { background-image: url(/static/blume6.jpg); }
.blume7::after { background-image: url(/static/blume7.jpg); }

/* Inhalt: hell statt dunkelrot */
.inhalt { background: var(--papier); margin: 2.25rem 2rem 2.5rem; padding: 1.75rem 2rem 2rem; border-radius: 8px; }
.inhalt > :last-child { margin-bottom: 0; }
.inhalt::after { content: ""; display: block; clear: both; }
h1 { color: var(--rot); font-size: 1.6rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { color: var(--rot); font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .4rem; }
.bild { margin: 0 0 1rem; }
.bild figcaption { font-size: .88rem; color: var(--grau); margin-top: .3rem; }
.bild.rechts { float: right; clear: right; margin: .3rem 0 1rem 1.5rem; width: 240px; }
.bild img { border-radius: 6px; }
.bild.mitte { margin: 0; }
.bild.mitte img { width: 100%; }
.unterseiten { clear: both; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.unterseiten ul { margin: 0; padding-left: 1.2rem; }

/* Fuß */
.fuss { background: var(--rot); color: #fff; font-size: .88rem; padding: .7rem 1.25rem; display: flex; justify-content: space-between; gap: .4rem 1.5rem; flex-wrap: wrap; }
.fuss a { color: #fff; }

@media (max-width: 820px) {
  .rahmen { border: 0; }
  .spalten { grid-template-columns: 1fr; }
  .menue { padding: 0; }
  .menue::after { display: none; }
  .menue > ul { border-top: 0; }
  .menue > ul > li { display: inline-block; border: 0; }
  .menue > ul > li > a { padding: .5rem .8rem; }
  .menue li ul { display: none; }
  .inhalt { margin: 1rem .75rem 1.25rem; padding: 1.25rem; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .inhalt { display: flex; flex-direction: column; }
  .inhalt > p, .inhalt > h2, .inhalt > ul { margin-top: 0; }
  .inhalt > h2 { margin-top: .5rem; }
  .bild.rechts { float: none; width: auto; margin: 1rem 0 0; order: 1; }
  .unterseiten { order: 2; }
  h1 { font-size: 1.4rem; }
}
@media print {
  .menue, .sprung, .kopf { display: none; }
  body, .rahmen { background: #fff; border: 0; }
  .inhalt { margin: 0; padding: 0; }
}