/*
Theme Name: Nightfrog
Theme URI: https://www.nightfrog.com
Author: Nightfrog Media & Film
Author URI: https://www.nightfrog.com
Description: Schlankes, individuelles WordPress-Theme für nightfrog.com. Kein Page-Builder, keine Fremd-Abhängigkeiten außer Advanced Custom Fields (für die Produktionsdetails) und WPML (Mehrsprachigkeit).
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Unlicense
Text Domain: nightfrog

Aufbau:
  - Alle Styles liegen bewusst in dieser einen Datei (kein Build-Step, kein SCSS).
  - :root-Variablen oben = Design-Tokens (Farben, Breiten). Hier ändert man das
    gesamte Erscheinungsbild zentral.
  - Reihenfolge der Abschnitte folgt in etwa der Template-Reihenfolge:
    Utility-Bar -> Header -> Hero -> Kacheln/Listen -> Beitragsseite ->
    Formulare -> Footer -> Responsive.
*/

:root{
  --bg: #000000;
  --bg-card: #0a0a0a;
  --line: #1e1e1e;
  --ink: #e0e0e0;
  --ink-title: #dedede;
  --ink-muted: #a3a3a3;
  --ink-faint: #6d6d6d;
  --accent: #cd7313;
  --accent-bright: #e8963c;
  --accent-deep: #4a2c0c;
  --accent-chip-bg: rgba(205,115,19,0.10);
  --maxw: 1280px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background-color:var(--bg);
  color:var(--ink);
  font-family:Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* Sticky-Hintergrundbild: faehrt mit dem Content hoch, bleibt dann oben
   haengen, sobald es die Fensteroberkante erreicht. Wird ueber
   body_class()/page-spezifische Flags ein- bzw. ausgeschaltet. */
main.bg-start{ position:relative; }
.bg-sticky{ position:sticky; top:0; height:0; overflow:visible; z-index:0; }
.bg-sticky .bg-img{
  position:absolute; top:0; right:0;
  width:min(1350px, 82.5vw);
  aspect-ratio:1920/1080;
  background-repeat:no-repeat;
  background-position:top right;
  background-size:cover;
  pointer-events:none;
}
main.bg-start > .wrap{ position:relative; z-index:1; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.screen-reader-text{ position:absolute !important; left:-9999px; top:-9999px; }

.icon{ display:inline-block; width:11px; height:11px; vertical-align:-1px; margin-right:5px; }
.icon path, .icon rect, .icon circle, .icon polyline{ stroke:currentColor; }

/* ---------- Utility bar ---------- */
.utility-bar{ border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.05em; }
.utility-bar .wrap{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding-top:9px; padding-bottom:9px; color:var(--ink-faint); text-transform:uppercase;
}
.utility-bar a{ color:var(--ink-faint); transition:color .15s ease; }
.utility-bar a:hover{ color:var(--accent); }
.breadcrumb{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.breadcrumb .sep{ color:var(--ink-faint); }
.breadcrumb a:hover, .breadcrumb span.current{ color:var(--ink-muted); }
.lang-switch{ display:flex; gap:8px; }
.lang-switch a{ color:var(--ink-faint); }
.lang-switch .active, .lang-switch a.active{ color:var(--ink-muted); font-weight:700; }
.lang-switch span.sep{ color:var(--ink-faint); }

/* ---------- Header ---------- */
header.site-header{ position:sticky; top:0; z-index:50; background:transparent; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:24px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{ height:44px; width:auto; flex:none; }
.brand-text{ font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }

nav.main-nav{ display:flex; gap:30px; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
nav.main-nav ul{ display:flex; gap:30px; margin:0; padding:0; list-style:none; }
nav.main-nav li{ position:relative; }
nav.main-nav a{ position:relative; display:inline-block; padding:6px 0; color:var(--ink-muted); transition:color .15s ease; }
nav.main-nav a:hover{ color:var(--ink); }
nav.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
nav.main-nav a:hover::after{ transform:scaleX(1); }
nav.main-nav .current-menu-item > a,
nav.main-nav .current-menu-ancestor > a{ color:var(--ink); }
nav.main-nav .current-menu-item > a::after,
nav.main-nav .current-menu-ancestor > a::after{ transform:scaleX(1); }

/* Submenues (einfacher Dropdown, falls im Menü vorhanden) */
nav.main-nav ul ul{
  display:none; position:absolute; top:100%; left:0; min-width:200px; flex-direction:column;
  background:#050505; border:1px solid var(--line); padding:8px 0; z-index:60;
}
nav.main-nav li:hover > ul{ display:flex; }
nav.main-nav ul ul a{ padding:8px 16px; display:block; }
nav.main-nav ul ul a::after{ display:none; }

.header-actions{ display:flex; align-items:center; gap:18px; }
.icon-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; color:var(--ink-muted); background:none; border:0; cursor:pointer; transition:color .15s ease; }
.icon-btn:hover{ color:var(--accent); }
.menu-toggle{ display:none; }

/* Mobiles Such-Dropdown */
.search-overlay{ display:none; border-bottom:1px solid var(--line); background:#050505; }
.search-overlay.is-open{ display:block; }
.search-overlay form{ display:flex; gap:10px; padding:16px 0; }
.search-overlay input[type="search"]{
  flex:1; background:transparent; border:1px solid var(--line); color:var(--ink);
  padding:10px 14px; font-size:14px; border-radius:2px;
}
.search-overlay button{ background:var(--accent); color:#000; border:0; padding:0 18px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:12px; border-radius:2px; cursor:pointer; }
.search-overlay button:hover{ background:var(--accent-bright); }

/* Mobile-Navigation (aufklappend unter dem Header) */
@media (max-width:980px){
  nav.main-nav{ display:none; }
  .menu-toggle{ display:flex; width:36px; height:36px; align-items:center; justify-content:center; color:var(--ink); }
  header.site-header.nav-open nav.main-nav{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:#030303; border-bottom:1px solid var(--line); padding:10px 0;
  }
  header.site-header.nav-open nav.main-nav ul{ flex-direction:column; gap:0; }
  header.site-header.nav-open nav.main-nav .wrap{ padding:0 32px; }
  header.site-header.nav-open nav.main-nav a{ display:block; padding:12px 0; }
  header.site-header.nav-open nav.main-nav ul ul{ position:static; border:0; padding-left:14px; }
}

/* ---------- Hero (Startseite) ---------- */
.hero{ position:relative; border-bottom:1px solid var(--line); }
.hero-media{ position:relative; aspect-ratio:16/8; overflow:hidden; background:#000; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05); }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.98) 6%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.3) 100%);
}
.hero-content{ position:absolute; left:0; right:0; bottom:0; padding:0 32px 40px; }
.hero-content .wrap{ padding:0; max-width:var(--maxw); margin:0 auto; }
.eyebrow{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.hero-title{
  font-family:Helvetica, Arial, sans-serif; font-weight:400; font-size:clamp(26px, 4.2vw, 42px);
  line-height:1.25; letter-spacing:.03em; text-transform:uppercase; max-width:820px; margin:0 0 14px; color:var(--ink-title);
}
.hero-title a{ color:inherit; }
.hero-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); }
.hero-meta .tagset{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-meta .tagset span{ color:var(--accent); display:flex; align-items:center; }
.hero-placeholder{ width:100%; height:100%; background:linear-gradient(135deg,#0a0a0a,#161616); }

/* ---------- Section heading ---------- */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; padding:50px 0 22px; gap:16px; flex-wrap:wrap; }
.section-head h1, .section-head h2{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin:0; color:var(--ink); }
.section-head .view-all{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.section-head .view-all:hover{ color:var(--accent-bright); }

/* ---------- Kachel-Liste (Variante C: Index + Bild/Text-Zeilen) ---------- */
.variant-block{ padding-bottom:40px; }
.list-c{ display:flex; flex-direction:column; }
.tile-c{ display:flex; align-items:stretch; gap:16px; padding:26px 0; border-bottom:1px solid var(--line); }
.tile-c:first-child{ border-top:1px solid var(--line); }

.tc-index{ flex:none; width:26px; display:flex; align-items:center; justify-content:center; }
.tc-index span{ display:inline-block; transform:rotate(-90deg); white-space:nowrap; font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.08em; }

.tc-content{ flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }
.tc-row{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.tc-row .tc-label{ flex:none; width:20px; padding-top:4px; display:flex; align-items:flex-start; justify-content:center; }
.tc-row .tc-label span{ display:inline-block; transform:rotate(-90deg); white-space:nowrap; font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--ink-faint); }

.tc-media{ flex:1 1 auto; min-width:0; max-width:320px; aspect-ratio:4/3; overflow:hidden; border-radius:2px; background:#0a0a0a; }
.tc-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .5s ease; }
.tile-c:hover .tc-media img{ filter:grayscale(0); }
.tc-body{ min-width:0; }

.p-meta{ font-size:11px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 8px; display:flex; flex-wrap:wrap; gap:0 10px; }
.p-meta .tag{ color:var(--accent); }
.p-meta .sep{ color:var(--ink-faint); }
.card-title{ font-size:14px; font-weight:400; line-height:1.5; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-title); margin:0 0 10px; }
.read-more{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); }
.read-more:hover{ color:var(--accent-bright); }

/* related-Variante (schmalere Bildspalte, auf Beitragsseite) */
.list-c.is-related .tc-media{ max-width:220px; }
.list-c.is-related .tile-c{ padding:22px 0; }

/* ---------- Strip ---------- */
.strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0;
  display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); overflow-x:auto; white-space:nowrap;
}
.strip .divider{ color:var(--accent-deep); }

/* ---------- Beitragsseite: nummerierte Abschnitte ---------- */
.pn-row{ display:flex; align-items:flex-start; gap:20px; padding:36px 0; border-bottom:1px solid var(--line); }
.pn-row:first-child{ border-top:1px solid var(--line); }
.pn-index{ flex:none; width:28px; display:flex; align-items:flex-start; justify-content:center; padding-top:4px; }
.pn-index span{ display:inline-block; transform:rotate(-90deg); white-space:nowrap; font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.08em; }
.pn-content{ flex:1; min-width:0; }
.pn-label{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }

.pn-sub{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.pn-sub + .pn-sub{ margin-top:18px; }
.pn-sub .pn-sub-label{ flex:none; width:20px; padding-top:4px; display:flex; align-items:flex-start; justify-content:center; }
.pn-sub .pn-sub-label span{ display:inline-block; transform:rotate(-90deg); white-space:nowrap; font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--ink-faint); }

.post-media{ flex:1 1 auto; min-width:0; width:100%; aspect-ratio:16/8; overflow:hidden; border-radius:2px; background:#000; }
.post-media img, .post-media video, .post-media iframe{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05); border:0; }

.post-eyebrow{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.post-title{
  font-family:Helvetica, Arial, sans-serif; font-weight:400; font-size:clamp(26px, 3.6vw, 40px);
  line-height:1.25; letter-spacing:.02em; text-transform:uppercase; max-width:820px; margin:0 0 16px; color:var(--ink-title);
}
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); }
.post-meta .tagset{ display:flex; gap:14px; flex-wrap:wrap; }
.post-meta .tagset span{ color:var(--accent); display:flex; align-items:center; }

.post-lead{ font-size:19px; line-height:1.6; color:var(--ink-title); max-width:700px; margin:0; }

.post-body{ max-width:700px; }
.post-body p{ margin:0 0 20px; font-size:15px; line-height:1.85; color:var(--ink-muted); }
.post-body p:last-child{ margin-bottom:0; }
.post-body a{ color:var(--accent); text-decoration:underline; text-decoration-color:var(--accent-deep); }
.post-body a:hover{ color:var(--accent-bright); }
.post-body ul, .post-body ol{ color:var(--ink-muted); font-size:15px; line-height:1.85; max-width:700px; }
.post-body img{ max-width:100%; height:auto; filter:grayscale(1); border-radius:2px; margin:12px 0; }
.post-body .post-inline-media{ margin:32px 0; }
.post-body .post-inline-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; filter:grayscale(1); border-radius:2px; margin:0; }
.post-body .post-inline-caption{ font-size:11px; color:var(--ink-faint); letter-spacing:.03em; margin-top:10px; }
.post-body .wp-block-embed,
.post-body iframe{ max-width:700px; width:100%; }
.post-body .wp-block-embed iframe{ aspect-ratio:16/9; height:auto; }

.credits{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 40px; max-width:700px; }
.credits dt{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
.credits dd{ margin:0; font-size:14.5px; color:var(--ink-title); }

/* ---------- Pagination (Archiv/Suche) ---------- */
.pagination{ display:flex; gap:10px; flex-wrap:wrap; padding:30px 0 60px; border-top:1px solid var(--line); margin-top:10px; }
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px;
  font-size:12px; letter-spacing:.04em; color:var(--ink-muted); border:1px solid var(--line); border-radius:2px;
}
.pagination a:hover{ color:var(--ink); border-color:var(--accent-deep); }
.pagination .current{ color:#000; background:var(--accent); border-color:var(--accent); font-weight:700; }

/* ---------- Formulare (Kontakt, Suche, Standard-Pluginausgabe) ---------- */
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content input[type="url"],
.entry-content input[type="number"],
.entry-content textarea,
.entry-content select{
  width:100%; background:#0a0a0a; border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; font-size:14px; font-family:inherit; border-radius:2px; margin-bottom:4px;
}
.entry-content label{ display:block; font-size:12px; letter-spacing:.03em; color:var(--ink-muted); margin-bottom:6px; }
.entry-content input[type="submit"],
.entry-content button[type="submit"]{
  background:var(--accent); color:#000; border:0; padding:12px 26px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-size:12px; border-radius:2px; cursor:pointer;
}
.entry-content input[type="submit"]:hover,
.entry-content button[type="submit"]:hover{ background:var(--accent-bright); }

/* ---------- Footer ---------- */
footer.site-footer{ margin-top:30px; border-top:1px solid var(--line); padding:50px 0 30px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; padding-bottom:40px; flex-wrap:wrap; }
.footer-tagline{ color:var(--ink-muted); font-size:13px; max-width:320px; line-height:1.7; margin-top:16px; }
.footer-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h3{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:13px; color:var(--ink-muted); transition:color .15s ease; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:11px; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; }
.footer-motto{ color:var(--ink-faint); text-transform:none; letter-spacing:.02em; }

/* ---------- 404 / Suche ohne Ergebnis ---------- */
.state-message{ padding:80px 0; text-align:center; }
.state-message h1{ font-size:22px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-title); margin:0 0 14px; }
.state-message p{ color:var(--ink-muted); font-size:14px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .wrap{ padding:0 18px; }
  .hero-media{ aspect-ratio:3/4; }
  .footer-top{ flex-direction:column; }
  .footer-cols{ gap:34px; }
  .pn-row{ gap:12px; padding:26px 0; }
  .pn-index{ width:20px; }
  .credits{ grid-template-columns:1fr; }
  .post-media{ aspect-ratio:4/3; }
  .tile-c .tc-media, .tc-media{ width:100%; max-width:100%; aspect-ratio:16/10; }
}