/* Haus Magnussen — Marken-Stylesheet über YOOtheme Pro.
 *
 * Jede Regel hier hat einen gemessenen Grund. Die Zielwerte stammen aus
 * prototyp-v3, gemessen bei 1089 px Fensterbreite; sie stehen als Kommentar
 * dabei, damit die nächste Runde nicht wieder nachschlagen muss.
 *
 * Zur Spezifität: YOOtheme gibt den Elementen sowohl seine uk-Klassen als
 * auch unsere hm-Klassen mit (h1.uk-heading-large.hm-h1). Beide sind eine
 * Klasse wert — es entscheidet die Reihenfolge, und marke.css hängt an
 * wp_head mit Priorität 999, also hinter theme.css. Deshalb genügen einfache
 * Klassenselektoren; nur wo UIkit mit zwei Klassen arbeitet, brauchen wir
 * ebenfalls zwei.
 */

:root {
  --hm-blau:        #1f5f9c;   /* das Blau der Fensterrahmen */
  --hm-blau-dunkel: #17496f;
  --hm-blau-tief:   #12324c;
  --hm-gruen-tief:  #2f6b42;   /* Beschriftung an An- und Abreisetagen.
                                  Siehe die Begruendung beim Belegungsplan:
                                  #1a3d23 waere die kontraststaerkere
                                  Alternative. */
  --hm-blau-halb:   #1f5f9c;   /* halb belegter Tag: das Fensterblau, zur
                                  Hälfte aufgehellt. Dunkler Text darauf
                                  erreicht 5,8:1, auf dem vollen Blau wären
                                  es nur 3,2:1 und damit zu wenig. */
  --hm-blau-zart:   #eef4f9;
  --hm-blau-linie:  #d3e1ec;
  --hm-linie:       #e3e8ec;
  --hm-leise:       #5d6d79;
  --hm-text:        #24313b;
  --hm-leinen:      #fcfbf9;
  --hm-messing:     #a8894f;
  --hm-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --hm-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
}

/* Der Entwurf setzt für den Fließtext ausdrücklich eine Systemschrift und
   lädt keine Webfonts („Keine Fremdhosts, keine Webfonts“). YOOtheme stellt
   dagegen `html { font-family: "PT Serif" }` ein — der ganze Fließtext, die
   Formulare und die Knöpfe standen dadurch in einer Serifenschrift, und
   sämtliche ch-Breiten lagen rund ein Prozent daneben, was einzelne Absätze
   eine Zeile länger machte. Die Überschriften behalten ihre eigene Serife. */
html, body, input, select, textarea, button { font-family: var(--hm-sans); }

/* --- Grundwerte --------------------------------------------------- */

body { background: var(--hm-leinen); color: var(--hm-text); }

