/* =========================================================
   CHESA SALEZ — style.css (bereinigt, ohne Doppelungen)
   Stellschrauben sind mit "TWEAK" markiert
   HINWEIS: Ich habe NICHTS gelöscht, nur Kommentare + Ergänzungen eingefügt.
========================================================= */

/* =========================================================
   ROOT / DESIGN TOKENS (FARBEN)
   -> Hier steuerst du die Farben zentral. Änderungen wirken überall.
========================================================= */
:root{
  --bg:#f3f1ec;        /* TWEAK: Hintergrund der ganzen Seite (body background) */
  --text:#1f2328;      /* TWEAK: Standard Textfarbe */
  --muted:#6b6f73;     /* TWEAK: Sekundärtext (z.B. Nav-Farbe) */
  --line:#e6e0d8;      /* TWEAK: Linien/Border-Farbe */

  --accent:#2f3a2f;    /* TWEAK: Akzentfarbe (z.B. CTA Button Hintergrund, Hover-Linie) */
  --accent2:#8a6a45;   /* TWEAK: 2. Akzentfarbe (optional) */

  --radius:14px;       /* TWEAK: Rundung von Boxen/Elementen */
  --max:1200px;        /* TWEAK: maximale Seitenbreite (Container) */
}

/* =========================================================
   FONTS
   -> WICHTIG: Du hast nur eine Regular-Datei. Darum ist echtes "bold" nicht möglich.
   -> Das "fette" erreichst du über -webkit-text-stroke (Hack).
========================================================= */
@font-face{
  font-family:'The Hand';
  src:url('../fonts/the-hand/TheHandRegular.woff2') format('woff2');
  font-weight:400;              /* FIX: Regular muss 400 sein, sonst blockierst du alle weights */
  font-style:normal;
  font-display:swap;
}

/* =========================================================
   RESET / BASE (GLOBAL SCALE)
========================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* OPTIONAL QUALITY: glättet Kanten, kann bei Stroke helfen
   -> Wenn du einen Browser hast, wo es "ausfranst", hilft das oft. */
html{
  -webkit-font-smoothing:antialiased; /* TWEAK: Kanten/Rendering (wirkt v.a. in WebKit) */
  -moz-osx-font-smoothing:grayscale;  /* TWEAK: macOS Rendering */
}

body{
  font-family:'The Hand', cursive;    /* TWEAK: Schriftfamilie */
  text-transform: uppercase;          /* TWEAK: alles Großbuchstaben (Achtung bei Lesbarkeit) */
  background:var(--bg);              /* TWEAK: Seitenhintergrund */
  color:var(--text);                 /* TWEAK: Standard-Textfarbe */

  font-weight:400;                   /* INFO: ohne Bold-Font bringt 700/800 real wenig */
  -webkit-text-stroke:0.8px currentColor; /* TWEAK: "überall fetter" (stärkster Hebel ohne Bold-Font) */

  line-height:1.8;                   /* TWEAK: Zeilenhöhe (Luft zwischen Zeilen) */
  font-size:32px;                    /* TWEAK: globale Schriftgröße Desktop */
}

a{color:inherit;text-decoration:none}

/* Links/Code NICHT uppercase (damit URLs/Emails sauber bleiben) */
a[href^="mailto:"],
a[href^="http"],
a[href^="https"],
code,
pre{
  text-transform:none;
}

/* =========================================================
   GLOBAL "FETTER ÜBERALL" — ZENTRALER HEBEL
   -> Weil stroke nicht zuverlässig vererbt wird, setzen wir es explizit
      auf typische Text-Elemente, damit es wirklich überall greift.
   -> Du wolltest "überall": Das ist die robuste Variante.
========================================================= */
body, p, a, li, span, strong, em,
h1, h2, h3, h4, h5, h6,
button, input, textarea, label, small {
  -webkit-text-stroke:0.8px currentColor; /* TWEAK: Wert hoch/runter für "fetter" */
  paint-order: stroke fill;              /* TWEAK: verbessert Kanten (wenn unterstützt) */
}

.container{
  max-width:var(--max);              /* TWEAK: max. Breite der Inhalte */
  margin:0 auto;
  padding:0 24px;                    /* TWEAK: Seitenabstand links/rechts */
}

