/* ferdoproducts — gemeinsames Stylesheet für Unterseiten (v9) */
:root{
  --paper:#f3f1ea;--paper-2:#ece9e0;--paper-3:#e4e0d5;--ink:#16161a;--ink-2:#34343a;--soft:#6f6f78;--muted:#9a9a9f;
  --line:rgba(20,20,25,.14);--line-2:rgba(20,20,25,.26);--accent:#cf4f25;--nav-bg:rgba(243,241,234,.82);
  --max:1280px;--pad:clamp(20px,5vw,84px);--ease:cubic-bezier(.22,1,.36,1);
  --ff:"General Sans","Inter",ui-sans-serif,system-ui,sans-serif;--ff-body:"Inter",ui-sans-serif,system-ui,sans-serif;
}
html[data-theme="dark"]{--paper:#0c0c0f;--paper-2:#15151a;--paper-3:#1d1d23;--ink:#f3f1ea;--ink-2:#cfcfca;--soft:#9a9aa2;--muted:#6c6c75;--line:rgba(255,255,255,.13);--line-2:rgba(255,255,255,.26);--accent:#ff6a3d;--nav-bg:rgba(12,12,15,.82)}
html[data-theme="dark"] .brandmark .logo{filter:invert(1) brightness(1.6)}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{background:var(--paper);color:var(--ink);font-family:var(--ff-body);font-size:16px;line-height:1.6;overflow-x:hidden;transition:background-color .5s var(--ease),color .5s var(--ease)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}ul{list-style:none}
::selection{background:var(--accent);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3,h4{font-family:var(--ff);font-weight:600;letter-spacing:-.025em;line-height:1.04}
.display{font-size:clamp(38px,6.4vw,84px);line-height:1;letter-spacing:-.035em}
.h2{font-size:clamp(28px,4vw,52px);letter-spacing:-.03em;line-height:1.02}
.h3{font-size:clamp(21px,2.4vw,30px);letter-spacing:-.02em}
.kicker{font-family:var(--ff);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);display:inline-flex;align-items:center;gap:12px}
.kicker::before{content:"";width:24px;height:1px;background:var(--accent);flex:none}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--ink-2);max-width:62ch}
.accent{color:var(--accent)}

/* NAV */
.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brandmark{display:flex;align-items:center;gap:12px;font-family:var(--ff);font-weight:600;font-size:18px}
.brandmark .logo{height:28px;width:auto}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:14px;color:var(--soft);transition:color .25s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:var(--accent)}
.nav__right{display:flex;align-items:center;gap:14px}
.theme-toggle{width:40px;height:40px;border:1px solid var(--line-2);border-radius:999px;display:grid;place-items:center;color:var(--ink);flex:none}
.theme-toggle svg{width:18px;height:18px}.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}html[data-theme="dark"] .theme-toggle .moon{display:block}
.nav-cta{padding:10px 20px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;transition:background .25s,color .25s,border-color .25s}
.nav-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.burger{display:none;width:26px;height:16px;position:relative}
.burger span{position:absolute;left:0;height:2px;width:100%;background:var(--ink);transition:.3s var(--ease)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:7px}.burger span:nth-child(3){top:14px}
body.menu-open .burger span:nth-child(1){top:7px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:7px;transform:rotate(-45deg)}
.nav-mini{display:none}
@media (max-width:980px){
  .nav,.nav.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:22px;background:var(--paper);transform:translateY(-100%);transition:transform .5s var(--ease);z-index:998;padding:84px 24px 90px}
  .nav-links a{font-size:23px;color:var(--ink)}
  body.menu-open .nav-links{transform:translateY(0)}.burger{display:block;z-index:1001}.nav .nav-cta{display:none}
  .nav__right{margin-left:auto;margin-right:14px;gap:8px}
  .nav-mini{display:flex;position:absolute;left:0;right:0;bottom:34px;justify-content:center;gap:24px}
  .nav-mini a{font-size:14px;color:var(--soft)}
}


