/* ==========================================================================
   Daniel Frei Studio — Design Tokens (Feathers & Earth Markenpalette)
   Farbe:   Navy Blue #133249 (Nav/Überschriften) · Cool Gray #2B2F35 (Text, dunkle Flächen)
            Sage Green #535E4B (Akzent/CTA) · Taupe #A89991 (Sekundärakzent, Label)
            Fläche/Karten (Papier, Elfenbein) sind helle Abtönungen von Taupe,
            da die Markenpalette selbst keine Hintergrundfarbe definiert.
   Schrift: Fraunces (Display, editorial, grosse Auszeichnungsgrössen, straffer
            Zeilenabstand) · Inter (Fliesstext + Utility, tracked Caps für Labels)
   Signatur: Konturlinien — geschichtete, unregelmässige Linien wie
             Höhenlinien einer Berglandschaft und wie Jahresringe im Holz,
             in sehr langsamer Drehung (Lebenszeichen, kein Ornament).
             Dazu ein feines Korn über der ganzen Seite für Haptik statt
             der glatten Flächigkeit generischer Webdesigns.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,680;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --moss: #133249;        /* Navy Blue — Überschriften, Nav-Text */
  --moss-dark: #2B2F35;    /* Cool Gray — dunkle Flächen: Footer, CTA-Band, Studio-Karte */
  --stone: #F1ECE7;        /* helle Abtönung von Taupe — Seitenhintergrund */
  --stone-light: #DED2C9;  /* helle Abtönung von Taupe — Text auf dunklem Grund */
  --ivory: #FAF7F4;        /* helle Abtönung von Taupe — Kartenhintergrund */
  --walnut: #535E4B;       /* Sage Green — Buttons, CTA, Links */
  --walnut-dark: #3F4838;  /* abgedunkeltes Sage Green — Hover */
  --sage: #A89991;         /* Taupe — Sekundärakzent, Label, Konturlinien */
  --ink: #2B2F35;          /* Cool Gray — Fliesstext */
  --line: rgba(43, 47, 53, 0.14);

  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;

  --wrap: 1180px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Feines Korn über der ganzen Seite, fürs Haptische statt digital-glatt */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll-Fortschritt */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--walnut);
  z-index: 1000;
  transition: width 0.1s linear;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--walnut);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--moss-dark);
}

h1 { font-size: clamp(3rem, 7vw, 6.4rem); font-weight: 580; }
h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
h3 { font-size: 1.35rem; font-weight: 540; }

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

.lede {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--moss-dark);
  max-width: 46ch;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 15px 28px;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateY(101%);
  transition: transform 0.4s var(--ease);
}
.btn-primary {
  background: var(--walnut);
  color: var(--ivory);
}
.btn-primary::before { background: var(--walnut-dark); }
.btn-primary:hover::before { transform: translateY(0); }
.btn-ghost {
  background: transparent;
  color: var(--moss-dark);
  border-color: var(--line);
}
.btn-ghost::before { background: var(--moss-dark); }
.btn-ghost:hover { color: var(--ivory); border-color: var(--moss-dark); }
.btn-ghost:hover::before { transform: translateY(0); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Hinweisbalken ---------- */
.notice-bar {
  background: var(--walnut);
  color: var(--ivory);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 12px 0;
}
.notice-bar .wrap { padding: 0 32px; }

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(241, 236, 231, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 32px 14px;
  max-width: var(--wrap);
  margin: 0 auto;
}
.nav-top { display: flex; justify-content: center; }
.nav-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.nav-logo { text-decoration: none; }
.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  position: relative;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--moss-dark);
  padding-bottom: 4px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--walnut);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-phone {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--moss-dark);
  white-space: nowrap;
}
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .site-header { backdrop-filter: none; background: var(--stone); }
  .nav-links { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 45; overflow-y: auto; background: var(--stone); flex-direction: column; padding: calc(var(--header-h, 164px) + 24px) 32px 32px; gap: 18px; transform: translateY(-100%); transition: transform 0.25s ease; }
  .nav-links.open { transform: translateY(0); }
  .nav-phone { display: none; }
  .nav-toggle {
    display: block; background: none; border: none; cursor: pointer;
    font-family: var(--body); font-weight: 600; font-size: 0.9rem; color: var(--moss-dark);
  }
}