/* =========================================================
   TYPOGRAPHY
========================================================= */
h1,h2,h3{
  font-family:'The Hand', cursive;
  letter-spacing:0.04em;             /* TWEAK: enger/weiter */
  font-weight:400;                   /* INFO: echte Gewichtung nur mit Bold-Font möglich */
  -webkit-text-stroke:0.8px currentColor; /* TWEAK: extra gesetzt, damit es sicher greift */
}

h1{font-size:3.2em;line-height:1.1;margin:0 0 24px} /* TWEAK: Desktop H1 Größe/Spacing */
h2{font-size:2.1em;margin:0 0 16px}                  /* TWEAK: Desktop H2 */
h3{font-size:1.6em;margin:0 0 12px}                  /* TWEAK: Desktop H3 */

p{max-width:720px}                                   /* TWEAK: maximale Textbreite (Lesbarkeit) */

/* =========================================================
   HEADER / NAV (DESKTOP)
========================================================= */
.site-header{
  position:fixed;
  top:0;
  left:0;
  width:280px;                    /* TWEAK: Breite Sidebar Header */
  height:100vh;
  z-index:10;

  background:#ffffff;             /* TWEAK: Header-Farbe (du wolltest ganz weiss) */
  backdrop-filter:blur(8px);      /* TWEAK: Blur-Effekt (kannst du auch entfernen) */
  border-right:1px solid var(--line);

  transition:transform 0.3s ease;
}

.site-header.is-hidden{ transform:none; }

.header-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;

  padding:48px 24px;              /* TWEAK: Innenabstand Header */
  height:100%;
  gap:32px;                       /* TWEAK: Abstand zwischen Logo/Slogan/Nav */
}

.logo img{
  height:170px;                   /* TWEAK: Logo Desktop Größe */
  display:block;
}

.brand-slogan{
  font-size:1em;                  /* TWEAK: Desktop Slogan Größe */
}

.nav{
  display:flex;
  flex-direction:column;
  gap:18px;                       /* TWEAK: Abstand zwischen Nav-Links */
}

.nav a{
  font-size:1em;                  /* TWEAK: Desktop Nav Textgröße */
  letter-spacing:0.14em;          /* TWEAK: Tracking */
  text-transform:uppercase;
  padding:6px 2px;
  color:var(--muted);
  position:relative;
  /* INFO: Stroke kommt global oben – wenn du hier anders willst, hier überschreiben */
}

.nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:1px;
  background:var(--accent);
  opacity:0;
  transform:scaleX(0);
  transition:all 0.3s ease;
}

.nav a:hover,
.nav a.active{ color:var(--text); }

.nav a:hover::after,
.nav a.active::after{
  opacity:1;
  transform:scaleX(1);
}

.cta{
  margin-top:auto;
  background:var(--accent);
  color:#fff;
  padding:16px 28px;              /* TWEAK: Button Größe */
  border-radius:999px;
  letter-spacing:0.08em;
  -webkit-text-stroke:0.9px currentColor; /* TWEAK: CTA noch fetter (weiß auf dunkel) */
  /* INFO: Wenn CTA “hohl” aussieht: setze hier 0px statt 0.9px */
}

/* =========================================================
   MAIN OFFSET (SIDEBAR)
========================================================= */
main{ margin-left:280px; }         /* TWEAK: muss zur Header-Breite passen (280px) */

/* =========================================================
   SECTIONS / LAYOUT
========================================================= */
.section{ padding:96px 0; }        /* TWEAK: vertikale Abstände */
.hero{ padding:140px 0 120px; }    /* TWEAK: Hero-Spacer */

.section-centered,
.text-center{ text-align:center; }