/* Custom Cursor (Unterseiten) */
.cursor{position:fixed;top:0;left:0;z-index:9000;width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .3s}
.cursor.is-hover{width:62px;height:62px;background:rgba(207,79,37,.12);border-color:var(--accent)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;font-family:var(--ff);font-weight:500;font-size:15px;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn .ar{transition:transform .3s var(--ease)}.btn:hover .ar{transform:translateX(4px)}
.btn--primary{background:var(--ink);color:var(--paper)}.btn--primary:hover{background:var(--accent)}
.btn--ghost{border:1px solid var(--line-2);color:var(--ink)}.btn--ghost:hover{border-color:var(--ink)}

.media-img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:14px;display:block}
.media-duo{filter:grayscale(1) brightness(1.05) contrast(1.03) sepia(.5) saturate(1.55) hue-rotate(-10deg);mix-blend-mode:multiply}
html[data-theme="dark"] .media-duo{mix-blend-mode:screen;filter:grayscale(1) contrast(1.05) sepia(.5) saturate(1.5) hue-rotate(-10deg) brightness(.9)}


/* SUBHERO */
.subhero{padding-top:clamp(118px,16vh,168px);padding-bottom:clamp(34px,6vh,68px);border-bottom:1px solid var(--line)}
.subhero h1{margin:20px 0 22px;max-width:17ch}
.subhero .lead{max-width:64ch}

/* SECTIONS */
.section{padding-block:clamp(30px,4.5vh,66px)}
.section--tight{padding-block:clamp(24px,3.5vh,48px)}
.section-head{max-width:760px;margin-bottom:clamp(26px,4vw,48px)}
.section-head .h2{margin-top:16px}
.prose p{color:var(--ink-2);font-size:clamp(16px,1.5vw,18px);max-width:64ch;margin-top:16px}
.prose p:first-child{margin-top:0}
.grid-2{display:grid;gap:clamp(28px,5vw,64px)}
@media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr;align-items:start}}

/* FEATURE-LISTE (Leistungsbereiche) */
.features{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
@media(min-width:720px){.features{grid-template-columns:1fr 1fr}}
.feature{background:var(--paper);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:10px;transition:background .35s var(--ease)}
.feature:hover{background:var(--paper-2)}
.feature__n{font-family:var(--ff);font-size:13px;font-weight:600;color:var(--accent)}
.feature__t{font-family:var(--ff);font-weight:600;font-size:clamp(18px,1.9vw,22px);letter-spacing:-.02em}
.feature__d{color:var(--ink-2);font-size:14.5px}
@media(min-width:720px){.feature:last-child:nth-child(odd){grid-column:1 / -1}}

/* LISTE mit Chevron */
.clist{display:grid;gap:0}
.clist li{padding:12px 0;border-top:1px solid var(--line);color:var(--ink-2);font-size:15.5px;display:flex;gap:12px}
.clist li:last-child{border-bottom:1px solid var(--line)}
.clist li::before{content:"›";color:var(--accent);font-weight:600;flex:none}

/* TAGS */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{font-family:var(--ff);font-size:13.5px;color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:8px 15px;background:var(--paper-2)}

/* BILD-PLATZHALTER */
.ph{position:relative;border:1px dashed var(--line-2);border-radius:14px;background:var(--paper-2);display:grid;place-content:center;gap:8px;text-align:center;color:var(--soft);min-height:160px;overflow:hidden;padding:16px}
.ph::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(20,20,25,.025) 10px,rgba(20,20,25,.025) 20px)}
html[data-theme="dark"] .ph::after{background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.03) 10px,rgba(255,255,255,.03) 20px)}
.ph__label{font-family:var(--ff);font-weight:600;font-size:13px;color:var(--ink-2);position:relative}
.ph__id{font-family:var(--ff);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);position:relative}

/* MARKEN-Block (eigenmarken) */
.brand-logo{display:grid;place-items:center start;background:none;border:0;border-radius:0;padding:0}
.brand-logo img{max-width:100%;max-height:54px;width:auto;object-fit:contain;object-position:left center;display:block}
html[data-theme="dark"] .brand-logo img{filter:invert(1) hue-rotate(180deg) saturate(1.05)}

