@font-face{
    font-family:"Open Sans";
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("fonts/open-sans-400.woff2") format("woff2"), url("fonts/open-sans-400.woff") format("woff");
  }
  @font-face{
    font-family:"Open Sans";
    font-style:normal;
    font-weight:600;
    font-display:swap;
    src:url("fonts/open-sans-600.woff2") format("woff2"), url("fonts/open-sans-600.woff") format("woff");
  }
  @font-face{
    font-family:"Open Sans";
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url("fonts/open-sans-700.woff2") format("woff2"), url("fonts/open-sans-700.woff") format("woff");
  }
  :root{
    --cream:#f9f7f4;
    --cream-deep:#f1ebe6;
    --white:#ffffff;
    --ink:#2b2926;
    --stone:#4f4941;
    --stone-soft:#a39c95;
    --rose:#f0c7b8;
    --rose-deep:#c9917d;
    --rose-line:#e2ac99;
    --teal:#2f9a92;
    --teal-deep:#1f6f69;
    --shadow:0 20px 60px -25px rgba(43,41,38,0.35);
    --header-h:88px;
    /* fixed (not theme-flipped): --rose stays a light/mid warm tone in both
       themes, so text placed directly on it needs a color that stays dark
       in both themes too, for reliable contrast */
    --on-rose:#2b2320;
    --accent-on-rose:#0e3532;
    --rose-deepest:#6b4436;
    --header-bg-top:rgba(249,247,244,0.72);
    --header-bg:rgba(249,247,244,0.92);
  }

  /* Bewusst einthemig (wie die bestehende Seite): Karin Kosmetik hat kein
     Dark Mode-Pendant, die Marke soll für alle Besucher gleich hell und
     warm wirken – daher kein prefers-color-scheme/[data-theme="dark"]. */

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  html, body{
    max-width:100%;
    overflow-x:hidden;
  }
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:17px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 clamp(20px, 5vw, 48px);
  }
  h1,h2,h3,h4{
    font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight:700;
    line-height:1.2;
    margin:0;
    text-wrap:balance;
  }

  /* ---------- Header ---------- */
  #site-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    height:var(--header-h);
    display:flex;
    align-items:center;
    background:var(--header-bg-top);
    transition:background 0.35s ease, box-shadow 0.35s ease, height 0.35s ease;
  }
  #site-header.is-scrolled{
    background:var(--header-bg);
    box-shadow:0 1px 0 rgba(43,41,38,0.08);
    height:72px;
  }
  #site-header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
  }
  .brand img{
    height:40px;
    width:auto;
    transition:height 0.35s ease, opacity 0.3s ease;
  }
  .is-scrolled .brand img{ height:34px; }
  #site-header.hero-in-view .brand img{ opacity:0; }
  .brand-text{
    font-family:"Open Sans", sans-serif;
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:0.02em;
    color:var(--ink);
  }

  nav.primary-nav{
    display:flex;
    align-items:center;
    gap:clamp(18px, 2.4vw, 34px);
  }
  nav.primary-nav a{
    font-size:0.95rem;
    text-decoration:none;
    color:var(--ink);
    position:relative;
    padding:6px 2px;
    white-space:nowrap;
  }
  nav.primary-nav a::after{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:0;
    height:2px;
    background:var(--rose-deep);
    transition:right 0.28s ease;
  }
  nav.primary-nav a:hover::after,
  nav.primary-nav a:focus-visible::after{ right:0; }
  nav.primary-nav a:focus-visible{
    outline:2px solid var(--teal-deep);
    outline-offset:4px;
    border-radius:2px;
  }
  nav.primary-nav .legal-links{
    display:flex;
    gap:16px;
    padding-left:16px;
    margin-left:4px;
    border-left:1px solid var(--rose-line);
  }
  nav.primary-nav .legal-links a{
    font-size:0.82rem;
    font-weight:600;
    color:var(--ink);
  }

  .menu-toggle{
    display:none;
    width:44px; height:44px;
    border:none;
    background:transparent;
    cursor:pointer;
    position:relative;
    z-index:110;
  }
  .menu-toggle span{
    position:absolute;
    left:10px; right:10px;
    height:2px;
    background:var(--ink);
    transition:transform 0.3s ease, opacity 0.3s ease;
  }
  .menu-toggle span:nth-child(1){ top:16px; }
  .menu-toggle span:nth-child(2){ top:22px; }
  .menu-toggle span:nth-child(3){ top:28px; }
  .menu-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity:0; }
  .menu-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  @media (max-width: 880px){
    .menu-toggle{ display:block; }
    nav.primary-nav{
      position:fixed;
      inset:0;
      background:var(--cream);
      flex-direction:column;
      justify-content:center;
      align-items:flex-start;
      padding:0 32px;
      gap:22px;
      transform:translateX(100%);
      transition:transform 0.35s ease;
    }
    nav.primary-nav.is-open{ transform:translateX(0); }
    nav.primary-nav a{ font-size:1.4rem; }
    nav.primary-nav .legal-links{
      border-left:none;
      border-top:1px solid var(--rose-line);
      padding-left:0; padding-top:18px; margin-top:6px; margin-left:0;
      flex-direction:column;
      gap:10px;
    }
  }

  /* ---------- Hero ---------- */
  #top{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:calc(var(--header-h) + 64px) 0 240px;
    background:linear-gradient(155deg, var(--rose) 0%, var(--rose) 55%, var(--rose-line) 100%);
    overflow:hidden;
    text-align:center;
  }
  #top::before{
    content:"";
    position:absolute;
    top:-30%; right:-12%;
    width:56vw; height:56vw;
    max-width:640px; max-height:640px;
    border-radius:50%;
    background:radial-gradient(circle at 40% 40%, rgba(255,255,255,0.35), rgba(255,255,255,0) 70%);
    pointer-events:none;
  }
  #top .hero-content{
    position:relative;
    max-width:880px;
    margin:0 auto;
  }
  .hero-logo{
    width:clamp(100px, 13vw, 168px);
    height:auto;
    margin:0 auto 28px;
    display:block;
  }
  #top .eyebrow{
    display:inline-block;
    font-size:0.84rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--accent-on-rose);
    margin-bottom:22px;
  }
  #top h1{
    font-size:clamp(2.5rem, 6vw, 4.4rem);
    color:var(--on-rose);
    font-weight:700;
  }
  #top p.lead{
    margin:26px auto 0;
    font-size:1.18rem;
    color:var(--on-rose);
    max-width:680px;
  }
  #top .hero-cta{
    margin-top:40px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--rose-deep);
    color:var(--ink);
    padding:16px 32px;
    border-radius:2px;
    text-decoration:none;
    font-weight:600;
    font-size:0.98rem;
    transition:background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  #top .hero-cta:hover{ background:var(--rose-deepest); color:var(--cream); transform:translateY(-2px); }
  #top .hero-cta:focus-visible{ outline:2px solid var(--rose-deepest); outline-offset:3px; }

  /* ---------- Organic section dividers ---------- */
  .wave-divider{
    position:absolute;
    left:0; right:0;
    line-height:0;
    pointer-events:none;
    z-index:1;
  }
  .wave-divider svg{ display:block; width:100%; height:clamp(36px, 6vw, 84px); }
  .wave-divider--bottom{ bottom:-1px; }
  .wave-divider--top{ top:-1px; transform:scaleY(-1); }

  /* ---------- Werte / values ---------- */
  .section-werte{
    padding:clamp(72px, 10vw, 128px) 0;
    background:var(--white);
  }
  .values-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(32px, 5vw, 64px);
  }
  .value-card{
    text-align:center;
    max-width:340px;
    margin:0 auto;
  }
  .value-icon{
    width:44px;
    height:44px;
    margin:0 auto 20px;
    color:var(--rose-deep);
    display:block;
  }
  .value-card h3{
    font-size:1.3rem;
  }
  .value-card p{
    margin:16px 0 0;
    color:var(--stone);
    font-size:0.98rem;
  }
  @media (max-width: 820px){
    .values-grid{ grid-template-columns:1fr; gap:48px; }
  }

  /* ---------- Pull quote on photo ---------- */
  .section-quote{
    position:relative;
    padding:clamp(96px, 16vw, 200px) 0;
    text-align:center;
    background-image:url("img/parallax/img1.jpg");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
  }
  @media (max-width: 820px){
    .section-quote{ background-attachment:scroll; }
  }
  .section-quote::before{
    content:"";
    position:absolute; inset:0;
    background:rgba(255,255,255,0.5);
  }
  .section-quote blockquote{
    position:relative;
    margin:0 auto;
    max-width:820px;
    padding:0 24px;
    font-family:Georgia, "Times New Roman", serif;
    font-weight:700;
    font-style:normal;
    font-size:clamp(1.7rem, 4vw, 2.9rem);
    line-height:1.3;
    color:var(--on-rose);
  }

  /* ---------- Über uns ---------- */
  .section-about{
    padding:clamp(72px, 10vw, 128px) 0;
    background:var(--cream);
  }
  .section-about .intro{
    max-width:620px;
    margin:0 auto;
    text-align:center;
  }
  .section-about .intro h2{
    font-size:clamp(1.8rem, 3.4vw, 2.4rem);
  }
  .section-about .intro p{
    margin:18px 0 0;
    color:var(--stone);
  }
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(40px, 6vw, 88px);
    margin-top:clamp(48px, 7vw, 72px);
  }
  .about-card{
    text-align:center;
    padding:0 12px;
  }
  .about-card + .about-card{
    border-left:1px solid var(--rose-line);
  }
  .about-card h3{
    font-size:1.2rem;
  }
  .about-card p{
    margin:14px 0 0;
    color:var(--stone);
  }
  @media (max-width: 820px){
    .about-grid{ grid-template-columns:1fr; gap:44px; }
    .about-card + .about-card{ border-left:none; border-top:1px solid var(--rose-line); padding-top:36px; }
  }

  section[id]{ scroll-margin-top:var(--header-h); }

  /* ---------- Unser Institut / Galerie ---------- */
  .section-institut{
    padding:clamp(72px, 10vw, 128px) 0;
    background:var(--cream);
  }
  .section-institut .intro{
    max-width:620px;
    margin:0 auto;
    text-align:center;
  }
  .section-institut .intro h2{
    font-size:clamp(1.8rem, 3.4vw, 2.4rem);
  }
  .section-institut .intro p{
    margin:18px 0 0;
    color:var(--stone);
  }
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:minmax(120px, auto);
    gap:clamp(14px, 2vw, 22px);
    margin-top:clamp(48px, 7vw, 72px);
  }
  .gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:4px;
    cursor:zoom-in;
    border:none;
    padding:0;
    background:var(--cream-deep);
  }
  .gallery-item:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .gallery-item:nth-child(4){ grid-column:span 2; }
  .gallery-item img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 0.5s ease;
  }
  .gallery-item:hover img,
  .gallery-item:focus-visible img{ transform:scale(1.06); }
  .gallery-item::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(43,35,32,0) 55%, rgba(43,35,32,0.42) 100%);
    opacity:0;
    transition:opacity 0.3s ease;
    z-index:1;
  }
  .gallery-item:hover::after,
  .gallery-item:focus-visible::after{ opacity:1; }
  .gallery-item:focus-visible{ outline:2px solid var(--rose-deepest); outline-offset:3px; }
  .gallery-caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:14px 16px;
    color:var(--cream);
    font-size:0.85rem;
    font-weight:600;
    letter-spacing:0.01em;
    opacity:0;
    transform:translateY(6px);
    transition:opacity 0.3s ease, transform 0.3s ease;
    z-index:2;
    text-align:left;
  }
  .gallery-item:hover .gallery-caption,
  .gallery-item:focus-visible .gallery-caption{ opacity:1; transform:none; }
  @media (max-width: 820px){
    .gallery-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:minmax(160px, auto); }
    .gallery-item{ aspect-ratio:4/3; }
    .gallery-item:nth-child(1),
    .gallery-item:nth-child(4){ grid-column:span 2; grid-row:span 1; aspect-ratio:16/9; }
  }
  @media (max-width: 520px){
    .gallery-grid{ grid-template-columns:1fr; }
    .gallery-item,
    .gallery-item:nth-child(1),
    .gallery-item:nth-child(4){ grid-column:span 1; grid-row:span 1; aspect-ratio:4/3; }
  }

  /* ---------- Lightbox ---------- */
  .lightbox{
    position:fixed; inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(43,35,32,0.92);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.3s ease;
    padding:24px;
  }
  .lightbox.is-open{ opacity:1; visibility:visible; }
  .lightbox img{
    max-width:min(90vw, 1000px);
    max-height:82vh;
    border-radius:4px;
    box-shadow:var(--shadow);
  }
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next{
    position:absolute;
    background:rgba(249,247,244,0.14);
    border:1px solid rgba(249,247,244,0.4);
    color:var(--cream);
    width:48px; height:48px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    line-height:1;
    transition:background 0.2s ease;
  }
  .lightbox-close:hover,
  .lightbox-prev:hover,
  .lightbox-next:hover{ background:rgba(249,247,244,0.28); }
  .lightbox-close{ top:20px; right:20px; }
  .lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
  .lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
  @media (max-width: 600px){
    .lightbox-prev{ left:8px; }
    .lightbox-next{ right:8px; }
  }

  /* ---------- Kontakt ---------- */
  .section-kontakt{
    padding:clamp(72px, 10vw, 128px) 0;
    background:var(--white);
  }
  .kontakt-inner{
    max-width:680px;
    margin:0 auto;
    text-align:center;
  }
  .kontakt-inner h2{
    font-size:clamp(1.8rem, 3.4vw, 2.4rem);
  }
  .kontakt-note{
    margin:18px auto 0;
    max-width:480px;
    color:var(--stone);
  }
  .kontakt-note b{ color:var(--ink); }
  .kontakt-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:40px 64px;
    margin-top:52px;
  }
  .kontakt-item{ min-width:170px; }
  .kontakt-item .label{
    display:block;
    text-transform:uppercase;
    letter-spacing:0.12em;
    font-size:0.78rem;
    font-weight:700;
    color:var(--accent-on-rose);
    margin-bottom:10px;
  }
  .kontakt-item address,
  .kontakt-item a{
    font-style:normal;
    font-size:1.05rem;
    color:var(--ink);
    text-decoration:none;
    line-height:1.6;
  }
  .kontakt-item a{ border-bottom:1px solid var(--rose-line); transition:color 0.2s ease, border-color 0.2s ease; }
  .kontakt-item a:hover{ color:var(--rose-deepest); border-color:var(--rose-deepest); }
  .kontakt-hint{
    display:block;
    margin-top:10px;
    font-size:0.82rem;
    color:var(--stone-soft);
  }

  .phone-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--rose-deep);
    color:var(--ink);
    padding:13px 26px;
    border-radius:2px;
    font-weight:600;
    font-size:1.02rem;
    border-bottom:none !important;
    transition:background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }
  .phone-cta:hover{ background:var(--rose-deepest); color:var(--cream); transform:translateY(-2px); border-color:transparent; }
  .phone-cta:focus-visible{ outline:2px solid var(--rose-deepest); outline-offset:3px; }
  .phone-cta svg{ width:18px; height:18px; flex-shrink:0; }

  .map-embed{
    width:100%;
    margin-top:56px;
    overflow:hidden;
    height:clamp(320px, 45vw, 480px);
    background:var(--cream-deep);
  }
  .map-embed.is-loaded{
    filter:grayscale(0.3) contrast(1.05) brightness(1.02);
    transition:filter 0.4s ease;
  }
  .map-embed.is-loaded:hover,
  .map-embed.is-loaded:focus-within{ filter:none; }
  .map-embed iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
  }
  .map-load-btn{
    width:100%; height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:none;
    cursor:pointer;
    background:radial-gradient(circle at 50% 30%, var(--cream) 0%, var(--cream-deep) 100%);
    color:var(--rose-deepest);
    font-family:inherit;
    font-weight:600;
    font-size:0.95rem;
    transition:background 0.25s ease;
  }
  .map-load-btn:hover,
  .map-load-btn:focus-visible{ background:var(--cream-deep); }
  .map-load-btn svg{ width:32px; height:32px; }

  /* ---------- Rechtliches (Impressum & Datenschutz) ---------- */
  .section-legal{
    padding:clamp(56px, 8vw, 96px) 0;
  }
  .section-legal.bg-cream{ background:var(--cream); }
  .section-legal.bg-white{ background:var(--white); }
  .section-legal--page{
    padding-top:calc(var(--header-h) + clamp(56px, 8vw, 96px));
    min-height:100vh;
  }
  .legal-inner{
    max-width:680px;
    margin:0 auto;
    font-size:0.94rem;
    color:var(--stone);
  }
  .legal-inner h2{
    font-size:clamp(1.5rem, 2.6vw, 1.9rem);
    color:var(--ink);
    text-align:center;
    margin-bottom:36px;
  }
  .legal-inner h3{
    font-size:1.02rem;
    color:var(--ink);
    margin:28px 0 8px;
  }
  .legal-inner h3:first-of-type{ margin-top:0; }
  .legal-inner p{ margin:0 0 12px; }
  .legal-inner ul{ margin:0 0 12px; padding-left:20px; }
  .legal-inner li{ margin-bottom:4px; }
  .legal-inner a{ color:var(--rose-deepest); }
  .legal-inner .source{ margin-top:24px; font-size:0.82rem; color:var(--stone-soft); }
  .legal-inner .back-link{
    display:inline-block;
    margin-bottom:32px;
    font-size:0.9rem;
    font-weight:600;
    color:var(--rose-deepest);
    text-decoration:none;
  }
  .legal-inner .back-link:hover{ text-decoration:underline; }

  /* ---------- Footer ---------- */
  .site-footer{
    position:relative;
    padding:48px 0 36px;
    background:linear-gradient(155deg, var(--rose-line) 0%, var(--rose) 45%);
    text-align:center;
  }
  .site-footer p{
    margin:0;
    font-size:0.9rem;
    color:var(--on-rose);
  }

  /* ---------- Scroll reveal (subtle, JS-gated) ---------- */
  .js-reveal .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity 0.6s cubic-bezier(.16,.8,.4,1), transform 0.6s cubic-bezier(.16,.8,.4,1);
  }
  .js-reveal .reveal.is-visible{
    opacity:1;
    transform:none;
  }
  .value-card:nth-child(2), .about-card:nth-child(2), .kontakt-item:nth-child(2){ transition-delay:0.08s; }
  .value-card:nth-child(3){ transition-delay:0.16s; }
  .gallery-item:nth-child(2){ transition-delay:0.06s; }
  .gallery-item:nth-child(3){ transition-delay:0.12s; }
  .gallery-item:nth-child(4){ transition-delay:0.18s; }
  .gallery-item:nth-child(5){ transition-delay:0.24s; }
  .gallery-item:nth-child(6){ transition-delay:0.3s; }