@import "tailwindcss";

:root {
  /* Seite ist ausschließlich dunkel gestaltet (kein Hell-Modus) — sagt dem
     Browser, native Formularelemente (u. a. die <select>-Aufklapp-Popups)
     standardmäßig dunkel zu rendern statt mit hellem System-Grund. */
  color-scheme: dark;
  --rk-bg: #101012;
  --rk-surface: #17171a;
  --rk-ink: #f5f5f4;
  --rk-ink-muted: #a3a1a6;
  --rk-line: #38363c;
  /* Kupfer/Amber-Akzent des Redesigns (entschieden 03.09.2026, siehe die
     "Vorlagen & Ideen"-Galerie) — ersetzt keine bestehende Farbe, ist die
     erste echte Akzentfarbe der Seite (vorher nur neutrale Töne + Weiß). */
  --rk-accent: #c98a4b;

  /* Quantify: nur für Headlines/Wordmark, nicht für Fließtext (Quelle: next/font/local) */
  --font-display: var(--font-quantify), "Arial Narrow", sans-serif;
  --font-body: var(--font-geist-sans), Arial, Helvetica, sans-serif;

  /* Fluider Seitenrand: bis knapp unter Laptop-Breite (~864px) identisch mit
     dem alten festen 1.5rem-Rand (px-6), damit sich auf Handy/Tablet nichts
     ändert. Darüber wächst er linear mit der Fensterbreite (25vw abzüglich
     einem festen Versatz) statt bei einer festen Breite stehen zu bleiben —
     so bleibt der Inhalt auf jedem großen Monitor 50–70% der Bildschirm-
     breite (15–25% Rand je Seite), egal ob 1920px, Ultrawide oder 4K, statt
     bei fester max-width (z. B. 64rem) auf riesigen Screens in einem
     schmalen Streifen zu verschwinden. */
  --rk-gutter: max(1.5rem, calc(25vw - 12rem));
}

@theme inline {
  --color-background: var(--rk-bg);
  --color-foreground: var(--rk-ink);
  --font-sans: var(--font-body);
  --font-mono: var(--font-geist-mono);

  /* Als echter Breakpoint registriert (nicht als min-[1600px]-Arbitrary-
     Value) — sonst landet die Regel im Stylesheet vor den fest eingebauten
     Breakpoints wie lg:, wodurch lg: bei gleicher Media-Query-Priorität die
     Kaskade gewinnt und größere Grids nie die zusätzliche Spalte bekommen. */
  --breakpoint-3xl: 100rem;
}

body {
  /* Verlauf explizit auf eine Bildschirmhöhe begrenzt (background-size) statt
     ihn implizit über die gesamte, scrollbare Seitenhöhe zu strecken — sonst
     wird der sehr schwache Verlauf (nur 4% Weiß) auf langen Seiten (z. B.
     Auftragsdetails) über tausende Pixel gezogen. Bei nur ~10 unterscheid-
     baren 8-Bit-Farbstufen entstehen dabei sichtbare Bänder/Flecken statt
     eines weichen Übergangs, besonders am unteren Rand kurz vorm Footer.
     So bleibt der Verlauf oben an der Seite (scrollt normal mit weg),
     darunter einfach die flache Grundfarbe ohne Bänderung. */
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.04), transparent 60%) top center / 100% 100vh no-repeat,
    var(--rk-bg);
  color: var(--rk-ink);
  font-family: var(--font-body);
}

/* Sitzweite Lesbarkeit für native <select>-Popups: color-scheme allein
   reicht nicht überall (z. B. Linux/GTK-Rendering übernahm bisher die vom
   <select> geerbte helle Textfarbe auf hellem Popup-Grund, siehe einzelne
   bereits manuell gefixte Formulare) — hier einmal zentral statt in jedem
   der ~40 Formulare einzeln als Inline-Style. Ergänzt, überschreibt keine
   bestehenden Inline-Styles (die gewinnen ohnehin per CSS-Spezifität). */
select option {
  background-color: var(--rk-surface);
  color: var(--rk-ink);
}
select option:disabled {
  color: var(--rk-ink-muted);
}

/* Eigene, schlanke Scrollbar site-weit (wie in V1). Kein JS.
   WICHTIG: Chrome/Edge >=121 unterstützen die Standard-Eigenschaft
   `scrollbar-width` — sobald sie gesetzt ist (thin/none), ignoriert Blink
   die `::-webkit-scrollbar`-Pseudoelemente KOMPLETT. Deshalb `scrollbar-width`
   NICHT global setzen, sondern nur dort, wo `::-webkit-scrollbar` gar nicht
   existiert (Firefox) — sonst verschwindet in Chrome die ganze Gestaltung
   (Daumenfarbe, Kupfer-Highlight beim Hovern). */
*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--rk-line);
  border-radius: 999px;
  /* 3px transparenter Rand -> der Daumen wirkt schmaler und "schwebt" */
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  /* Kupfer-Akzent als Highlight beim Hovern/Ziehen */
  background: var(--rk-accent);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