.brandrow{border-top:1px solid var(--line);padding-block:clamp(26px,3.5vw,44px);display:grid;gap:16px}
.brandrow:last-of-type{border-bottom:1px solid var(--line)}
.brandrow__name{font-family:var(--ff);font-weight:600;font-size:clamp(24px,3vw,38px);letter-spacing:-.025em;display:flex;align-items:center;gap:12px}
.brandrow__name .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.brandrow__text{color:var(--ink-2);font-size:15.5px;max-width:62ch}
.brandrow__media{width:100%;max-width:320px}
@media(min-width:900px){.brandrow{grid-template-columns:190px 1fr auto;gap:34px;align-items:center}.brandrow .btn,.brandrow .brandrow__link{justify-self:end}}
.brandrow__link{font-family:var(--ff);font-weight:500;font-size:14px;display:inline-flex;gap:8px;align-items:center;border-bottom:1px solid var(--line-2);padding-bottom:3px;align-self:start;transition:gap .3s,border-color .3s}
.brandrow__link:hover{gap:14px;border-color:var(--accent)}

/* CTA-BAND */
.cta-band{border-top:1px solid var(--line)}
.cta-band__in{padding-block:clamp(44px,7vh,90px);display:grid;gap:24px}
.cta-band h2{max-width:18ch}
@media(min-width:820px){.cta-band__in{grid-template-columns:1.3fr .7fr;align-items:center}.cta-band .actions{justify-self:end}}

/* FORM */
form{display:grid;gap:16px}
.field{display:grid;gap:8px}
.field label{font-size:13px;color:var(--soft);font-family:var(--ff);letter-spacing:.03em}
.field input,.field select,.field textarea{width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);font-family:var(--ff-body);font-size:15px;transition:border-color .25s,background .25s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff}
html[data-theme="dark"] .field input:focus,html[data-theme="dark"] .field select:focus,html[data-theme="dark"] .field textarea:focus{background:#0c0c0f}
.field textarea{resize:vertical;min-height:120px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12.5px;color:var(--muted)}
.form-success{display:none;padding:16px;border:1px solid var(--accent);border-radius:12px;color:var(--accent);font-size:14px}
.form-success.show{display:block}
.contact__meta{margin-top:30px;display:grid;gap:16px}
.contact__meta a{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:15px;transition:color .25s}
.contact__meta a:hover{color:var(--accent)}
.contact__meta .ic{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}

/* LEGAL */
.legal h2{font-size:clamp(20px,2.4vw,26px);margin:34px 0 12px}
.legal p{color:var(--ink-2);font-size:15.5px;margin-top:10px;max-width:80ch}
.legal a{color:var(--accent)}


/* Footer-Morph + Slogan (geteilt) */
.footer__morph{width:100%;height:clamp(190px,28vw,360px);display:block}
.footer__slogan{text-align:center;font-family:var(--ff);font-weight:500;font-size:clamp(16px,2vw,23px);letter-spacing:-.015em;color:var(--ink-2);padding:4px 0 30px}

/* FOOTER */
.footer{border-top:1px solid var(--line);padding-top:clamp(40px,6vh,72px)}
.footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-bottom:44px}
@media(min-width:760px){.footer__cols{grid-template-columns:1.6fr 1fr 1fr 1fr}}
@media (max-width:600px){
  .footer__morph{height:clamp(120px,32vw,168px)}
  .footer__slogan{padding:14px 0 22px;font-size:16px}
  .footer__cols{gap:24px;padding-bottom:28px}
  .footer__bottom{padding-block:18px;font-size:12px}
}
.footer__col h4{font-family:var(--ff);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:16px}
.footer__col a,.footer__col p{display:block;color:var(--ink-2);font-size:14.5px;margin-bottom:10px;transition:color .25s}
.footer__col a:hover{color:var(--accent)}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.footer__bottom .legal-links{display:flex;gap:20px}
.footer__bottom a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}