/* felixkraft.com – Design-System V1
   Farben: Energy Orange (Felix), Anthrazit, Warmweiß, Chrom (Musik). Petrol nur als Verweis auf SLT. */

@font-face{font-family:"Montserrat";font-weight:900;font-display:swap;src:url("../fonts/Montserrat-Black.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-weight:700;font-display:swap;src:url("../fonts/Montserrat-Bold.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-weight:500;font-display:swap;src:url("../fonts/Montserrat-Medium.ttf") format("truetype")}

:root{
  --orange:#F26A1B; --orange-deep:#D4550F; --orange-light:#FF8A3D;
  --ink:#1F1F1F; --paper:#F7F4EE; --chrome:#B8BCC2; --petrol:#2F6F73;
  --max:1120px; --rule:2px solid var(--ink);
  --font-head:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:var(--font-head);font-weight:900;letter-spacing:-0.01em;line-height:1.02}
h2{font-size:clamp(34px,4.6vw,56px);margin-bottom:24px;max-width:22ch}
h3{font-size:26px;margin-bottom:8px}
p{max-width:64ch}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}
.skip:focus{left:8px}

/* Navigation */
.nav{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.brand{font-family:var(--font-head);font-weight:900;font-size:20px;text-decoration:none;white-space:nowrap}
.doors{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 12px;border:var(--rule);border-radius:6px;font-family:var(--font-head);font-weight:700;font-size:14px}
.menu summary::-webkit-details-marker{display:none}
.menu{border:0;padding:0;margin:0;max-width:none;position:static}
.menu,.menu summary{outline:none}
.menu summary:focus-visible{box-shadow:0 0 0 3px var(--orange)}
.menu summary{-webkit-tap-highlight-color:transparent}
.tueren.four{grid-template-columns:repeat(4,1fr)}
.tuer.engineering{background:var(--chrome);color:var(--ink)}
.doors a{text-decoration:none;font-weight:500;padding:8px 13px;border-radius:999px;font-size:15px}
.doors a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.doors a:not([aria-current]):hover{background:rgba(31,31,31,.08)}
.navsep{width:2px;height:22px;background:var(--ink);margin:0 8px;align-self:center;opacity:.5}
/* Coming-soon-Cover (Arbeitstitel) */
.coming{aspect-ratio:2/3;max-width:340px;width:100%;justify-self:end;border:3px solid var(--ink);box-shadow:14px 14px 0 var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-head);font-weight:900;font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:.06em;animation:coverwipe 9s ease-in-out infinite;position:relative;overflow:hidden}
.coming::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(31,31,31,.16) 1.2px, transparent 1.3px);background-size:9px 9px;mix-blend-mode:multiply;pointer-events:none}
.coming span{position:relative}
@media (prefers-reduced-motion:reduce){.coming{animation:none;background:var(--orange);color:var(--ink)}}

/* Beams-Hero (Startseite, Musik) */
.hero{position:relative;overflow:hidden;color:var(--paper);background:var(--orange-deep);display:flex;align-items:flex-end}
.hero::before{content:"";position:absolute;inset:-40% -20% 0 -20%;
  background:repeating-conic-gradient(from 0deg at 50% 100%, var(--orange) 0deg 9deg, var(--orange-deep) 9deg 18deg)}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(31,31,31,.18) 1.2px, transparent 1.3px);background-size:9px 9px;mix-blend-mode:multiply;pointer-events:none}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:80px;padding-bottom:64px}
.hero h1{text-shadow:4px 4px 0 var(--ink)}
.hero .lead{max-width:36ch;font-size:clamp(18px,2.1vw,24px);margin:22px 0 32px;font-weight:500;text-shadow:1px 1px 0 rgba(0,0,0,.25)}
.kicker{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);background:var(--paper);display:inline-block;padding:6px 12px;transform:rotate(-2deg);margin-bottom:22px;border:2px solid var(--ink)}

