/* =========================================================
   WORDUP – Impressum & Datenschutz (Rechtstext-Layout)
   Header/Footer via Muster. Palette & Schrift wie ip-fuer-unternehmer.de.
   ========================================================= */
:root{
  --blau-tief:#002d4a; --blau:#00406b;
  --gold:#c8be00; --gold-warm:#d0c400; --gold-text:#8a7d00;
  --grau:#3a3a38; --grau-hell:#6d6d68;
  --creme:#f6f4ec; --linie:#e5e2d6; --papier:#ffffff;
  --font-body:"ff-meta-web-pro","FF Meta Pro",system-ui,-apple-system,sans-serif;
  --font-cond:"ff-meta-web-pro-condensed","FF Meta Pro Condensed",system-ui,sans-serif;
}

/* ---------------------------------------------------------
   ACHTUNG: DER BLOCK UNTEN GREIFT AUF /impressum-datenschutz/ NICHT.
   Er adressiert .legal-content — diese Klasse kommt auf der Seite
   nicht vor. Die Seite nutzt .legal-main / .legal-grid /
   .legal-privacy; deren Regeln stehen am DATEIENDE.
   Nicht geloescht, weil ungeprueft ist, ob eine andere Seite den
   Block noch braucht. Vor dem Loeschen: ueber Asset CleanUp
   entladen, Seiten kontrollieren, dann streichen.
   --------------------------------------------------------- */

/* Breite erzwingen (Theme begrenzt sonst auf 645px) – schmalere Spalte für Lesbarkeit */
.legal-content.alignfull,.legal-content{max-width:820px !important;margin-left:auto !important;margin-right:auto !important;padding-left:24px;padding-right:24px;}
.legal-content > *{max-width:none;}

/* Kopf */
.legal-content{padding:64px 24px 72px;}
.legal-content .legal-eyebrow{font-family:var(--font-cond);font-size:14px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-text);font-weight:600;margin:0 0 12px;}
.legal-content h1.legal-h1{font-family:var(--font-cond);font-size:clamp(40px,5vw,60px);line-height:1.02;
  font-weight:600;color:var(--blau);letter-spacing:0.03em;text-transform:uppercase;margin:0 0 14px;}
.legal-content .legal-stand{font-size:14.5px;color:var(--grau-hell);margin:0 0 8px;}

/* Trenner */
.legal-content .legal-sep{border:none;border-top:2px solid var(--linie);max-width:none;margin:36px 0;}

/* Überschriften */
.legal-content h2.pj-h2{font-family:var(--font-cond);font-size:clamp(26px,3vw,34px);font-weight:600;
  color:var(--blau);letter-spacing:0.02em;margin:34px 0 18px;}
.legal-content h3.pj-h3{font-family:var(--font-cond);font-size:19px;font-weight:600;color:var(--blau-tief);
  margin:28px 0 10px;letter-spacing:0.02em;}

/* Fließtext */
.legal-content p{font-size:15.5px;line-height:1.75;color:var(--grau);margin:0 0 14px;}
.legal-content a{color:var(--blau);text-decoration:underline;text-underline-offset:2px;word-break:break-word;}
.legal-content ul,.legal-content ol{font-size:15.5px;line-height:1.7;color:var(--grau);
  margin:0 0 16px;padding-left:24px;}
.legal-content li{margin:5px 0;}

/* Platzhalter – auffällig, damit nichts übersehen wird */
.legal-content .pj-platzhalter{background:#fffbe6;border:1px dashed var(--gold-warm);
  color:#7a6f00;font-family:var(--font-cond);font-size:14px;letter-spacing:.02em;
  padding:12px 16px;border-radius:8px;margin:0 0 16px;}

/* ---------- MOBILE ANSICHT ----------
   Diese Datei hatte bisher KEINE Media Query. Auf schmalen
   Bildschirmen lief der Text nach rechts aus dem Bild:
   - die H1 steht in Versalien mit clamp(...,5vw,60px); lange Woerter
     wie "DATENSCHUTZERKLAERUNG" passen bei 360px in keiner Groesse
     mehr in eine Zeile
   - word-break:break-word stand nur bei a, nicht bei Ueberschriften
   - das Padding von 24px blieb auch bei sehr schmalen Geraeten
   ------------------------------------------------------------- */