.section-centered p,
.text-center p{
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   TEXT SCALES (STEUEUNG ÜBER HTML)
   -> Im HTML Klassen setzen: text-normal | text-large | text-lead | text-hero
========================================================= */
.text-normal{ font-size:1em; line-height:1.6; }   /* TWEAK: Standard */
.text-large { font-size:1.3em; line-height:1.5; } /* TWEAK: größer */
.text-lead  { font-size:1.8em; line-height:1.35; }/* TWEAK: Lead */
.text-hero  { font-size:2.2em; line-height:1.25; }/* TWEAK: sehr groß */

/* Listen innerhalb dieser Scales nicht zusätzlich aufblasen */
.text-large li,
.text-lead li,
.text-hero li{ font-size:1em; }

/* =========================================================
   DEFAULTS FÜR DEINE SEITENSTRUKTUR (ohne HTML ändern)
========================================================= */

/* 1) Zentrierte Statement-Sections: p fast wie H1 */
.section-centered > .container > p{
  font-size:1.8em;                /* TWEAK: 1.6 – 2.2 */
  line-height:1.3;
  max-width:900px;
}

/* 2) Normale Sections: p groß, aber unter Statement-Level */
.section > .container > p{
  font-size:1.4em;                /* TWEAK: 1.2 – 1.8 */
  line-height:1.45;
  max-width:900px;
}

/* 3) Cards: p groß & ruhig */
.card p{
  font-size:1.4em;                /* TWEAK: 1.2 – 1.8 */
  line-height:1.45;
  max-width:900px;
}

/* 4) Cards: Listen (Ausstattung/Lage) — deutlich größer */
.card ul{padding-left:18px}
.card ul li{
  font-size:1.4em;                /* TWEAK: 1.2 – 1.8 */
  line-height:1.5;
  margin-bottom:8px;
}

/* =========================================================
   IMAGES / GRID
========================================================= */
.image-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* TWEAK: Anzahl Spalten Desktop */
  gap:32px;                            /* TWEAK: Abstand zwischen Bildern */
}

.image-grid img{
  width:100%;
  aspect-ratio:1/1;                    /* TWEAK: Bildformat */
  object-fit:cover;
  display:block;
}

.full-width-image{
  width:100%;
  display:block;
  margin-top:48px;
}

/* =========================================================
   CARDS (STRUCTURE)
========================================================= */
.card{
  background:none;
  border:none;
  padding:0;
}

/* =========================================================
   FOOTER — Rosenweg Style (LESBAR)
========================================================= */
.site-footer{
  background:#c9b8a4;              /* TWEAK: Footer Hintergrund */
  color:#2f2a24;                   /* TWEAK: Footer Text */
  border-top:none;
  padding:72px 0;                  /* TWEAK: Footer Höhe */
  font-size:1em;                   /* TWEAK: skaliert mit body */
}

.site-footer a{
  color:#2f2a24;
  text-decoration:none;
}

.site-footer a:hover{
  color:#000;
  text-decoration:underline;
}

/* FOOTER – Layout: small links, main block centered */
.footer-inner{
  position:relative;
  display:flex;
  justify-content:center;          /* Hauptblock exakt zentriert */
  align-items:flex-end;
}

/* rechter Block fest nach rechts */
.footer-small{
  position:absolute;
  right:0;
  bottom:0;
  text-align:right;
}

/* =========================================================
   LIGHTBOX
========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.lightbox.active{display:flex}

.lightbox img{
  max-width:90vw;
  max-height:85vh;
  object-fit:contain;
}

.lightbox-close,
.lightbox-nav{
  position:absolute;
  color:#fff;
  cursor:pointer;
  user-select:none;
}

.lightbox-close{
  top:32px;
  right:32px;
  font-size:32px;                  /* TWEAK: Close Icon Größe */
}

.lightbox-nav{
  top:50%;
  transform:translateY(-50%);
  font-size:48px;                  /* TWEAK: Pfeile Größe */
  padding:20px;
}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}

/* =========================================================
   PRICES / CONTACT
========================================================= */
.price-table td:last-child,
.price-table th:last-child{ padding-left:48px; } /* TWEAK: Abstand Preisspalten */

.price-layout{
  display:grid;
  grid-template-columns:2fr 1fr;   /* TWEAK: Layout Preis (Text / Side) */
  gap:2rem;
  align-items:start;
  margin-top:2rem;
}

.price-side ul{ list-style:none; padding:0; margin:0; }
.price-side li{ margin-bottom:0.6rem; line-height:1.4; }

.card > .contact-layout{
  display:grid;
  grid-template-columns:2fr 1fr;   /* TWEAK: Kontaktlayout */
  gap:2rem;
  align-items:center;
}

.contact-image{ max-width:100%; }
.contact-image img{
  display:block;
  width:100%;
  height:auto;
}

