/*
Theme Name: Krönert Technik
Theme URI: https://kroenert-technik.de/
Author: Krönert Technik GmbH
Description: Onepage-Theme für die Krönert Technik GmbH — Veranstaltungstechnik aus Berlin. Kontrastreiches Schwarz/Weiß mit Signalfarbe. Alle Texte, Referenzen, Leistungen und Teammitglieder werden über den Customizer bzw. eigene Menüpunkte gepflegt.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kroenert-technik
Tags: one-column, custom-colors, custom-menu, custom-logo, portfolio
*/

/* =========================================================================
   1. Stellschrauben — alles skaliert aus diesen Werten
   ========================================================================= */
:root {
  /* Farben (über Customizer → Darstellung änderbar) */
  --ink: #0A0A0A;
  --paper: #F4F4F2;
  --acc: #FF3B00;
  --line: #D6D6D2;
  --line-dark: rgba(244, 244, 242, 0.16);
  --mute: #8A8A84;
  --mute-dark: rgba(244, 244, 242, 0.68);

  /* Schriften */
  --body: Archivo, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Maße — von hier hängt die gesamte Skalierung ab */
  --scale: 1;                                   /* Gesamt-Schriftgröße */
  --max: 1440px;                                /* Inhaltsbreite */
  --pad: clamp(18px, 3.4vw, 40px);              /* Seitenrand */
  --gap: clamp(28px, 4vw, 64px);                /* Spaltenabstand */
  --section-pad: clamp(72px, 8vw, 120px);       /* Abstand oben/unten je Abschnitt */
  --header-h: 68px;
  --hero-blur: 0px;                             /* Unschärfe im Kopfbereich */

  /* Typo-Stufen — eine einzige fluide Leiter */
  --t-micro: calc(clamp(11px, 0.75vw, 13px) * var(--scale));
  --t-small: calc(clamp(15px, 1vw, 16px) * var(--scale));
  --t-body:  calc(clamp(16px, 1.15vw, 18px) * var(--scale));
  --t-lead:  calc(clamp(17px, 1.3vw, 19px) * var(--scale));
  --t-h3:    calc(clamp(21px, 1.9vw, 30px) * var(--scale));
  --t-h2:    calc(clamp(32px, 4.6vw, 72px) * var(--scale));
  --t-h1:    calc(clamp(42px, 8.4vw, 150px) * var(--scale));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc); }
::selection { background: var(--acc); color: #fff; }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

#top, #ueber, #leistungen, #referenzen, #team, #kontakt { scroll-margin-top: calc(var(--header-h) + 20px); }

.kt-wrap { max-width: var(--max); margin: 0 auto; }
.kt-section { padding: var(--section-pad) var(--pad); }
.kt-dark { background: var(--ink); color: var(--paper); }
.kt-mono { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; }

/* =========================================================================
   2. Kopfzeile
   ========================================================================= */
.kt-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 12px var(--pad);
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--paper);
}
.kt-logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: calc(19px * var(--scale)); letter-spacing: -0.02em; text-transform: uppercase; }
.kt-logo::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--acc); flex: none; }
.kt-logo.has-image::before { display: none; }
.kt-logo-img { height: var(--logo-h, 34px); width: auto; max-width: 48vw; object-fit: contain; }
.kt-nav { display: flex; align-items: center; gap: 2px; }
.kt-nav a { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; }
.kt-nav a:hover { background: rgba(255,255,255,0.1); color: var(--paper); }
.kt-head-cta { margin-left: 10px; }

.kt-burger { display: none; background: none; border: 1px solid rgba(244,244,242,0.32); color: inherit; border-radius: 999px; padding: 9px 16px; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }

