@import "schriften.css";

/* Farben in Variablen, um sie im dark-mode überschreiben zu können */
:root {
--hintergrund:#ffffff;
--text:#333333;
--ueberschrift:#ff6400;
--link:#0082c9;
--rahmen:#eeeeee;
}
@media (prefers-color-scheme: dark) { :root {
--hintergrund:#222222;
--text:#dddddd;
--ueberschrift:#e65c00;
--link:#25abf4;
--rahmen:#333333;
}}

html { overflow:scroll; }
body { color:var(--text); background-color:var(--hintergrund); font-family:norm,sans-serif; font-size:large; letter-spacing:0.01em; line-height:123%; margin:1em 0; padding:0; }

div#seite { clear:left; text-align:left; margin:0 auto; padding:0; width:60em; background-color:var(--hintergrund); }

div#spalte { float:left; padding:1.3em 0 1em 0; line-height:100%; }

div#karte p { color:var(--text); font-size:0.8em; margin:0 0 0.5em 0; }
div#karte p a { color:inherit; }

div#menue { margin-top:2em; }
div#menue ul { list-style-image:url(listicon.svg); margin-left:0; padding-left:25px; }
div#menue ul .noicon { list-style-image:none; list-style-type:none; font-size:0.875em; }
div#menue .aktuell { color:var(--link); font-family:fett,sans-serif; }
div#menue .unter { color:var(--link); font-family:kurs,sans-serif; }

div#inhalt { min-height:30em; border-left:2px dotted var(--link); margin:0 0 0 15.5em; padding:1em 0 1em 2.2em; }
div#inhalt p { font-size:1em; margin:1em 0; }
div#inhalt p.zurueck { margin:2.1em 0 0 0; padding:0.35em 0 0 0; }
div#inhalt p.fuss { border-top:1px solid currentcolor; margin:1.5em 0 0 0; padding:0.35em 0 0 0; }
div#inhalt p.beschriftung { font-family:kurs; font-style:normal; }
div#inhalt h3.abstand { margin-top:1em; }
div#inhalt h3+p { margin-top:0.6em; }
div#inhalt h4+p { margin-top:0.4em; }
div#inhalt section.nebeneinander { display: flex; }
div#inhalt section.nebeneinander p { margin:0; }

h2 { font-family:fett,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.3em; color:var(--ueberschrift); margin:0 0 0.2em 0; padding-top:0; }
h3 { font-family:fett,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.15em; color:var(--ueberschrift); margin:0.35em 0 0 0; padding-top:1em; }
h4 { font-family:norm,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.15em; color:var(--ueberschrift); margin:0.2em 0 0 0; padding-top:0.2em; }
h5 { font-family:norm,sans-serif; font-weight:normal; font-size:1em; color:var(--ueberschrift); margin:0; padding-top:0.2em; }
h2.abstand { margin-top:3em; }
h3.fortlaufend { padding-top:0; }
#rahmen>h2,#rahmen>h3,#rahmen>h4 { margin-top:1em; padding-top:0; }

b { font-family:fett,sans-serif; font-weight:normal; }
i { font-family:kurs,sans-serif; font-style:normal; }
code { font-family:mono,monospace; font-weight:normal; }
a { color:var(--link); text-decoration:none; }
o { color:var(--ueberschrift); }

#rahmen { padding:0.1em 1em; margin:1em 0; background-color:var(--rahmen); border-radius:6px; }
/* Kasten nach Überschrift: Abstand wie Überschrift→Text plus 0.2em; danach wie nach einem Absatz (margin oben) */
h2+#rahmen { margin-top:1.2em; }
h3+#rahmen, summary:has(>h3)+#rahmen { margin-top:0.8em; }
h4+#rahmen, h5+#rahmen, summary:has(>h4)+#rahmen, summary:has(>h5)+#rahmen { margin-top:0.6em; }
/* Kasten mit eigener h3 ist ein Abschnitt: davor Abstand wie vor einer h3; die Innenpolsterung ist der Kastenzuschlag */
#rahmen:has(>h3:first-child) { margin-top:2em; }
h2+#rahmen:has(>h3:first-child) { margin-top:1.35em; }