/* Dachmarken-Hero (Startseite) – ruhig, hochwertig */
.hero-brand{position:relative;overflow:hidden;border-bottom:var(--rule);background:var(--paper)}
.hero-brand::before{content:"";position:absolute;right:-18%;top:-30%;width:70%;aspect-ratio:1;border-radius:50%;opacity:.13;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, var(--orange) 0deg 9deg, transparent 9deg 18deg)}
.hero-brand .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;grid-template-areas:"head img" "rest img";column-gap:56px;row-gap:0;align-items:center;padding-top:88px;padding-bottom:88px}
.hb-head{grid-area:head;align-self:end}.hb-rest{grid-area:rest;align-self:start}.hero-brand .portrait{grid-area:img}
.textlink{display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:5px;padding:14px 6px}
.hero-brand .roles{font-family:var(--font-head);font-weight:700;font-size:clamp(15px,1.5vw,18px);color:var(--orange-deep);letter-spacing:.04em;margin-bottom:18px}
.hero-brand h1{font-size:clamp(60px,9vw,128px);line-height:.95}
.hero-brand h1 span{display:block;color:var(--orange)}
.hero-brand .lead{font-size:clamp(19px,2.1vw,24px);max-width:36ch;margin:26px 0 34px;font-weight:500}
.hero-brand .portrait{justify-self:end;width:100%;max-width:440px;border:var(--rule);box-shadow:16px 16px 0 var(--orange)}
.who{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.who .triad{font-family:var(--font-head);font-weight:900;font-size:clamp(30px,3.6vw,44px);line-height:1.1}
.who .triad em{font-style:normal;color:var(--orange)}
.who p{font-size:19px;margin-bottom:16px}

/* Cover-Kachel mit Farbdurchlauf (Unbequem klar) */
@keyframes coverwipe{0%,28%{background:var(--orange);color:var(--ink)}33%,61%{background:#2E6BFF;color:var(--paper)}66%,94%{background:#7BC043;color:var(--ink)}100%{background:var(--orange);color:var(--ink)}}
.fake-cover.cycle{animation:coverwipe 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.fake-cover.cycle{animation:none}}

/* Ruhiger Hero (Unterseiten) */
.hero-plain{padding:72px 0 40px;border-bottom:var(--rule)}
.hero-plain h1{font-size:clamp(40px,6vw,84px)}
.hero-plain .lead{font-size:clamp(18px,2vw,22px);max-width:46ch;margin-top:18px;font-weight:500}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:15px;padding:14px 20px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.orange{background:var(--orange);color:var(--ink)}
.btn .tri{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* Sections */
section{padding:80px 0}
section + section{border-top:var(--rule)}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.prose p{margin-bottom:18px;font-size:18px}
.prose p:first-of-type{font-size:22px;font-weight:500}
.quote{border-left:8px solid var(--orange);padding:6px 0 6px 22px;font-family:var(--font-head);font-weight:700;font-size:24px;line-height:1.25;max-width:22ch}
.photo{aspect-ratio:4/5;background:linear-gradient(160deg,#3a3a3a,#1F1F1F);border:var(--rule);box-shadow:10px 10px 0 var(--orange);display:flex;align-items:flex-end;padding:18px;color:var(--paper);font-size:14px;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.cover{width:100%;border:3px solid var(--ink);box-shadow:14px 14px 0 var(--ink)}

/* Türen */
.tueren{display:grid;grid-template-columns:repeat(3,1fr);border:var(--rule)}
.tuer{padding:34px 28px 40px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none}
.tuer + .tuer{border-left:var(--rule)}
.tuer h3{font-size:30px;margin-bottom:10px}
.tuer p{font-size:16px;max-width:30ch}
.tuer span{font-family:var(--font-head);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:4px}
.tuer.buch{background:var(--orange);color:var(--ink)}
.tuer.musik{background:var(--ink);color:var(--paper)}
.tuer.coaching{background:var(--paper);color:var(--ink)}

/* Listen */
.list{list-style:none;border-top:var(--rule)}
.list li{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;padding:18px 0;border-bottom:var(--rule)}
.list .t{font-family:var(--font-head);font-weight:700;font-size:22px}
.list .t a{text-decoration:none}
.list .t a:hover{text-decoration:underline;text-underline-offset:4px}
.list .s{color:#555;font-size:15px}
.badge{font-family:var(--font-head);font-weight:700;font-size:13px;background:var(--orange);padding:4px 10px;border-radius:4px;white-space:nowrap}
.muted{color:#555;font-size:15px}
.list li.blurred .t,.list li.blurred .s{filter:blur(2.5px);user-select:none;opacity:.75}
.list li.blurred{position:relative}
.dates{list-style:none}
.dates li{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:14px 0;border-bottom:var(--rule);font-size:18px}
.dates b{font-family:var(--font-head);font-weight:700}

/* Highlights (Startseite) */
.highlights{display:grid;grid-template-columns:1fr 1fr;gap:0;border:var(--rule)}
.highlight{padding:32px 28px;display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;text-decoration:none}
.highlight + .highlight{border-left:var(--rule)}
.highlight img{border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.highlight .fake-cover{aspect-ratio:1;background:var(--orange);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:900;font-size:13px;text-align:center;padding:8px;line-height:1.1}
.highlight h3{font-size:22px}
.highlight .muted{margin-top:4px}
.highlight .cta{margin-top:10px;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--orange-deep)}
.highlight:hover .cta{text-decoration:underline;text-underline-offset:4px}

/* Formular */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px}
form{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
input[type=email]{flex:1;min-width:220px;font:inherit;padding:14px 16px;border:var(--rule);border-radius:6px;background:#fff}
.note{font-size:14px;color:#555;margin-top:10px;max-width:52ch}
details:not(.menu){border:var(--rule);padding:16px 20px;margin-top:20px;max-width:64ch}
summary{font-family:var(--font-head);font-weight:700;cursor:pointer}
details pre{white-space:pre-wrap;font-family:var(--font-body);margin-top:14px;line-height:1.6}
.audio{margin-top:18px}
.audio audio{width:100%;max-width:520px}

/* Footer */
footer{background:var(--ink);color:var(--paper);padding:56px 0 40px}
footer .sig{font-family:var(--font-head);font-weight:700;font-size:20px}
footer p{margin-top:8px;font-size:15px;color:#cfcfcf}
footer .claim{margin-top:22px;font-size:18px;color:var(--orange-light);font-weight:500}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.social a{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border:2px solid var(--paper);border-radius:999px;color:var(--paper);text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:14px}
.social a:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.legal{margin-top:30px;display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.legal a{color:#cfcfcf}

/* Rechtstexte */
.legal-page p,.legal-page li{margin-bottom:12px;max-width:70ch}
.legal-page h3{margin-top:28px}
.todo{background:#FFE7D6;border:2px dashed var(--orange-deep);padding:12px 16px;margin:14px 0;font-size:15px;max-width:70ch}

@media (max-width:860px){
  .doors-desktop{display:none}
  .menu{display:block}
  .menu summary::before{content:"";display:block;width:18px;height:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}
  .menu .doors{position:absolute;left:0;right:0;top:64px;background:var(--paper);border-bottom:var(--rule);flex-direction:column;align-items:stretch;padding:8px 16px 14px;gap:2px;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .menu .doors a{padding:12px 10px;border-radius:6px;font-size:17px}
  .menu[open] summary{background:var(--ink);color:var(--paper)}
  .menu[open] summary::before{background:var(--paper);box-shadow:0 -6px 0 var(--paper),0 6px 0 var(--paper)}
  .two,.split,.highlights,.hero-brand .wrap,.who{grid-template-columns:1fr}
  .navsep{display:none}
  .coming{justify-self:start;max-width:260px}
  .tueren.four{grid-template-columns:1fr}
  .hero-brand .wrap{grid-template-columns:1fr 150px;grid-template-areas:"head img" "rest rest";column-gap:18px;padding-top:32px;padding-bottom:40px;align-items:end}
  .hero-brand .portrait{justify-self:end;max-width:150px;margin:0 0 8px;box-shadow:8px 8px 0 var(--orange)}
  .hero-brand h1{font-size:clamp(46px,14vw,64px)}
  .hero-brand .roles{font-size:13px;margin-bottom:10px}
  .hero-brand .lead{font-size:18px;margin:14px 0 18px}
  .hero-brand .btn{padding:12px 16px;font-size:14px}
  .highlight + .highlight{border-left:0;border-top:var(--rule)}
  .tueren{grid-template-columns:1fr}
  .tuer + .tuer{border-left:0;border-top:var(--rule)}
  .dates li{grid-template-columns:1fr}
  .doors a{padding:8px 10px;font-size:14px}
  .hero .wrap{padding-top:56px}
}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none} html{scroll-behavior:auto} video[autoplay]{display:none} }