@media(max-width:700px){
  .legal-content.alignfull,.legal-content{
    padding-left:20px;
    padding-right:20px;
  }
  .legal-content{padding:44px 20px 56px;}
  .legal-content h1.legal-h1{
    font-size:clamp(28px,7.5vw,40px);
    line-height:1.08;
  }
  .legal-content h2.pj-h2{font-size:clamp(22px,5.5vw,28px);}
  .legal-content h3.pj-h3{font-size:17px;}
  .legal-content p,
  .legal-content ul,
  .legal-content ol{font-size:15px;}
  .legal-content ul,.legal-content ol{padding-left:20px;}
}
@media(max-width:400px){
  .legal-content.alignfull,.legal-content{
    padding-left:16px;
    padding-right:16px;
  }
  .legal-content{padding:36px 16px 48px;}
}

/* Lange Woerter und URLs umbrechen lassen, statt sie ueberlaufen
   zu lassen. Gilt in jeder Breite, nicht nur mobil. */
.legal-content h1.legal-h1,
.legal-content h2.pj-h2,
.legal-content h3.pj-h3,
.legal-content p,
.legal-content li,
.legal-content .pj-platzhalter{
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}

/* =========================================================
   IMPRESSUM & DATENSCHUTZ — LIVE GENUTZTE REGELN
   Uebernommen am 26.08. aus dem <style>-Block, der bisher im
   Seiteninhalt von /impressum-datenschutz/ stand.
   Die Seite nutzt .legal-main / .legal-grid / .legal-privacy —
   NICHT .legal-content aus dem Block darueber.

   HOHE SPEZIFITAET (html body) mit Absicht: Als Inline-Block stand
   das Styling ganz unten im Dokument und gewann dadurch automatisch.
   Als Datei ist die Ladereihenfolge gegenueber wordup.css und
   unterseiten.css nicht garantiert.
   ========================================================= */