img { border:0; }
img.logo { max-width:15em; height: auto; }
object.grafik { display:block; width:100%; height:auto; }
img.border { border:1px solid var(--ueberschrift); }
img[eql] { content:attr(eql); padding:0.5em; border:2px solid var(--link); position:relative; max-width:35em; margin: 0 0 0 1.5em; }
img[eqlb] { content:attr(eqlb); padding:0.5em; position:relative; max-width:35em; margin-left:1.5em; }

ol { margin-top:0em; line-height:1.25em; }
ol li { margin-top:0.5em; }
ol li.nobullet { list-style-type:none; counter-increment:none;}

ul { margin-top:0em; list-style-type:circle; line-height:1.25em; }
ul li { margin-top:0.5em; }
ul li[tog] { content:attr(tog); line-height:1em; }
ul li.eng { margin-top:0; }
ul li.nobullet { list-style-type:none; }
ul ul { list-style-type:circle; line-height:1.2em; }
ul ul li { margin-top:0; }

td,th { vertical-align:top; }
th.b { font-family:fett,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.15em; }
th.h4 { padding-top:1.5em; font-family:norm,sans-serif; letter-spacing:0.05em; font-weight:normal; font-size:1.15em; color:var(--ueberschrift); }
th.td { padding-top:1.5em; font-family:norm,sans-serif; font-weight:normal; }

abbr { border-bottom:1px dotted var(--text); text-decoration:none; }
abbr:hover { color:var(--link); }
abbr[erkl] { position:relative; }
abbr[erkl]:hover::after, abbr[erkl]:focus::after { display:inline-block; content:attr(erkl); position:absolute; text-align:center; background-color:var(--link); color:var(--hintergrund); max-width:30em; min-width:10em; border-radius:6px; padding:8px; bottom:150%; font-size:1em; left:-5em; }
abbr[erkl]:hover::before { content:""; width:0px; height:0px; position:absolute; border-left:24px solid var(--link); border-right:12px solid transparent; border-top:12px solid var(--link); border-bottom:20px solid transparent; left:2em; bottom:1em; }

details>summary { width:100%; box-sizing:border-box; padding-right:1.8em; position:relative; cursor:pointer; list-style:none; }
details>summary::-webkit-details-marker { display:none; }
details>summary:hover h3,details>summary:hover h4,details>summary:hover h5 { color:var(--link); }
/* Kreis mit ausgespartem +/− (Maske statt Zeichen: Hintergrund scheint durch, auch im Kasten) */
details>summary:after { content:""; position:absolute; right:0; top:50%; width:1.1em; height:1.1em; margin-top:-0.55em; background-color:var(--ueberschrift); -webkit-mask:url(aufklappen-plus.svg) center/contain no-repeat; mask:url(aufklappen-plus.svg) center/contain no-repeat; }
details>summary:hover:after { background-color:var(--link); }
details[open]>summary:after { -webkit-mask-image:url(aufklappen-minus.svg); mask-image:url(aufklappen-minus.svg); }
summary>h3 { padding-top:0; }
summary>h3.abstand { margin-top:1em; }

a.print { display:none; }
@media print { .print {display:block !important;} }

/* ===== Schmale Bildschirme (Handy) – seit 10/2026 =====
   Kopf, Kontakt und Menü kommen aus /spalte.php. Am PC bleibt alles wie bisher; die Seite
   wird nur schmaler statt abgeschnitten, wenn das Fenster enger ist als 60em. */
div#seite { padding:0 1em; max-width:calc(100% - 2em); }
#burger, label[for=burger] { display:none; }
/* am PC: Anschrift dreizeilig ohne Firmenzeile, Impressum steht im Menü */
div#karte .firma, div#karte .trenner, p.impressum { display:none; }
/* Impressum: Anbieterzeile nur schmal, am PC steht sie im Kontaktblock links daneben */
.nur-schmal { display:none; }
div#karte .z, div#karte .t { display:block; }

