@charset "UTF-8";
/* ============================================================
   Hintergrundbilder — Nussbaumer Automobile
   Gestaltung: dunkles Anthrazit, Champagner-Gold, Serifen-Display
   ============================================================ */

/* ---- Selbst gehostete Schriften (DSGVO) --------------------
   Dateien nach assets/fonts/ legen. Fehlen sie, greift der
   Fallback im Font-Stack — die Seite bleibt in jedem Fall nutzbar. */
@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ============================================================
   Design-Tokens
   ============================================================ */
:root{
  --bg:        #101113;
  --bg-raised: #16181b;
  --bg-lift:   #1c1f23;
  --ink:       #ece7df;
  --ink-dim:   #9a968e;
  --gold:      #c5a572;
  --gold-dim:  #8e794f;
  --line:      rgba(197,165,114,.22);
  --line-soft: rgba(255,255,255,.07);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1180px;
  --gut:  clamp(20px, 5vw, 64px);

  /* ---- Größe des Logos in der Kopfzeile ----
     Das ist der einzige Wert, der dafür angefasst werden muss.
     Die Kopfzeile wächst automatisch mit; auf dem Handy bleibt
     sie flach und das Logo passt sich ein.
     Sinnvoll sind 22px bis etwa 60px. */
  --logo-hoehe: 60px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }

.eyebrow{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:500;
}

.nurlesbar{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- Kopfzeile ---------- */
header.top{
  position:sticky; top:0; z-index:20;
  background:rgba(16,17,19,.82);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.top .wrap{
  display:flex; align-items:center; justify-content:space-between;
  /* mindestens 64px, bei großem Logo entsprechend mehr */
  height:max(64px, calc(var(--logo-hoehe) + 30px));
  gap:16px;
}
.wordmark{
  font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:500; color:var(--ink);
}
.wordmark b{ color:var(--gold); font-weight:500; }
.wordmark{ display:flex; align-items:center; min-width:0; }
.wordmark img{ display:block; height:var(--logo-hoehe); width:auto; object-fit:contain; }
.back{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .25s; white-space:nowrap;
}
.back:hover,.back:focus-visible{ color:var(--ink); }

/* ---------- Masthead ---------- */
/* Achtung: .masthead trägt zusätzlich .wrap — der seitliche
   Rand muss hier mitgeführt werden, sonst steht die Überschrift
   weiter außen als die Kopfzeile. */
.masthead{ padding:clamp(56px,10vw,120px) var(--gut) clamp(40px,6vw,64px); }
.masthead .eyebrow{ margin-bottom:26px; }
.masthead h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(44px,9vw,108px); line-height:.98;
  letter-spacing:-.01em; margin:0 0 28px;
}
.masthead p{
  max-width:46ch; color:var(--ink-dim);
  font-size:clamp(15px,2vw,17px); margin:0;
}
.rule{ height:1px; background:var(--line); margin:clamp(40px,6vw,64px) 0 0; }

/* ---------- Filterleiste ---------- */
.filterbar{
  display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap;
  padding:22px 0 0;
}
.filterbar .eyebrow{ margin-right:2px; }
.segment{ display:inline-flex; border:1px solid var(--line-soft); }
.segment button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans); color:var(--ink-dim);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 13px; transition:color .2s, background .2s;
}
.segment button+button{ border-left:1px solid var(--line-soft); }
.segment button[aria-pressed="true"]{ color:var(--bg); background:var(--gold); }
.segment button:hover:not([aria-pressed="true"]){ color:var(--ink); }

