/* ===== Konzeptraum — Shared Styles ===== */

/* Lokale Schriften (DSGVO-konform, kein externer Google-Aufruf).
   Dateien liegen in assets/fonts/ — siehe FONTS-README.txt für Download-Anleitung. */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:300 700;
  font-display:swap; src:url('assets/fonts/fraunces-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:300 700;
  font-display:swap; src:url('assets/fonts/fraunces-italic-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('assets/fonts/inter-latin.woff2') format('woff2');
}

:root{
  --green:#0f5f53;
  --green-deep:#0a4339;
  --green-light:#15705f;
  --pink:#e8a0bb;
  --pink-deep:#dd7fa0;
  --white:#ffffff;
  --paper:#f6f4ef;
  --ink:#0b1c18;
  --line: rgba(255,255,255,0.16);
  --line-dark: rgba(11,28,24,0.10);
  --radius: 22px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.08;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
section{padding:120px 0; position:relative;}
@media(max-width:768px){section{padding:72px 0;}}

::selection{background:var(--pink); color:var(--ink);}

/* Scrollbar accent */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--paper);}
::-webkit-scrollbar-thumb{background:var(--green); border-radius:10px;}

/* ===== Blur Orbs (ambient background) ===== */
.orb{
  position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0;
  opacity:.55;
}
.orb-green{background:radial-gradient(circle, var(--green-light), transparent 70%);}
.orb-pink{background:radial-gradient(circle, var(--pink), transparent 70%);}

/* ===== Cursor glow ===== */
#cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,160,187,0.16), transparent 70%);
  pointer-events:none; z-index:1; transform:translate(-50%,-50%);
  transition:opacity .3s ease; left:-9999px; top:-9999px;
}

/* ===== Eyebrow ===== */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--pink-deep);
  margin-bottom:18px;
}
.on-dark .eyebrow{color:var(--pink);}
.eyebrow::before{content:""; width:18px; height:2px; background:currentColor; display:inline-block;}

/* ===== Glass card ===== */
.glass{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:var(--radius);
}
.glass-light{
  background:rgba(255,255,255,0.65);
  border:1px solid rgba(255,255,255,0.6);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius);
}

/* ===== NAV ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(15,95,83,0.55);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:0 auto; padding:16px 28px;
}
.logo{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:700; font-size:21px; color:var(--white);}
.logo img{height:132px; width:auto; filter:brightness(0) invert(1);}
.nav-links{display:flex; gap:34px; font-size:15px; font-weight:500; color:var(--white);}
.nav-links a{position:relative; padding:4px 0; opacity:.88;}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--pink);
  transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a:hover, .nav-links a.active{opacity:1;}
.nav-cta{
  background:var(--pink); color:var(--ink); padding:11px 22px; border-radius:30px;
  font-size:14px; font-weight:700; transition:transform .2s ease, background .2s ease;
}
.nav-cta:hover{background:var(--white); transform:translateY(-2px);}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.burger span{width:24px; height:2px; background:var(--white);}
@media(max-width:900px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .burger{display:flex;}
}
.mobile-menu{
  display:none; position:fixed; inset:0; z-index:300; background:var(--green-deep);
  flex-direction:column; padding:100px 32px 40px; gap:26px;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{color:var(--white); font-family:'Fraunces',serif; font-size:28px;}
.mobile-menu .close-btn{position:absolute; top:24px; right:28px; color:var(--white); font-size:30px; background:none; border:none; cursor:pointer;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 28px; border-radius:30px; font-weight:600; font-size:15px;
  transition:all .25s ease; border:1px solid transparent; cursor:pointer; font-family:'Inter';
}
.btn-primary{background:var(--pink); color:var(--ink);}
.btn-primary:hover{background:var(--white); transform:translateY(-2px);}
.btn-dark{background:var(--green-deep); color:var(--white);}
.btn-dark:hover{background:var(--ink); transform:translateY(-2px);}
.btn-ghost-light{border-color:rgba(255,255,255,0.4); color:var(--white);}
.btn-ghost-light:hover{border-color:var(--white); background:rgba(255,255,255,0.12);}
.btn-ghost-dark{border-color:var(--line-dark); color:var(--ink);}
.btn-ghost-dark:hover{border-color:var(--ink); background:var(--ink); color:var(--white);}

/* ===== Marquee ===== */
.marquee{
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  padding:20px 0; overflow:hidden; white-space:nowrap; background:var(--paper);
}
.marquee-track{display:inline-flex; gap:60px; animation:scroll 30s linear infinite; font-size:14px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(11,28,24,.5);}
.marquee-track span{display:inline-flex; align-items:center; gap:60px;}
.marquee-track span::after{content:"●"; color:var(--pink-deep); font-size:8px;}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ===== Section head ===== */
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; position:relative; z-index:2;}
.sec-head h2{font-size:clamp(30px,4vw,46px); max-width:560px;}
.sec-head p{max-width:360px; color:rgba(11,28,24,.62); font-size:15.5px;}
.on-dark .sec-head h2, .on-dark .sec-head p{color:var(--white);}
.on-dark .sec-head p{color:rgba(255,255,255,.7);}
@media(max-width:760px){.sec-head{flex-direction:column; align-items:flex-start;}}