/* Buttons */
.kt-btn { display: inline-block; border-radius: 999px; font-weight: 600; font-size: var(--t-small); padding: 16px 30px; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s; }
.kt-btn-sm { padding: 10px 20px; }
.kt-btn-primary { background: var(--acc); color: #fff; }
.kt-btn-primary:hover { background: var(--paper); color: var(--ink); }
.kt-btn-ghost { border-color: rgba(244,244,242,0.32); color: var(--paper); }
.kt-btn-ghost:hover { background: rgba(244,244,242,0.08); border-color: var(--paper); color: var(--paper); }

/* =========================================================================
   3. Hero
   ========================================================================= */
.kt-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--header-h) + 60px) var(--pad) 44px; background: var(--ink); color: var(--paper); overflow: hidden; }
.kt-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.kt-hero-media::after { content: ""; position: absolute; inset: -10% 0; background-image: repeating-linear-gradient(135deg, #1C1C1C 0 14px, #141414 14px 28px); }
.kt-hero-media.has-media::after { display: none; }
.kt-hero-media video, .kt-hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
/* Unschärfe leicht überzeichnen, damit an den Rändern keine weichen Kanten entstehen */
.kt-hero-media video, .kt-hero-media img, .kt-hero-slider { filter: blur(var(--hero-blur, 0px)); }
.kt-hero-slider { position: absolute; inset: 0; pointer-events: none; transform: scale(1.06); transform-origin: center; }
.kt-hero-slider > *, .kt-hero-slider rs-module-wrap, .kt-hero-slider rs-module,
.kt-hero-slider .rev_slider_wrapper, .kt-hero-slider .rev_slider,
.kt-hero-slider sr7-module, .kt-hero-slider sr7-content { height: 100% !important; min-height: 100% !important; }
.kt-hero-slider img, .kt-hero-slider video { width: 100%; height: 100%; object-fit: cover; }
.kt-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--ink) 10%, rgba(10,10,10,0.35) 62%, rgba(10,10,10,var(--dim, 0.55)) 100%); }
.kt-hero-slot { position: absolute; z-index: 2; top: calc(var(--header-h) + 26px); right: var(--pad); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244,244,242,0.42); border: 1px dashed rgba(244,244,242,0.28); padding: 9px 14px; }
.kt-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; display: grid; gap: clamp(24px, 3vw, 40px); }

.kt-kicker { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); }
.kt-kicker::before { content: ""; width: 44px; height: 1px; background: currentColor; flex: none; }
.kt-h1 { font-size: var(--t-h1); line-height: 0.88; letter-spacing: -0.045em; font-weight: 900; text-transform: uppercase; }
.kt-h1 em { font-style: normal; color: var(--acc); }
.kt-hero-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); align-items: end; border-top: 1px solid var(--line-dark); padding-top: 28px; }
.kt-hero-foot p { font-size: var(--t-lead); line-height: 1.55; color: rgba(244,244,242,0.78); max-width: 46ch; }
.kt-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================================
   4. Laufband
   ========================================================================= */
.kt-marquee { background: var(--acc); color: #fff; overflow: hidden; padding: 15px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.kt-marquee-track { display: flex; width: max-content; animation: ktMarquee 34s linear infinite; }
.kt-marquee-track span { padding-right: 40px; font-family: var(--mono); font-size: var(--t-small); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
@keyframes ktMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================================
   5. Abschnittsköpfe
   ========================================================================= */
.kt-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); align-items: end; }
.kt-head-top { align-items: start; }
.kt-eyebrow { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.5; margin-bottom: 26px; }
.kt-h2 { font-size: var(--t-h2); line-height: 0.98; letter-spacing: -0.04em; font-weight: 900; text-transform: uppercase; }
.kt-h2-soft { font-size: calc(var(--t-h2) * 0.82); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; text-transform: none; }
.kt-lead { font-size: var(--t-lead); line-height: 1.6; max-width: 46ch; color: #444; }
.kt-dark .kt-lead { color: var(--mute-dark); }

/* =========================================================================
   6. Über uns
   ========================================================================= */
.kt-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); align-items: start; }
.kt-about-text { display: grid; gap: 20px; max-width: 58ch; }
.kt-about-text p { font-size: var(--t-body); line-height: 1.65; color: #2B2B2B; }
.kt-about-text p:first-child { font-size: calc(var(--t-body) * 1.2); font-weight: 600; color: var(--ink); }

.kt-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: clamp(52px, 6vw, 96px); }
.kt-values > article { padding: 36px 28px 42px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 13px; align-content: start; transition: background .25s, color .25s; }
.kt-values > article:hover { background: var(--ink); color: var(--paper); }
.kt-values > article:hover p:last-child { color: rgba(244,244,242,0.75); }
.kt-num { font-family: var(--mono); font-size: var(--t-micro); color: var(--acc); }
.kt-values h3 { font-size: calc(var(--t-h3) * 0.85); font-weight: 700; }
.kt-values p:last-child { font-size: var(--t-small); line-height: 1.6; color: #4A4A46; }

/* =========================================================================
   7. Leistungen
   ========================================================================= */
.kt-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.kt-services > article { padding: 40px 30px 48px; border-bottom: 1px solid var(--line-dark); border-right: 1px solid var(--line-dark); display: grid; gap: 15px; align-content: start; transition: background .25s; }
.kt-services > article:hover { background: rgba(244,244,242,0.05); }
.kt-services h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.025em; }
.kt-services p:last-child { font-size: var(--t-small); line-height: 1.6; color: var(--mute-dark); }
.kt-services-head { border-bottom: 1px solid var(--line-dark); padding-bottom: 40px; }

