/* ---- Eigene Schriftarten ----
   Saint Carell: die verzierte Schrift für Namen/Wortmarken
   (SOCIETAS AUREA, AURUM). Liegt als eigene Datei vor, daher @font-face
   statt Google-Fonts-Link. Lizenz ist "Personal Use Only" – für die
   Web-Einbettung (also genau das hier: @font-face auf einer Seite, die
   andere Leute sehen) lohnt sich ein Blick auf mansgreback.com/license,
   ob dafür ein separater Web-Lizenz-Zusatz nötig ist.
   font-display:swap zeigt kurz eine Fallback-Schrift, bis Saint Carell
   geladen ist, statt unsichtbaren Text. */
@font-face{
  font-family:'Saint Carell';
  src:url('fonts/SaintCarell_PERSONAL_USE_ONLY.woff2') format('woff2');
  font-display:swap;
}
/* Zweite, schlichtere Variante derselben Familie – aktuell ungenutzt,
   aber verfügbar für Stellen, wo die volle Verzierung zu viel wäre. */
@font-face{
  font-family:'Saint Carell Clean';
  src:url('fonts/SaintCarellClean_PERSONAL_USE_ONLY.woff2') format('woff2');
  font-display:swap;
}

/* ---- Design-Tokens ----
   Zentrale Farbwerte als CSS-Variablen. Einmal hier ändern, wirkt sich
   überall aus, wo var(--name) verwendet wird. Werte sind aus dem
   Screenshot geschätzt – bei Bedarf einfach die Hex-Codes ersetzen. */
:root{
  --ink:#1f1c19;         /* dunkler Rahmen/Hintergrund außen */
  --orange:#f2860c;      /* Hauptakzent: Header, Labels, Platzhalter */
  --cream:#fbe6c8;       /* wärmerer Creme-Ton (aktuell ungenutzt, als Reserve) */
  --cream-light:#fdf2e2; /* Content-Hintergrund + Text auf Orange */
  --motto-blue:#57629c;  /* Farbe für die Motto-Zeile */
}

/* box-sizing:border-box sorgt dafür, dass padding/border in die
   angegebene Breite/Höhe eingerechnet werden, statt sie zu vergrößern –
   macht Layout-Berechnungen vorhersehbarer. */
*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--ink);   /* dunkler Rahmen rund um die "Karte" */
  /* Futura ist eine kommerzielle Schrift ohne freie Web-Lizenz – die
     Regel greift nur bei Besuchern, die Futura lokal installiert haben
     (v.a. macOS). 'Jost' ist ein frei nutzbarer, sehr ähnlicher
     geometrischer Ersatz (über Google Fonts geladen) als Fallback für
     alle anderen. Falls du eine lizenzierte Futura-Webfont-Datei hast,
     kann die genauso per @font-face eingebunden werden wie Saint Carell. */
  font-family:'Futura', 'Jost', sans-serif;
  display:flex;
  justify-content:center;  /* zentriert die site-frame-Box horizontal */
  padding:28px 16px;       /* Abstand zwischen Fensterrand und Karte */
}

/* Die eigentliche "Seite" als begrenzte, zentrierte Box statt volle
   Bildschirmbreite – entspricht dem gerahmten Look im Screenshot. */
.site-frame{
  width:100%;
  max-width:1040px;
  background:var(--cream-light);
  border:1px solid var(--ink);
}

/* Oranges Kopfband */
.header{
  background:var(--orange);
  padding:48px 24px 34px;
  text-align:center;
}

/* Kleine Zeile "+ AURUM +" über dem Wortmark */
.eyebrow{
  color:var(--cream-light);
  font-family:'Saint Carell', serif;
  font-size:18px;
  letter-spacing:6px;   /* große Laufweite = klassischer Wappen/Siegel-Look */
  margin:0 0 14px;
}

/*
  Das Wortmark "SOCIETAS AUREA" ist der komplexeste Teil.
  Prinzip: Der eigentliche Text bleibt normaler, auswählbarer HTML-Text
  (wichtig für Screenreader/SEO). Der Glitch-Effekt wird NICHT durch
  eine Grafik erzeugt, sondern durch zwei unsichtbare Text-Kopien
  (::before und ::after), die per attr(data-text) denselben Text noch
  einmal einblenden – einmal rot, einmal cyan – und kurz zeitversetzt
  aufblitzen. Das ergibt den klassischen "Farbkanal-Versatz"-Glitch-Look.
*/
.wordmark{
  position:relative;        /* nötig, damit ::before/::after sich daran ausrichten */
  display:inline-block;
  color:var(--cream-light);
  font-family:'Saint Carell', serif;
  font-weight:400; /* Saint Carell bringt ihre eigene Verzierung mit, ein zusätzliches Bold wirkt schnell zu schwer */
  font-size:clamp(32px, 6vw, 56px); /* clamp = responsive Schriftgröße: nie kleiner als 32px, nie größer als 56px, dazwischen skaliert mit der Fensterbreite (6vw) */
  letter-spacing:2px;
  margin:0;
  /* Dezenter, permanenter Farbsaum (rot/cyan leicht versetzt) als
     Ruhezustand des Glitch-Effekts – die stärkeren Aussetzer kommen
     von den Animationen weiter unten. */
  text-shadow:
    1px 0 0 rgba(255,90,90,.25),
    -1px 0 0 rgba(90,220,255,.22);
}