/* Firefox (hat keine ::-webkit-scrollbar). Über @supports so eingegrenzt,
   dass Blink diese Regel NICHT sieht und weiter die Pseudoelemente oben
   nutzt. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--rk-line) transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Scroll-Reveal: Startzustand + eingeblendeter Zustand (Klasse wird per
   IntersectionObserver gesetzt, siehe components/ScrollReveal.tsx) */
.rk-reveal {
  opacity: 0;
  transform: translateY(2.25rem) scale(0.97);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.rk-reveal[data-visible="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Karten heben beim Hover leicht ab, zusätzlich zum Bild-Zoom */
.rk-lift {
  transition: transform 0.35s ease;
}
.rk-lift:hover {
  transform: translateY(-0.35rem);
}

/* Scroll-Down-Indikator im Hero */
@keyframes rk-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(0.4rem); opacity: 1; }
}
.rk-scroll-cue {
  animation: rk-bounce 2s ease-in-out infinite;
}

/* Kupfer-Segment im "Mehr entdecken"-Strich (ScrollDownCue) wandert
   endlos hin und her, statt still zu stehen — auf Wunsch des Nutzers
   (08.09.2026), damit der Hinweis eher auffällt. */
@keyframes rk-scan {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(250%); }
}
.rk-scan {
  animation: rk-scan 2.2s ease-in-out infinite;
}

/* Nach-oben-Button */
.rk-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Testimonial-Fließband auf der Startseite — Inhalt wird im Markup
   verdoppelt, die Animation läuft exakt über die erste Hälfte (-50%), damit
   der Loop nahtlos ist. Pausiert bei Hover/Fokus, damit sich ein Zitat lesen
   lässt. prefers-reduced-motion greift bereits global oben. */
@keyframes rk-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.rk-marquee-track {
  animation: rk-marquee 40s linear infinite;
  /* Weist den Compositor vorab an, nur transform zu animieren — vermeidet
     ein Neu-Layout/Repaint im selben Frame wie der Loop-Sprung (0 -> -50%),
     der sich sonst als kurzes Ruckeln genau am Loop-Punkt zeigen kann. */
  will-change: transform;
  backface-visibility: hidden;
}
.rk-marquee-track:hover,
.rk-marquee-track:focus-within {
  animation-play-state: paused;
}
/* Kopierschutz, 1:1 aus V1 übernommen */
body.copy-lock-text { -webkit-user-select: none; user-select: none; }
body.copy-lock-text input, body.copy-lock-text textarea { user-select: text; }
body.copy-lock-media img { -webkit-user-drag: none; user-drag: none; }

/* Grain texture from the Rakku brand assets — layered noise, no image request */
.rk-grain {
  position: relative;
  isolation: isolate;
}
.rk-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* Viewfinder corner brackets, matches the Rakku business card motif: they
   frame the whole shot (a photo, a hero section), not a block of text.
   Expects four .rk-corner elements (data-pos: tl/tr/bl/br) as children of a
   `position: relative` ancestor, inset a fixed distance from its edges.
   Rein dekorativ, nie interaktiv (siehe alle Verwendungsstellen) - ohne
   pointer-events:none blockierte die obere rechte Ecke auf der Startseite
   real antippbare Bereiche direkt daneben, u. a. den mobilen Burger-Menü-
   Button (Fund vom Nutzer, 21.09.2026, mobil: "die Nav ist verbuggt" -
   per echtem Mobile-Emulationstest reproduziert: ein Klick auf den Button
   traf stattdessen die unsichtbare .rk-corner-Fläche daneben/darüber). */
.rk-corner {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  border-color: var(--rk-ink);
  opacity: 0.85;
  inset: 1.5rem;
  pointer-events: none;
}
.rk-corner[data-pos="tl"] { bottom: auto; right: auto; border-top: 1.5px solid; border-left: 1.5px solid; }
.rk-corner[data-pos="tr"] { bottom: auto; left: auto; border-top: 1.5px solid; border-right: 1.5px solid; }
.rk-corner[data-pos="bl"] { top: auto; right: auto; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.rk-corner[data-pos="br"] { top: auto; left: auto; border-bottom: 1.5px solid; border-right: 1.5px solid; }
/* Nur für Hero-Flächen mit schwebendem Header darüber (z. B. die Startseite):
   obere Ecken tiefer setzen, damit sie unter dem Header bleiben und nicht
   durch dessen halbtransparenten Hintergrund in die Navigation hineinschimmern.
   Eigener Modifier statt fest in [data-pos] eingebacken, weil das .rk-corner-
   Motiv auch für kleinere, eigenständige Rahmen ohne Header genutzt wird
   (z. B. die Wartungsseite) — dort sollen alle vier Ecken gleich weit innen sitzen. */
.rk-corner--under-nav[data-pos="tl"],
.rk-corner--under-nav[data-pos="tr"] {
  top: 3.5rem;
}

/* Kleiner, wiederkehrender Akzentstrich unter Überschriften — das
   verbindende "Signaturelement" des Redesigns, taucht auf jeder Seite an
   Überschriften wieder auf statt einer neuen Deko pro Seite. */
.rk-accent-rule {
  width: 2.5rem;
  height: 2px;
  background: var(--rk-accent);
  margin-top: 1.125rem;
}
.rk-accent-rule--center {
  margin-inline: auto;
}

/* Sehr dezenter Kupfer-Glanz hinter einem fokalen Element (Hero-Foto,
   Seiten-Header-Banner). Bewusst schwach gehalten (Opacity ~0.06) — eine
   stärkere Variante (~0.14) wurde im Redesign-Review explizit als "zu
   extrem" abgelehnt (Kalibrierungsnotiz vom 03.09.2026). Erwartet ein
   `position: relative`-Elternelement. */
.rk-ambient-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 45% 50% at 50% 15%, rgba(201, 138, 75, 0.06), transparent 70%);
}