.uk-section-default { background: #fff; }
.uk-section-muted   { background: var(--hm-blau-zart); }

/* Entwurf: 17 px, Zeile 29,75 (1.75), #24313b.
   Nur .uk-panel p, nicht .uk-container p: Letzteres traf auch die Zahlen im
   Zahlenband (p.uk-heading-small.hm-zahl) und war mit 0,1,1 spezifischer als
   deren Klassenregel — gemessen kamen 17 statt 30,4 px heraus. Der Fliesstext
   steckt ohnehin immer in einem uk-panel, das ist YOOthemes Textbaustein. */
.uk-panel p { font-size: 17px; line-height: 1.75; color: var(--hm-text); }

/* Der Entwurf setzt `p { margin: 0 0 1.15em }` und `p, li { max-width: 68ch }`
   ohne Ausnahme — auch am letzten Absatz eines Blocks. UIkit nimmt dem
   letzten Kind den unteren Rand (`.uk-panel > :last-child`), und genau daran
   lief die Seite auseinander: Über fünf Abschnitte summierten sich die
   fehlenden 19,55 px zu 80 px Versatz gegenüber dem Entwurf. */
.uk-panel p { margin-bottom: 1.15em; max-width: 68ch; }
.uk-panel > p:last-child { margin-bottom: 1.15em; }
/* Nur am Ende einer Spalte. Folgt noch ein Baustein, käme YOOthemes eigener
   Abstand von 20 px oben hinzu — im Entwurf fallen die beiden Ränder
   zusammen, hier addieren sie sich (gemessen 59 statt 40 px vor dem Knopf). */
.uk-panel:not(:last-child) > p:last-child { margin-bottom: 0; }
/* Zum Abwählen von Hand, wenn eine ganze Reihe folgt: Reihen sind Rasterzellen,
   ihre Ränder fallen nicht zusammen, und der Abstand käme doppelt. */
.hm-ohne-rand p:last-child { margin-bottom: 0; }

/* Inhaltsbreite. Der Entwurf setzt 1072 px Inhalt plus 24 px Rand je Seite;
   UIkit gibt dem Container 1200 px und 40 px Rand. Gemessen bei 1089 px
   Fenster: 1009 statt 1041 px Inhalt. */
.uk-container { max-width: 1120px; padding-left: 24px; padding-right: 24px; }

/* Der Auftakt der Unterseiten. Im Entwurf traegt der Abschnitt
   „sektion--schmal“ (Polster 5vw statt 8vw, oben wie unten) und die
   Inhaltsspalte „inhalt--schmal“ (44 statt 70 rem). UIkits Stufe „medium“
   trifft nur das obere Polster; unten kaeme sonst 8vw heraus — gemessen 87
   statt 54 px zwischen Vorspann und Bild. */
/* Zwei Klassen, weil das Abschnittspolster weiter unten aus .uk-section-large
   kommt und diese Regel sonst nur über die Reihenfolge gewänne — das ist zu
   zerbrechlich, wenn jemand die Datei umsortiert. */
.uk-section.hm-auftakt { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Ein Abschnitt, der direkt unter einem anderen anschließt, bekommt oben
   kein Polster. Ungleiche Polster über die Felder des Bausteins zu setzen
   funktioniert nicht: YOOtheme vergleicht padding_top mit padding_bottom und
   schrieb bei "none" oben und "large" unten trotzdem
   uk-padding-remove-vertical — beide Seiten standen dann auf 0. */
.uk-section.hm-ohne-oben { padding-top: 0; }

/* Der Abschnittskopf aus Rubrik und Überschrift. Der Entwurf hält ihn auf
   42 rem und setzt 2,75 rem bis zum Inhalt darunter; UIkits Reihenabstand
   liegt bei 40 px.

   Die Reihe darunter darf im Layout KEIN margin_top tragen: YOOtheme setzt
   dafür .uk-margin-medium-top, und alle uk-margin-Klassen stehen in
   theme.css mit !important. Ohne die Klasse gewinnt diese Regel hier. */
.uk-grid.hm-kopfzeile { max-width: 672px; margin-left: 0; }
.hm-kopfzeile > *      { padding-left: 0; }
.hm-kopfzeile + .uk-grid-margin { margin-top: 2.75rem; }

/* Mittig, nicht links am Containerrand: gemessen beginnt die Überschrift im
   Entwurf bei 209 px, nicht bei 24. Der eigene Spaltenabstand des Rasters
   muss dafür weg, sonst sind es 636 statt 656 px ab 229. */
.uk-grid.hm-schmal  { max-width: 656px; margin-left: auto; margin-right: auto; }
.hm-schmal > *      { padding-left: 0; }

/* Der Auftakt der Startseite teilt 1,3 zu 1, nicht hälftig. Gemessen bei
   1089 px: 544 px für Text, 418 für die Buchungstafel, 64 dazwischen. UIkit
   kennt keine solche Stufe, deshalb die Prozente von Hand — sie beziehen
   sich auf die Rasterbreite einschließlich des negativen Randes (1090 px),
   das Polster von 64 px steckt jeweils schon darin. Erst ab 64 em, darunter
   stehen die beiden im Entwurf untereinander. */
@media (min-width: 64em) {
  .hm-auftakt-raster > :first-child  { width: 55.75%; }
  .hm-auftakt-raster > :nth-child(2) { width: 44.25%; }
}
@media (max-width: 63.99em) {
  .hm-auftakt-raster > * { width: 100%; }
}

/* --- Überschriften ------------------------------------------------ */

.hm-h1, .hm-h2, .hm-h3, .hm-h3--liste, .hm-h3--ziel, .hm-h3--weitere,
.hm-zahl {
  font-family: var(--hm-serif);
  font-weight: 400;
  color: var(--hm-blau-tief);
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* Entwurf: 49,6 / 57,54 / -0,248. Der Rand unten kommt aus der gemeinsamen
   Regel `h1, h2, h3 { margin: 0 0 .6em }` — nachgemessen 29 px bis zum
   Vorspann, nicht 17. */
.hm-h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.16; margin-bottom: .6em; }

/* Entwurf: 33,6 / 40,99 / -0,168 / Rand unten 20,16 */
.hm-h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.22; margin-bottom: .6em; }

/* Der gewöhnliche h3 des Entwurfs: 19,2 / 23,42 / Rand unten .6em.
   Zwei Stellen weichen davon ab und haben eigene Klassen. */
.hm-h3 { font-size: 1.2rem; line-height: 1.22; margin-bottom: .6em; }

/* Entwurf .ziel h3: 18,4 / 22,45 / Rand unten 7,2 */
.hm-h3--ziel { font-size: 1.15rem; line-height: 1.22; margin-bottom: .45rem; }
/* Entwurf .ziel img: 1,1 rem bis zur Überschrift, sonst nichts. Bei uns kamen
   der Rand des Bildes, der Bausteinabstand darunter und der der Überschrift
   zusammen — gemessen 74 statt 18 px. */
.hm-ziele .hm-foto1610,
.hm-ziele .hm-foto1610 img { margin-bottom: 0; }
.hm-ziele .hm-foto1610 + * { margin-top: 1.1rem !important; }

/* Entwurf .ziel p: 15 / leise / ohne unteren Rand — nicht der Fliesstext. */
.hm-ziele p { font-size: .9375rem; color: var(--hm-leise); }
.hm-ziele p:last-child { margin-bottom: 0; }

/* Entwurf .weitere h3: 16,8 / Rand unten 16 */
.hm-h3--weitere { font-size: 1.05rem; line-height: 1.22; margin-bottom: 1rem; }

/* Entwurf .weitere: feine Linie darüber, 2 rem Polster, die Liste ab 46 em
   zweispaltig mit 0,7 rem Zeilen- und 2,5 rem Spaltenabstand. */
.hm-weitere {
  border-top: 1px solid var(--hm-blau-linie); padding-top: 2rem;
}
.hm-weitere-liste { gap: .7rem; }
@media (min-width: 46em) {
  .hm-weitere-liste { grid-template-columns: repeat(2, 1fr); gap: .7rem 2.5rem; }
}
.hm-weitere-liste strong { color: var(--hm-blau-tief); font-weight: 600; }

/* Der Abstand nach einer Überschrift ist deren eigener unterer Rand — im
   Entwurf 0,6 em, bei den Listenköpfen 0,9 rem. YOOtheme legt dem folgenden
   Baustein zusätzlich `* + .uk-margin { margin-top: 20px !important }` auf;
   gemessen kamen dadurch überall 20 px heraus statt 12 beziehungsweise 14.
   Nur !important kommt gegen !important an. */
.hm-h1 + *, .hm-h2 + *, .hm-h3 + *,
.hm-h3--ziel + *, .hm-h3--weitere + *, .hm-h3--liste + * { margin-top: 0 !important; }

/* Entwurf .listen h3: 16,8 / 20,5, Trennlinie darunter */
.hm-h3--liste {
  font-size: 1.05rem; line-height: 1.22;
  padding-bottom: .6rem; margin-bottom: .9rem;
  border-bottom: 1px solid var(--hm-blau-linie);
}

/* Die Rubrik ist ein eigener Textbaustein vor der Überschrift.
   Entwurf: 12 / 21 / Sperrung 2,04 px / #1f5f9c / Rand unten 16 */
/* YOOtheme setzt zwischen zwei Bausteinen einen eigenen Abstand (uk-margin).
   Zusammen mit dem Rand der Rubrik ergab das 40 statt 16 px bis zur
   Überschrift. Der Abstand kommt deshalb allein von der Rubrik. */
/* Der Rand gehoert an den Baustein, nicht an das span darin: Randwerte
   eines Blockkindes fallen mit denen des Elternabsatzes zusammen, und der
   steht bei UIkit auf 0 — gemessen kamen dann 0 statt 16 px heraus. */
.hm-rubrik-block { margin-bottom: 1rem; }
.hm-rubrik-block + * { margin-top: 0; }
.hm-rubrik {
  display: block; font-size: .75rem; font-weight: 600;
  letter-spacing: .17em; line-height: 1.75; text-transform: uppercase;
  color: var(--hm-blau);
}

/* --- Textbausteine ------------------------------------------------ */

/* Entwurf .vorspann: 18,4 / 31,28 / #5d6d79 / Rand unten 21,16 */
.hm-vorspann p {
  font-size: 1.15rem; line-height: 1.7; color: var(--hm-leise);
  max-width: 58ch; text-wrap: balance;
}

/* Entwurf .zitat: 24 / 36 / #12324c, Messinglinie links, Rand 32 */
.hm-zitat p {
  font-family: var(--hm-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.5; color: var(--hm-blau-tief); font-style: italic;
  border-left: 1px solid var(--hm-messing);
  padding-left: 1.75rem; margin: 2rem 0; max-width: 44ch;
}

/* Kurze Messinglinie. Entwurf: 48 x 1 px, Rand 28 oben und unten. */
hr.hm-zierlinie {
  width: 3rem; height: 1px; border: 0; background: var(--hm-messing);
  margin: 1.75rem 0;
}
/* Der Baustein danach bringt 40 px mit; im Entwurf gibt allein die Linie den
   Abstand vor — gemessen 41 statt 29 px bis zur nächsten Überschrift. */
.hm-zierlinie + * { margin-top: 0 !important; }

/* Entwurf .strecke figcaption: 13 / 22,75 / Sperrung 0,26 / #5d6d79 */
.hm-bildtext {
  display: block; font-size: .8125rem; line-height: 1.75;
  letter-spacing: .02em; color: var(--hm-leise);
}

/* --- Zahlenband ---------------------------------------------------- */

/* Entwurf .zahlen: zartblaues Band mit feiner Linie oben und unten, innen
   2 rem Polster. Der Abschnitt war 163 statt 125 px hoch, weil YOOtheme
   zwischen Zahl und Beschriftung 20 px setzt und der Absatz seinen unteren
   Rand behielt — im Entwurf sind es 0,35 rem und nichts darunter. */
.hm-zahlen-band {
  border-top: 1px solid var(--hm-blau-linie);
  border-bottom: 1px solid var(--hm-blau-linie);
}
.hm-zahl-block { margin-top: 0 !important; }
.hm-zahl-block p:last-child { margin-bottom: 0; }

/* Entwurf .zahlen b: 30,4 / 33,44 */
.hm-zahl { font-size: 1.9rem; line-height: 1.1; margin-bottom: 0; }
.hm-zahl-text {
  display: block; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--hm-leise); margin-top: .35rem;
}

/* --- Listen -------------------------------------------------------- */

/* Entwurf .listen li: 15,5 / 27,13 / #5d6d79, Punktabstand 8 px */
.hm-liste { margin: 0; padding: 0; display: grid; gap: .5rem; }
.hm-liste .el-item {
  position: relative; padding-left: 1.25rem; margin: 0;
  color: var(--hm-leise); font-size: .9688rem; line-height: 1.75;
}
.hm-liste .el-item::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--hm-blau);
}
/* UIkit setzt bei uk-list eigene Trennlinien und Abstände — beides weg. */
.hm-liste > * + * { border-top: 0; padding-top: 0; margin-top: 0; }

.hm-auszeichnung {
  display: flex; flex-wrap: wrap; gap: .4rem 1.75rem;
  font-size: .875rem; color: var(--hm-leise); margin: 1.5rem 0 0; padding: 0;
}
.hm-auszeichnung .el-item {
  position: relative; padding-left: 1.1rem; margin: 0; border-top: 0;
}
.hm-auszeichnung .el-item::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--hm-messing);
}

/* --- Spaltenabstände ------------------------------------------------ */

