/* Milan Wehrmann – eigenes Stylesheet (ergänzt Bootstrap 5.3) */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  --mw-wald: #22362f;      /* Tannengrün */
  --mw-see: #2f4f5c;       /* Bergsee */
  --mw-fels: #d9d6ce;      /* Kalkstein */
  --mw-schnee: #f6f7f5;    /* Schnee */
  --mw-moos: #6e7f3a;      /* Moos */
  --mw-ink: #1b211e;
  --mw-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mw-sans: "Karla", "Helvetica Neue", Arial, sans-serif;

  --bs-body-font-family: var(--mw-sans);
  --bs-body-color: var(--mw-ink);
  --bs-body-bg: var(--mw-schnee);
  --bs-link-color: var(--mw-see);
  --bs-link-color-rgb: 47, 79, 92;
  --bs-link-hover-color: var(--mw-wald);
  --bs-link-hover-color-rgb: 34, 54, 47;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
main { overflow-x: clip; }
body { font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, .serif { font-family: var(--mw-serif); font-weight: 400; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }

a { text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--mw-moos); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 2000; background: var(--mw-wald); color: #fff; padding: .6rem 1rem; }
.skip-link:focus { top: 1rem; }

/* ---------- Navigation ---------- */
.mw-nav { transition: background-color .4s ease, box-shadow .4s ease, padding .4s ease; padding: 1.25rem 0; }
.mw-nav .navbar-brand { font-family: var(--mw-serif); font-size: 1.35rem; color: #fff; display: flex; align-items: center; gap: .65rem; }
.mw-nav .brand-logo { width: 2.25rem; height: 2.25rem; border-radius: 3px; flex-shrink: 0; }
.mw-nav .nav-link { color: rgba(255,255,255,.88); font-size: .98rem; }
.mw-nav .nav-link:hover, .mw-nav .nav-link:focus { color: #fff; }
.mw-nav.is-scrolled, .mw-nav.is-open { background: rgba(34, 54, 47, .96); padding: .6rem 0; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.mw-nav .navbar-toggler { border-color: rgba(255,255,255,.4); }
.mw-nav .navbar-toggler-icon { filter: invert(1); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; color: #fff; overflow: hidden; background: var(--mw-wald); }
.hero .carousel, .hero .carousel-inner, .hero .carousel-item { position: absolute; inset: 0; height: 100%; }
.hero .carousel-item picture, .hero .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .carousel-item.active img { animation: drift 14s ease-out forwards; }
.hero .carousel-fade .carousel-item { transition-duration: 1.6s; }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(27,33,30,.45) 0%, rgba(27,33,30,.1) 35%, rgba(27,33,30,.72) 100%);
}
.hero-content { position: relative; z-index: 2; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(3rem, 9vh, 6rem); }
.hero h1 {
  font-size: clamp(3.4rem, 11vw, 9.5rem); line-height: .92; font-weight: 300;
  letter-spacing: -0.035em; margin: 0 0 1.5rem;
  font-variation-settings: "opsz" 72;
}
.hero h1 span { display: block; }
.hero h1 .last { font-style: italic; padding-left: clamp(1.5rem, 8vw, 7rem); }
.hero-lead { max-width: 34rem; font-size: 1.15rem; color: rgba(255,255,255,.9); }

/* Einmalige Lade-Sequenz */
.load-in { opacity: 0; transform: translateY(18px); animation: rise 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.load-in.d1 { animation-delay: .15s; } .load-in.d2 { animation-delay: .35s; }
.load-in.d3 { animation-delay: .6s; }  .load-in.d4 { animation-delay: .85s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn-mw { --bs-btn-bg: var(--mw-schnee); --bs-btn-color: var(--mw-wald); --bs-btn-border-color: var(--mw-schnee);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: var(--mw-wald); --bs-btn-hover-border-color: #fff;
  border-radius: 999px; padding: .75rem 1.6rem; font-weight: 600; }
.btn-line { --bs-btn-color: var(--mw-wald); --bs-btn-border-color: var(--mw-wald);
  --bs-btn-hover-bg: var(--mw-wald); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--mw-wald);
  border-radius: 999px; padding: .6rem 1.35rem; font-weight: 600; }

/* ---------- Sektionen ---------- */
.section { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.section-intro { max-width: 36rem; color: #4a524e; }

/* Angebote: redaktionelle Zeilen statt Kartenraster */
.offer { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--mw-fels); }
.offer:last-child { border-bottom: 1px solid var(--mw-fels); }
.offer-img { overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; }
.offer-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.offer a:hover .offer-img img, .offer a:focus-visible .offer-img img { transform: scale(1.04); }
.offer h3 a { color: inherit; text-decoration: none; }
.offer h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.offer-meta { color: var(--mw-moos); font-weight: 600; font-size: .95rem; margin-bottom: .5rem; }

/* Mycosia-Band */
.project { background: #fff; }
.project-logo { width: 240px; max-width: 100%; height: auto; }
.project-item { padding: 0 0 2.5rem; }
.project-item + .project-item { padding-top: 2.5rem; border-top: 1px solid var(--mw-fels); padding-bottom: 0; }

/* Über mich */
.about { background: var(--mw-fels); }
.portrait { border-radius: 50% 50% 4px 4px / 38% 38% 4px 4px; width: 100%; height: auto; }
.about blockquote { font-family: var(--mw-serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--mw-wald); margin: 0 0 2.5rem; }
.cv { list-style: none; padding: 0; margin: 0; }
.cv li { display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(34,54,47,.18); }
.cv time { font-family: var(--mw-serif); font-size: 1.15rem; color: var(--mw-moos); }

/* Kontakt */
.contact { background: var(--mw-wald); color: rgba(255,255,255,.9); }
.contact h2 { color: #fff; }
.contact a { color: #fff; }
.contact address { font-style: normal; font-size: 1.15rem; line-height: 1.7; }
.contact-big { font-family: var(--mw-serif); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.25; }
.contact-big a { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.contact-big a:hover { border-bottom-color: #fff; }

footer { background: var(--mw-ink); color: rgba(255,255,255,.65); font-size: .92rem; }
footer a { color: rgba(255,255,255,.85); }

/* Dezente Einblendung beim Scrollen */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Rechtliches */
.legal { padding-top: 8rem; }
.legal h2 { font-size: 1.6rem; margin-top: 2.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .load-in, .reveal { opacity: 1 !important; transform: none !important; }
}