/* ==========================================================================
   BNK Consulting – Startseite
   Entwurf „Schaltpult“: Graphit als Grund, Bernstein als einzige Signalfarbe,
   Cyan für Verweise. Schriften liegen selbst auf dem Server.
   ========================================================================== */

@font-face{font-family:Grotesk;font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:Grotesk;font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/inter-700.woff2') format('woff2')}

:root{
  --gr:#101215;      /* Grund */
  --gr2:#171A1F;     /* Fläche */
  --gr3:#1E232A;     /* Kopfleiste einer Fläche */
  --edge:#2C333C;    /* Kante */
  --txt:#E8EBEF;
  --txt2:#98A2AE;
  --amb:#FFB000;     /* Signalfarbe */
  --amb-d:#C98A00;
  --cy:#43C6DB;      /* Verweise */
  --ok:#4ADE80;
  --warn:#FFB000;
  --crit:#F87171;
  --wrap:1060px;
  --r:10px;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Segoe UI Mono",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  background:var(--gr);color:var(--txt2);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cy);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:Grotesk,system-ui,sans-serif;font-weight:700;color:var(--txt);
  line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
b,strong{color:var(--txt);font-weight:700}
:focus-visible{outline:2px solid var(--amb);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amb)}
.nowrap{white-space:nowrap}

.skip{position:absolute;left:-9999px;top:0;background:var(--amb);color:var(--gr);
  padding:10px 18px;font-weight:700;z-index:200}
.skip:focus{left:0}

/* ---------- Kopf ---------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(16,18,21,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--edge)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt);text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mk{width:26px;height:26px;flex:0 0 26px;border:1.5px solid var(--amb);border-radius:5px;
  display:grid;place-items:center;color:var(--amb);font-family:var(--mono);font-size:12px;font-weight:600}
.brand-tx{font-family:Grotesk,sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em}
.brand-tx em{font-style:normal;color:var(--amb)}

.mainnav{display:flex;align-items:center;gap:26px}
.mainnav ul{display:flex;gap:24px;list-style:none}
.mainnav a{color:var(--txt2);font-size:14px;font-weight:600}
.mainnav a:hover{color:var(--txt);text-decoration:none}
.nav-login{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gr);background:var(--amb);padding:9px 15px;border-radius:5px;font-weight:600}
.nav-login:hover{background:#FFC33D;text-decoration:none;color:var(--gr)}

.burger{display:none;background:none;border:1px solid var(--edge);border-radius:6px;
  padding:9px 10px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--txt);border-radius:2px}
.burger span+span{margin-top:4px}

/* ---------- Hero ---------- */
.hero{position:relative;padding:72px 0 60px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 82% -20%,rgba(255,176,0,.13),transparent 60%),
             radial-gradient(70% 100% at 8% 110%,rgba(67,198,219,.10),transparent 62%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--amb),transparent);opacity:.45}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(32px,5.6vw,54px);max-width:16ch;margin-top:16px}
.hero h1 em{font-style:normal;color:var(--amb)}
.hero-sub{font-size:clamp(16px,2vw,18.5px);max-width:56ch;margin-top:22px}
.hero-strip{display:flex;gap:9px;flex-wrap:wrap;margin-top:28px}
.hero-strip span{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--cy);
  border:1px solid var(--edge);background:var(--gr2);padding:7px 12px;border-radius:5px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:Inter,sans-serif;
  font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:6px;border:1.5px solid transparent;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.btn:hover{text-decoration:none}
.btn-amber{background:var(--amb);color:var(--gr)}
.btn-amber:hover{background:#FFC33D}
.btn-line{border-color:var(--edge);color:var(--txt);background:transparent}
.btn-line:hover{border-color:var(--amb);color:var(--amb)}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--cy);cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration:underline}