/* UIkit setzt Spaltenabstände nicht über `gap`, sondern über einen negativen
   Rand am Raster und ein Innenpolster an den Zellen. Wer nur `gap` setzt,
   ändert nichts. Der Entwurf staffelt die Abstände; UIkit kennt nur drei
   Stufen. Deshalb hier je Reihe der gemessene Wert.
   Gemessen bei 1089 px: ohne diese Regeln waren die Zweispalter 501 statt
   488,5 px breit, weil der Abstand 39 statt 64 px betrug. */
.hm-abstand-64,
.uk-grid-column-large { margin-left: -64px; }
.hm-abstand-64 > *,
.uk-grid-column-large > * { padding-left: 64px; }

.hm-strecke    { margin-left: -28px; }        /* Bildstrecke der Wohnung */
.hm-strecke > * { padding-left: 28px; }

.hm-zahlen     { margin-left: -16px; }        /* Zahlenband */
.hm-zahlen > * { padding-left: 16px; }

.hm-sinnbilder     { margin-left: -32px; }
.hm-sinnbilder > * { padding-left: 32px; }

.hm-ziele     { margin-left: -36px; }
.hm-ziele > * { padding-left: 36px; }

.hm-listen     { margin-left: -64px; }
.hm-listen > * { padding-left: 64px; }

/* YOOtheme laesst mit `.uk-grid.tm-grid-expand > * { flex-grow: 1 }` das
   letzte Element einer Reihe auf die volle Breite wachsen, wenn es allein
   steht. Der Entwurf rechnet dagegen mit festen Spalten: „Vor Ort“ war
   1026 statt 481 px breit, und auf dem Telefon wurde aus demselben Grund
   ausgerechnet die Küche das grosse Bild.
   Zwei Klassen im Selektor, weil YOOthemes Regel ebenfalls zwei führt. */
.uk-grid.hm-listen > *, .uk-grid.hm-ziele > *, .uk-grid.hm-strecke > *,
.uk-grid.hm-sinnbilder > *, .uk-grid.hm-zahlen > * { flex-grow: 0; }

/* Das Sechserraster auf „Schleswig entdecken“ steht 80 px unter den
   Sinnbildern (2,5 rem Rand der Liste plus ein Abstandhalter derselben Hoehe
   im Entwurf) und haelt zwischen seinen Zeilen 40 px. UIkit gibt zweiten und
   folgenden Zeilen 30 px ueber .uk-grid-margin — das ist eine Klasse, unsere
   auch, und marke.css kommt zuletzt. */
/* Zwei Klassen im Selektor, weil UIkits `.uk-grid + .uk-grid` ebenfalls zwei
   zaehlt — der Nachbarkombinator selbst erhoeht die Spezifitaet nicht. */
.uk-grid.hm-listen-weit { margin-top: 5rem; }
.hm-listen > .uk-grid-margin { margin-top: 2.5rem; }

/* Entwurf: die Beschreibungen im Sechserraster sind kleiner und leiser als
   der Fliesstext — 15,5 / 27,13 / #5d6d79, wie die Punkte in .hm-liste. */
.hm-listen-text p {
  font-size: .9688rem; line-height: 1.75; color: var(--hm-leise);
}

/* --- Bilder -------------------------------------------------------- */

.hm-foto43 img   { aspect-ratio: 1.33333; object-fit: cover; width: 100%; }
.hm-foto32 img   { aspect-ratio: 1.5;     object-fit: cover; width: 100%; }
.hm-foto1610 img { aspect-ratio: 1.6;     object-fit: cover; width: 100%;
                   margin-bottom: 1.1rem; }
/* Das Auftaktbild laeuft ueber die ganze Fensterbreite, nicht nur ueber die
   Inhaltsspalte. calc(50% - 50vw) holt es aus dem Container heraus, ohne dass
   man dessen Polster kennen muss — gemessen war es sonst 1026 statt 1074 px
   breit am Rechner und 342 statt 390 auf dem Telefon. */
.hm-panorama { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }
.hm-panorama img {
  width: 100%; max-width: none; height: clamp(14rem, 42vw, 32rem);
  object-fit: cover; object-position: center 42%;
}
/* Das Portraet wird vollstaendig gezeigt. Der Entwurf schneidet es auf 3:2
   (gemessen 384 x 256) und nimmt dem Kopf dabei Stirn und Kinn. Der Kunde
   hat es am 12.09.2026 anders gewollt; bei 384 px Breite wird es 477 px hoch
   und steht damit etwa so hoch wie der Text daneben.

   margin-inline: auto wirkt nur an einem Blockelement — ohne display: block
   stand das Bild linksbuendig. */
.hm-portraet img {
  display: block; width: 100%; max-width: 24rem; margin-inline: auto;
  height: auto; object-fit: contain; background: #f6f3ee;
}

/* Entwurf: 104 px am Rechner, mitwachsend bis 72 px auf dem Telefon */
.hm-sinnbild-bild img {
  width: clamp(4.5rem, 7vw, 6.5rem); height: clamp(4.5rem, 7vw, 6.5rem);
  object-fit: contain; opacity: .8; margin-inline: auto;
}
.hm-sinnbild-text {
  display: block; font-size: .875rem; line-height: 1.45; color: var(--hm-leise);
}
/* Entwurf: clamp(.9rem, 1.6vw, 1.25rem) zwischen Sinnbild und Beschriftung —
   gemessen 17,4 px. YOOthemes eigener Bausteinabstand lag bei 20, und zwar an
   beiden Bausteinen: unten am Bild und oben am Text. Beide fallen zusammen,
   der groessere gewinnt — den oberen allein zu aendern brachte deshalb nichts. */
/* `!important` steht hier, weil YOOthemes theme.css es selbst benutzt:
   `* + .uk-margin { margin-top: 20px !important }`. Ohne kommt keine Regel
   dagegen an, egal wie spezifisch — nachgemessen blieben es 20 px. */
/* Die Beschriftung steht im Entwurf in einem span ohne unteren Rand. Bei uns
   ist sie ein Textbaustein, also ein Absatz — der brächte 19,55 px mit und
   schöbe das Sechserraster darunter um ebenso viel nach unten. */
/* `:last-child` im Selektor, weil die allgemeine Regel weiter oben ebenfalls
   eine Pseudoklasse führt (.uk-panel > p:last-child, 0-2-1) und ein blosses
   .hm-sinnbild-block p mit 0-1-1 dagegen verliert — trotz späterer Stelle. */
.hm-sinnbild-block p:last-child { margin-bottom: 0; }
.hm-sinnbild-bild { margin-bottom: 0; }
.hm-sinnbild-bild + * { margin-top: clamp(.9rem, 1.6vw, 1.25rem) !important; }

/* --- Buchungstafel -------------------------------------------------- */

.hm-preis {
  font-size: 2.3rem; line-height: 1; margin-bottom: .5rem;
  font-family: var(--hm-serif); color: var(--hm-blau-tief);
}
.hm-preis-zusatz { color: var(--hm-leise); font-size: .9375rem; }
.hm-tafel-fuss { font-size: .8125rem; color: var(--hm-leise); }
hr.hm-tafel-linie { border-top: 1px solid var(--hm-linie); margin: 1.25rem 0; }

/* --- Knöpfe --------------------------------------------------------- */

/* YOOtheme dreht die Farben in hellen Kontexten um: .uk-light
   .uk-button-primary wird weiß mit dunklem Text. Eine allgemeine Regel
   verliert gegen diese Spezifität, deshalb die Kontexte mit abdecken.
   Aus dem Stadtseiten-Projekt übernommen. */
.uk-button-primary,
.uk-light .uk-button-primary,
.uk-section-primary:not(.uk-preserve-color) .uk-button-primary,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary,
.uk-tile-primary:not(.uk-preserve-color) .uk-button-primary {
  background: var(--hm-blau); color: #fff; border: 1px solid var(--hm-blau);
  border-radius: 2px; letter-spacing: .03em; text-transform: none;
  font-size: .9375rem; min-height: 50px; padding: .8rem 1.9rem;
  /* wie beim zurückhaltenden Knopf: Zeile 1,75 und Gewicht 400 ergeben
     53,6 px Höhe. Mit UIkits fester Zeile blieb es bei 50. */
  line-height: 1.75; font-weight: 400; font-family: inherit;
}
.uk-button-primary:hover,
.uk-light .uk-button-primary:hover {
  background: var(--hm-blau-dunkel); border-color: var(--hm-blau-dunkel); color: #fff;
}

