/* Porcia MedCenter: Grundlagen und Umbrueche fuer die Vermietungsseiten.
   Enthaelt ausschliesslich, was sich nicht inline setzen laesst: Reset, Zustaende,
   Media Queries. Alle Flaechen, Farben und Abstaende stehen inline im Markup. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
footer a:hover { color: var(--mint-300) !important; text-decoration: underline; }
[data-nav-cta]:hover { background: var(--mint-200) !important; color: var(--blue-900) !important; text-decoration: none !important; }

section[id] { scroll-margin-top: 92px; }
@media (max-width: 600px) { section[id] { scroll-margin-top: 76px; } }

/* Kicker als Minzpille, wie auf der Startseite. data-plain haelt einen Kicker flach. */
[style*="var(--ls-eyebrow)"]:not([data-plain]) {
  display: inline-flex !important;
  align-items: center;
  font-size: 16px !important;
  background: var(--mint-300) !important;
  color: var(--blue-900) !important;
  padding: 5px 18px !important;
  padding-right: calc(18px - 0.18em) !important;
  border-radius: 999px;
  line-height: 1.4;
}

/* Aufklappmenue: die Links stehen immer im Markup, nur die Sichtbarkeit schaltet. */
[data-submenu] { display: none; }
[data-submenu-wrap][data-open="true"] [data-submenu] { display: block; }
@media (hover: hover) and (min-width: 981px) {
  [data-submenu-wrap]:hover [data-submenu] { display: block; }
}
[data-submenu] a:hover { background: var(--blue-50) !important; text-decoration: none !important; }

[data-menu-toggle] { display: none; }
/* Der Logo-Schriftzug darf nie schrumpfen, sonst wird die Wortmarke gestaucht. */
[data-nav] > a, [data-nav] > img { flex: none; }
/* Die Kopfzeile der Startseite braucht mit Logo, sieben Punkten, Nav-Abstand und
   2 mal 5vw Seitenrand rund 1.116 px. Darunter wandern die Links ins Menue. */
@media (max-width: 1150px) {
  [data-nav-links] { display: none !important; }
  [data-menu-toggle] { display: flex !important; }
}
@media (max-width: 600px) {
  [data-nav] { height: 68px !important; }
  [data-nav] img { height: 60px !important; }
  h1, h2, h3, p { hyphens: auto; overflow-wrap: break-word; }
}

/* Inhaltsraster */
@media (max-width: 1000px) { [data-resp="four"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 860px) {
  [data-resp="two"], [data-resp="three"], [data-resp="split"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) { [data-resp="four"] { grid-template-columns: 1fr !important; } }

/* Fusszeile: Markenblock oben, darunter die Spalten. */
@media (max-width: 900px) {
  footer { padding-top: clamp(44px, 6vh, 68px) !important; text-align: center; }
  footer [data-resp="four"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: clamp(28px, 4vw, 40px) !important; justify-items: center; }
  footer [data-resp="four"] > div { width: 100%; }
  footer [data-resp="four"] > div:first-child {
    grid-column: 1 / -1; max-width: 38rem;
    padding-bottom: clamp(28px, 4vh, 40px); margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--blue-700);
  }
  footer [data-resp="four"] img { width: 132px !important; margin: 0 auto !important; }
  footer [data-resp="four"] > div:first-child p { margin-top: var(--space-5) !important; max-width: 42ch !important; }
  footer [data-resp="four"] > div > div:last-child { align-items: center; gap: var(--space-3) !important; margin-top: var(--space-4) !important; }
  footer p { max-width: 34ch !important; margin-left: auto !important; margin-right: auto !important; }
  footer > div > p { max-width: 64ch !important; }
  footer > div > p:first-of-type { margin-top: clamp(32px, 5vh, 48px) !important; padding-top: var(--space-6) !important; }
  footer > div > div:last-child { margin-top: var(--space-5) !important; padding: var(--space-5) 0 !important; justify-content: center !important; text-align: center; }
}
@media (max-width: 620px) {
  footer [data-resp="four"] { grid-template-columns: 1fr !important; gap: clamp(30px, 4vh, 40px) !important; }
  footer [data-resp="four"] > div:first-child { padding-bottom: clamp(26px, 4vh, 34px); }
}

/* Zweispaltiger Fliesstext (Ueber uns) und Paarraster */
@media (max-width: 860px) { [data-cols="two"] { column-count: 1 !important; } }
@media (max-width: 600px) { [data-resp="pairs"] { grid-template-columns: 1fr !important; } }
@media (max-width: 900px) { :root { --fs-3xs: 12px; } }

/* Versorgungskette der Startseite: Nummer links, Text daneben. */
@media (max-width: 860px) {
  [data-chain-row] { grid-template-columns: 44px 1fr !important; gap: var(--space-2) var(--space-5) !important; align-items: start !important; padding: var(--space-5) 0 !important; }
  [data-chain-row] > :first-child { grid-row: 1 / span 3; }
  [data-chain-row] > :last-child { justify-self: start !important; text-align: left !important; margin-top: var(--space-1); }
}