.kt-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 26px; margin-top: 26px; }
.kt-feature { border: 1px solid var(--line-dark); display: grid; align-content: start; }
.kt-feature .kt-media { aspect-ratio: 16/9; }
.kt-feature-body { padding: 32px 30px 38px; display: grid; gap: 13px; }
.kt-feature-body h3 { font-size: calc(var(--t-h3) * 1.12); font-weight: 800; }
.kt-feature-body p:last-child { font-size: var(--t-small); line-height: 1.65; color: rgba(244,244,242,0.7); }
.kt-feature-kicker { font-family: var(--mono); font-size: var(--t-micro); color: var(--acc); text-transform: uppercase; letter-spacing: 0.1em; }

/* =========================================================================
   8. Medien-Platzhalter
   ========================================================================= */
.kt-media { position: relative; overflow: hidden; background-image: repeating-linear-gradient(135deg, #E4E4E0 0 12px, #DBDBD6 12px 24px); display: flex; align-items: center; justify-content: center; }
.kt-dark .kt-media, .kt-media.is-dark { background-image: repeating-linear-gradient(135deg, #191919 0 12px, #131313 12px 24px); }
.kt-media img, .kt-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kt-media.fit-contain img { object-fit: contain; }
.kt-media-slot { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); border: 1px dashed #B9B9B2; padding: 8px 14px; text-align: center; }
.kt-dark .kt-media-slot, .kt-media.is-dark .kt-media-slot { color: rgba(244,244,242,0.4); border-color: rgba(244,244,242,0.26); }

/* =========================================================================
   9. Referenzen
   ========================================================================= */
.kt-refs { padding-left: 0; padding-right: 0; }
.kt-refs > .kt-head, .kt-refs > .kt-hint { padding: 0 var(--pad); max-width: var(--max); margin-left: auto; margin-right: auto; }
.kt-rail { display: flex; gap: 20px; overflow-x: auto; padding: 4px var(--pad) 26px; scroll-snap-type: x mandatory; margin-top: clamp(32px, 4vw, 56px); }
.kt-rail::-webkit-scrollbar { height: 3px; }
.kt-rail::-webkit-scrollbar-thumb { background: var(--line); }
.kt-ref { flex: 0 0 clamp(260px, 26vw, 380px); scroll-snap-align: start; display: grid; gap: 15px; }
.kt-ref .kt-media { aspect-ratio: 4/3; }
.kt-ref figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--ink); padding-top: 12px; }
.kt-ref-title { font-size: calc(var(--t-h3) * 0.7); font-weight: 700; letter-spacing: -0.02em; }
.kt-ref-num { font-family: var(--mono); font-size: var(--t-micro); color: var(--acc); }
.kt-hint { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }

/* =========================================================================
   10. Team
   ========================================================================= */
.kt-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(22px, 2.6vw, 34px); margin-top: clamp(40px, 5vw, 64px); }
.kt-member { display: grid; gap: 16px; align-content: start; }
.kt-member .kt-media { aspect-ratio: 1/1; }
.kt-member h3 { font-size: calc(var(--t-h3) * 0.8); font-weight: 700; }
.kt-role { font-family: var(--mono); font-size: var(--t-micro); color: var(--acc); margin-top: -10px; }
.kt-member p:last-child { font-size: var(--t-small); line-height: 1.6; color: rgba(244,244,242,0.66); }

/* =========================================================================
   11. Kontakt
   ========================================================================= */
.kt-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: clamp(40px, 5vw, 64px) 0 clamp(36px, 4vw, 56px); }
.kt-contact-grid > div { padding: 30px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 9px; }
.kt-label { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.kt-contact-value { font-size: calc(var(--t-h3) * 0.85); font-weight: 700; letter-spacing: -0.02em; word-break: break-word; }

.kt-form { background: var(--ink); color: var(--paper); padding: clamp(28px, 4.5vw, 72px); }
.kt-form .kt-eyebrow { color: rgba(244,244,242,0.55); margin-bottom: 32px; }
.kt-fill { font-size: calc(clamp(19px, 2.4vw, 34px) * var(--scale)); line-height: 2; font-weight: 500; letter-spacing: -0.015em; max-width: 1000px; }
.kt-fill input { background: transparent; border: none; border-bottom: 2px solid var(--acc); outline: none; font: inherit; font-weight: 700; color: var(--paper); padding: 0 4px; }
.kt-fill input.is-optional { border-bottom-color: rgba(244,244,242,0.35); }
.kt-fill input::placeholder { color: rgba(244,244,242,0.4); font-weight: 400; }
.kt-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--line-dark); padding-top: 30px; }
.kt-send { background: var(--acc); color: #fff; border: none; border-radius: 999px; padding: 17px 32px; font-family: inherit; font-weight: 600; font-size: var(--t-small); cursor: pointer; transition: background .25s, color .25s; }
.kt-send:hover { background: var(--paper); color: var(--ink); }
.kt-form-note { font-family: var(--mono); font-size: var(--t-micro); color: rgba(244,244,242,0.5); }

/* =========================================================================
   12. Fußzeile
   ========================================================================= */
.kt-footer { background: var(--ink); color: rgba(244,244,242,0.6); border-top: 1px solid rgba(244,244,242,0.14); padding: 40px var(--pad); display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: var(--t-micro); }
.kt-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.kt-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; }