/* Der zurückhaltende Knopf des Entwurfs (.knopf--linie): durchsichtig, blaue
   Schrift, dünne Linie in Hellblau. UIkits Vorgabe war grau auf Hellgrau,
   11 px hoch gesperrt und 40 px hoch — gemessen 240 x 40 statt 221 x 54. */
.uk-button-default,
.uk-light .uk-button-default,
.uk-section-primary:not(.uk-preserve-color) .uk-button-default,
.uk-section-secondary:not(.uk-preserve-color) .uk-button-default {
  background: transparent; color: var(--hm-blau);
  border: 1px solid var(--hm-blau-linie); border-radius: 2px;
  letter-spacing: .03em; text-transform: none;
  font-size: .9375rem; min-height: 50px; padding: .8rem 1.9rem;
  /* Zeile 1,75 wie im Fließtext (der Entwurf setzt font: inherit) und
     Gewicht 400: UIkit nimmt 600 und eine feste Zeile von 38 px — gemessen
     kamen 246 x 50 statt 221 x 54 px heraus. */
  line-height: 1.75; font-weight: 400; font-family: inherit;
}
.uk-button-default:hover,
.uk-light .uk-button-default:hover {
  background: var(--hm-blau-zart); border-color: var(--hm-blau); color: var(--hm-blau);
}

a { color: var(--hm-blau); text-underline-offset: .2em; }
a:hover { color: var(--hm-blau-dunkel); }

/* --- Fragen und Antworten ------------------------------------------- */

/* Der Entwurf setzt die Fragen dicht untereinander, getrennt nur durch eine
   Linie, und zeichnet den Pfeil aus zwei Rahmenkanten. UIkit legt stattdessen
   20 px zwischen die Einträge und setzt ein Plus als SVG. Gemessen: 42 px
   zwischen zwei Fragen statt 0, und ein Symbol, das es im Entwurf nicht gibt. */
.hm-fragen { margin-top: 2rem; }
.hm-fragen > * { border-bottom: 1px solid var(--hm-linie); }
/* UIkits Regel lautet .uk-accordion > :nth-child(n+2) und ist mit 0,2,0
   spezifischer als ein einfaches .hm-fragen > * — der Abstand blieb deshalb
   bei 20 px stehen. Gleiche Form, gleiche Spezifitaet, spaetere Stelle. */
.hm-fragen > :nth-child(n+2) { margin-top: 0; }

.hm-fragen .uk-accordion-title {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  /* Zeile 1.75 wie im Entwurf: 17 x 1,75 = 29,75, damit der Titel 67 px hoch
     wird. Mit 1.4 kamen 85 px heraus. */
  font-family: var(--hm-serif); font-size: 1.0625rem; line-height: 1.75;
  color: var(--hm-blau-tief); padding: 1.15rem 0; min-height: 48px;
  text-decoration: none;
}
/* Auch im geöffneten Zustand und beim Überfahren dieselbe Farbe — UIkit
   graut den offenen Titel sonst aus. */
.hm-fragen .uk-accordion-title:hover,
.hm-fragen .uk-open > .uk-accordion-title { color: var(--hm-blau-tief); }

/* UIkits Symbol weg, Pfeil des Entwurfs stattdessen. */
.hm-fragen .uk-accordion-icon { display: none; }
.hm-fragen .uk-accordion-title::after {
  content: ""; width: .55rem; height: .55rem; flex-shrink: 0;
  border-right: 1px solid var(--hm-blau);
  border-bottom: 1px solid var(--hm-blau);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s;
}
.hm-fragen .uk-open > .uk-accordion-title::after {
  transform: rotate(-135deg) translate(-4px, -4px);
}

.hm-fragen .uk-accordion-content { margin-top: 0; padding-bottom: 1.25rem; }
.hm-fragen .uk-accordion-content > :last-child { margin-bottom: 0; }
.hm-fragen .uk-accordion-content p { color: var(--hm-leise); margin: 0; }

/* --- Belegungsplan --------------------------------------------------- */

.hm-belegung table { border-collapse: collapse; font-size: .8rem; width: 100%; }
.hm-belegung td, .hm-belegung th {
  border: 1px solid var(--hm-linie); padding: .32rem .1rem;
  text-align: center; font-weight: 400;
}

/* --- Anfrageformular -------------------------------------------------- */

/* Formensprache aus dem Entwurf (.formular in prototyp-v3/assets/stil.css):
   ein Raster mit 1,35 rem Abstand, Paare nebeneinander ab 40 em. */
/* Der Entwurf stellt den Anfrageabschnitt in die schmale Spalte (44 rem).
   Ueber die volle Inhaltsbreite wirken die Felder verloren. */
.hm-formular { display: grid; gap: 1.35rem; max-width: 44rem; }
.hm-formular__paar > div { min-width: 0; }
@media (min-width: 40em) {
  .hm-formular__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
}

.hm-formular label {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--hm-leise); margin-bottom: .4rem;
}
.hm-formular input[type=date],
.hm-formular input[type=text],
.hm-formular input[type=email],
.hm-formular input[type=tel],
.hm-formular select,
.hm-formular textarea {
  /* font: inherit ist wichtig — mit einer eigenen Groesse erbt das Feld
     UIkits Zeilenhoehe und wurde 78 statt 53 px hoch. */
  width: 100%; min-width: 0; font: inherit; color: var(--hm-text);
  background: #fff; border: 1px solid var(--hm-blau-linie); border-radius: 2px;
  padding: .6rem .8rem; min-height: 48px;
}
.hm-formular textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.hm-formular :focus-visible { outline: 2px solid var(--hm-blau); outline-offset: 2px; }

.hm-zustimmung { display: flex; gap: .8rem; align-items: flex-start; }
.hm-zustimmung input {
  width: 1.3rem; height: 1.3rem; min-height: 0; flex-shrink: 0; margin-top: .3rem;
}
.hm-zustimmung label {
  font-size: .9rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--hm-leise); margin: 0; line-height: 1.6;
}
.hm-formular__fuss { font-size: .9rem; color: var(--hm-leise); margin-top: 1rem; }

/* Der Honigtopf muss für Menschen unsichtbar bleiben, für Vorlesegeräte aber
   erreichbar — display:none würde ihn auch für Skripte verstecken, die dann
   nichts eintragen und unerkannt durchkämen. */
.hm-honigtopf { position: absolute; left: -9999px; }