@media (max-width:45em) {
  .nur-schmal { display:inline; }
  /* Reihenfolge: Menü (Logo rechts daneben), Inhalt, Kontakt; Rand seitlich und unten 0.5em */
  body { margin:0.5em 0 0 0; }
  div#seite { display:flex; flex-direction:column; position:relative; padding:0 0.5em 0.5em 0.5em; max-width:calc(100% - 1em); }
  div#spalte { display:contents; }
  div#menue { order:1; margin:0; }
  div#inhalt { order:2; margin:0; border-left:0; border-top:2px dotted var(--link); padding:0.95em 0 1em 0; min-height:0; }
  div#karte { order:3; padding:1.1em 0 0 0; border-top:2px dotted var(--link); display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; column-gap:1em; }
  div#karte p { margin-bottom:0.2em; font-size:0.85em; overflow-wrap:anywhere; }
  div#karte img.logo { position:absolute; right:0.5em; top:0; width:12em; }
  div#karte p:first-of-type > br:first-of-type { display:none; }
  img, object.grafik { max-width:100%; }
  img[eql], img[eqlb] { max-width:100%; margin-left:0; box-sizing:border-box; }

  /* Menü hinter „☰ Menü“, ohne JavaScript: Checkbox + Label */
  label[for=burger] { display:flex; align-items:flex-end; min-height:3.15em; padding-bottom:0.78em; cursor:pointer; color:var(--link); font-family:fett,sans-serif; }
  label[for=burger]::before { content:"\2630\00a0 "; }
  #burger:checked + label[for=burger]::before { content:"\2715\00a0 "; }
  div#menue > ul { display:none; margin:0.3em 0 0.8em 0; }
  #burger:checked ~ ul { display:block; }

  /* Anschrift: „Firma – Name“ und „Straße, Ort“ je in einer Zeile */
  div#karte .firma, div#karte .t, div#karte .trenner { display:inline; }
  /* Icons als Maske, damit sie die Überschriftenfarbe (hell/dunkel) annehmen */
  div#karte a[href*="openstreetmap"], div#karte a[href^="tel:"], div#karte a[href^="mailto:"] { display:inline-block; position:relative; padding-left:1.6em; }
  div#karte a[href*="openstreetmap"]::before, div#karte a[href^="tel:"]::before, div#karte a[href^="mailto:"]::before { content:""; position:absolute; left:0; top:0.05em; width:1.15em; height:1.15em; background-color:var(--ueberschrift); mask:var(--icon) center/contain no-repeat; }
  div#karte a[href*="openstreetmap"] { --icon:url(/icons/ort.svg); }
  div#karte a[href^="tel:"] { --icon:url(/icons/telefon.svg); }
  div#karte a[href^="mailto:"] { --icon:url(/icons/mail.svg); }
  /* Impressum rechts neben Telefon und Mail, unten bündig; passt es nicht, bricht es von
     selbst darunter um und steht dann allein, also links (space-between) */
  div#karte > p:first-of-type { flex-basis:100%; }
  div.erreichbar { flex:0 1 auto; min-width:0; }
  div#karte > p.impressum { display:block; flex:0 0 auto; text-align:right; margin-top:0.6em; }
  div#karte .i { display:inline; white-space:nowrap; }
}
/* zu eng für „Firma – Name“ und „Straße, Ort“ in je einer Zeile */
@media (max-width:19.5em) {
  div#karte .firma, div#karte .t { display:block; }
  div#karte .trenner { display:none; }
}
/* zu eng für „Impressum/Datenschutz“ neben der Mailadresse (Grenzen mit Scrollleiste und Puffer) */
@media (max-width:30.5em) {
  div#karte .i { display:block; }
  div#karte .itr { display:none; }
}
/* zu eng auch zweizeilig: darunter, linksbündig, einzeilig */
@media (max-width:26em) {
  div#karte > p.impressum { flex-basis:100%; text-align:left; }
  div#karte .i, div#karte .itr { display:inline; }
}