/* ── Google Fonts ── */

/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/playfair-display-v40-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/playfair-display-v40-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* playfair-display-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/playfair-display-v40-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/playfair-display-v40-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* playfair-display-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/playfair-display-v40-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/playfair-display-v40-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* playfair-display-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/playfair-display-v40-latin-500italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/playfair-display-v40-latin-500italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* playfair-display-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/playfair-display-v40-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/playfair-display-v40-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* playfair-display-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/playfair-display-v40-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/playfair-display-v40-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* playfair-display-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/playfair-display-v40-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/playfair-display-v40-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* playfair-display-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/playfair-display-v40-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/playfair-display-v40-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* figtree-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/figtree-v9-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* figtree-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/figtree-v9-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* figtree-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/figtree-v9-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* figtree-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/figtree-v9-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* figtree-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/figtree-v9-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/figtree-v9-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* dm-serif-text-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Serif Text';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/dm-serif-text-v13-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/dm-serif-text-v13-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* dm-serif-text-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'DM Serif Text';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/dm-serif-text-v13-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('fonts/dm-serif-text-v13-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* ── CSS Custom Properties ── */
:root {
  /* Colours */
  --bg:           #f8f7f4;
  --bg-soft:      #f0eeea;
  --bg-dark:      #1e1e1c;
  --white:        #ffffff;
  --ink:          #1a1a18;
  --ink-mid:      #4a4a46;
  --ink-soft:     #8a8a84;
  --aqua:         #008f82;    /*alt: #1fada0*/    
  --aqua-light:   #e6f5f3;
  --aqua-mid:     #b8e5e0;
  --border:       rgba(26,26,24,0.10);
  --border-soft:  rgba(26,26,24,0.06);
  --border-light:  rgba(240,238,234,0.7);

  /* Typography */
  --serif:        'Playfair Display', Georgia, serif;
  --sans:         'Figtree', system-ui, sans-serif;
  --price:        'DM Serif Text', Georgia, serif;

  /* Spacing */
  --gap:          clamp(1.5rem, 4vw, 3rem);
  --section-pad:  clamp(4rem, 8vw, 7rem);
  --max-w:        1100px;
  --radius:       12px;
  --radius-img:   10px;

  /* Transitions */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
    min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  position: relative;
  z-index: 2;
  background: var(--bg);
}

main {
  flex: 1;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p {font-size: 1rem !important;}

p a{
  color:var(--aqua); text-decoration:underline;
}

/* ============================================================
   LANGUAGE BANNER
   ============================================================ */
.lang-banner {
  background: var(--aqua-light);
  border-bottom: 1px solid var(--aqua-mid);
  padding: .6rem 1.5rem;
  text-align: center;
  font-size: .85rem;
  color: var(--ink-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.lang-banner span { font-family: var(--sans); }
.lang-banner-btn {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--aqua);
  border: 1px solid var(--aqua);
  background: transparent;
  padding: .25rem .9rem;
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--ease) .15s, color var(--ease) .15s;
  white-space: nowrap;
}
.lang-banner-btn:hover {
  background: var(--aqua);
  color: var(--white);
}

/* ============================================================
   STICKY NAV
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(248,247,244,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--gap);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .6rem 0 .5rem;
  gap: .35rem;
  font-family: 'Playfair Display';
}

.nav-brand {
  font-family: var(--serif);
  font-weight: 500;
	font-size: 1.5rem;
	color: var(--bg-dark);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.8rem);
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}
.nav-links a {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-mid);
  padding: .2rem 0;
  border-bottom: 1.5px solid transparent;
  transition: color var(--ease) .15s, border-color var(--ease) .15s;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--aqua);
  border-bottom-color: var(--aqua);
}
.nav-links .nav-cta {
  font-weight: 500;
  color: var(--aqua);
  border: 1px solid var(--aqua);
  padding: .25rem .9rem;
  border-radius: 100px;
  border-bottom: 1px solid var(--aqua);
}
.nav-links .nav-cta:hover {
  background: var(--aqua);
  color: var(--white);
}

/* ── Hamburger (mobile) ── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .4rem;
  color: var(--aqua);
}

.nav-toggle svg {
  display: block;
}

/* Animation */
.nav-toggle .line {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
    transform-box: fill-box;
}

/* Zustand: Menü geöffnet */
.nav-toggle[aria-expanded="true"] .line-1 {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .line-2 {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .line-3 {
  transform: translateY(-5px) rotate(-45deg);
}


/* ============================================================
   SHARED SECTION HELPERS
   ============================================================ */
section { padding: var(--section-pad) var(--gap); }
.inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.s-eyebrow {
  font-family: var(--sans);
  font-size: 0.8rem !important;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 1rem;
}
.s-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
em { font-style: italic; color: var(--aqua); }
.s-body {
  font-size: clamp(.9rem, 1.6vw, 1rem);
  color: var(--ink-mid);
  line-height: 1.8;
  font-weight: 400;

}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 100px;
  transition: background var(--ease) .18s, color var(--ease) .18s,
              border-color var(--ease) .18s, box-shadow var(--ease) .18s;
}
.btn-primary {
  background: var(--ink);
  color: var(--white);
  border: 1.5px solid var(--ink);
  padding: .8rem 2rem;
}
.btn-primary:hover {
  background: var(--aqua);
  border-color: var(--aqua);
  box-shadow: 0 4px 20px rgba(31,173,160,.25);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border);
  padding: .8rem 2rem;
}
.btn-outline:hover {
  border-color: var(--aqua);
  color: var(--aqua);
}
.btn-ghost {
  background: transparent;
  color: var(--aqua);
  border: 1.5px solid var(--aqua);
  padding: .7rem 1.8rem;
}
.btn-ghost:hover {
  background: var(--aqua);
  color: var(--white);
}

/* ── Text link ── */
.text-link {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-mid);
  text-decoration: underline;
  text-decoration-color: var(--aqua-mid);
  text-underline-offset: 3px;
  transition: color var(--ease) .15s;
  padding: 0.3rem 2rem;
}
.text-link:hover { color: var(--aqua); }