.hm-meldung { border-left: 3px solid var(--hm-messing); padding: 1rem 1.25rem; margin-bottom: 1.75rem; }
.hm-meldung--fehler { border-left-color: #a4343a; background: #fdf6f6; }
.hm-meldung--gut { border-left-color: #2f6b42; background: #f4f9f5; }
.hm-meldung p { margin: 0 0 .4rem; }
.hm-meldung ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* --- Belegungsplan ---------------------------------------------------- */

/* Tabelle am Rechner, Liste auf dem Telefon. Eine Tabelle mit 31 Spalten
   lässt sich auf schmalen Displays nur durch seitliches Wischen lesen —
   dort steht stattdessen, wann welche Zeiträume am Stück frei sind. */
.hm-belegung__tabelle { display: none; }
.hm-belegung__liste   { display: block; }
@media (min-width: 52em) {
  .hm-belegung__tabelle { display: block; overflow-x: auto; }
  .hm-belegung__liste   { display: none; }
  .hm-legende { display: flex; }
}

.hm-belegung table {
  border-collapse: collapse; font-size: .8rem; min-width: 34rem; width: 100%;
}
.hm-belegung th, .hm-belegung td {
  border: 1px solid var(--hm-linie); padding: .32rem .1rem;
  text-align: center; width: 2.6%; font-weight: 400; color: var(--hm-leise);
}
.hm-belegung thead th {
  font-size: .72rem; color: var(--hm-leise); background: var(--hm-blau-zart);
}
.hm-belegung th[scope="row"] {
  text-align: left; padding-inline: .6rem; white-space: nowrap; width: auto;
  color: var(--hm-blau-tief); font-family: var(--hm-serif); font-size: .875rem;
}

/* Nicht die Farbe trägt die Information, sondern der Helligkeitsunterschied:
   belegt ist gefüllt, frei ist leer. Das funktioniert auch bei
   Farbenblindheit und für ältere Augen. */
.hm-belegung .hm-frei      { background: #fff; color: #2f6b42; font-weight: 600; }
.hm-belegung .hm-belegt    { background: var(--hm-blau); color: #fff; }
.hm-belegung .hm-vergangen { color: #c3ced6; }

/* Wechseltage: halbe Kästchen.

   Ein Tag ist am Rand einer Buchung nicht ganz belegt — bis 10 Uhr ist die
   Wohnung noch bezogen, ab 15 Uhr wieder. Die Diagonale zeigt das, statt den
   Tag ganz zu füllen und damit einen halben Tag zu verschenken.

   Die Trennlinie muss von Ecke zu Ecke laufen, nicht im Winkel von 45 Grad:
   Die Zellen sind 26 mal 34 px, ein fester Winkel träfe die Ecken nicht. Die
   Schlüsselwörter „to bottom right“ leisten genau das — CSS legt die
   Verlaufsachse so, dass die Senkrechte durch die Mitte exakt durch die
   beiden anderen Ecken geht. Mit einem harten Wechsel bei 50 % entsteht
   daraus die Diagonale von unten links nach oben rechts.

   Oben links liegt der Vormittag, unten rechts der Nachmittag — die Zeit
   läuft, wie beim Lesen, nach rechts und nach unten. */
/* background-origin: border-box ist nötig, nicht Geschmackssache. In der
   Vorgabe padding-box wird der Verlauf über die Innenfläche gerechnet und
   danach in den Rahmen hinein verlängert. Die Diagonale trifft die Ecken
   dann um ein Pixel daneben, und an der weißen Hälfte blieb ein sichtbarer
   Saum stehen, der wie ein dickerer Rahmen aussah. Mit border-box läuft die
   Diagonale von Ecke zu Ecke des ganzen Feldes, und der Rahmen sieht aus wie
   an jedem anderen Tag auch. */
.hm-belegung .hm-anreise,
.hm-belegung .hm-abreise { background-origin: border-box; }
.hm-belegung .hm-anreise {
  background-image: linear-gradient(to bottom right, #fff 0 50%, var(--hm-blau-halb) 50% 100%);
}
.hm-belegung .hm-abreise {
  background-image: linear-gradient(to bottom right, var(--hm-blau-halb) 0 50%, #fff 50% 100%);
}

/* Warum an Wechseltagen ein helleres Blau und nicht das volle:

   Der Wochentag steht mittig in der Zelle und liegt damit genau auf der
   Diagonalen — über dem vollen Blau wäre er zur Hälfte dunkel auf dunkel.
   Der naheliegende Ausweg, ihn in die freie Ecke zu rücken, wurde
   nachgemessen und verworfen: Die Zelle misst 26 mal 34 px, „Mo“ bei .8 rem
   aber 17 px. Damit die Beschriftung vollständig auf einer Seite der
   Diagonalen bleibt, hätte sie auf rund 10 px schrumpfen müssen. Auf einer
   Seite, deren erste Entwurfsregel „lesbar für ältere Augen“ lautet, ist das
   der falsche Tausch.

   Also andersherum: Beschriftung mittig und in voller Größe, dafür die
   belegte Hälfte als Aufhellung des Fensterblaus. Nebenbei stimmt das auch
   inhaltlich besser: Ein Wechseltag ist weder frei noch belegt, und der
   Zwischenton sagt genau das.

   Also andersherum, und das ist der Kern: Die Beschriftung steht mittig, in
   voller Größe, und wird **zweimal** gezeichnet. Beide Kopien füllen die
   ganze Zelle, jede ist per clip-path auf ihre Hälfte beschnitten — dieselbe
   Diagonale wie beim Verlauf, deshalb dieselben Eckpunkte. Die eine Kopie
   steht im Grün der freien Tage, die andere in Weiß. Sichtbar ist eine
   Beschriftung, die genau auf der Diagonalen die Farbe wechselt: dunkel auf
   der weißen Hälfte, weiß auf der blauen.

   Damit ist der Zielkonflikt aufgelöst, statt in ihm einen Kompromiss zu
   suchen. Gemessen wurden vorher drei Kompromisse, alle schlechter:

     volles Blau, Beschriftung grün        1,04:1  halb unsichtbar
     volles Blau, Beschriftung dunkel      2,00:1  zu wenig
     aufgehelltes Blau, Grün der freien Tage  2,80:1  zu wenig
     aufgehelltes Blau, dunkleres Grün        5,29:1  reicht, aber die
                                                     Diagonale wird blass

   Mit den zwei Kopien sind es 6,4:1 auf der weißen und 6,6:1 auf der blauen
   Hälfte — und das volle Fensterblau bleibt, wie vom Kunden am 12.09.2026
   gewählt. */
.hm-belegung .hm-wechsel { position: relative; font-weight: 700; }
.hm-belegung .hm-wechsel > span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* Dieselbe Diagonale wie beim Verlauf: von unten links nach oben rechts. */
.hm-belegung .hm-wechsel > span:first-child { clip-path: polygon(0 0, 100% 0, 0 100%); }
.hm-belegung .hm-wechsel > span:last-child  { clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.hm-belegung .hm-anreise > span:first-child { color: var(--hm-gruen-tief); }
.hm-belegung .hm-anreise > span:last-child  { color: #fff; }
.hm-belegung .hm-abreise > span:first-child { color: #fff; }
.hm-belegung .hm-abreise > span:last-child  { color: var(--hm-gruen-tief); }

.hm-legende {
  display: none; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.1rem;
  font-size: .875rem; color: var(--hm-leise);
}
.hm-legende span { display: flex; align-items: center; gap: .5rem; }
.hm-legende i {
  width: .95rem; height: .95rem; display: inline-block; flex-shrink: 0;
  border: 1px solid var(--hm-linie);
}
.hm-legende__frei    { background: #fff; }
.hm-legende__belegt  { background: var(--hm-blau); border-color: var(--hm-blau); }
.hm-legende__wechsel {
  background: linear-gradient(to bottom right, #fff 0 50%, var(--hm-blau-halb) 50% 100%);
}

.hm-fenster { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.hm-fenster li {
  background: #fff; border: 1px solid var(--hm-blau-linie);
  border-left: 3px solid var(--hm-blau); padding: .9rem 1.1rem;
}
.hm-fenster b {
  display: block; font-family: var(--hm-serif); font-weight: 400;
  font-size: 1.0625rem; color: var(--hm-blau-tief); line-height: 1.35;
}
.hm-fenster span { font-size: .875rem; color: var(--hm-leise); }
.hm-fenster-hinweis,
.hm-keine-fenster { font-size: .875rem; color: var(--hm-leise); margin: 1rem 0 0; }
/* p davor, weil .uk-panel p (0-1-1) sonst 17 px durchsetzt. */
p.hm-stand, .hm-stand {
  font-size: .8125rem; color: var(--hm-leise); margin: 1rem 0 0;
  line-height: 1.75; max-width: 68ch;
}

.hm-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Nachträge aus der Messung --------------------------------------- */

/* min-height rechnet nur bei border-box das Polster mit ein. UIkit setzt das
   an diesen Stellen nicht, deshalb kamen 48 px Mindesthöhe OBEN DRAUF:
   Formularfelder wurden 69 statt 53 px hoch, Fragen-Titel 85 statt 67. */
.hm-formular input,
.hm-formular select,
.hm-formular textarea,
.hm-fragen .uk-accordion-title { box-sizing: border-box; }

/* font: inherit holt sich in YOOtheme 16/26 statt der 17/29,75 des Entwurfs —
   die Felder waren dadurch zu niedrig und die Schrift zu klein. */
.hm-formular input,
.hm-formular select,
.hm-formular textarea { font-size: 17px; line-height: 1.75; }

/* UIkit legt 20 px zwischen die Akkordeon-Einträge. Zwei Klassen am selben
   Element (.uk-accordion.hm-fragen) schlagen die Regel sicher, ohne
   !important. */
.uk-accordion.hm-fragen > * { margin-top: 0; }

/* UIkit hat für input[type=…] eine eigene Regel, die 16/26 setzt und mit
   0,2,1 spezifischer ist als .hm-formular input. Bei select und textarea
   griff unsere Angabe, bei den Eingabefeldern nicht — daher hier mit
   Typ-Angabe, damit die Spezifität gleichzieht. */
.hm-formular input[type=date],
.hm-formular input[type=text],
.hm-formular input[type=email],
.hm-formular input[type=tel] { font-size: 17px; line-height: 1.75; }

/* --- Buchungstafel, gemessen ------------------------------------------ */

/* Entwurf .tafel: weiß, 1 px Rahmen, 1,75 rem Polster (2 rem ab 64 em).
   YOOthemes Kartenstil bringt eigene Werte mit, deshalb hier ausdrücklich. */
.hm-tafel-inhalt {
  background: #fff; border: 1px solid var(--hm-blau-linie);
  padding: 1.75rem; margin: 0;
}
@media (min-width: 64em) { .hm-tafel-inhalt { padding: 2rem; } }

/* Preis und Zusatz auf einer Zeile, an der Grundlinie ausgerichtet. */
.hm-tafel-inhalt .hm-preis {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--hm-linie);
}
.hm-tafel-inhalt .hm-preis b {
  font-family: var(--hm-serif); font-size: 2.3rem; font-weight: 400;
  color: var(--hm-blau-tief); line-height: 1;
}
.hm-tafel-inhalt .hm-preis span { color: var(--hm-leise); font-size: .9375rem; }

/* Der Knopf geht im Entwurf über die volle Breite der Tafel. */
.hm-tafel-inhalt .uk-button { width: 100%; }
.hm-tafel-inhalt .hm-tafel-fuss {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .8125rem; color: var(--hm-leise); text-align: center; margin: 1rem 0 0;
}

/* Akkordeon: der Zwischenraum kam nicht vom Rand, sondern vom Innenpolster
   der Einträge (padding-top: 20px). Gemessen 22 px statt 1 px zwischen zwei
   Fragen — die Linie allein soll sie trennen. */
.uk-accordion.hm-fragen > * { margin-top: 0; padding-top: 0; }

/* Alle Felder gleich hoch. Der Entwurf kommt auf 53 px; bei uns lagen
   Auswahlfeld (48) und Eingabefelder (51) auseinander, was in einer Zeile
   nebeneinander sofort auffällt. */
.hm-formular input[type=date],
.hm-formular input[type=text],
.hm-formular input[type=email],
.hm-formular input[type=tel],
.hm-formular select { height: 53px; }

/* --- Text neben Bild -------------------------------------------------- */

/* vertical_align: 'middle' im Layout blieb wirkungslos — das Raster stand auf
   align-items: normal, beide Spalten wurden auf 558 px gestreckt und das Bild
   klebte oben. Der Entwurf richtet die Spalten mittig zueinander aus. */
.hm-paar { align-items: center; }

/* YOOtheme schreibt das Seitenverhältnis der Quelldatei als Inline-Stil ans
   Bild (style="aspect-ratio: 1200 / 561"). Dagegen kommt kein Selektor an,
   egal wie spezifisch — Inline schlägt alles ausser !important. Gemessen war
   das Bild dadurch 472 x 221 statt 472 x 315.

   !important steht hier bewusst und nur hier: Es ist der einzige Fall, in dem
   wir gegen eine Angabe am Element selbst arbeiten, und genau dafür gibt es
   das Mittel. Wer es entfernt, bekommt die Rohformate der Fotos zurück. */
.hm-foto43 img   { aspect-ratio: 1.33333 !important; }
.hm-foto32 img   { aspect-ratio: 1.5 !important; }
.hm-foto1610 img { aspect-ratio: 1.6 !important; }

/* --- Buchungstafel: Felder und Hinweis -------------------------------- */

.hm-tafel-formular { display: grid; gap: .85rem; margin-top: 1rem; }
.hm-tafel-felder { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.hm-tafel-felder > div { min-width: 0; }
@media (max-width: 26em) { .hm-tafel-felder { grid-template-columns: 1fr; } }

.hm-tafel-formular label {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--hm-leise); margin-bottom: .4rem;
}
.hm-tafel-formular input,
.hm-tafel-formular select {
  box-sizing: border-box; width: 100%; min-width: 0;
  font-size: 17px; line-height: 1.75; height: 53px;
  color: var(--hm-text); background: #fff;
  border: 1px solid var(--hm-blau-linie); border-radius: 2px; padding: .6rem .8rem;
}
.hm-tafel-formular .uk-button { width: 100%; margin-top: .15rem; }

/* Hinweis aus der Tafel — kein Fehler, sondern ein Wink. */
.hm-meldung--hinweis {
  background: var(--hm-blau-zart); border-left-color: var(--hm-blau);
}

/* Die Legende war unsichtbar: Meine Regel .hm-legende{display:none} stand
   NACH der Medienabfrage, die sie einblenden sollte — bei gleicher
   Spezifität gewinnt die spätere Stelle. Deshalb hier noch einmal, mit
   zwei Klassen, damit die Reihenfolge keine Rolle mehr spielt. */
@media (min-width: 52em) {
  .hm-belegung .hm-legende { display: flex; margin-top: 1.1rem; }
}

/* --- Handybreite ------------------------------------------------------ */

/* Der Entwurf behält auf dem Telefon zwei Spalten für Bildstrecke,
   Zahlenband und Sinnbilder. UIkit stapelt unterhalb seines s-Umbruchs
   (640 px) alles untereinander — gemessen bei 390 px: eine Spalte statt
   zwei, und die Seite wurde dadurch unnötig lang.

   Die Abstände sind auf dem Telefon enger als am Rechner:
   Bildstrecke 20 statt 28, Sinnbilder 24 statt 32 px. */
@media (max-width: 639px) {
  /* Reihen, die auf dem Telefon untereinander stehen, brauchen keinen
     Spaltenabstand mehr. Der blieb sonst als Innenpolster an der Zelle
     haengen — die Buchungstafel begann dadurch bei -40 statt 24 px, weil
     ihre weisse Karte auf der Zelle liegt. */
  .uk-grid-column-large,
  .hm-paar, .hm-listen, .hm-ziele { margin-left: 0; }
  .uk-grid-column-large > *,
  .hm-paar > *, .hm-listen > *, .hm-ziele > * { padding-left: 0; }

  .hm-strecke > *,
  .hm-zahlen > *,
  .hm-sinnbilder > * { width: 50%; }

  .hm-strecke        { margin-left: -20px; }
  .hm-strecke > *    { padding-left: 20px; }
  .hm-sinnbilder     { margin-left: -24px; }
  .hm-sinnbilder > * { padding-left: 24px; }

}

/* --- Abschnittspolster ------------------------------------------------ */

/* Der Entwurf staffelt die Polster mit der Fensterbreite:
   .sektion        clamp(3.5rem, 8vw, 6.5rem)   →  56 px am Telefon, 104 am Rechner
   .auftakt__raster clamp(2.5rem, 5vw, 4rem)    →  40 px am Telefon,  64 am Rechner
   .zahlen ul      2rem                         →  32 px überall

   UIkit kennt nur feste Stufen — gemessen bei 390 px: 70 statt 56 px bei den
   grossen Abschnitten, 40 statt 32 beim Zahlenband. Deshalb hier die Formeln
   des Entwurfs statt der Stufen. */
.uk-section-large  { padding-top: clamp(3.5rem, 8vw, 6.5rem);
                     padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.uk-section-medium { padding-top: clamp(2.5rem, 5vw, 4rem);
                     padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.uk-section-small  { padding-top: 2rem; padding-bottom: 2rem; }

/* UIkits Listenzeichen abschalten, falls im Layout doch eines gesetzt wird —
   wir zeichnen die Punkte selbst, sonst steht "– •" vor jedem Eintrag. */
.hm-liste > ::before,
.hm-auszeichnung > ::before { content: none; }
.hm-liste .el-item::before,
.hm-auszeichnung .el-item::before { content: ""; }

/* --- Buchungstafel: Abstände, gemessen gegen den Entwurf --------------- */

/* Der Entwurf gibt dem Formular in der Tafel 1,35 rem zwischen den Blöcken
   und 0,85 rem zwischen Anreise und Abreise. Gemessen hatte ich überall
   0,85 rem — das wirkte gedrängt. */
.hm-tafel-formular { gap: 1.35rem; }
.hm-tafel-felder   { gap: .85rem; }

@media (max-width: 639px) {
  /* Stehen die Spalten untereinander, setzt UIkit 20 px dazwischen. Der
     Entwurf nimmt dort 2,5 rem — die Tafel klebte sonst an der Liste. */
  .uk-grid-column-large > .uk-grid-margin,
  .hm-paar > .uk-grid-margin,
  .hm-listen > .uk-grid-margin,
  .hm-ziele > .uk-grid-margin { margin-top: 2.5rem; }
}

/* --- Kopfzeile --------------------------------------------------------- */

/* YOOtheme baut Kopf und Fuss aus Widget-Bereichen (logo, navbar, header,
   bottom). Die Inhalte stehen dort als HTML-Widgets; die Gestaltung kommt
   von hier und folgt dem Entwurf. */
.tm-header,
.tm-header-mobile {
  background: rgba(252,251,249,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hm-linie);
}
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container { background: transparent; }
/* Der Entwurf gibt Kopfzeile und Handyleiste dieselbe Hoehe: 4,75 rem. */
.tm-header .uk-navbar,
.tm-header-mobile .uk-navbar { min-height: 4.75rem; }
.tm-header-mobile .uk-navbar-item,
.tm-header-mobile .uk-navbar-toggle { min-height: 0; }

/* Entwurf .kopf__innen: 1,5 rem zwischen Marke, Menü und Knopf, alles mittig
   zueinander. UIkit nimmt 30 px und streckt jedes Widget auf 80 px Höhe —
   damit passte der Knopf nicht mehr neben das Menü und rutschte in eine
   zweite Zeile.

   Achtung: Ein früherer Versuch, hier `height: 4.75rem` zu erzwingen, hat den
   Kopf zerlegt (Marke und Menü lagen übereinander). Der Unterschied ist, dass
   min-height nur die untere Schranke aufhebt und die Ausrichtung dem Flexbox-
   Kontext überlässt, statt eine feste Höhe vorzuschreiben. */
.tm-header .uk-navbar-left,
.tm-header .uk-navbar-right { align-items: center; gap: 1.5rem; }
.tm-header .uk-navbar-item { min-height: 0; }
/* Menü und Knopf bleiben nebeneinander. Der Entwurf hat bei 1089 px sieben
   Pixel Luft; unsere Beschriftungen setzen minimal breiter, und aus den
   fehlenden elf Pixeln wurde sonst eine zweite Zeile — also die doppelte
   Kopfhöhe. Lieber rückt das Menü um diese elf Pixel zusammen. */
.tm-header .uk-navbar-right { flex-wrap: nowrap; }
.tm-header .uk-navbar-left  { flex-shrink: 0; }

.hm-marke { display: flex; align-items: center; gap: .8rem; text-decoration: none; flex-shrink: 0; }
.hm-marke img { width: 42px; height: 42px; object-fit: contain; }
.hm-marke__name {
  font-family: var(--hm-serif); font-size: 1.2rem; color: var(--hm-blau-tief);
  display: block; line-height: 1.2; letter-spacing: .01em;
}
.hm-marke__ort {
  font-size: .68rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--hm-leise); display: block;
  /* Ohne das bricht „Schleswig an der Schlei“ in zwei Zeilen um und die
     Marke wird 58 statt 42 px hoch. */
  white-space: nowrap;
}

/* Die aktuelle Seite wird allein durch die Farbe gekennzeichnet — kein
   Unterstrich. Ausdrücklicher Wunsch des Kunden vom 11.09.2026. */
/* Entwurf .navi ul: Abstand 0,25 rem zwischen den Einträgen. UIkit nimmt 30
   und sperrt die Schrift auf 2 px — die Leiste war dadurch 835 statt 607 px
   breit, der Knopf passte nicht mehr daneben und rutschte in eine zweite
   Zeile. Genau das machte die Kopfzeile doppelt so hoch. */
.uk-navbar-nav { gap: .25rem; }
.uk-navbar-nav > li > a {
  min-height: 48px; padding: 0 .9rem; font-size: .9375rem;
  letter-spacing: normal;
  color: var(--hm-text); text-transform: none; font-family: inherit;
  transition: color .18s ease;
}
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li.current-menu-item > a { color: var(--hm-blau); }
.uk-navbar-nav > li > a::before { display: none; }

/* --- Fusszeile --------------------------------------------------------- */

.tm-bottom {
  background: #0e2233; color: #9fb4c4;
  padding-top: 3.5rem; padding-bottom: 2rem;
  /* Der Fuss erbt im Entwurf den Fliesstext: 17 px, Zeile 1,75. UIkit gibt
     ihm 16 / 1,625 — Anschrift und Verweise waren dadurch zehn Pixel
     flacher als vorgesehen. */
  font-size: 1.0625rem; line-height: 1.75;
}
.tm-bottom h3 {
  line-height: 1.22;
  color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.tm-bottom a { color: #c3d4e0; text-decoration: none; }
.tm-bottom a:hover { color: #fff; text-decoration: underline; }
.tm-bottom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.tm-bottom li a { display: inline-flex; align-items: center; min-height: 38px; }
/* Ohne margin-bottom: 0 haengt UIkits Absatzrand unter der Anschrift und
   schiebt die untere Leiste um 20 px nach unten. */
.tm-bottom address { font-style: normal; line-height: 2; margin-bottom: 0; }
.tm-bottom p { color: #9fb4c4; }

.hm-fuss__raster { display: grid; gap: 2.5rem; }
@media (min-width: 46em) {
  .hm-fuss__raster { grid-template-columns: 1.5fr 1fr 1fr; gap: 4rem; }
}
.hm-fuss__marke {
  font-family: var(--hm-serif); font-size: 1.3rem; color: #fff;
  margin-bottom: 1rem; display: block;
}
.hm-fuss__unten {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
  font-size: .8125rem;
}

/* Die Kopfzeile ist 237 statt 77 px hoch — der Widget-Bereich streckt sich im
   Navbar-Element. Ein Versuch, ihm Hoehe und Ausrichtung aufzuzwingen, hat
   ihn aus dem Fluss geworfen: Marke und Menue lagen uebereinander, und das
   Hamburger-Symbol erschien am Rechner. Deshalb wieder entfernt.

   Das gehoert bei aktivem Theme in Ruhe nachgemessen — im Vorschaumodus
   fehlen Kopf und Fuss ganz, weil Widget-Bereiche und Menuepositionen je
   Theme gespeichert werden und dort die des aktiven Themes gelten. */

/* Bildstrecke der Startseite auf schmalen Displays: Der Wohn- und Essbereich
   steht gross oben, Schlafzimmer und Kueche darunter nebeneinander.

   Der Entwurf zeigt dort alle drei gleich gross. Der Kunde hat sich am
   12.09.2026 anders entschieden — und er hat recht: Das grosse Bild ist der
   Raum, in dem man sich aufhaelt, und es ist das erste, was auf dem Telefon
   zu sehen ist.

   Nicht zu verwechseln mit dem alten Fehler: Vorher wurde die Kueche gross,
   weil UIkit ein allein stehendes letztes Element wachsen laesst. Das ist an
   der Ursache behoben (flex-grow: 0 weiter oben); hier steht jetzt eine
   gewollte Ausnahme, keine Kruecke.

   Der Rundgang auf der Wohnungsseite ist ausgenommen — dort stehen vier
   gleich grosse Bilder. */
@media (max-width: 639px) {
  .hm-strecke:not(.hm-strecke--zwei) > :first-child { width: 100%; }
}

/* --- Unterseite „Kontakt und Anfahrt“ --------------------------------- */

/* Entwurf .tafel: weisser Kasten mit hellblauem Rahmen, Polster 1,75 rem
   (ab 64 em 2 rem). Er liegt im Textbaustein, nicht auf der Rasterzelle. */
.hm-kontakttafel {
  background: #fff; border: 1px solid var(--hm-blau-linie); padding: 1.75rem;
}
@media (min-width: 64em) { .hm-kontakttafel { padding: 2rem; } }
/* Die Rubrik steht hier als blosses span im Textbaustein, nicht als eigener
   Baustein mit .hm-rubrik-block — der Abstand darunter fehlte dadurch. */
.hm-kontakttafel .hm-rubrik { margin-bottom: 1rem; }
.hm-anschrift {
  font-style: normal; line-height: 2; font-size: 1.05rem;
  color: var(--hm-text); margin: 0;
}
.hm-kontaktzeilen { margin-bottom: 1.5rem !important; }
.hm-knopf-breit { width: 100%; }

/* --- Unterseite „Preise und Verfügbarkeit“ ---------------------------- */

/* Entwurf .aufstellung: Linie oben in Hellblau, je Zeile 1 rem Polster und
   eine feine Trennlinie, Bezeichnung links, Wert rechts in der Serife.
   Die Summenzeile bekommt oben eine dunkle Linie und ist etwas grösser. */
.hm-aufstellung ul {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--hm-blau-linie);
}
.hm-aufstellung li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: 1rem 0; border-bottom: 1px solid var(--hm-linie);
  max-width: none; margin: 0;
}
.hm-aufstellung li::before { content: none; }
/* Der Entwurf laesst die Zeilen den Fliesstext erben: 17 / 29,75. UIkit
   stellt Listen auf 16 px, die Zeilen waren dadurch 6 px flacher. */
.hm-aufstellung li { font-size: 17px; line-height: 1.75; }
.hm-aufstellung li:last-child { border-bottom: 0; }
.hm-aufstellung .hm-summe {
  border-top: 1px solid var(--hm-blau-tief); font-size: 1.05rem;
}
.hm-aufstellung .hm-summe .hm-wert,
.hm-aufstellung .hm-summe span:first-child { color: var(--hm-blau-tief); }
.hm-aufstellung small { display: block; color: var(--hm-leise); font-size: .8125rem; }
.hm-aufstellung .hm-wert {
  white-space: nowrap; font-family: var(--hm-serif);
  font-size: 1.1rem; color: var(--hm-blau-tief);
}

/* Der leise Zusatz unter der Wochenrechnung: 15 / #5d6d79, 1,25 rem Abstand */
.hm-kleingedruckt { margin-top: 1.25rem !important; }
.hm-kleingedruckt p { font-size: .9375rem; color: var(--hm-leise); }

/* --- Unterseite „Die Wohnung“ ----------------------------------------- */

/* Der Grundriss wird vollstaendig gezeigt, nicht beschnitten. Der Entwurf
   steckt ihn in .bildtext und schneidet ihn dadurch auf 3:2 — dabei fehlen
   Bad und Eingang am unteren Rand. Der Kunde hat das am 12.09.2026
   ausdruecklich anders gewollt: „muss komplett zu sehen sein und darf nicht
   abgeschnitten sein“. Also das Rohformat 1:1, 481 x 481 px. */
.hm-grundriss img {
  border: 1px solid var(--hm-blau-linie);
  width: 100%; height: auto; object-fit: contain;
}

/* Der Rundgang. Im Entwurf ist die Bildunterschrift eine figcaption:
   13 px, Sperrung 0,02 em, leise, 0,7 rem Abstand zum Bild — kein
   Fliesstext und keine Serife. Der Raumname davor ist schlicht fett. */
.hm-strecke-text p {
  font-size: .8125rem; line-height: 1.75; letter-spacing: .02em;
  color: var(--hm-leise); padding-top: .7rem;
}
/* :last-child im Selektor, sonst gewinnt die allgemeine Regel
   .uk-panel > p:last-child (0-2-1) und die Bildunterschrift waere 15 px
   hoeher als im Entwurf. */
.hm-strecke-text p:last-child { margin-bottom: 0; }
.hm-strecke-text { margin-top: 0 !important; }
/* Das Bild darueber bringt sonst 20 px unteren Rand mit; im Entwurf sitzt die
   figcaption unmittelbar am Bild und haelt allein ihr Polster von 0,7 rem. */
.hm-strecke-bild { margin-bottom: 0; }
.hm-strecke > .uk-grid-margin { margin-top: 28px; }

/* --- Unterseite „Haus und Name“ --------------------------------------- */

.hm-bildnis img { background: #f6f3ee; }
/* min(), nicht 40rem: auf dem Telefon war das Bild 600 px breit und lief aus
   der Seite heraus — sichtbar wurde es nur nicht, weil YOOtheme den Körper
   auf overflow: clip stellt. */
.hm-gemaelde img { max-width: min(40rem, 100%); display: block; }
.hm-quellen p { font-size: .9375rem; color: var(--hm-leise); }

/* Das Porträt steht im Entwurf als figure rechts im Text (.bildnis--seite:
   float right, 15 rem breit, 2 rem Abstand nach links). Bei uns sind Bild und
   Unterschrift zwei getrennte Bausteine, deshalb fliessen beide nach rechts;
   die Unterschrift räumt nach rechts auf und landet dadurch unter dem Bild.

   UIkit gibt jedem Textbaustein einen Clearfix (.uk-panel::after{clear:both}).
   Der schöbe den Fliesstext unter das Bild statt daneben — deshalb wird er
   für die nachfolgenden Bausteine abgeschaltet. */
.hm-bildnis-seite { float: right; width: 15rem; margin: 0 0 0 2rem !important; }
.hm-bildnis-text  { float: right; clear: right; width: 15rem;
                    margin: 0 0 1.5rem 2rem !important; }
.hm-bildnis-text p {
  font-size: .8125rem; color: var(--hm-leise); line-height: 1.5;
  padding-top: .8rem; margin-bottom: 0;
}
.hm-bildnis-seite ~ .uk-panel::after { clear: none; }
/* UIkit stellt .uk-panel auf display:flow-root. Das ist ein eigener
   Formatierungskontext — der Absatz stellte sich neben das Bild statt
   darum herum zu laufen und war 384 statt 623 px breit. */
.hm-bildnis-seite ~ .uk-panel { display: block; }

/* Die Unterschrift unter dem Gemälde läuft dagegen über die volle Breite. */
.hm-bildnis-text--breit { float: none; width: auto; margin: 0 !important; }

/* Auf schmalen Displays steht das Porträt mittig über dem Text, nicht daneben
   — sonst bliebe für den Fließtext eine zu schmale Spalte. So macht es der
   Entwurf ab 44 em abwärts. */
@media (max-width: 44em) {
  .hm-bildnis-seite,
  .hm-bildnis-text { float: none; width: auto; max-width: 18rem;
                     margin: 0 auto !important; }
  .hm-bildnis-text { margin-bottom: 2rem !important; }
}
.hm-bildnis-text--breit p { max-width: none; }

/* Der Entwurf setzt .bildnis.abstand{clear:both}: das Gemälde beginnt erst
   unterhalb des umflossenen Porträts. */
.hm-gemaelde { clear: both; margin-bottom: 0; }

/* Ein Bildpaar innerhalb der schmalen Spalte. Der Spaltenabstand kann hier
   nicht über den negativen Rand des Rasters kommen — der würde die mittige
   Ausrichtung von .hm-schmal aufheben. Stattdessen tragen die beiden Zellen
   je 32 px Polster nach innen: 656 = 2 x 296 + 64. */
.hm-schmal-paar > :first-child  { padding-right: 32px; }
.hm-schmal-paar > :nth-child(2) { padding-left: 32px; }

/* Hinweiskasten: sagt, was NICHT belegt ist. Steht bewusst abgesetzt. */
.hm-hinweis {
  background: var(--hm-blau-zart); border-left: 2px solid var(--hm-blau);
  padding: 1.1rem 1.35rem;
}
.hm-hinweis p { font-size: .9375rem; margin: 0; }

/* --- Rechtstexte ------------------------------------------------------- */

/* Impressum und Datenschutzerklärung kommen als ein Textbaustein aus dem
   eRecht24-Konto. Ihre Zwischenüberschriften sind h2 und h3 ohne eigene
   Klasse — hier bekommen sie die Schrift des Entwurfs. */
.hm-rechtstext h2 {
  font-family: var(--hm-serif); font-weight: 400; color: var(--hm-blau-tief);
  font-size: 1.5rem; line-height: 1.22; letter-spacing: -.005em;
  margin: 2.5rem 0 .6em;
}
.hm-rechtstext h3 {
  font-family: var(--hm-serif); font-weight: 400; color: var(--hm-blau-tief);
  font-size: 1.2rem; line-height: 1.22; margin: 1.75rem 0 .6em;
}
.hm-rechtstext > :first-child { margin-top: 0; }
.hm-rechtstext ul { margin: 0 0 1.15em; padding-left: 1.25rem; }
.hm-rechtstext li { color: var(--hm-text); font-size: 17px; line-height: 1.75; }