/* Weicher Übergang zwischen Hero-Foto und dem Abschnitt danach, statt eines
   harten Schnitts. */
.rk-fade-to-bg {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--rk-bg));
  pointer-events: none;
}

/* Leicht abgesetzte Fläche innerhalb der Seite (z. B. Shooting-Info-Sektion)
   — fadet an Ober- und Unterkante weich in den normalen Seitenhintergrund
   ein/aus, statt als hartkantiger Farbblock zu enden. */
.rk-surface-band {
  background: linear-gradient(
    to bottom,
    var(--rk-bg),
    var(--rk-surface) 12%,
    var(--rk-surface) 88%,
    var(--rk-bg)
  );
}

.rk-wordmark {
  font-family: var(--font-display);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rk-ink);
}

/* Ersetzt "px-6" als Seitenrand für Content-Sektionen, die auf großen
   Monitoren mitwachsen sollen (siehe --rk-gutter oben). Bewusst nicht für
   den Hero (bleibt randlos/full-bleed) und nicht für Kopf-/Fußzeile
   (bleiben als schmale Chrome-Leisten randnah). */
.rk-shell {
  padding-inline: var(--rk-gutter);
}

/* Modernisierte Checkboxen/Radios site-weit statt der nativen Browser-
   Standarddarstellung (die auf dem dunklen Hintergrund kaum auffällt) —
   leicht abgerundete Ecken bei Checkboxen (bewusst nicht rund, das bleibt
   Radios vorbehalten), deutlich sichtbarer Rand, gefüllter Haken/Punkt beim
   Ankreuzen. Größe kommt weiterhin aus den h-/w-Klassen der jeweiligen
   Stelle — hier wird nur das Aussehen selbst ersetzt, nicht die Abmessung.

   Der folgende [type="__rk_decoy__"]-Regelblock trifft absichtlich kein
   echtes Element (kein <input> hat diesen type-Wert) — er dient nur als
   Blitzableiter für einen Lightning-CSS-Minifier-Bug (Turbopack-Build): die
   allererste Regel im Stylesheet, die einen [type="..."]-Attributselektor
   verwendet, wird reproduzierbar komplett verworfen, unabhängig von Inhalt
   oder genauer Selektor-Form. Ohne diesen Dummy davor würde stattdessen eine
   der echten Checkbox/Radio-Regeln direkt darunter lautlos verschwinden. */
[type="__rk_decoy__"] {
  all: unset;
}

[type="checkbox"]:checked::before,
[type="radio"]:checked::before {
  transform: scale(1);
}
[type="checkbox"]:checked,
[type="radio"]:checked {
  background-color: var(--rk-ink);
  border-color: var(--rk-ink);
}
[type="checkbox"]:hover,
[type="radio"]:hover {
  border-color: var(--rk-ink);
}
[type="checkbox"]:focus-visible,
[type="radio"]:focus-visible {
  outline: 2px solid var(--rk-ink);
  outline-offset: 2px;
}
[type="checkbox"]:disabled,
[type="radio"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
[type="radio"]:not(:disabled) {
  border-radius: 999px;
}

/* Basis-Erscheinungsbild bewusst nach allen Pseudo-Klassen-Regeln oben
   platziert (nicht davor): Lightning CSS (Turbopack-Build) verwirft sonst
   reproduzierbar eine große mehrzeilige [type="..."]-Basisregel, sobald ihr
   im Stylesheet noch eine weitere [type="..."]-Regel folgt (Build-Bug,
   unabhängig von Selektor-Form/-Inhalt) — als letzte [type="..."]-Regel im
   Stylesheet bleibt sie zuverlässig erhalten. Die Reihenfolge ist unschädlich,
   da :checked/:hover/:disabled usw. ohnehin höhere Spezifität haben und die
   Kaskade unabhängig von der Deklarationsreihenfolge korrekt auflöst. */
[type="radio"]::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  transform: scale(0);
  transition: transform 0.1s ease-in-out;
  border-radius: 999px;
  background-color: var(--rk-bg);
}
[type="checkbox"]::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  transform: scale(0);
  transition: transform 0.1s ease-in-out;
  /* Häkchen-Form per clip-path statt Icon-Datei — skaliert sauber mit der
     em-basierten Größe der jeweiligen Checkbox mit. */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  background-color: var(--rk-bg);
}
[type="checkbox"],
[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid rgba(245, 245, 244, 0.4);
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}