/* ---------- Hero ---------- */
.hero {
  padding: 56px 0 30px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 48px;
  align-items: center;
}
.hero-media {
  position: relative;
}
.hero-media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 2px;
}
.hero-contour {
  position: absolute;
  inset: -14% -20% auto auto;
  width: 60%;
  z-index: -1;
  color: var(--sage);
  opacity: 0.55;
  animation: drift 140s linear infinite;
  transform-origin: 50% 50%;
}
.hero-tag {
  position: absolute;
  top: 36px;
  left: -18px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--walnut);
  padding: 16px 8px;
  z-index: 2;
}
@keyframes drift {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
}

/* Grosse, randabfallende Hero-Variante (Startseite, Über mich) */
.hero-bleed .hero-grid { grid-template-columns: 1fr 1fr; }
.hero-bleed .hero-media {
  margin-right: calc((100vw - var(--wrap)) / -2 + 32px);
}
@media (max-width: 1260px) { .hero-bleed .hero-media { margin-right: -32px; } }
@media (max-width: 880px) { .hero-bleed .hero-media { margin-right: 0; } }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-contour { animation: none; }
}

/* ---------- Sections ---------- */
section { padding: 88px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--ivory); }

.section-head { max-width: 60ch; margin-bottom: 48px; }
.section-head h2 { margin-top: 10px; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split img { border-radius: 2px; }
.split.reverse .split-media { order: 2; }
@media (max-width: 880px) {
  .split, .split.reverse .split-media { grid-template-columns: 1fr; order: 0; }
  .split { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card {
  background: var(--ivory);
  padding: 38px 32px;
  border-radius: 2px;
  border: 1px solid transparent;
  box-shadow: 0 1px 0 var(--line);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -20px rgba(19, 50, 73, 0.28);
}
.card .eyebrow { display: block; margin-bottom: 14px; }
@media (max-width: 880px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Contour divider ---------- */
.contour-divider {
  width: 100%;
  height: 44px;
  color: var(--sage);
  opacity: 0.6;
}

/* ---------- Studio band ---------- */
.studio-band { position: relative; }
.studio-band img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }
.studio-card {
  position: absolute;
  bottom: -40px;
  left: 40px;
  background: var(--moss-dark);
  color: var(--stone-light);
  padding: 28px 32px;
  max-width: 320px;
  border-radius: 2px;
  box-shadow: 0 24px 48px -24px rgba(19, 50, 73, 0.45);
}
.studio-card h3 { color: var(--ivory); margin-bottom: 10px; }
.studio-card dl { margin: 0; font-size: 0.92rem; }
.studio-card dt { color: var(--sage); float: left; clear: left; width: 92px; }
.studio-card dd { margin: 0 0 6px 92px; }
@media (max-width: 640px) {
  .studio-card { position: static; margin-top: -1px; max-width: none; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--walnut);
  color: var(--ivory);
  text-align: center;
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: var(--ivory); font-size: clamp(2.4rem, 5vw, 4rem); }
.cta-band .lede { color: var(--ivory); opacity: 0.88; margin: 18px auto 0; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn-ghost { color: var(--ivory); border-color: rgba(250,247,241,0.4); }
.cta-band .btn-ghost::before { background: var(--ivory); }
.cta-band .btn-ghost:hover { color: var(--walnut-dark); }
.cta-band .btn-primary { background: var(--moss-dark); }
.cta-band .btn-primary::before { background: var(--moss); }

/* ---------- Footer ---------- */
footer {
  background: var(--moss);
  color: var(--stone-light);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(250,247,241,0.14);
}
.footer-logo { font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--ivory); }
footer h4 { font-family: var(--body); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin: 0 0 16px; }
footer ul { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
footer li { margin-bottom: 9px; }
footer a { text-decoration: none; color: var(--stone-light); }
footer a:hover { color: var(--ivory); text-decoration: underline; }
footer li a { display: inline-flex; align-items: center; gap: 8px; }
.social-link { display: inline-flex; align-items: center; gap: 8px; }
.social-icon { flex: none; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.82rem;
  color: var(--sage);
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Page header (subpages) ---------- */
.page-hero {
  padding: 48px 0 0;
}
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero-media { margin-top: 40px; }
.page-hero-media img { width: 100%; aspect-ratio: 21/8; object-fit: cover; border-radius: 2px; }

/* ---------- Table (Preise) ---------- */
table.pricelist { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
table.pricelist th { text-align: left; font-family: var(--body); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--walnut); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
table.pricelist td { padding: 14px 0; border-bottom: 1px solid var(--line); }
table.pricelist tr td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Legal pages ---------- */
.legal h2 { margin-top: 44px; margin-bottom: 14px; font-size: 1.4rem; }
.legal p, .legal ul { color: var(--moss-dark); }
.legal { max-width: 74ch; }