/* =========================================================================
   13. Bewegung
   ========================================================================= */
.kt-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.kt-reveal.is-in { opacity: 1; transform: none; }
.no-js .kt-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kt-reveal { opacity: 1; transform: none; transition: none; }
  .kt-marquee-track { animation: none; }
}

/* =========================================================================
   14. Innenseiten
   ========================================================================= */
.kt-page { padding: calc(var(--header-h) + var(--section-pad)) var(--pad) var(--section-pad); }
.kt-page-inner { max-width: 820px; margin: 0 auto; }
.kt-page-inner h1 { font-size: calc(var(--t-h2) * 0.7); margin-bottom: 28px; }
.kt-page-inner h2, .kt-page-inner h3 { margin: 36px 0 12px; }
.kt-page-inner p, .kt-page-inner li { line-height: 1.7; margin-bottom: 16px; }

/* =========================================================================
   15. Schmale Ansichten
   ========================================================================= */
@media (max-width: 900px) {
  :root { --header-h: 60px; }
  .kt-burger { display: inline-block; }
  .kt-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(10,10,10,0.97); backdrop-filter: blur(14px);
    padding: 8px var(--pad) 20px; display: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .kt-nav.is-open { display: flex; }
  .kt-nav a { padding: 14px 4px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); border-radius: 0; }
  .kt-head-cta { display: none; }
  .kt-hero-slot { display: none; }
  .kt-fill { line-height: 1.9; }
  .kt-fill input { width: 100% !important; max-width: 320px; }
}
@media (max-width: 560px) {
  .kt-hero { min-height: 92vh; }
  .kt-kicker::before { width: 24px; }
}