/* ===== Footer ===== */
footer{background:var(--green-deep); color:var(--white); padding:64px 0 28px; position:relative; overflow:hidden;}
.footer-grid{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid var(--line); position:relative; z-index:2;}
.footer-brand .logo img{height:80px; filter:brightness(0) invert(1); opacity:.9;}
.footer-brand p{color:rgba(255,255,255,.6); font-size:14px; margin-top:14px; max-width:280px;}
.footer-links{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h4{font-size:13px; text-transform:uppercase; letter-spacing:.06em; opacity:.55; margin-bottom:16px;}
.footer-col a{display:block; font-size:14.5px; margin-bottom:11px; opacity:.85;}
.footer-col a:hover{opacity:1; color:var(--pink);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:13px; opacity:.55; flex-wrap:wrap; gap:10px; position:relative; z-index:2;}

/* ===== Reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ===== Page hero banner (subpages) ===== */
.page-hero{
  background:linear-gradient(155deg, var(--green) 0%, var(--green-deep) 100%);
  color:var(--white); padding:188px 0 90px; position:relative; overflow:hidden;
}
.page-hero h1{font-size:clamp(38px,5.5vw,62px); max-width:760px;}
.page-hero p{margin-top:20px; font-size:18px; max-width:560px; color:rgba(255,255,255,.78);}

/* ===== Service tabs (Pakete-Seite) ===== */
.tabs{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:48px;}
.tab-btn{
  border:1.5px solid var(--line-dark); background:var(--white); border-radius:30px; padding:11px 20px;
  font-size:14px; font-weight:600; cursor:pointer; transition:all .2s ease; color:var(--ink);
}
.tab-btn:hover{border-color:var(--green);}
.tab-btn.active{background:var(--green); border-color:var(--green); color:#fff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ===== Service teaser grid (Startseite) ===== */
.svc-teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media(max-width:900px){.svc-teaser-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.svc-teaser-grid{grid-template-columns:1fr;}}
.svc-card{
  background:var(--white); border:1px solid var(--line-dark); border-radius:18px; padding:26px 24px;
  display:flex; flex-direction:column; gap:8px; transition:transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover{transform:translateY(-5px); box-shadow:0 18px 36px rgba(15,95,83,.10);}
.svc-card .t{font-weight:700; font-size:16px;}
.svc-card .p{font-size:13px; color:rgba(11,28,24,.55);}
.svc-card .from{font-family:'Fraunces',serif; font-size:20px; color:var(--green); margin-top:6px;}

@media(prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ===== Cookie Banner ===== */
#cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:500;
  max-width:640px; margin:0 auto;
  background:var(--green-deep); color:#fff;
  border-radius:20px; padding:22px 26px;
  box-shadow:0 30px 70px rgba(0,0,0,.28);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  transform:translateY(140%); transition:transform .5s ease;
  border:1px solid rgba(255,255,255,.12);
}
#cookie-banner.show{transform:translateY(0);}
#cookie-banner p{font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.82); flex:1; min-width:220px;}
#cookie-banner a{color:var(--pink); text-decoration:underline;}
#cookie-banner .cookie-actions{display:flex; gap:10px; flex-shrink:0;}
#cookie-banner button{
  border-radius:30px; padding:11px 20px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid transparent; font-family:'Inter';
}
#cookie-banner .cookie-accept{background:var(--pink); color:var(--green-deep);}
#cookie-banner .cookie-accept:hover{background:#fff;}
#cookie-banner .cookie-decline{background:transparent; color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.3);}
#cookie-banner .cookie-decline:hover{border-color:#fff; color:#fff;}
@media(max-width:520px){
  #cookie-banner{flex-direction:column; align-items:flex-start; padding:20px;}
  #cookie-banner .cookie-actions{width:100%;}
  #cookie-banner button{flex:1;}
}