/* Die großen Anfangsbuchstaben S und A: dieselbe Schriftart (Saint
   Carell bringt die Verzierung schon mit), nur größer skaliert und
   leicht nach unten verschoben, damit sie optisch mit der Grundlinie
   des restlichen Textes fluchten. Werte ggf. nachjustieren, je nachdem
   wie die tatsächlichen Versalien der Schrift ausfallen. */
.wordmark .drop{
  font-size:1.5em;
  line-height:0;           /* verhindert, dass der größere Buchstabe die Zeilenhöhe aufbläht */
  vertical-align:-0.14em;  /* Fein-Justierung der Grundlinie */
}

/* attr(data-text) liest den Wert des data-text="..."-Attributs vom
   <h1> aus und zeigt ihn als Inhalt der Pseudo-Elemente an – so muss
   der Text nicht doppelt im HTML stehen. position:absolute legt beide
   Kopien exakt über den Originaltext. pointer-events:none verhindert,
   dass sie Klicks/Markieren blockieren. */
.wordmark::before,
.wordmark::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0; width:100%;
  overflow:hidden;
  pointer-events:none;
}

.wordmark::before{
  color:#ff5a5a; /* roter Kanal */
  animation:glitch-a 6s infinite steps(1);
}
.wordmark::after{
  color:#5adfff; /* cyan Kanal */
  animation:glitch-b 6.4s infinite steps(1); /* absichtlich andere Dauer als glitch-a, damit beide Schichten nie exakt synchron laufen */
}

/*
  Beide Keyframes-Sets funktionieren nach demselben Prinzip:
  - Fast die gesamte Animationsdauer (0–90/92%) ist die Kopie unsichtbar
    (opacity:0) und komplett weggeschnitten (clip-path: inset(0 0 100% 0)
    blendet 100% von unten aus = nichts sichtbar).
  - Für einen kurzen Moment (wenige Prozent der Laufzeit) wird sie
    sichtbar, leicht verschoben (transform:translate) und nur ein
    horizontaler Streifen wird per clip-path freigegeben – das erzeugt
    den Eindruck eines kurzen "Bild-Aussetzers".
  steps(1) auf der Animation sorgt dafür, dass zwischen den Keyframe-
  Werten hart umgeschaltet wird statt weich zu überblenden – das wirkt
  digitaler/glitchiger als eine sanfte Animation.
*/
@keyframes glitch-a{
  0%, 92%, 100%{ opacity:0; clip-path:inset(0 0 100% 0); }
  93%{ opacity:1; transform:translate(-3px,1px); clip-path:inset(15% 0 55% 0); }
  94.5%{ opacity:1; transform:translate(2px,-1px); clip-path:inset(55% 0 20% 0); }
  96%{ opacity:0; }
}
@keyframes glitch-b{
  0%, 90%, 100%{ opacity:0; clip-path:inset(0 0 100% 0); }
  91%{ opacity:1; transform:translate(3px,-1px); clip-path:inset(40% 0 30% 0); }
  92.5%{ opacity:1; transform:translate(-2px,1px); clip-path:inset(10% 0 65% 0); }
  94%{ opacity:0; }
}

/* Motto-Zeile unter dem Wortmark */
.motto{
  color:var(--motto-blue);
  font-size:14px;
  letter-spacing:2px;
  margin:18px 0 0;
}

/* Heller Bereich unterhalb des Headers, in dem später die
   Vitrinen/Inhalte stehen */
.content{
  padding:32px 28px 60px;
}

.section-label{
  color:var(--orange);
  font-size:15px;
  letter-spacing:2px;
  margin:0 0 16px;
}

/* Platzhalter-Kachel für eine spätere Projekt-/Fundstück-Karte.
   aspect-ratio hält das Seitenverhältnis unabhängig von der Breite,
   max-width:100% verhindert Überlaufen auf schmalen Bildschirmen. */
.placeholder-card{
  width:260px;
  max-width:100%;
  aspect-ratio:1 / 1.15;
  background:var(--orange);
}

/* Barrierefreiheit: Menschen, die in ihrem Betriebssystem "reduzierte
   Bewegung" aktiviert haben (z.B. wegen Reizempfindlichkeit), bekommen
   den Glitch-Effekt komplett abgeschaltet statt nur langsamer. */
@media (prefers-reduced-motion: reduce){
  .wordmark::before,
  .wordmark::after{ animation:none; opacity:0; }
}