/* =====================================================================
   Dili Appartement - Grundlagen
   Uebernommen 1:1 aus der bestehenden Kadence-Konfiguration.
   Werte stammen aus dem ausgelesenen "kadence-global-inline-css".
   ===================================================================== */

/* ------------------------------------------------------------------ *
   Schriften
 * ------------------------------------------------------------------ */

/* Moniqa - Ueberschriftenschrift der Originalseite (lizenziert, selbst gehostet) */
@font-face {
  font-family: "Moniqa";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Moniqa-Paragraph.woff2") format("woff2"),
       url("../fonts/Moniqa-Paragraph.woff") format("woff");
  font-display: swap;
}

/* Roboto - Fliesstext. Original laedt die Schrift ueber Kadence lokal. */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/roboto-400.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/roboto-500.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/roboto-700.woff2") format("woff2");
  font-display: swap;
}

/* Heebo - Schaltflaechen */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/heebo-500.woff2") format("woff2");
  font-display: swap;
}

/* ------------------------------------------------------------------ *
   Design-Token
 * ------------------------------------------------------------------ */
:root {
  /* Farbpalette (identisch zur Kadence-Palette der Originalseite) */
  --palette-1: #223b32;   /* Dunkelgruen, Primaerfarbe */
  --palette-2: #376659;   /* Mittelgruen */
  --palette-3: #000000;
  --palette-4: #2d352d;
  --palette-5: #575757;
  --palette-6: #828282;
  --palette-7: #c5d7ca;   /* Hellgruen */
  --palette-8: #eef2ee;   /* Seitenhintergrund */
  --palette-9: #ffffff;
  --palette-10: #dfb332;  /* Gold, Akzent */
  --palette-11: #13612e;
  --palette-12: #1159af;
  --palette-13: #b82105;
  --palette-14: #f7630c;
  --palette-15: #f5a524;

  --header-bg: #425644;   /* Hintergrund des nicht transparenten Headers */

  /* Schaltflaechen */
  --btn-bg: #223b32;
  --btn-bg-hover: #143c2d;
  --btn-text: #ffffff;
  --btn-text-hover: #ffffff;
  --btn-sec-bg: #dfb332;
  --btn-sec-bg-hover: #e6b421;
  --btn-sec-text: #000000;

  /* Schriften */
  --font-body: Roboto, sans-serif;
  --font-heading: Moniqa, serif;
  --font-button: Heebo, sans-serif;
  --font-nav: Roboto, sans-serif;

  /* Breiten */
  --content-width: 1290px;
  --content-wide-width: calc(1290px + 230px);
  --content-narrow-width: 842px;
  --content-edge-padding: 1.5rem;
  --content-boxed-padding: 2rem;
  /* Eine einzige Breite fuer alle Inhalte auf kleinen Geraeten.
     Vorher liefen 340px, 820px und volle Breite nebeneinander. */
  --container-mobile: min(100% - 40px, 460px);

  /* Abstaende der Kadence-Bloecke */
  --kb-gap-sm: 1rem;
  --kb-gap-md: 2rem;
  --kb-gap-lg: 4rem;
  --kb-spacing-xxs: 0.5rem;
  --kb-spacing-sm: 1.5rem;
  --kb-row-gutter-md: 2rem;

  /* Fliessende Schriftgroessen der Kadence-Bloecke */
  --kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
  --kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
  --kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
  --kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
  --kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
  --kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);

  /* Bewegung: ein gemeinsamer Rhythmus fuer die ganze Seite */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);          /* weiches Auslaufen */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* Eintritt */
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);          /* Austritt */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* leichtes Nachfedern */
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 320ms;

  /* Hoehe des eingeblendeten Kopfbereichs, fuer Sprungmarken */
  --header-h: 84px;

  /* Abstandsraster, Vielfache von 4 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
}

/* ------------------------------------------------------------------ *
   Zuruecksetzen
 * ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

/* Wichtig: display-Werte wie flex oder grid wuerden das hidden-Attribut
   sonst ueberstimmen und Elemente sichtbar lassen, die weg sein sollen. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sprungmarken nicht unter den eingeblendeten Kopfbereich schieben */
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* clip statt hidden: hidden wuerde aus <html>/<body> einen eigenen
     Scrollbereich machen und damit die Einblend-Animationen aushebeln. */
  overflow-x: clip;
}

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

body {
  margin: 0;
  background: var(--palette-8);   /* Rand ausserhalb des Inhaltsbereichs */
  color: #000000;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

figure { margin: 0; }

a { color: inherit; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* ------------------------------------------------------------------ *
   Ueberschriften (Werte aus der Kadence-Basis)
 * ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-style: normal;
  line-height: 1.5;
}

h1 { font-family: var(--font-heading); font-weight: 400; font-size: 32px; color: var(--palette-3); }
h2 { font-family: var(--font-heading); font-weight: 400; font-size: 28px; color: var(--palette-3); }
h3 { font-weight: 700; font-size: 24px; color: var(--palette-3); }
h4 { font-weight: 700; font-size: 22px; color: var(--palette-4); }
h5 { font-weight: 700; font-size: 20px; color: var(--palette-4); }
h6 { font-weight: 700; font-size: 18px; color: var(--palette-5); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
   Layout-Container
 * ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-edge-padding);
}