/* ---------- Ausgaben ---------- */
.edition{ padding:clamp(48px,7vw,84px) 0 0; scroll-margin-top:80px; }
.edition-head{
  display:flex; align-items:baseline; gap:10px 18px;
  flex-wrap:wrap; margin-bottom:34px;
}
.edition-no{
  font-family:var(--serif); font-size:clamp(26px,3.4vw,38px);
  font-weight:600; color:var(--gold); line-height:1;
}
.edition-meta{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.edition-current .edition-meta b{ color:var(--ink); font-weight:500; }
.edition-title{ font-family:var(--serif); font-size:clamp(22px,3vw,30px); font-weight:500; }
.edition-actions{ margin-left:auto; display:flex; gap:18px; align-items:baseline; }
.zip-link{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); border-bottom:1px solid var(--line-soft);
  padding-bottom:2px; transition:color .2s, border-color .2s;
}
.zip-link:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------- Tafel-Raster ----------
   Gitter mit fester Spaltenzahl. Ohne JavaScript ein gewöhnliches
   Raster (Tafeln oben bündig), mit JavaScript rücken die Tafeln
   lückenlos nach oben — siehe app.js, "Mauerwerk".

   Bewusst kein CSS-Spaltensatz (column-width): dessen Ausgleich
   zwischen den Spalten fällt je nach Browser unterschiedlich aus
   und kann einzelne Spalten nach unten versetzen. */
.plates{
  --tafel-abstand:clamp(18px,2.4vw,30px);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:var(--tafel-abstand);
  align-items:start;
}
.archive .plates{ grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); }

/* Mauerwerk: feine Zeilenraster, die Höhe setzt app.js je Tafel. */
.plates[data-mauerwerk]{ row-gap:0; grid-auto-rows:4px; }
.plates[data-mauerwerk] .plate{ margin-bottom:var(--tafel-abstand); }

.plate{
  background:var(--bg-raised);
  border:1px solid var(--line-soft);
  overflow:hidden;
  display:block;
  transition:border-color .3s, transform .3s;
}
.plate[hidden]{ display:none; }
@media (hover:hover){
  .plate:hover{ border-color:var(--line); transform:translateY(-3px); }
}

.plate-figure{
  position:relative;
  aspect-ratio:var(--verhaeltnis, 16/10);
  background:linear-gradient(135deg,#1b1d21,#101113 70%);
  overflow:hidden;
  display:block; width:100%;
  border:0; padding:0; cursor:zoom-in;
}
.plate-figure img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
@media (hover:hover){ .plate:hover .plate-figure img{ transform:scale(1.03); } }

.plate-figure .fehlt{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:18px;
}
.plate-figure .fehlt span{ font-family:var(--serif); font-size:19px; color:var(--ink); }
.plate-figure .fehlt small{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dim); }

.plate-marken{
  position:absolute; top:10px; left:10px; right:10px;
  display:flex; gap:6px; align-items:center; pointer-events:none;
}
.marke{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); background:rgba(16,17,19,.62);
  padding:4px 8px; border:1px solid var(--line-soft);
  backdrop-filter:blur(4px);
}
.marke.gold{ color:var(--gold); border-color:var(--line); }
.plate-marken .rechts{ margin-left:auto; }

.plate-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:14px; }
.plate-title{ font-family:var(--serif); font-size:21px; font-weight:500; line-height:1.15; }

/* ---- Gleiche Tafelhöhe ----
   Der Textblock bekommt eine Mindesthöhe, die für den größten Fall
   reicht: zweizeiliger Titel + Untertitel + Maße + Fahrzeug-Link.
   Fehlt etwas davon, sammelt sich der Rest als Luft direkt über der
   Fußzeile — dort fällt sie nicht auf, während Titel und Untertitel
   beieinander bleiben.
   Braucht ihr regelmäßig dreizeilige Namen, den Wert um eine
   Titelzeile erhöhen (Desktop +25px, Handy +20px). */
.plate-text{ min-height:124px; }
/* min-height hält die Zeile offen, auch wenn kein Untertitel
   gepflegt ist — damit bleiben alle Tafeln gleich hoch. */
.plate-sub{ font-size:12px; letter-spacing:.04em; color:var(--ink-dim); margin-top:2px; min-height:1.6em; }
/* Immer genau eine Zeile: sonst hinge die Tafelhöhe davon ab,
   wie lang die Zahlen gerade sind. */