/* ---------- Abschnitte ---------- */
.sec{padding:clamp(52px,7vw,78px) 0}
.sec-alt{background:var(--gr2);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.sec-t{font-size:clamp(24px,3.4vw,33px);margin:9px 0 0}
.sec-lead{margin-top:16px;max-width:62ch;font-size:16.5px}
.sec-t+.tiles,.sec-lead+.tiles{margin-top:32px}

/* ---------- Produktmodule ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.tile{background:var(--gr2);border:1px solid var(--edge);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column}
.sec-alt .tile{background:var(--gr)}
.tile-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 18px;background:var(--gr3);border-bottom:1px solid var(--edge)}
.sec-alt .tile-cap{background:var(--gr2)}
.led{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--amb);
  box-shadow:0 0 8px rgba(255,176,0,.75)}
.tile-bd{padding:20px 18px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.tile-bd h3{font-size:20px}
.tile-claim{color:var(--txt);font-weight:600;font-size:15px;margin-top:-4px}
.tile-bd p{font-size:14.5px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.chips li{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--txt2);
  border:1px solid var(--edge);padding:4px 8px;border-radius:4px}
.tile-go{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;color:var(--cy)}

/* ---------- Referenzen ---------- */
.refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:32px}
.ref{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--gr);
  display:flex;flex-direction:column}
.ref-shot{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--edge)}
.ref-shot-leer{display:grid;place-items:center;
  background:radial-gradient(120% 100% at 30% 0%,#232A33,#12151A)}
.ref-shot-leer .mono{color:#5D6875}
.ref-tx{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.ref-tx h3{font-size:16.5px}
.ref-tx p{font-size:13.8px}
.ref-stack{color:var(--txt2);opacity:.8;letter-spacing:.08em;font-size:10.5px}
.ref-tx a{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:600}

/* ---------- Arbeitsweise ---------- */
.ansatz{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:32px}
.ansatz article{border-top:2px solid var(--amb);padding-top:18px}
.ansatz h3{font-size:18px;margin-bottom:8px}
.ansatz p{font-size:14.8px}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start}
.kontakt-fakten{margin-top:26px;display:grid;grid-template-columns:auto 1fr;gap:8px 22px;font-size:14.5px}
.kontakt-fakten dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt2);padding-top:3px}
.kontakt-fakten dd{color:var(--txt)}

.form{background:var(--gr);border:1px solid var(--edge);border-radius:var(--r);padding:24px}
.sec-alt .form{background:var(--gr)}
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feld label{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt2)}
.feld label span{color:var(--amb)}
.feld input,.feld select,.feld textarea{
  font:inherit;font-size:15px;color:var(--txt);background:var(--gr2);
  border:1px solid var(--edge);border-radius:6px;padding:10px 12px;width:100%}
.feld textarea{resize:vertical;min-height:110px}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:var(--amb);outline:none}
.feld-hinweis{font-size:12.5px;margin:4px 0 16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.hinweis{border-radius:var(--r);padding:14px 16px;margin-bottom:18px;font-size:14.5px;
  border:1px solid var(--edge);background:var(--gr)}
.hinweis b{display:block;margin-bottom:2px}
.hinweis-ok{border-color:rgba(74,222,128,.5)}
.hinweis-ok b{color:var(--ok)}
.hinweis-fehler{border-color:rgba(248,113,113,.5)}
.hinweis-fehler b{color:var(--crit)}

/* ---------- Rechtstexte ---------- */
.sec-doc{padding-top:56px}
.doc{max-width:70ch}
.doc h1{font-size:clamp(28px,4.4vw,40px);margin-top:10px}
.doc h2{font-size:19px;margin:34px 0 10px}
.doc p{margin-bottom:12px;font-size:15.5px}
.doc-lead{font-size:17px;color:var(--txt);margin:20px 0 6px}
.doc-zurueck{margin-top:34px}

/* Zwei Bildschirmfotos nebeneinander. Es sind Hochformate von einem
   Bedienfeld - nebeneinander gestellt bleiben sie klein genug, dass sie den
   Lesefluss nicht sprengen, und gross genug, dass man die Kacheln erkennt. */
/* Begrenzt: Zwei Hochformate in voller Spaltenbreite waeren ueber 850
   Bildpunkte hoch und wuerden den Text auseinanderreissen. */
.schirme{display:grid;grid-template-columns:repeat(2,minmax(0,232px));
  gap:24px;justify-content:start;margin:26px 0 30px}
.schirme figure{margin:0}
.schirme img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--edge);background:var(--gr2)}
.schirme figcaption{margin-top:9px;color:var(--txt3);font-size:13.5px;
  text-align:left;hyphens:none}