/* Auf kleinen Geraeten gilt ein einziger Seitenabstand von 20px.
   Alles andere wird auf max-width: none gesetzt, damit sich Abstaende
   nicht summieren. */
@media all and (max-width: 767px) {
  .container { padding-inline: 20px; }
}

.container--narrow { max-width: var(--content-narrow-width); }
.container--wide   { max-width: var(--content-wide-width); }

.section { position: relative; }

/* ------------------------------------------------------------------ *
   Schaltflaechen
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  border: 0;
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-button);
  font-size: 19px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 0 -7px rgba(0, 0, 0, 0);
  /* transform statt Layoutwerte: laeuft auf der GPU, kein Umbruch */
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease-spring);
  will-change: transform;
}

.btn:hover,
.btn:focus-visible {
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  box-shadow: 0 15px 25px -7px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

/* Beim Druecken kurz zurueckfedern: klare Rueckmeldung, kein Layoutsprung */
.btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--dur-fast);
}

/* Nicht verfuegbar: klar erkennbar und nicht anklickbar */
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn:disabled:hover,
.btn[disabled]:hover { background: var(--btn-bg); transform: none; box-shadow: none; }

/* Pfeil, der beim Ueberfahren mitgeht */
.btn__arrow {
  display: inline-block;
  margin-left: 0.5em;
  transition: transform var(--dur) var(--ease-spring);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn__arrow { transition: background-color var(--dur) linear, color var(--dur) linear; }
  .btn:hover,
  .btn:focus-visible,
  .btn:active { transform: none; }
}

/* Sekundaer: Goldflaeche, dunkelgruene Schrift */
.btn--gold {
  background: var(--palette-10);
  color: var(--palette-1);
}
.btn--gold:hover,
.btn--gold:focus-visible { background: var(--btn-sec-bg-hover); }

/* Umrandet: transparente Flaeche mit dunkelgruener Kontur, 10px Radius */
.btn--outline {
  background: transparent;
  color: var(--palette-1);
  border: 2px solid var(--palette-1);
  border-radius: 10px;
}
.btn--outline:hover,
.btn--outline:focus-visible {
  background: transparent;
  color: var(--palette-2);
  border-color: var(--palette-2);
}

/* Umrandet hell: im Hero ueber dem Foto */
.btn--outline-gold {
  background: transparent;
  color: var(--palette-10);
  border: 2px solid var(--palette-10);
}
.btn--outline-gold:hover,
.btn--outline-gold:focus-visible {
  background: var(--palette-10);
  color: var(--palette-1);
}

/* ------------------------------------------------------------------ *
   Barrierefreiheit
 * ------------------------------------------------------------------ */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--palette-1);
  color: #fff;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 8px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--palette-10);
  outline-offset: 2px;
}

/* Ueberschriften, auf die der Fokus nur programmgesteuert gesetzt wird,
   sollen keinen Rahmen bekommen. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus,
[id][tabindex="-1"]:focus { outline: none; }

/* ------------------------------------------------------------------ *
   Einblend-Animationen
   Entsprechen den Scroll-Animationen der Originalseite.
 * ------------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal][data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.3s; }

/* Ohne JavaScript bleibt alles sichtbar */
html:not(.js-ready) [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ *
   Inhaltsflaeche
   Kadence setzt den Seitenrahmen auf Palette 8, die eigentliche
   Inhaltsflaeche aber auf Weiss (.content-bg / .site).
 * ------------------------------------------------------------------ */
.site-main { background: var(--palette-9); }

/* ------------------------------------------------------------------ *
   Abschluss-Trenner (Bergsilhouette) am unteren Rand eines Abschnitts
 * ------------------------------------------------------------------ */
.row-sep {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  height: 100px;
  line-height: 0;
  pointer-events: none;
}
.row-sep svg {
  display: block;
  width: 100%;
  height: 100%;
}
.row-sep svg path { fill: var(--palette-9); }

/* Trenner vor einem Abschnitt mit Palette-8-Hintergrund */
.row-sep--muted svg path { fill: var(--palette-8); }

/* ------------------------------------------------------------------ *
   Lange Woerter auf schmalen Bildschirmen
   Greift nur, wenn ein Wort sonst ueber den Rand laufen wuerde.
 * ------------------------------------------------------------------ */
p, li, h1, h2, h3, h4, h5, h6, a, td, th, label, figcaption {
  overflow-wrap: break-word;
}

@media all and (max-width: 767px) {
  .text-page p,
  .text-page li { hyphens: auto; }
}