.plate-masse{
  font-size:11px; letter-spacing:.08em; color:var(--gold-dim); margin-top:6px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Fahrzeug-Link — nur da, wenn im Verwaltungsbereich gepflegt */
.fahrzeug{
  display:inline-block; margin-top:10px; white-space:nowrap;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); border-bottom:1px solid var(--line);
  padding-bottom:2px; transition:color .2s, border-color .2s;
}
.fahrzeug::after{ content:" \2197"; letter-spacing:0; }
.fahrzeug:hover,.fahrzeug:focus-visible{ color:var(--ink); border-color:var(--ink); }
.fahrzeug[hidden]{ display:none; }
/* Ohne gepflegten Link bleibt der Platz derselbe, nur unsichtbar —
   dieselbe Beschriftung, also exakt dieselbe Höhe. */
.fahrzeug.leerlauf{ visibility:hidden; pointer-events:none; }
.lupe-aktionen .fahrzeug{ margin-top:0; }

.plate-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

.formats{ display:inline-flex; border:1px solid var(--line-soft); }
.formats button{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans); color:var(--ink-dim);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  /* Knöpfe erben die Zeilenhöhe nicht von selbst. Ohne diese
     Angabe wäre der Umschalter 4px flacher als das Etikett
     daneben — und Tafeln mit zwei Formaten kürzer als andere. */
  line-height:1.6;
  padding:7px 10px; transition:color .2s, background .2s;
}
.formats button+button{ border-left:1px solid var(--line-soft); }
.formats button[aria-pressed="true"]{ color:var(--bg); background:var(--gold); }
.formats button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.einzelformat{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
  border:1px solid var(--line-soft); padding:7px 10px;
}

.download{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--gold);
  padding-bottom:2px; transition:color .2s, border-color .2s;
  white-space:nowrap;
}
.download:hover,.download:focus-visible{ color:var(--gold); }

/* ---------- Archiv ---------- */
.archive{ padding-top:clamp(56px,8vw,96px); }
.archive-rule{ height:1px; background:var(--line-soft); margin-bottom:clamp(40px,6vw,64px); }

/* ---------- Leerer Zustand ---------- */
.leer{
  border:1px dashed var(--line); padding:clamp(28px,5vw,52px);
  text-align:center; color:var(--ink-dim); margin-top:40px;
}
.leer strong{ display:block; font-family:var(--serif); font-size:24px; color:var(--ink); font-weight:500; margin-bottom:10px; }
.leer code{ color:var(--gold); font-size:13px; }

/* ---------- Hinweis ---------- */
.note{
  margin-top:clamp(64px,9vw,110px);
  border-top:1px solid var(--line); padding-top:40px;
  max-width:52ch;
}
.note p{ color:var(--ink-dim); margin:0 0 6px; }
.note a.tel{ color:var(--ink); border-bottom:1px solid var(--line); }
.note a.tel:hover{ color:var(--gold); }