@media (max-width:520px){ .schirme{grid-template-columns:1fr;gap:26px} }

/* Blocksatz. Im Deutschen nur mit Silbentrennung brauchbar - sonst reissen
   lange Woerter Loecher in die Zeilen. Auf schmalen Schirmen wieder aus:
   dort bleiben trotz Trennung zu wenige Woerter je Zeile uebrig. */
.blocksatz p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  text-wrap:pretty;overflow-wrap:break-word;
  /* Nicht bei jeder Gelegenheit trennen: mindestens sechs Zeichen im Wort,
     drei vor und drei nach dem Trennstrich. Sonst entstehen Bruchstuecke. */
  hyphenate-limit-chars:6 3 3}
.blocksatz .doc-lead{text-align:left;hyphens:manual}
@media (max-width:560px){ .blocksatz p{text-align:left} }

/* Betonungen im Text: fett traegt, kursiv hebt die Stimme. */
.doc strong,.ich-text strong{color:var(--txt);font-weight:650}
.doc em,.ich-text em{font-style:italic;color:var(--txt)}

/* ---------- Wer dahintersteckt ---------- */
/* Das Foto liegt nur in 291 x 436 Pixeln vor. Deshalb wird es bewusst klein
   ausgegeben - groesser waere es sichtbar weich. Sobald die Originaldatei
   des Fotografen da ist, koennen die Breiten hier hoch. */
.ich{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:center;margin-top:26px}
.ich-bild{position:relative;justify-self:center}
/* Die Freistellung ist raus. Die Vorlage hatte eine ausgefranste Maske, die
   auf dunklem Grund als schmutziger Rand sichtbar wurde. Das Foto steht
   jetzt wieder auf seinem eigenen Studiohintergrund und sitzt in einem
   Rahmen - damit gibt es ueberhaupt keine Silhouette mehr, die reissen kann. */
.ich-bild img{position:relative;display:block;width:200px;height:auto;
  border-radius:10px;border:1px solid var(--edge)}
.ich-text h2{margin-bottom:14px}
.ich-text p{margin-bottom:12px}
@media (max-width:760px){
  .ich{grid-template-columns:1fr;gap:18px;text-align:left}
  .ich-bild img{width:160px}
}

/* Auf der Seite "Über mich" darf das Bild groesser stehen als im Anreisser.
   Die WebP-Fassung ist doppelt so gross gerechnet und nachgeschaerft, deshalb
   bleibt es auch auf feinen Bildschirmen bei 240 Pixeln noch sauber. Mehr
   traegt die Vorlage nicht - dafuer braeuchte es die Datei des Fotografen. */
.ich-kopf{display:flex;align-items:center;gap:28px;margin:28px 0 10px}
.ich-kopf picture{flex:0 0 auto}
.ich-kopf img{display:block;width:240px;height:auto;border-radius:12px;
  border:1px solid var(--edge);box-shadow:0 10px 28px rgba(0,0,0,.45)}
.ich-kopf > div{padding-bottom:0}
.ich-name{font-weight:650;font-size:22px;margin:0}
.ich-rolle{color:var(--txt3);font-size:15px;margin:6px 0 0}
@media (max-width:620px){
  .ich-kopf{flex-direction:column;align-items:flex-start;gap:6px}
  .ich-kopf img{width:200px}
  .ich-kopf > div{padding-bottom:0}
}
.liste{list-style:none;margin-top:16px;display:grid;gap:8px}
.liste li::before{content:"→ ";color:var(--amb)}