/* ── Image placeholder ── */
.img-placeholder {
  background: var(--bg-soft);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-img);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: var(--ink-soft);
  font-size: .75rem;
  letter-spacing: .05em;
  text-align: center;
  padding: 2rem;
}
.img-placeholder svg { opacity: .35; }

/* ============================================================
   [0] HERO
   ============================================================ */
.hero {
  padding-bottom: var(--section-pad);
  background: var(--bg);
  position: relative;
}

.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
      gap: 0rem 1rem;
}

/* LEFT COLUMN BEHAVIOR VIA GRID */
.hero-eyebrow,
.hero-title,
.hero-subtitle,
.hero-actions {
  grid-column: 1;
}

/* RIGHT COLUMN: SLIDER */
.hero-media {
  grid-column: 2;
  grid-row: 1 / span 4;
  position: relative;
  border-radius: var(--radius-img);
  overflow: hidden;
  aspect-ratio: 5 / 5;
  max-width: 574px;
  max-height: calc(100% + 85px);
  margin-top: -20px;
}

/* TYPO */
.hero-eyebrow {
  font-family: var(--sans);
  font-size: clamp(.8rem, 1.4vw, .9rem) !important;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--aqua);
}

.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);

}

.hero-title em {
  font-style: italic;
  color: var(--aqua);
}

.hero-subtitle {
  font-size: clamp(.9rem, 1.6vw, 1rem);
  color: var(--ink-mid);
  line-height: 1.75;
  font-weight: 400;
  max-width: 460px;
  margin-bottom: 2.25rem;
      margin-top: 0.9rem;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  max-width: 242px;
}


.hero-actions .text-link{
padding: 0;
}

/* SLIDER */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.hero-slide.active {
  opacity: 1;
}

/*
.hero-media::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(26,26,24,.18), transparent);
  pointer-events: none;
}*/

.hero-badge {
  position: absolute;
  top: 56%;
  left: 3px;
  transform: translateY(-50%);

  z-index: 10;

  background: var(--aqua);
  color: white;

  padding: 1rem 1.1rem;
  border-radius: 14px;

  box-shadow: 13px 10px 10px rgba(0,0,0,0.2);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.price-new {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  font-family: var(--serif);
   /* font-variant-numeric: lining-nums;*/
    letter-spacing: 3%;


}

.price-label {
  font-size: 0.9rem;
  letter-spacing: .02em;
  /*text-transform: uppercase;*/
  line-height: 1.4;

  margin-top: 0.5rem;
  font-weight: 600;
      display: flex;
    align-items: center;
    gap: 4px;
}


.price-old {
  position: relative;
  font-size: 1.2rem;
  font-weight: 700;
}

.price-old::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: 45%;
  height: 2px;
  background: red;
  transform: rotate(-8deg);
}