/* ---------- Rahmen ---------- */
html body .legal-main{padding:70px 0 90px;background:#fff}
html body .legal-main .wrap{max-width:1180px;margin:0 auto;padding:0 40px}
html body .legal-grid{display:grid;grid-template-columns:0.85fr 1.6fr;gap:56px;align-items:start}
/* Grid-Spalten duerfen schmaler werden als ihr laengster Inhalt.
   Ohne min-width:0 zwingt eine lange URL im Datenschutztext die
   Spalte auf ihre Breite und die ganze Seite laeuft nach rechts
   aus dem Bild. */
html body .legal-grid,
html body .legal-grid>*{min-width:0}

/* ---------- Impressum-Karte ---------- */
html body .legal-card{background:var(--creme);border-radius:12px;padding:34px 32px;border-left:4px solid var(--gold-warm)}
html body .legal-imprint-name{font-family:var(--font-cond);letter-spacing:0.02em;font-size:22px;color:var(--blau);font-weight:600;margin-bottom:14px}
html body .legal-imprint-body{font-family:var(--font-body);font-size:16px;line-height:1.8;color:var(--grau)}
html body .legal-imprint-body a{color:var(--blau);text-decoration:none;border-bottom:1px solid var(--gold-warm)}
html body .legal-imprint-body a:hover{color:var(--gold-text)}
html body .legal-imprint-meta{margin-top:18px;padding-top:18px;border-top:1px solid var(--linie);font-size:14px;line-height:1.7;color:var(--grau-hell)}

/* ---------- Datenschutztext ---------- */
html body .legal-privacy{font-family:var(--font-body);font-size:16px;line-height:1.75;color:var(--grau)}
html body .legal-privacy>h2:first-child,
html body .legal-h2{font-family:var(--font-cond);font-size:30px;color:var(--blau);font-weight:600;margin:0 0 24px;letter-spacing:0.02em}
html body .legal-privacy h2,
html body .legal-privacy h3,
html body .legal-privacy h4,
html body .legal-privacy h5{font-family:var(--font-cond) !important;color:var(--blau) !important;font-weight:600 !important;line-height:1.25;margin:34px 0 12px;letter-spacing:0.02em}
html body .legal-privacy h2{font-size:26px}
html body .legal-privacy h3{font-size:21px}
html body .legal-privacy h4{font-size:18px}
html body .legal-privacy h5{font-size:16px}
html body .legal-privacy p{margin:0 0 16px}
html body .legal-privacy strong{color:var(--blau);font-weight:600}
html body .legal-privacy a{color:var(--blau)}
html body .legal-privacy a:hover{color:var(--gold-text)}
html body .legal-privacy ul{margin:0 0 18px 22px;padding:0;list-style:disc}
html body .legal-privacy ol{margin:0 0 18px 22px;padding:0}
html body .legal-privacy li{margin-bottom:10px;line-height:1.7}
html body .legal-privacy hr{border:none;border-top:1px solid var(--linie);margin:34px 0}

/* Im Datenschutztext stehen lange URLs als REINER TEXT, nicht als
   Link. word-break galt bisher nur fuer a, deshalb liefen genau
   diese Zeilen hinaus. Gilt jetzt fuer alle Textelemente. */
html body .legal-privacy,
html body .legal-privacy p,
html body .legal-privacy li,
html body .legal-privacy a,
html body .legal-privacy strong,
html body .legal-privacy h2,
html body .legal-privacy h3,
html body .legal-privacy h4,
html body .legal-privacy h5,
html body .legal-imprint-body,
html body .legal-imprint-meta{overflow-wrap:break-word;word-break:break-word}

@media(max-width:900px){
  html body .legal-main{padding:52px 0 64px}
  html body .legal-grid{grid-template-columns:1fr;gap:36px}
  html body .legal-privacy>h2:first-child,
  html body .legal-h2{font-size:26px}
  html body .legal-privacy h2{font-size:23px}
  html body .legal-privacy h3{font-size:19px}
}

@media(max-width:700px){
  html body .legal-main{padding:40px 0 56px}
  html body .legal-main .wrap{padding-left:20px !important;padding-right:20px !important}
  html body .legal-card{padding:26px 22px}
  html body .legal-privacy{font-size:15px}
  html body .legal-privacy ul,
  html body .legal-privacy ol{margin-left:18px}
}

@media(max-width:400px){
  html body .legal-main .wrap{padding-left:16px !important;padding-right:16px !important}
  html body .legal-card{padding:22px 18px}
}

/* ---------- HERO DIESER SEITE ----------
   Uebernommen am 26.08. aus den Inline-Styles des Markups.

   GELTUNGSBEREICH BEWUSST ENG: Die Seite nutzt .contact-hero,
   dieselbe Klasse wie /kontakt/. Ohne Eingrenzung wuerden diese
   Werte die Kontaktseite mitveraendern, sobald die Datei dort
   ebenfalls laedt. Deshalb `:has(+ .legal-main)` — greift nur,
   wo direkt hinter dem Hero der Rechtstext-Bereich folgt, also
   ausschliesslich auf dieser Seite. Gleiches Muster wie
   `.booking:has(+ .faq)` in unterseiten.css.

   ABWEICHUNG VON DEN INLINE-WERTEN, bitte gegenlesen:
   Die H1 stand inline auf letter-spacing:-1px. Die negative
   Laufweite weicht hier der 0.03em aus dem Versalien-Schema
   vom 26.08. Groesse (52px) und alles Uebrige unveraendert.
   ---------------------------------------------------------- */
html body .contact-hero:has(+ .legal-main){background:var(--blau);color:#fff;padding:70px 0 56px}
html body .contact-hero:has(+ .legal-main) .wrap{max-width:1180px;margin:0 auto;padding:0 40px}
html body .contact-hero:has(+ .legal-main) .kicker{font-family:var(--font-cond);font-size:15px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-warm) !important;font-weight:700;margin-bottom:14px}
html body .contact-hero:has(+ .legal-main) h1{font-family:var(--font-cond);font-size:52px;line-height:1.02;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;margin:0;color:#fff}
html body .contact-hero:has(+ .legal-main) h1 span{color:var(--gold-warm)}

@media(max-width:700px){
  html body .contact-hero:has(+ .legal-main){padding:48px 0 40px}
  html body .contact-hero:has(+ .legal-main) .wrap{padding-left:20px !important;padding-right:20px !important}
  html body .contact-hero:has(+ .legal-main) h1{font-size:clamp(30px,8vw,44px);line-height:1.08}
  html body .contact-hero:has(+ .legal-main) .kicker{font-size:13px;letter-spacing:2px}
}
@media(max-width:400px){
  html body .contact-hero:has(+ .legal-main) .wrap{padding-left:16px !important;padding-right:16px !important}
}

/* ---------- AUFZAEHLUNGEN OHNE PUNKTE ----------
   Im Datenschutztext trugen mehrere <ul> ein inline
   `style="list-style: none"`. Ersetzt am 26.08. durch die Klasse
   .legal-plain — deshalb steht die Regel jetzt hier statt im
   Markup. Die alten Attributselektoren sind damit hinfaellig.
   ---------------------------------------------------------- */
html body .legal-privacy ul.legal-plain{list-style:none}
@media(max-width:700px){
  html body .legal-privacy ul.legal-plain{margin-left:0}
}