/* ============================================================
   Base Styles
   Typography, links, headings — applied globally.
   Elegant, minimal style with generous whitespace.
   ============================================================ */

/* --- Globale Panel-Utility: graue Fläche mit Padding, Radius und Border.
   Anwendbar auf jedes Element, das als Container/Box rendert (z.B. Karten-Consent,
   Aside-Sections, Property-Detail-Panels, Form-Fieldsets, …).
   Token-basiert: --color-panel-border ist tier-überschreibbar. */
.panel {
  background: var(--color-bg-alt);
  padding: var(--padding-card);
  border: 0.0625rem solid var(--color-panel-border);
  border-radius: var(--radius);
}

body {
  font-family: var(--font-body), sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-text);
  background: var(--color-bg);
}

/* A11y: Nutzer mit "Bewegung reduzieren" bekommen keine Transitions/Animationen.
   Global, damit auch bestehende Hover-/Scroll-Effekte abgedeckt sind und neue
   Section-Hovers nicht einzeln gekapselt werden muessen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Interest notification toast — slides in from bottom right */
.interest-toast {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  z-index: 1100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg);
  color: var(--color-text);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  transform: translateY(2rem);
  opacity: 0;
  transition: transform 400ms ease, opacity 400ms ease;
  pointer-events: none;
}

.interest-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Prevent body scroll when overlay is open (modal or mobile nav) */
body:has(dialog[open]),
body:has(#main-nav.open) {
  overflow: hidden;
}

/* --- Headings --- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading), serif;
  line-height: var(--leading-heading);
  font-weight: 400;
  color: var(--color-text);
}

/* Fluid H1 + H2: clamp(min, viewport-anteil, max).
   Min trifft bei kleinen Mobil-Viewports (<480px), max bei großen Desktops.
   Ersetzt den früheren statischen Wechsel via @media (min-width:79.5rem). */
h1 { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 0.85rem + 1.1vw, 2rem); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

/* Heading-Abstände nur in Prosa-Kontexten (Fließtext aus dem CMS, schmale
   Content-Seiten, Landingpages). Überschriften sind global bewusst margin-frei,
   damit Section-/Karten-Layouts ihren Abstand selbst über Grid/Gap besitzen —
   ein nackter h1–h6-Margin würde dort doppelte Abstände erzeugen. Deshalb
   gescopet auf die Prosa-Container statt global auf <article>/<h*>.
   Mehr Abstand nach oben (gruppiert die Überschrift mit ihrem Folge-Block) als
   nach unten zum Absatz; benachbarte Margins kollabieren (Block-Flow). */
:is(.cms-text, .narrow, .landingpage) :is(h1, h2, h3, h4, h5, h6) {
  margin-block-end: var(--space-3);
}

/* Abstand nach oben nur, wenn etwas vorausgeht → erste Überschrift bleibt bündig. */
:is(.cms-text, .narrow, .landingpage) * + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--gap-block);
}

/* --- Links --- */

a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary);
}

/* --- Text elements --- */

p {
  margin-block-end: var(--gap-inline);
}

p:last-child {
  margin-block-end: 0;
}

strong, b {
  font-weight: 600;
}

small {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Section dividers (between content blocks) --- */

main > section + section,
main > article + section {
  border-top: 0.0625rem solid var(--color-border);
  padding-block-start: var(--gap-section);
}

/* --- Lists (when styled, not reset) --- */

article ul,
article ol,
section ul,
section ol {
  padding-inline-start: var(--gap-block);
}

article ul { list-style: disc; }
article ol { list-style: decimal; }

article li,
section li {
  margin-block-end: var(--space-2);
}

/* --- Definition lists (key-value facts) ---
   Projektweite Design-Regel: dt/dd-Paare IMMER in einen <div>-Wrapper packen
   (HTML5-konform per spec). Struktur:
     <dl>
       <div><dt>Label</dt><dd>Wert</dd></div>
       <div><dt>Label</dt><dd>Wert</dd></div>
     </dl>
   Vorteil: jede Zeile ist EINE Box → durchgängige Underlines, Flex-Layout,
   Hover-States etc. funktionieren ohne Hacks. */

dl {
  margin: 0;
  padding-block: var(--space-1);
}

dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-1);
  padding-inline: var(--space-1);
  border-bottom: 0.0625rem solid var(--color-border);
  border-radius: 0;
  transition: background var(--transition);
  margin-block-end: var(--space-1);
}

dl > div:hover {
  background: var(--color-bg-alt);
}