/* ---------- Fuß ---------- */
.site-foot{border-top:1px solid var(--edge);background:var(--gr2);padding:44px 0 0;margin-top:0}
.foot-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;
  padding-bottom:34px}
.foot-brand{font-family:Grotesk,sans-serif;font-weight:700;font-size:17px;color:var(--txt);
  margin-bottom:12px}
.foot-brand em{font-style:normal;color:var(--amb)}
.foot-adr{font-size:13.8px;line-height:1.7}
.foot-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt2);margin-bottom:12px}
.foot-col ul{list-style:none;display:grid;gap:8px;font-size:14px}
.foot-col a{color:var(--txt2)}
.foot-col a:hover{color:var(--amb)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  border-top:1px solid var(--edge);padding-top:16px;padding-bottom:22px;font-size:12.5px}

/* ---------- Einwilligung ---------- */
.consent{position:fixed;inset:auto 0 0 0;z-index:150;padding:16px;
  background:linear-gradient(to top,rgba(16,18,21,.96),rgba(16,18,21,.72));
  display:flex;justify-content:center}
.consent-box{max-width:660px;width:100%;background:var(--gr2);border:1px solid var(--edge);
  border-radius:12px;padding:22px 24px;box-shadow:0 18px 50px -12px rgba(0,0,0,.75)}
.consent-box h2{font-size:19px;margin-bottom:9px}
.consent-box>p{font-size:14px}
.consent-opts{display:grid;gap:10px;margin:16px 0 18px}
.consent-opt{display:flex;gap:11px;align-items:flex-start;font-size:13.8px;cursor:pointer}
.consent-opt.is-fixed{cursor:default;opacity:.85}
.consent-opt input{margin-top:4px;width:16px;height:16px;accent-color:var(--amb);flex:0 0 16px}
.consent-opt b{display:block}
.consent-btns{display:flex;gap:10px;flex-wrap:wrap}
.consent-btns .btn{font-size:14px;padding:11px 18px}
.consent-legal{font-size:12.5px;margin-top:14px}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:860px){
  .kontakt-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  .burger{display:block}
  .mainnav{position:absolute;top:100%;left:0;right:0;background:var(--gr2);
    border-bottom:1px solid var(--edge);flex-direction:column;align-items:stretch;
    gap:0;padding:10px 24px 18px;display:none}
  .mainnav.offen{display:flex}
  .mainnav ul{flex-direction:column;gap:0}
  .mainnav ul a{display:block;padding:11px 0;border-bottom:1px solid var(--edge)}
  .nav-login{margin-top:14px;text-align:center}
  .site-head{position:relative}
  html{scroll-padding-top:16px}
  .feld-paar{grid-template-columns:1fr}
  .consent{padding:0}
  .consent-box{border-radius:12px 12px 0 0;border-bottom:0}
  .consent-btns .btn{flex:1 1 100%;justify-content:center}
}

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

/* Wer den hellen Modus erzwingt, bekommt trotzdem eine lesbare Seite:
   der Entwurf ist bewusst dunkel, deshalb bleiben die Farben gesetzt. */
@media print{
  body{background:#fff;color:#000}
  .site-head,.site-foot,.consent,.hero-cta{display:none}
  a{color:#000}
}

/* Bildschirmfoto in der Produktkachel. Die Kachel bleibt vollständig, wenn
   kein Bild vorliegt - dann fehlt einfach dieser Block. */
.tile-bild{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center;
  border-bottom:1px solid var(--edge);background:var(--gr3)}
.tile-bild-leer{display:grid;place-items:center;
  background:radial-gradient(120% 100% at 30% 0%,#232A33,#12151A)}
.tile-bild-leer .mono{color:#5D6875}