/* ============================================================
   [1] WHY A WEBSITE
   ============================================================ */
.why {
  background: var(--white);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}
.why-quote {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  border-left: 2.5px solid var(--aqua);
  padding-left: 1.5rem;
  max-width: 510px;
}
em { font-style: italic; color: var(--aqua); }

/* ============================================================
   [2] ZUSAMMENARBEIT / COLLABORATION
   ============================================================ */
.collab { background: var(--bg); }
.collab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0 2.25rem;
}
.collab-card {
  background: var(--white);
  border: 1px solid var(--aqua-mid);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  transition: border-color var(--ease) .2s, box-shadow var(--ease) .2s;
   /* box-shadow: 0 4px 24px rgba(31,173,160,.08);*/
}

.collab-icon {
  width: 44px;
  height: 44px;
  color: var(--aqua);
  margin-bottom: 1.1rem;
}
.collab-card-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--aqua);
  margin-bottom: .6rem;
}
.collab-card-body {
  font-size: .9rem;
  color: var(--ink-mid);
  line-height: 1.7;
  font-weight: 400;
}
.collab-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: .25rem;
      max-width: 302px;
}
.collab-footer-text {
  font-size: .9rem;
  color: var(--ink-mid);

}


/* ============================================================
   [3] ABLAUF / PROCESS
   ============================================================ */
.process { background: var(--bg-soft); }
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 2.5rem;
}
.process-step {
  background: var(--white);
  padding: 1.75rem 1.5rem;
  position: relative;
}
.step-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--aqua);
  line-height: 1;
  margin-bottom: .9rem;
}
.step-title {

  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
  margin-bottom: .4rem;
}
.step-body {
  font-size: .83rem;
  color: var(--ink-mid);
  line-height: 1.65;
  font-weight: 400;
}

.process-notice {
  margin-top: 2rem;
  padding: 1.1rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--aqua);
  border-radius: var(--radius);
}

.process-notice p {
  font-size: 1rem;
  color: var(--ink-mid);
  line-height: 1.7;
  font-weight: 400;
}

.process-notice strong {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--aqua);
  margin-bottom: .6rem;
  line-height: 1;
}


/* ============================================================
   [4] BEISPIELE / EXAMPLES
   ============================================================ */
.examples { background: var(--white); }
.examples-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}
.example-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
    display: flex; /* oder block – je nach deinem Layout */
  flex-direction: column;
  height: 100%;
  width: 100%;

  text-decoration: none;
  color: inherit;
    margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.example-img {
  aspect-ratio: 16 / 10;
  background: var(--bg-soft);
}
.example-img .img-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}
.example-footer {
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--white);
  border-top: 1px solid var(--border-soft);
}
.example-name {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}

/* ── Demo button small ── */
.btn-demo {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--aqua);
  border: 1px solid var(--aqua);
  padding: .35rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
  transition: background var(--ease) .15s, color var(--ease) .15s;
}
.example-card:hover .btn-demo { background: var(--aqua); color: var(--white); }

/* ============================================================
   [5] FÜR WEN / WHO IS THIS FOR
   ============================================================ */
.who {
  background: var(--bg);

}
.who .s-eyebrow { color: var(--aqua); }

.who .s-body { color: var(--ink-mid)}
.who-list {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.08);
}
.who-item {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.1rem 0;
  border-bottom: 2px solid rgba(0, 0, 0, .08);
  font-size: .95rem;
  color: var(--ink-mid);
  font-weight: 400;
  line-height: 1.6;
  transition: color var(--ease) .15s;
}

.who-item:hover { color: var(--ink-mid) }

.who-check {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: .05rem;
}

/* ============================================================
   [6] NOT FOR YOU  (dark section)
   ============================================================ */
.nfy { background: var(--bg-dark); 
  color: #e8e8e4;}
.nfy-list {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border-light);
}
.nfy-item {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--border-light);
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 1rem;
  align-items: start;
}
.nfy-x { font-size: 1rem; padding-top: .1rem; flex-shrink: 0; }

