/* Handy und schmale Tablets: gemeinsame Regeln für alle Seiten der Vorabversion.
   Die Artboards sind mit Inline-Styles für 1440 px gebaut; hier werden sie auf eine Spalte umgelegt.
   Seitenspezifisches steht im <style> der jeweiligen .dc.html. */
/* Menü-Knopf nur am Handy */
.m-menu-knopf { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; box-sizing: border-box; border: 1.5px solid rgba(241,237,230,.5); border-radius: 22px; background: transparent; color: #F1EDE6; font: 600 16px/1 'Source Sans 3', system-ui, sans-serif; cursor: pointer; }
.m-menu-knopf:focus-visible { outline: 3px solid #F1EDE6; outline-offset: 3px; }
html.menu-offen .m-menu-knopf { background: rgba(241,237,230,.12); }

@media (max-width: 860px) {
  #seite { width: auto !important; zoom: 1 !important; }
  .dc-part > div { width: auto !important; height: auto !important; font-size: 18px !important; }

  /* Raster auf eine Spalte */
  [style*="repeat(12, minmax(0, 1fr))"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  [style*="grid-column"] { grid-column: auto !important; }
  [style*="repeat(2, minmax(0, 1fr))"]:not(dl) { grid-template-columns: minmax(0, 1fr) !important; row-gap: 24px; }
  [style*="110px minmax(0, 1fr)"], [style*="200px minmax(0, 1fr)"], [style*="220px minmax(0, 1fr)"],
  [style*="260px minmax(0, 1fr)"], [style*="320px minmax(0, 1fr)"], [style*="minmax(0, 1fr) auto"] {
    grid-template-columns: minmax(0, 1fr) !important; row-gap: 6px;
  }
  [style*="width: 560px"], [style*="width: 620px"], [style*="width: 640px"], [style*="width: 680px"],
  [style*="width: 720px"], [style*="width: 760px"], [style*="width: 820px"], [style*="width: 900px"] {
    width: auto !important; max-width: 100% !important;
  }

  /* Ränder: 120 px werden 20 px */
  [style*="padding: 24px 120px"], [style*="padding: 14px 120px"], [style*="padding: 96px 120px"],
  [style*="padding: 80px 120px"], [style*="padding: 64px 120px"], [style*="padding: 0 120px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 96px 120px"], [style*="padding: 80px 120px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 64px 120px"] { padding-top: 40px !important; }

  /* Schriftgrößen */
  h1[style*="font-size: 60px"], h1[style*="font-size: 54px"] { font-size: 36px !important; line-height: 1.1 !important; }
  h2[style*="font-size: 48px"] { font-size: 32px !important; line-height: 1.12 !important; }
  h3[style*="font-size: 36px"] { font-size: 27px !important; }
  h3[style*="font-size: 28px"] { font-size: 23px !important; }
  p[style*="font-size: 36px"] { font-size: 28px !important; }
  p[style*="font-size: 20px"], p[style*="font-size: 22px"] { font-size: 18px !important; }

  /* Buttons dürfen umbrechen */
  .btn { white-space: normal; height: auto; min-height: 52px; padding: 12px 18px; text-align: center; line-height: 1.25; font-size: 17px; }

  /* Kopf: Name und Menü-Knopf, darunter klappt das Menü als Liste auf (menu.js setzt html.menu-offen) */
  header.schiefer { flex-wrap: wrap !important; align-items: center !important; padding: 12px 20px !important; row-gap: 0; }
  header.schiefer > a { font-size: 21px !important; }
  header.schiefer .m-menu-knopf { display: inline-flex; margin-left: auto; }
  header.schiefer > div, header.schiefer > nav { order: 3; width: 100%; }
  header.schiefer .pill { display: none !important; }
  header.schiefer nav { display: none !important; width: 100%; flex-direction: column !important; gap: 0 !important; font-size: 18px !important; padding: 10px 0 6px; }
  html.menu-offen header.schiefer nav { display: flex !important; }
  header.schiefer nav a { display: flex; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid rgba(241,237,230,.16); color: #F1EDE6 !important; text-decoration: none; }

  /* Umschalter und lange Mailadressen */
  [role="tablist"], [role="group"] { flex-wrap: wrap; }
  a[href^="mailto:"][style*="Vollkorn"] { font-size: 22px !important; overflow-wrap: anywhere; }

  /* Inhaltsverzeichnis der Unterseiten als Zeile über dem Text */
  .seitennav { position: static !important; padding: 0 0 8px !important; flex-direction: row !important; flex-wrap: wrap; gap: 4px 18px !important; border-bottom: 1px solid #D6E0E2; }
}