/* ---------- Fußzeile ---------- */
footer.site{
  margin-top:clamp(72px,10vw,120px);
  border-top:1px solid var(--line-soft);
  padding:clamp(44px,6vw,68px) 0 40px;
  color:var(--ink-dim); font-size:13px;
}
.foot-grid{
  display:grid; gap:36px 48px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.foot-grid h3{
  font-family:var(--sans); font-weight:500; color:var(--ink);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  margin:0 0 14px;
}
.foot-grid a:hover{ color:var(--ink); }
.foot-grid .gold{ color:var(--gold); }
.foot-bottom{
  margin-top:clamp(40px,6vw,60px); padding-top:22px;
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;
  font-size:12px;
}
.foot-bottom .sep{ color:var(--line); }

/* ============================================================
   Großansicht (Lightbox)
   ============================================================ */
.lupe{
  position:fixed; inset:0; z-index:60;
  background:rgba(9,10,11,.975);
  backdrop-filter:blur(14px);
  display:flex; flex-direction:column;
  padding:clamp(14px,3vw,34px);
  opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s;
}
.lupe[data-offen="1"]{ opacity:1; visibility:visible; }

.lupe-kopf{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; margin-bottom:14px; flex-shrink:0;
}
.lupe-titel{ font-family:var(--serif); font-size:clamp(20px,3vw,30px); font-weight:500; line-height:1.15; }
.lupe-sub{ font-size:12px; color:var(--ink-dim); letter-spacing:.04em; }
.lupe-zu{
  appearance:none; background:none; border:1px solid var(--line-soft); color:var(--ink-dim);
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:9px 14px; cursor:pointer; transition:color .2s, border-color .2s; flex-shrink:0;
}
.lupe-zu:hover{ color:var(--gold); border-color:var(--line); }

.lupe-buehne{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.lupe-buehne img{
  max-width:100%; max-height:100%; object-fit:contain;
  border:1px solid var(--line-soft); background:var(--bg-raised);
}
.lupe-blaettern{
  appearance:none; position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(16,17,19,.7); border:1px solid var(--line-soft); color:var(--ink);
  width:44px; height:60px; cursor:pointer; font-size:18px; line-height:1;
  transition:color .2s, border-color .2s;
}
.lupe-blaettern:hover{ color:var(--gold); border-color:var(--line); }
.lupe-blaettern.vor{ right:0; }
.lupe-blaettern.zurueck{ left:0; }

.lupe-fuss{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px 24px; flex-wrap:wrap; margin-top:16px; flex-shrink:0;
}
.lupe-hinweis{ font-size:12px; color:var(--ink-dim); max-width:44ch; }
.lupe-hinweis b{ color:var(--gold); font-weight:500; }
.lupe-aktionen{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.knopf-gold{
  display:inline-block; background:var(--gold); color:var(--bg);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  padding:11px 20px; border:1px solid var(--gold); transition:background .2s, color .2s;
}
.knopf-gold:hover{ background:transparent; color:var(--gold); }

body.lupe-offen{ overflow:hidden; }

/* ---------- Einblendung ---------- */
[data-fade]{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
[data-fade].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  [data-fade]{ opacity:1; transform:none; }
}

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

@media (max-width:640px){
  .plates{ grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); }
  .archive .plates{ grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); }
  .plate-body{ padding:13px 13px 15px; gap:11px; }
  .plate-title{ font-size:17px; }
  .plate-text{ min-height:115px; }   /* kleinere Schrift, siehe oben */
  /* In der schmalen Kachel müssen Maße und Link in eine Zeile passen */
  .plate-masse{ font-size:10px; letter-spacing:.03em; }
  .fahrzeug{ font-size:10px; letter-spacing:.1em; }
  .plate-foot{ gap:8px; }
  .edition-actions{ margin-left:0; width:100%; }

  /* In der schmalen Kachel ist für zwei Marken kein Platz.
     Das Format steht ohnehin im Fuß der Tafel. */
  .plate-marken .rechts{ display:none; }
  .marke{ font-size:9px; letter-spacing:.14em; padding:3px 6px; }

  /* Filterleiste über die volle Breite statt über den Rand hinaus */
  .filterbar{ display:block; }
  .filterbar .eyebrow{ display:block; margin:0 0 10px; }
  .segment{ display:flex; width:100%; }
  .segment button{ flex:1 1 0; padding:9px 4px; font-size:9px; letter-spacing:.08em; }

  /* Kopfzeile: beides muss nebeneinander passen.
     Auf dem Handy bleibt die Leiste flach; das Logo skaliert
     proportional in den verfügbaren Platz statt ihn zu sprengen. */
  .wordmark{ font-size:11px; letter-spacing:.16em; }
  .back{ font-size:10px; letter-spacing:.08em; flex-shrink:0; }
  .top .wrap{ gap:10px; height:64px; }
  .wordmark img{
    height:auto;
    max-height:min(var(--logo-hoehe), 38px);
    max-width:100%;
  }
}