.nfy-main {
  font-size: .95rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.55;
}
.nfy .s-title { color: var(--bg) }
.nfy-sub {
  font-size: .85rem;
  color: var(--bg);
  line-height: 1.6;
  margin-top: .3rem;
  font-style: normal;
}

/* ============================================================
   [7] BEHIND / ABOUT
   ============================================================ */
.behind {
  background: var(--white);
}

.behind-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
    gap: 0.6rem 2rem;
  align-items: start;

  grid-template-areas:
    "portrait heading"
    "portrait body";
}

.behind-heading {
  grid-area: heading;
}

.behind-portrait {
  grid-area: portrait;
  border-radius: var(--radius-img);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.behind-body {
  grid-area: body;
  font-size: .95rem;
  color: var(--ink-mid);
  line-height: 1.8;
  font-weight: 400;
  max-width: 600px;
}

.behind-body p + p {
  margin-top: 1rem;
}

.behind-heading .s-title {

  margin-bottom: 1rem;
}



/* ============================================================
   [8] FINAL CTA
   ============================================================ */
.final-cta {
  background: var(--aqua-light);
  border-top: 1px solid var(--aqua-mid);
  text-align: center;
  padding: var(--section-pad) var(--gap);
}
.final-cta .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final-rule {
  width: 2.5rem;
  height: 2px;
  background: var(--aqua);
  margin: 0 auto 2rem;
}
.final-cta .s-body {
  text-align: center;
  margin: 0 auto 2.25rem;
}
.final-note {
  margin-top: 1rem;
  font-size: .8rem !important;
  color: var(--ink-soft);
  letter-spacing: .025em;

}

/* ── Divider ── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 2rem 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  padding: 1.6rem var(--gap);
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.footer-inner {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  color: var(--ink-soft);
  letter-spacing: .04em;
  flex-wrap: wrap;
  gap: .5rem;

}

.footer-inner a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--ease) .15s, text-decoration-color var(--ease) .15s;
}
.footer-inner a:hover {
  color: var(--aqua);
  text-decoration-color: var(--aqua);
}

/* ============================================================
   FADE-IN ANIMATION
   ============================================================ */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up-delay-1 { transition-delay: .08s; }
.fade-up-delay-2 { transition-delay: .16s; }
.fade-up-delay-3 { transition-delay: .24s; }
.fade-up-delay-4 { transition-delay: .32s; }



/* ============================================================
   UNTERSEITEN – Impressum / Datenschutz
   ============================================================ */

/* ── Seiten-Wrapper ── */
.legal-page {
  padding: clamp(3rem, 6vw, 5rem) var(--gap) var(--section-pad);
}
.legal-page .inner {
  max-width: 720px; /* schmaler als Hauptseite – bessere Lesbarkeit */
}

/* ── Breadcrumb ── */
.legal-breadcrumb {
  font-size: .8rem;
  color: var(--ink-soft);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.legal-breadcrumb a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--ease) .15s, text-decoration-color var(--ease) .15s;
}
.legal-breadcrumb a:hover {
  color: var(--aqua);
  text-decoration-color: var(--aqua);
}
/*.legal-breadcrumb span { color: var(--ink); }*/

/* ── Überschriften & Fließtext       */
.legal-content > h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--aqua);
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.legal-content > h2 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 2.75rem;
  margin-bottom: .75rem;
}

/* Erstes h2 bekommt keinen extra Abstand nach oben */
.legal-content > h2:first-of-type {
  margin-top: 1.5rem;
}

.legal-content > h3 {
  font-family: var(--sans);
  font-size: clamp(.9rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink);
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}

.legal-content > p {
  font-size: clamp(.88rem, 1.5vw, .97rem);
  color: var(--ink-mid);
  line-height: 1.82;
  font-weight: 400;
  margin-bottom: 1rem;
}

/* Letzter Absatz kein Extra-Abstand nach unten */
.legal-content > p:last-child {
  margin-bottom: 0;
}

/* Links im Fließtext */
.legal-content a {
  color: var(--aqua);
  text-decoration: underline;
  text-decoration-color: var(--aqua-mid);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--ease) .15s;
}
.legal-content a:hover {
  text-decoration-color: var(--aqua);
}

/* Aktualisierungshinweis oben */
.legal-meta {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-bottom: 2.25rem;
  font-style: italic;
}





