/*
Theme Name: LuarMedia
Theme URI: https://luarmedia.de
Author: LuarMedia
Author URI: https://luarmedia.de
Description: Individuelles Theme für LuarMedia — Webdesign, Logo Design, Branding & Rebranding, Social Media Content. Gebaut aus dem freigegebenen Website-Prototyp.
Version: 1.0
Requires PHP: 7.4
Text Domain: luarmedia
*/

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

  :root{
    --bg:#0e0c09;
    --bg-soft:#161310;
    --bg-card:#1a160f;
    --bg-card-hover:#211c13;
    --ink:#f3ede0;
    --ink-dim:#a79d88;
    --ink-faint:#7d735e;
    --line:#2b2619;
    --accent:#ff6a1f;
    --accent-dark:#d9541a;
    --dark:#040302;
    --dark-text:#f3ede0;
    --green:#8fbf9f;
    --red:#d98f7e;
    --maxw:1180px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}
  @media(max-width:640px){.wrap{padding:0 22px;}}
  .serif{font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:400;}
  .eyebrow{
    font-size:11.5px; letter-spacing:0.2em; text-transform:uppercase;
    color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
  }
  .crescent{
    display:inline-block; width:13px; height:13px; border-radius:50%;
    background:var(--accent); position:relative; flex-shrink:0;
  }
  .crescent::after{
    content:''; position:absolute; top:-1px; left:4px; width:13px; height:13px; border-radius:50%;
    background:var(--bg);
  }
  .panel .crescent::after{background:var(--bg-soft);}
  .dark .crescent{background:var(--accent);}
  .dark .crescent::after{background:var(--dark);}
  .check-box .crescent::after, .includes-box .crescent::after{background:var(--bg-card);}
  h1,h2,h3{font-family:'Inter'; font-weight:500; letter-spacing:-0.02em; color:var(--ink);}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 30px; font-size:13.5px; letter-spacing:0.02em; font-weight:500;
    border-radius:100px; transition:all .3s cubic-bezier(.4,0,.2,1); cursor:pointer;
    border:1px solid transparent; white-space:nowrap;
  }
  .btn-primary{background:var(--ink); color:var(--bg);}
  .btn-primary:hover{background:var(--accent-dark); transform:translateY(-2px);}
  .btn-ghost{border-color:var(--line); color:var(--ink); background:transparent;}
  .btn-ghost:hover{border-color:var(--ink); background:var(--bg-card);}
  .btn-gold{background:var(--accent); color:#1a1510;}
  .btn-gold:hover{background:#dcc08f; transform:translateY(-2px);}

  /* ---------- ambient animated glow ---------- */
  .glow{
    position:absolute; border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, rgba(255,106,31,0.20), rgba(255,106,31,0.02) 60%, transparent 75%);
    animation:drift 16s ease-in-out infinite alternate;
  }
  @keyframes drift{
    0%{transform:translate(0,0) scale(1);}
    100%{transform:translate(-30px,30px) scale(1.08);}
  }

  /* ---------- Nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:200;
    background:rgba(14,12,9,0.7);
    backdrop-filter:blur(16px) saturate(1.4);
    border-bottom:1px solid transparent;
    transition:all .35s ease;
  }
  header.scrolled{border-bottom-color:var(--line); background:rgba(14,12,9,0.92);}
  nav.wrap{display:flex; align-items:center; justify-content:space-between; height:80px;}
  @keyframes navItemIn{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;}}
  .logo{font-size:21px; letter-spacing:-0.01em; font-weight:700; display:inline-flex; align-items:center; gap:9px; transition:letter-spacing .35s; animation:navItemIn .6s cubic-bezier(.4,0,.2,1) backwards; color:var(--ink-dim);}
  .logo img{height:28px; width:auto; display:block;}
  .logo:hover{letter-spacing:0;}
  .logo span{color:var(--accent); font-weight:700;}
  .logo .crescent{animation:moonPulse 5s ease-in-out infinite;}
  .nav-links{display:none; gap:38px; align-items:center;}
  @media(min-width:920px){.nav-links{display:flex;}}
  .nav-links > li{position:relative; animation:navItemIn .6s cubic-bezier(.4,0,.2,1) backwards;}
  .nav-links > li:nth-child(1){animation-delay:.08s;}
  .nav-links > li:nth-child(2){animation-delay:.15s;}
  .nav-links > li:nth-child(3){animation-delay:.22s;}
  .nav-links .top-link{
    position:relative; font-size:13.5px; color:var(--ink-dim); letter-spacing:0.01em; padding:8px 0;
    transition:color .2s; cursor:pointer; display:inline-block;
  }
  .nav-links .top-link::after{
    content:''; position:absolute; left:0; bottom:2px; width:0; height:1px; background:var(--accent);
    transition:width .35s cubic-bezier(.4,0,.2,1);
  }
  .nav-links > li:hover .top-link{color:var(--ink);}
  .nav-links > li:hover .top-link::after{width:100%;}
  .dropdown{
    position:absolute; top:36px; left:-20px; min-width:230px;
    background:var(--bg-card); border:1px solid var(--line); border-radius:14px;
    padding:10px; opacity:0; visibility:hidden; transform:translateY(6px);
    transition:all .25s ease; box-shadow:0 20px 40px rgba(30,26,18,0.08);
  }
  .nav-links > li:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
  .dropdown a{display:block; padding:11px 14px; font-size:13.5px; color:var(--ink-dim); border-radius:8px; transition:all .2s;}
  .dropdown a:hover{background:var(--bg-soft); color:var(--ink); padding-left:18px;}
  .nav-right{display:flex; align-items:center; gap:18px;}
  .nav-cta{display:none; animation:navItemIn .6s cubic-bezier(.4,0,.2,1) .3s backwards;}
  @media(min-width:920px){.nav-cta{display:inline-flex;}}
  .burger{display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:6px; justify-content:center; animation:navItemIn .6s cubic-bezier(.4,0,.2,1) .3s backwards;}
  @media(min-width:920px){.burger{display:none;}}
  .burger span{width:22px; height:1.5px; background:var(--ink); transition:all .3s cubic-bezier(.4,0,.2,1); transform-origin:center;}
  .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  .mobile-nav{
    position:fixed; inset:0; background:var(--bg); z-index:300;
    display:flex; flex-direction:column; padding:110px 34px 40px;
    transform:translateX(100%); transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
  .mobile-nav.open{transform:translateX(0);}
  .mobile-nav a{font-size:24px; padding:16px 0; border-bottom:1px solid var(--line); color:var(--ink);}
  .mobile-close{position:absolute; top:30px; right:34px; font-size:26px; cursor:pointer;}

  /* ---------- Page entrance ---------- */
  main{animation:viewIn .5s cubic-bezier(.4,0,.2,1);}
  @keyframes viewIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

  /* ---------- Reveal-on-scroll (home only) ---------- */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);}
  .reveal.visible{opacity:1; transform:none;}

  section{position:relative;}
  .section{padding:150px 0;}
  .section-sm{padding:110px 0;}
  .border-top{border-top:1px solid var(--line);}
  .panel{background:var(--bg-soft);}
  .dark{background:var(--dark); color:var(--dark-text);}
  .dark .eyebrow{color:var(--accent);}
  .dark h1, .dark h2, .dark h3{color:var(--dark-text);}
  .dark p{color:#bdb4a0;}

  .section-head{max-width:660px; margin-bottom:64px;}
  .section-head h2{font-size:clamp(30px,4.2vw,46px); line-height:1.15;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

  /* ---------- Hero ---------- */
  .hero{min-height:100vh; display:flex; align-items:center; padding-top:80px; overflow:hidden;}
  .hero .glow{width:640px; height:640px; top:-160px; right:-200px;}
  .hero .glow.two{width:360px; height:360px; bottom:-100px; left:-140px; animation-duration:22s;}
  .hero-inner{max-width:800px; position:relative; z-index:2;}
  .hero h1{font-size:clamp(40px,6.4vw,74px); line-height:1.06; margin-bottom:28px;}
  .hero p.lead{font-size:19px; color:var(--ink-dim); max-width:540px; margin-bottom:44px; font-weight:300;}
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

  /* ---------- Principles band ---------- */
  .principles-band{overflow:hidden;}
  .principles-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(243,237,224,0.08);}
  @media(min-width:700px){.principles-grid{grid-template-columns:repeat(5,1fr);}}
  .principle-card{background:var(--dark); padding:40px 26px; position:relative; overflow:hidden; transition:background .35s;}
  .principle-card:hover{background:#0a0806;}
  .principle-card .bignum{position:absolute; top:-10px; right:8px; font-family:'Fraunces'; font-style:italic; font-size:70px; color:rgba(255,106,31,0.07); line-height:1; transition:color .35s, transform .35s; pointer-events:none;}
  .principle-card:hover .bignum{color:rgba(255,106,31,0.16); transform:translateY(-4px);}
  .principle-card h4{font-size:15.5px; font-weight:600; margin-bottom:6px; position:relative; z-index:1; color:var(--dark-text);}
  .principle-card p{font-size:12.5px; color:var(--ink-faint); position:relative; z-index:1;}
  .principle-card .bar{position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.4,0,.2,1);}
  .principle-card:hover .bar{transform:scaleX(1);}

  /* ---------- Wer wir sind visual ---------- */
  .wws-grid{display:grid; grid-template-columns:1fr; gap:50px; align-items:center;}
  @media(min-width:900px){.wws-grid{grid-template-columns:1.15fr 0.85fr;}}
  .wws-text p{color:var(--ink-dim); font-size:16px; margin-bottom:20px; max-width:560px;}
  .wws-visual{display:flex; align-items:center; justify-content:center; min-height:260px; position:relative;}
  @keyframes moonPulse{0%,100%{transform:scale(1); opacity:.75;} 50%{transform:scale(1.1); opacity:1;}}
  @keyframes moonSpin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .moon-orb{position:relative; width:200px; height:200px;}
  .moon-glow{position:absolute; inset:-46px; border-radius:50%; background:radial-gradient(circle, rgba(255,106,31,0.22), transparent 70%); animation:moonPulse 6s ease-in-out infinite;}
  .moon-disc{position:absolute; inset:0; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow:0 0 70px rgba(255,106,31,0.35); overflow:hidden;}
  .moon-disc::after{content:''; position:absolute; top:6%; left:24%; width:100%; height:100%; border-radius:50%; background:var(--bg);}
  .moon-ring{position:absolute; inset:-32px; border:1px dashed rgba(255,106,31,0.3); border-radius:50%; animation:moonSpin 44s linear infinite;}
  .moon-ring::before{content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(255,106,31,0.7);}
  .moon-ring.two{inset:-58px; animation:moonSpin 60s linear infinite reverse; border-color:rgba(255,106,31,0.15);}
  .moon-ring.two::before{width:5px; height:5px; margin-left:-2.5px; background:var(--ink-dim); box-shadow:none;}

  /* ---------- Services grid (home) ---------- */
  .services-grid{display:grid; grid-template-columns:1fr; gap:2px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden;}
  @media(min-width:700px){.services-grid{grid-template-columns:repeat(2,1fr);}}
  .service-card{background:var(--bg-card); padding:46px 38px; transition:background .3s, transform .35s; display:block; position:relative; overflow:hidden; opacity:0; transform:translateY(22px);}
  .service-card.visible{opacity:1; transform:none; transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1), background .3s;}
  .services-grid .service-card:nth-child(1){transition-delay:0s;}
  .services-grid .service-card:nth-child(2){transition-delay:.1s;}
  .services-grid .service-card:nth-child(3){transition-delay:.2s;}
  .services-grid .service-card:nth-child(4){transition-delay:.3s;}
  .service-card:hover{background:var(--bg-soft); transform:translateY(-6px);}
  .service-card::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--accent), transparent); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.4,0,.2,1);}
  .service-card:hover::before{transform:scaleX(1);}
  .service-card .idx{font-family:'Fraunces'; font-style:italic; color:var(--ink-faint); font-size:30px; margin-bottom:20px; display:block; transition:color .3s;}
  .service-card:hover .idx{color:var(--accent);}
  .service-card h3{font-size:22px; margin-bottom:12px; font-weight:500;}
  .service-card p{font-size:14.5px; color:var(--ink-dim); margin-bottom:18px;}
  .service-card .go{font-size:12.5px; color:var(--accent); letter-spacing:0.03em; font-weight:600; display:inline-flex; align-items:center; gap:4px; transition:gap .25s;}
  .service-card:hover .go{gap:9px;}

  /* ---------- Referenzen ---------- */
  .ref-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
  .ref-item{background:var(--bg-card); padding:24px 26px; display:flex; align-items:center; justify-content:space-between; font-size:14.5px; transition:background .25s;}
  .ref-item:hover{background:var(--bg-soft);}
  .ref-item .arrow{color:var(--accent); opacity:0; transition:opacity .25s, transform .25s; transform:translateX(-4px);}
  .ref-item:hover .arrow{opacity:1; transform:translateX(0);}

  /* ---------- Case studies ---------- */
  .case-group{margin-bottom:52px;}
  .case-group-title{font-size:12.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:22px; padding-bottom:14px; border-bottom:1px dotted var(--line);}
  .case-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px;}
  .case-card{background:var(--bg-card); border:1px solid var(--line); border-radius:14px; padding:26px 24px; transition:border-color .25s;}
  .case-card:hover{border-color:rgba(255,106,31,0.4);}
  .case-card h4{font-size:16.5px; font-weight:500; margin-bottom:8px; color:var(--ink);}
  .case-loc{font-size:12px; color:var(--ink-faint); font-weight:400;}
  .case-card p{font-size:13.5px; color:var(--ink-dim); margin-bottom:16px;}
  .video-links{display:flex; flex-wrap:wrap; gap:8px;}
  .video-pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:7px 13px; border-radius:100px; border:1px solid var(--line); color:var(--ink-dim); transition:all .2s;}
  .video-pill:hover{border-color:var(--accent); color:var(--accent);}

  /* ---------- Website screenshot cards ---------- */
  .site-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;}
  .site-card{display:block; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg-card); transition:transform .3s cubic-bezier(.4,0,.2,1), border-color .3s;}
  .site-card:hover{transform:translateY(-5px); border-color:rgba(255,106,31,0.4);}
  .site-mock-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--bg-soft); border-bottom:1px solid var(--line);}
  .site-mock-bar span{width:7px; height:7px; border-radius:50%; background:var(--line);}
  .site-shot{aspect-ratio:16/10; background:linear-gradient(135deg, var(--bg-soft), var(--bg-card)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
  .site-shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block;}
  .site-shot .shot-placeholder{font-family:'Fraunces'; font-style:italic; color:var(--ink-faint); font-size:12.5px; letter-spacing:0.03em;}
  .site-card-foot{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; font-size:14px; color:var(--ink-dim);}
  .site-card-foot .arrow{color:var(--accent); opacity:0; transition:opacity .25s, transform .25s; transform:translateX(-4px);}
  .site-card:hover .arrow{opacity:1; transform:translateX(0);}

  /* ---------- Logo portfolio cards ---------- */
  .logo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px;}
  .logo-card{border:1px solid var(--line); border-radius:14px; background:var(--bg-card); padding:26px 18px; display:flex; flex-direction:column; align-items:center; gap:14px; transition:transform .3s, border-color .3s;}
  .logo-card:hover{transform:translateY(-5px); border-color:rgba(255,106,31,0.4);}
  .logo-card .logo-img-wrap{width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
  .logo-card .logo-img-wrap img{max-width:100%; max-height:100%; object-fit:contain;}
  .logo-card .logo-img-wrap .shot-placeholder{font-family:'Fraunces'; font-style:italic; color:var(--ink-faint); font-size:12px; text-align:center;}
  .logo-card .logo-name{font-size:13px; color:var(--ink-dim); text-align:center;}
  .logo-card{cursor:pointer;}
  .logo-card .logo-cta{font-size:11.5px; color:var(--accent); letter-spacing:0.03em;}

  /* ---------- Logo case-study modal ---------- */
  .modal-overlay{position:fixed; inset:0; background:rgba(4,3,2,0.82); z-index:500; display:none; align-items:flex-start; justify-content:center; padding:90px 20px; overflow-y:auto;}
  .modal-overlay.open{display:flex;}
  .modal-panel{background:var(--bg-soft); border:1px solid var(--line); border-radius:20px; max-width:640px; width:100%; padding:44px 40px; position:relative; animation:viewIn .35s cubic-bezier(.4,0,.2,1);}
  @media(max-width:600px){.modal-panel{padding:34px 24px;}}
  .modal-close{position:absolute; top:22px; right:26px; font-size:20px; cursor:pointer; color:var(--ink-faint); transition:color .2s;}
  .modal-close:hover{color:var(--ink);}
  .modal-logo-img{max-width:200px; max-height:110px; object-fit:contain; margin-bottom:22px;}
  .modal-eyebrow{font-size:11.5px; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:14px; display:block;}
  .modal-panel h3{font-size:24px; margin-bottom:22px; font-family:'Fraunces'; font-style:italic; font-weight:400; color:var(--ink); line-height:1.35;}
  .modal-stage{margin-bottom:22px; padding-top:18px; border-top:1px dotted var(--line);}
  .modal-stage:first-of-type{border-top:none; padding-top:0;}
  .modal-stage .stage-label{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px; display:block;}
  .modal-stage p{font-size:14.5px; color:var(--ink-dim); line-height:1.6;}
  .modal-gallery{display:flex; flex-direction:column; gap:12px;}
  .modal-gallery img{width:100%; border-radius:12px; display:block;}

  /* ---------- Legal pages ---------- */
  .legal-page{max-width:760px;}
  .legal-page h3{font-size:19px; font-weight:500; color:var(--ink); margin:40px 0 14px; font-family:'Fraunces';}
  .legal-page h3:first-of-type{margin-top:0;}
  .legal-page p{color:var(--ink-dim); font-size:15px; line-height:1.75; margin-bottom:14px;}
  .legal-page ul{margin:0 0 14px 20px; color:var(--ink-dim); font-size:15px; line-height:1.75;}
  .legal-page li{list-style:disc; margin-bottom:6px;}
  .legal-page a{color:var(--accent); text-decoration:underline;}
  .legal-page .legal-meta{color:var(--ink-faint); font-size:13px; margin-bottom:36px;}
  .legal-note{border-left:2px solid var(--accent); padding:14px 18px; background:var(--bg-card); border-radius:0 10px 10px 0; margin:18px 0;}
  .legal-note p{margin-bottom:0; font-size:14px;}
  .modal-pending{font-size:13px; color:var(--ink-faint); font-style:italic; margin-top:6px;}

  /* ---------- Pricing philosophy banner (full box-width) ---------- */
  .price-philosophy{background:var(--bg-card); padding:46px 0;}
  .pp-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px;}
  .pp-inner p{font-size:15.5px; color:var(--ink-dim); max-width:760px; margin:0;}
  .pp-inner strong{color:var(--ink); font-weight:600;}
  .pp-inner .btn{flex-shrink:0;}

  /* ---------- Founder photo (Über) ---------- */
  .founder-row{display:flex; align-items:center; gap:18px; margin-top:28px;}
  .founder-photo{width:88px; height:88px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg, var(--accent), var(--accent-dark)); display:flex; align-items:center; justify-content:center; font-family:'Fraunces'; font-style:italic; font-size:28px; color:#1a1510; flex-shrink:0; box-shadow:0 0 40px rgba(255,106,31,0.25);}
  .founder-photo img{width:100%; height:100%; object-fit:cover;}
  .founder-name{font-size:15px; font-weight:600; color:var(--ink);}
  .founder-role{font-size:13px; color:var(--ink-faint);}

  /* ---------- Automation section ---------- */
  .auto-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:32px; margin-top:56px;}
  .auto-card{padding:34px 30px; border:1px solid var(--line); border-radius:16px; background:var(--bg-card);}
  .auto-card .step{font-size:11px; letter-spacing:0.15em; color:var(--accent); margin-bottom:16px;}
  .auto-card h4{font-size:18px; color:var(--dark-text); margin-bottom:10px; font-weight:500;}
  .auto-card p{font-size:14px; color:var(--ink-dim);}
  .auto-flow{display:flex; align-items:center; gap:10px; margin-top:18px; font-size:12.5px; color:var(--ink-faint);}

  /* ---------- Service detail pages ---------- */
  .detail-hero{padding:170px 0 90px;}
  .detail-hero h1{font-size:clamp(34px,5vw,56px); max-width:760px; margin-bottom:24px;}
  .detail-hero p.lead{font-size:18px; color:var(--ink-dim); max-width:620px;}
  .detail-grid{display:grid; grid-template-columns:1fr; gap:60px;}
  @media(min-width:900px){.detail-grid{grid-template-columns:1.1fr 0.9fr;}}
  .detail-body p{margin-bottom:20px; color:var(--ink-dim); font-size:16px; max-width:560px;}
  .includes-box{background:var(--bg-card); border:1px solid var(--line); border-radius:16px; padding:36px;}
  .includes-box h4{font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:20px;}
  .includes-box li{padding:13px 0; border-top:1px dotted var(--line); font-size:14.5px; color:var(--ink); display:flex; gap:10px;}
  .includes-box li:first-child{border-top:none;}
  .includes-box li::before{content:"—"; color:var(--accent); flex-shrink:0;}

  /* ---------- Pills (mögen / nicht mögen, à la Color DNA reference) ---------- */
  .pill-group{display:flex; flex-wrap:wrap; gap:10px;}
  .pill{
    display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:100px;
    font-size:13px; border:1px solid; background:transparent;
  }
  .pill-yes{color:var(--green); border-color:rgba(143,191,159,0.4); background:rgba(143,191,159,0.08);}
  .pill-no{color:var(--red); border-color:rgba(217,143,126,0.4); background:rgba(217,143,126,0.08);}

  /* ---------- Callout (left accent bar, à la "Wichtig" boxes) ---------- */
  .callout{
    border-left:3px solid var(--accent); background:var(--bg-card);
    padding:22px 26px; border-radius:4px; font-size:14px; color:var(--ink-dim);
  }

  /* ---------- Principle tag ---------- */
  .principle-tag{
    display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:0.04em;
    color:var(--accent); background:rgba(255,106,31,0.12); border:1px solid rgba(255,106,31,0.35);
    padding:8px 16px; border-radius:100px; margin-bottom:26px; font-weight:500;
  }

  /* ---------- Process steps ---------- */
  .process-head{max-width:560px; margin-bottom:20px;}
  .process-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line);}
  .process-step{background:var(--bg-card); padding:36px 28px;}
  .process-step .pnum{font-family:'Fraunces'; font-style:italic; color:var(--accent); font-size:28px; display:block; margin-bottom:16px;}
  .process-step h4{font-size:16px; margin-bottom:10px; font-weight:600;}
  .process-step p{font-size:13.5px; color:var(--ink-dim);}

  /* ---------- Quote panel ---------- */
  .quote-panel{max-width:820px; margin:0 auto; text-align:center;}
  .quote-panel .qtext{font-family:'Fraunces'; font-style:italic; font-size:clamp(22px,3.2vw,32px); line-height:1.5;}
  .quote-panel .qsource{margin-top:22px; font-size:13px; color:var(--ink-faint); letter-spacing:0.03em;}

  /* ---------- CTA banner ---------- */
  .cta-banner{text-align:center;}
  .cta-banner h2{font-size:clamp(26px,4vw,40px); margin-bottom:30px; max-width:620px; margin-left:auto; margin-right:auto;}

  /* ---------- Pricing (social page only) ---------- */
  .pricing-note{color:var(--ink-dim); font-size:15.5px; max-width:600px; margin-bottom:60px;}
  .pricing-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px;}
  .price-card{border:1px solid var(--line); padding:40px 32px; background:var(--bg-card); border-radius:18px; display:flex; flex-direction:column; transition:transform .3s;}
  .price-card:hover{transform:translateY(-6px);}
  .price-card.featured{border-color:var(--accent); background:linear-gradient(180deg, rgba(255,106,31,0.10), var(--bg-card) 45%); position:relative;}
  .price-card .tag{position:absolute; top:-13px; left:32px; background:var(--accent); color:#fff; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:6px 14px; font-weight:600; border-radius:100px;}
  .price-card h3{font-size:23px; margin-bottom:6px;}
  .price-card .sub{font-size:13px; color:var(--ink-faint); margin-bottom:24px;}
  .price-card .amount{font-family:'Fraunces'; font-style:normal; font-size:38px; margin-bottom:4px; font-weight:500;}
  .price-card .amount span{font-size:14px; color:var(--ink-dim); font-family:'Inter'; font-weight:300;}
  .price-card ul{margin:26px 0 30px; flex-grow:1;}
  .price-card li{font-size:14px; color:var(--ink-dim); padding:10px 0; border-top:1px dotted var(--line); display:flex; gap:10px;}
  .price-card li:first-child{border-top:none;}
  .price-card li::before{content:"—"; color:var(--accent); flex-shrink:0;}
  .pricing-footnote{margin-top:44px; padding:26px 28px; border:1px solid var(--line); border-radius:14px; font-size:14px; color:var(--ink-dim); max-width:760px; background:var(--bg-card);}
  .placeholder-tag{display:inline-block; font-size:11px; color:var(--ink-faint); border:1px dashed var(--line); padding:3px 8px; margin-top:10px; letter-spacing:0.03em;}

  /* ---------- Check (quiz) ---------- */
  .check-box{max-width:680px; margin:0 auto; border:1px solid var(--line); background:var(--bg-card); padding:48px; border-radius:20px;}
  @media(max-width:600px){.check-box{padding:28px;}}
  .q{margin-bottom:32px;}
  .q p.qtext{font-size:16px; margin-bottom:14px; font-weight:400;}
  .options{display:flex; flex-direction:column; gap:10px;}
  .option{border:1px solid var(--line); padding:14px 18px; font-size:14px; cursor:pointer; transition:all .18s; color:var(--ink-dim); border-radius:10px;}
  .option:hover{border-color:var(--accent); color:var(--ink);}
  .option.selected{border-color:var(--accent); background:rgba(255,106,31,0.12); color:var(--ink);}
  .progress{height:3px; background:var(--line); margin-bottom:40px; border-radius:10px; overflow:hidden;}
  .progress-bar{height:100%; background:var(--accent); width:0%; transition:width .3s;}
  #quiz-result{display:none; text-align:center;}
  #quiz-result .stage{font-family:'Fraunces'; font-style:italic; font-size:32px; color:var(--accent-dark); margin:18px 0 14px;}
  #quiz-result p.feedback{color:var(--ink-dim); max-width:480px; margin:0 auto 32px;}
  #quiz-result .btn{margin-top:6px;}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr; gap:60px;}
  @media(min-width:840px){.contact-grid{grid-template-columns:1fr 1fr;}}
  .contact-info p{color:var(--ink-dim); margin-bottom:28px; max-width:420px;}
  .contact-line{display:flex; gap:14px; margin-bottom:16px; font-size:15px;}
  .contact-line .label{color:var(--ink-faint); width:90px; flex-shrink:0; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; padding-top:3px;}
  .contact-line a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s, border-color .2s;}
  .contact-line a:hover{color:var(--accent); border-color:var(--accent);}
  .contact-form{display:flex; flex-direction:column; gap:14px;}
  .contact-form input, .contact-form textarea{background:var(--bg-card); border:1px solid var(--line); color:var(--ink); padding:15px 16px; font-size:14px; font-family:'Inter'; width:100%; border-radius:10px;}
  .contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--accent);}
  .contact-form textarea{min-height:120px; resize:vertical;}

  /* ---------- Terminanfrage (Erstgespräch) ---------- */
  .termin-slots{border:1px solid var(--line); border-radius:10px; padding:16px; background:var(--bg-card);}
  .termin-slots-label{display:block; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px;}
  .termin-slot{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;}
  .termin-slot:last-child{margin-bottom:0;}
  .termin-slot input{background:var(--bg); border:1px solid var(--line); color:var(--ink); padding:12px 14px; font-size:14px; font-family:'Inter'; border-radius:8px; width:100%;}
  .termin-slot input:focus{outline:none; border-color:var(--accent);}

  /* ---------- Mehrstufige Formulare (Gutschein / Erstgespräch / Sichtbarkeits-Check) ----------
     Gemeinsames Stepper-Markup: .lm-stepper > .lm-step (.active zeigt den aktuellen Schritt),
     Navigation über .lm-step-next / .lm-step-back, Fortschritt über .lm-step-dots. */
  .lm-stepper .lm-step{display:none;}
  .lm-stepper .lm-step.active{display:block; animation:lmStepIn .35s cubic-bezier(.4,0,.2,1);}
  @keyframes lmStepIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}
  .lm-step-dots{display:flex; gap:8px; justify-content:center; margin-bottom:26px;}
  .lm-step-dots .dot{width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .25s, transform .25s;}
  .lm-step-dots .dot.done{background:var(--accent);}
  .lm-step-dots .dot.active{background:var(--accent); transform:scale(1.4);}
  .lm-fields{display:flex; flex-direction:column; gap:14px; text-align:left;}
  .lm-fields input, .lm-fields select, .lm-fields textarea{background:var(--bg-card); border:1px solid var(--line); color:var(--ink); padding:15px 16px; font-size:14px; font-family:'Inter'; width:100%; border-radius:10px;}
  .lm-fields input:focus, .lm-fields select:focus, .lm-fields textarea:focus{outline:none; border-color:var(--accent);}
  .lm-row{display:grid; grid-template-columns:1fr; gap:12px;}
  @media(min-width:520px){.lm-row-2{grid-template-columns:1fr 1fr;}}
  .lm-step-title{font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; text-align:left;}
  .lm-step-nav{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px;}
  .lm-step-nav .btn{cursor:pointer; border:none;}
  .lm-step-back-link{background:none; border:none; color:var(--ink-faint); font-size:13.5px; cursor:pointer; padding:8px 0; transition:color .2s;}
  .lm-step-back-link:hover{color:var(--ink);}
  .lm-step-error{font-size:13px; color:var(--red); margin-top:12px; display:none; text-align:left;}
  .lm-step-error.show{display:block;}
  .lm-step-hint{font-size:12px; color:var(--ink-faint); margin-top:8px; text-align:left;}

  footer{border-top:1px solid var(--line); padding:50px 0; background:var(--dark); color:var(--ink-faint);}
  .footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
  .footer-inner .fl{display:flex; gap:28px;}
  footer a{font-size:13px; color:var(--ink-faint);}
  footer a:hover{color:var(--dark-text);}
  footer span{font-size:13px;}

  /* ---------- Cookie-Consent-Banner ---------- */
  .cookie-banner{position:fixed; left:0; right:0; bottom:-100%; z-index:200; background:var(--dark); border-top:1px solid var(--line); padding:22px 0; transition:bottom .4s cubic-bezier(.4,0,.2,1); box-shadow:0 -8px 30px rgba(0,0,0,0.25);}
  .cookie-banner.open{bottom:0;}
  .cookie-banner-inner{max-width:1180px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
  .cookie-banner-inner p{font-size:13.5px; color:var(--ink-faint); max-width:640px; margin:0;}
  .cookie-banner-inner a{color:var(--dark-text); text-decoration:underline;}
  .cookie-banner-actions{display:flex; gap:12px; flex-shrink:0;}
  .cookie-banner-actions .btn{padding:11px 20px; font-size:13.5px;}

  /* ---------- Honeypot (Spam-Schutz Kontaktformular) ---------- */
  .lm-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}