/*
dl > div:last-child {
  border-bottom: none;
}
*/


/* Pill — kleines dezentes Inline-Tag */
.pill {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* Avatar — rundes Profilbild mit Border + dezenter Hover-Effekt */
.avatar {
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 0.125rem solid var(--color-border);
  background: var(--color-border);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
}

.avatar:hover {
  background: var(--color-border);
  transform: scale(1.05);
  box-shadow: var(--shadow);
}

.avatar:hover {
  box-shadow: var(--shadow-xl);
}


/* Boolean-Anzeige in dd: Häkchen für „Ja", Longdash (—) für „Nein" statt
   „Ja"/„Nein"-Text (Rendering in build_detail_rows). Kein X-Icon, weil das wie
   ein Close-Button gelesen wurde. */
.bool-yes {
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  transition: color var(--transition);
}

dl > div:hover .bool-yes {
  color: var(--color-success);
}

.bool-no {
  color: var(--color-text-light);
  display: inline-flex;
  align-items: center;
}

/* Hinweistext — kleinere graue Schrift mit Abstand nach oben */
.hint {
  position: relative;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-2);
}

/*!* Info-(i)-Icon vor jedem Hinweis. mask-image (Inline-SVG, Lucide "info") erbt*/
/*   currentColor und skaliert mit der Schriftgröße. Absolut positioniert → bricht*/
/*   weder mehrzeilige noch Block-/Rich-Content-Hints (z.B. Provisions-Tabelle). *!*/
/*.hint::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  inset-inline-start: 0;*/
/*  inset-block-start: 0.2em;*/
/*  inline-size: 1em;*/
/*  block-size: 1em;*/
/*  background-color: currentColor;*/
/*  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;*/
/*          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;*/
/*}*/

/* Inline-Links in .hint sind unterstrichen — sonst wären sie nur durch Farbe
   vom Fließtext unterscheidbar (WCAG 1.4.1 "Use of Color"). */
.hint a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

dt {
  font-weight: 500;
  color: var(--color-text-muted);
}

dd {
  margin: 0;
  text-align: right;
}

/* --- Inline-Icons (SVG in Text) --- */

/* Globale Baseline-Korrektur für SVG-Icons die inline neben Text stehen
   (Labels, Headings, Listen, Captions). Heading-Fonts haben oft höhere
   x-/cap-Höhe → Icons schweben sonst optisch zu hoch.
   Wert kommt aus --inline-icon-y (per Tier konfigurierbar in
   tier/{name}/variables.css). Buttons/Links sind ausgeschlossen, weil sie
   meist schon eigenes Flex-Layout für Icons haben. */
:is(span, h1, h2, h3, h4, h5, h6, label, p, li, small, figcaption) > svg {
  vertical-align: middle;
  transform: translateY(var(--inline-icon-y));
}

/* --- Horizontal rule --- */

hr {
  border: none;
  border-top: 0.0625rem solid var(--color-border);
  margin-block: var(--gap-section);
}

/* --- Selection --- */

::selection {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* --- Debug outlines (activate: <html class="debug">) --- */
/* DEBUG: outlines for header modules (aktiv via <html class="debug">) */
.debug #contact-bar           { outline: 2px solid #e74c3c; } /* rot */
.debug #lang-switch           { outline: 2px solid #9b59b6; } /* lila */
.debug .service               { outline: 2px dashed #3498db; } /* blau */
.debug #site-header #brand    { outline: 2px solid #2ecc71; } /* grün */
.debug #site-header #main-nav { outline: 2px dashed #f39c12; } /* orange */

.debug main            { outline: 2px solid #e74c3c; } /* red */
.debug section         { outline: 2px dashed #3498db; } /* blue */
.debug article         { outline: 2px dashed #2ecc71; } /* green */
.debug header          { outline: 2px solid #f39c12; } /* orange */
.debug footer          { outline: 2px solid #9b59b6; } /* purple */
.debug nav             { outline: 2px dotted #1abc9c; } /* teal */
.debug dialog          { outline: 2px solid #e91e63; } /* pink */
.debug figure          { outline: 2px dotted #ff5e99; } /* hot pink */
.debug img             { outline: 2px dashed #ffd700; } /* gold */
.debug div             { outline: 1px dotted #95a5a6; } /* grey */


/* --- Print --- */

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  a { color: #000; text-decoration: none; }

  nav, footer, dialog, button,
  #site-header, #info-button, #lang-banner, #cookie-consent,
  .service, .social {
    display: none !important;
  }

  main {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  article, section { break-inside: avoid; }
}