/* =========================================================
   MAP CONSENT (2-KLICK)
========================================================= */
.map-consent{
  width:100%;
  height:360px;                    /* TWEAK: Map Höhe */
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.map-consent__inner{
  max-width:720px;
  text-align:center;
}

.map-consent__inner p{
  margin-left:auto;
  margin-right:auto;
}

.map-consent__btn{ margin-top:16px; }

.map-frame{
  border:0;
  width:100%;
  border-radius:var(--radius);
}

/* =========================================================
   LEGAL + HELPERS
========================================================= */
.legal-text{
  letter-spacing:normal;
  line-height:1.6;
}

.contact-text .cta{ margin-bottom:48px; }
.card--spaced{ margin-top:48px; }

.section-colored{
  background:#f1efe9;              /* TWEAK: Abschnitt-Hintergrund */
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.card--soft{
  background:#f6f4ee;              /* TWEAK */
  padding:64px;                    /* TWEAK */
  border-radius:var(--radius);
}

/* Optional per HTML: <section class="... section--lead"> */
.section--lead p{
  font-size:2.2em;                 /* TWEAK */
  line-height:1.3;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   MOBILE HEADER ACTIONS + OFFCANVAS NAV
========================================================= */
.header-actions{ display:none; }   /* Desktop: aus */

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;                      /* TWEAK: Button Hit-Area */
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.6);
  color:var(--text);
  cursor:pointer;
}

.header-actions{ gap:12px; align-items:center; }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:900px){
  /* TWEAK: H1 Tablet/Mobile */
  h1{ font-size:40px; }

  .site-header{
    position:sticky;
    width:100%;
    height:auto;
    border-right:none;
    border-bottom:1px solid var(--line);
    z-index:10002;
  }

  .site-header .cta{ display:none; } /* INFO: CTA im Mobile Header aus */
  .header-actions{ display:flex; }

  .header-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:14px 0;                /* TWEAK */
    height:auto;
    gap:12px;
    display:flex;
    flex-direction:row;      /* WICHTIG: Logo + Slogan nebeneinander */
    align-items:center;
    gap:12px;  
  }

  .logo img{ height:54px; }        /* TWEAK */

  .brand-slogan{
    font-size:0.9em;      /* TWEAK: Textgröße Mobile */
    line-height:1.2;
    max-width:none;       /* WICHTIG: verhindert Umbruch unter das Logo */
    white-space:nowrap;
  }

  .nav{ display:none; }

  body.nav-open .nav{
    display:flex;
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:min(320px, 86vw);        /* TWEAK: Breite Offcanvas */
    padding:88px 22px 22px;        /* TWEAK */
    background:#ffffff;            /* TWEAK: du wolltest weiss */
    border-left:1px solid var(--line);
    flex-direction:column;
    gap:18px;
    z-index:10001;
  }

  body.nav-open .nav a{
    font-size:20px;                /* TWEAK */
    padding:12px 6px;              /* TWEAK */
    letter-spacing:0.12em;
  }

  body.nav-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);   /* TWEAK: Overlay-Dunkelheit */
    z-index:10000;
    pointer-events:auto;
  }

  main{ margin-left:0; }

  .image-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px){
  .price-layout{ grid-template-columns:1fr; }        /* TWEAK: Preis Layout 1 Spalte */
  .card > .contact-layout{ grid-template-columns:1fr; } /* TWEAK: Kontakt Layout 1 Spalte */
}

@media (max-width:600px){
  body{ font-size:24px; }          /* TWEAK: globale Schriftgröße Mobile */

  h1{ font-size:2.4em; }           /* TWEAK */
  h2{ font-size:1.8em; }           /* TWEAK */
  h3{ font-size:1.4em; }           /* TWEAK */

  .lightbox-nav{ font-size:36px; }

  .section--lead p{
    font-size:1.6em;               /* TWEAK */
    line-height:1.35;
  }

  .section-centered > .container > p{
    font-size:1.6em;               /* TWEAK */
    line-height:1.35;
  }

  .section > .container > p{
    font-size:1.2em;               /* TWEAK */
    line-height:1.5;
  }

  .card p{
    font-size:1.2em;               /* TWEAK */
    line-height:1.5;
  }

  .card ul li{
    font-size:1.1em;               /* TWEAK */
  }
  .footer-small{
    right:12px;   /* TWEAK: Abstand vom rechten Rand (8–20px sinnvoll) */
  }

}

@media (max-width:500px){
  .section{ padding:64px 0; }      /* TWEAK */

  .image-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;                      /* TWEAK */
  }

  .logo img{ height:40px; }        /* TWEAK */
}