/* ============================================================
   RESPONSIVE – Tablet (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
  :root { --section-pad: clamp(3rem, 7vw, 5rem); }

 .hero-inner {
    display: block; /* wichtiger Punkt: natürlicher Flow */
  }

  .hero-media {
margin-top: 0;
 max-height: calc(100% + 85px);
  }

  .hero-title {
    font-size: clamp(2rem, 6vw, 3rem);
  }
}




/* ============================================================
   RESPONSIVE – Menü (≤ 860px)
   ============================================================ */
@media (max-width: 855px) {

  .nav-inner {
    flex-direction: row;
    justify-content: space-between;
    padding: .7rem 0;
    align-items: center;
  }

  .nav-brand {
    display: block;
   font-size: 1.3rem;
  }

  .nav-toggle {
    display: block;
  }

  /* NAV DROPDOWN (SAUBER + ANIMIERBAR) */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: rgba(248,247,244,.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;

    padding: 1rem 0 1.5rem;

    /* Animation START (geschlossen) */
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    visibility: hidden;

    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  .nav-links.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
  }

  .nav-links a {
    padding: .3rem 1rem;
    font-size: .85rem;
  }

  .nav-links a:hover,
  .nav-links a.active {
    color: var(--aqua);
    border-bottom-color: var(--aqua);
  }
}

/* ============================================================
   RESPONSIVE – (≥ 780px)
   ============================================================ */
@media (min-width: 780px) {

  .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .hero-media {
    grid-column: 2;
    width: 100%;

    justify-self: end; 
    aspect-ratio: 1 / 1; 
    align-self: start;
  }
}



/* ============================================================
   RESPONSIVE – (≤ 780px)
   ============================================================ */
@media (max-width: 779px) {

  .hero{
padding-top: 30px;
  }


  .hero-inner { grid-template-columns: 1fr; }
  .hero-eyebrow{
    margin-bottom: 0.7rem;}

  .hero-title { font-size: clamp(1.9rem, 8vw, 2.5rem);   margin-bottom: 1.5rem;}

  .hero-subtitle{
    margin-bottom: 1.25rem;
    margin-top: 0;
  }

  .hero-media { aspect-ratio: 2 / 2; 
    max-width: 100%; 
    margin-bottom: 1.5rem; 
    max-width: 450px; 
            margin-top: -22px;
  }
/*
.hero-badge {
    
  padding: .7rem .8rem;
    left: .75rem;
    right: auto;

    top: 50%;
    transform: translateY(-50%);

    border-radius: 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }


.hero-subtitle{
      font-size: 1rem;
}*/

  .why-inner { grid-template-columns: 1fr; gap: 2rem; }

  .collab-grid { grid-template-columns: 1fr; max-width: 420px;}

  .process-steps { grid-template-columns: 1fr 1fr; }

  .examples-grid { grid-template-columns: 1fr; max-width: 520px; }
 .s-body {max-width: 420px;}
.s-title{max-width: 400px;}


  .behind-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

.behind-inner {
    grid-template-columns: 1fr;

    grid-template-areas:
      "heading"
      "portrait"
      "body";

    gap: 1rem;
  }

  .behind-portrait {

            max-width: 430px;
        aspect-ratio: 4 / 3;
  }

  .behind-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 -65px;
  }

.behind-body {
margin-top: 1rem;
}



}

/* ============================================================
   RESPONSIVE – Mobile (≤ 550px)
   ============================================================ */
@media (max-width: 550px) {
  :root { --gap: 1.25rem; --section-pad: 2.75rem; }

  .process-steps { grid-template-columns: 1fr; }

  .collab-grid { grid-template-columns: 1fr; }

  .examples-grid { grid-template-columns: 1fr; }

  .who-item { font-size: .88rem; }

  .nfy-item { grid-template-columns: 1.2rem 1fr; }

  .behind-portrait {
    max-width: 350px;
    aspect-ratio: 1 / 1;
  }

  .behind-portrait img{
      object-position: 0 -35px;}

  .footer-inner { flex-direction: column; text-align: center; gap: .4rem; }
}

/* ============================================================
   RESPONSIVE – Large (≥ 1300px)
   ============================================================ */
@media (min-width: 1300px) {
  .process-steps { grid-template-columns: repeat(3, 1fr); }
}