/* --- Schriften, selbst ausgeliefert -------------------------------------
   Kein Aufruf an fonts.googleapis.com: Sonst ginge bei jedem Seitenaufruf die
   IP-Adresse des Besuchers an Google. Geholt mit bin/schriften-holen.
   Fraunces, Inter und Noto Naskh Arabic sind Variable Fonts — eine Datei je
   Subset. IBM Plex Mono ist keiner, dort liegt je Schnitt eine Datei.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/Fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/Fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/NotoNaskhArabic-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/NotoNaskhArabic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 100 900;   /* Variable Font: eine Datei, alle Schnitte */
  font-display: swap;
  src: url('fonts/NotoNaskhArabic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Reset — ersetzt Tailwinds Preflight
   Tailwind brachte über den CDN einen eigenen Reset mit. Fällt der ersatzlos
   weg, kippt box-sizing auf content-box (jedes Element mit Innenabstand wird
   breiter) und alle Überschriften und Absätze bekommen die Standardabstände
   des Browsers zurück. Deshalb steht er hier, bevor irgendein eigener Stil
   kommt.
   ========================================================================== */

*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body { margin: 0; line-height: inherit; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p, blockquote, figure, dl, dd, pre, hr { margin: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }

a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }

code, kbd, samp, pre { font-family: var(--f-mono, ui-monospace, monospace); font-size: 1em; }

table { border-collapse: collapse; border-color: inherit; text-indent: 0; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, [type='button'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}
:-moz-focusring { outline: auto; }
::placeholder { opacity: 1; color: #9ca3af; }
textarea { resize: vertical; }

img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }

[hidden] { display: none; }

:root {
  --pine-950: #0A2A20;
  --pine-800: #12432F;
  --pine-700: #1B5A40;
  --gold-500: #C9A227;
  --gold-300: #E4C765;
  --sand-100: #F1E9D8;
  --paper: #FBF8F2;
  --ink-900: #1C1B18;
  --ink-600: #4A463E;
  --placeholder-bg: repeating-linear-gradient(135deg, #E9E2D0, #E9E2D0 10px, #DED4BC 10px, #DED4BC 20px);
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--ink-900);
  background: var(--paper);
}

.font-display { font-family: 'Fraunces', serif; }
.font-mono { font-family: 'IBM Plex Mono', monospace; }

.bg-pine-950 { background-color: var(--pine-950); }
.bg-pine-800 { background-color: var(--pine-800); }
.bg-sand-100 { background-color: var(--sand-100); }
.bg-gold-500 { background-color: var(--gold-500); }
.text-gold-500 { color: var(--gold-500); }
.text-gold-300 { color: var(--gold-300); }
.text-ink-600 { color: var(--ink-600); }
.text-pine-950 { color: var(--pine-950); }
.border-gold-500 { border-color: var(--gold-500); }
.hover\:bg-gold-300:hover { background-color: var(--gold-300); }
.hover\:bg-pine-800:hover { background-color: var(--pine-800); }
.hover\:text-gold-500:hover { color: var(--gold-500); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.header-tools {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}
.brand-title {
  white-space: nowrap;
  /* Notbremse: lieber abschneiden als unter den Sprachumschalter laufen. */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bei 390 px teilen sich Logo, vier Sprachen und Burger eine Zeile. Seit der
   Burger dazugekommen ist, geht sich das nur mit engeren Abständen aus —
   sonst schiebt sich der Sprachumschalter über den Schriftzug. */
/* Der Umschalter im Menü ist die Handy-Fassung, in der Kopfzeile die für
   den Rechner. Immer nur einer von beiden ist sichtbar. */
.nav-lang { display: none; }

@media (max-width: 480px) {
  /* Logo, vier Sprachen und Burger gehen sich in einer Zeile nicht aus.
     Deshalb wandert der Umschalter ins Menü — die Kopfzeile behält Logo
     und Burger. */
  .header-tools .lang-switch { display: none; }
  .nav-lang { display: flex; align-self: flex-start; margin-top: 2rem; }
  .brand-title { font-size: 1.05rem; }
}
.lang-switch {
  display: flex;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.lang-switch button {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  line-height: 1;
}
.lang-switch button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.lang-switch button:hover { color: #fff; }
.lang-switch button.is-active {
  background: var(--gold-500);
  color: var(--pine-950);
}

/* --- Beispiel-Leiste ------------------------------------------------------
   Über dem Kopf jeder Seite, scrollt mit weg. Solange Firmendaten, Kontakt und
   Zertifikate Beispiele sind, darf die Seite nicht wie der echte Auftritt
   aussehen. Pine auf Gold 6,4:1. Raus erst mit den echten Daten. */
.demo-strip {
  background: var(--gold-500);
  color: var(--pine-950);
  font-size: 0.85rem;
  line-height: 1.45;
  padding-block: 0.45rem;
}
.demo-strip strong { font-weight: 700; }

/* --- Mobil-Navigation ----------------------------------------------------
   Bis md gab es gar keine Navigation: die Links waren nur ausgeblendet, ohne
   Ersatz. Burger plus Overlay unter dem Header; die Unterkante des Headers
   misst site.js in --header-h, weil sie je nach Sprache (Arabisch, andere
   Schrift), Breite und Beispiel-Leiste darüber unterschiedlich ausfällt. */
.nav-toggle {
  display: inline-grid;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.55rem;
  align-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  transition: transform 0.22s, opacity 0.16s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: var(--header-h, 3.5rem) 0 0;
  z-index: 40;
  background: var(--pine-950);
  padding: 0.5rem 1.5rem 2.5rem;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-overlay[hidden] { display: none; }
.nav-overlay nav { display: flex; flex-direction: column; }
.nav-overlay a {
  min-height: 3.25rem;
  display: flex;
  align-items: center;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-overlay a:hover { color: var(--gold-300); }

@media (min-width: 768px) {
  .nav-overlay { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span { transition: none; }
}

html[dir="rtl"] body {
  font-family: 'Noto Naskh Arabic', 'Inter', sans-serif;
}
html[dir="rtl"] .font-display {
  font-family: 'Noto Naskh Arabic', 'Fraunces', serif;
}
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .font-mono,
html[dir="rtl"] .lang-switch button {
  letter-spacing: 0.04em;
}
html[dir="rtl"] .lang-switch button + button {
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
html[dir="rtl"] .route-dest { text-align: left; }

.logo-full {
  height: 7.25rem;
  width: auto;
  object-fit: contain;
  display: block;
  transform-origin: center bottom;
  animation: logo-wobble 4.5s ease-in-out infinite;
}

@keyframes logo-wobble {
  0%, 78%, 100% { transform: rotate(0deg); }
  82% { transform: rotate(-4deg); }
  86% { transform: rotate(3.5deg); }
  90% { transform: rotate(-2.5deg); }
  94% { transform: rotate(1.5deg); }
}

/* Manifest / trade-route signature element */
.route-line {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500) 15%, var(--gold-500) 85%, transparent);
}
.route-line::before, .route-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--gold-500);
  border-radius: 50%;
  transform: translateY(-50%);
}
.route-line::before { left: 15%; }
.route-line::after { right: 15%; }

.route-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1rem;
  align-items: end;
}
.route-origin { grid-column: 1; }
.route-path { grid-column: 1 / -1; }
.route-dest {
  grid-column: 2;
  text-align: right;
  justify-self: end;
}
@media (min-width: 768px) {
  .route-map {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .route-origin { grid-column: 1; }
  .route-path { grid-column: 2; }
  .route-dest { grid-column: 3; }
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* Placeholder photo block — used wherever a real client photo is missing */
.placeholder-photo {
  background-image: var(--placeholder-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-600);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border: 1px dashed #B8AD8F;
}

/* Quiet sample-data hint — not a yellow blocker */
.sample-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.sample-note::before {
  content: "Example  ·  ";
  color: var(--gold-500);
}

.cert-card {
  background: var(--paper);
  border: 1px solid rgba(10, 42, 32, 0.08);
  border-radius: 2px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 8.5rem;
}
.cert-card strong {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  display: block;
  margin-bottom: 0.35rem;
}

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* Home hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--pine-950);
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
}
.hero-media,
.hero-veil {
  position: absolute;
  inset: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hero-veil {
  background:
    linear-gradient(180deg, rgba(10, 42, 32, 0.76) 0%, rgba(10, 42, 32, 0.48) 42%, rgba(10, 42, 32, 0.84) 100%),
    linear-gradient(90deg, rgba(10, 42, 32, 0.36) 0%, transparent 58%);
}
.hero-lead {
  color: rgba(251, 248, 242, 0.86);
}

.about-photo {
  aspect-ratio: 4 / 3;
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lot-card { display: block; color: inherit; }
.lot-card-media {
  aspect-ratio: 4 / 3;
}
.lot-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scroll reveal — quiet, no bounce. Hidden only when JS is on. */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
.reveal-d1 { transition-delay: 0.09s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.27s; }

.reveal-media { overflow: hidden; }
html.js .reveal-media img {
  transform: scale(1.045);
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .reveal-media.is-in img {
  transform: scale(1);
}

#lots, #process { scroll-margin-top: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .reveal-media img {
    transform: none;
    transition: none;
  }
  .logo-full {
    animation: none;
  }
}

/* --- Nordafrika-Ornamentik (Issue #3) ------------------------------------
   Zellige-Kachel nur auf den Section-Bändern.
   Fotos: schlichter Rahmen, Gold–Pine–Gold, ohne Muster. */
.ornament-join {
  height: 2rem;
  background-color: var(--pine-800);
  background-image: url("ornament-tile.svg");
  background-repeat: repeat;
  background-size: 2rem 2rem;
  background-position: center;
  box-shadow:
    inset 0 1px 0 var(--gold-500),
    inset 0 -1px 0 var(--gold-500);
}

.photo-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 1px solid var(--gold-500);
  box-shadow:
    inset 0 0 0 5px var(--pine-950),
    inset 0 0 0 6px var(--gold-500);
}
@media (max-width: 640px) {
  .photo-frame::after {
    box-shadow:
      inset 0 0 0 4px var(--pine-950),
      inset 0 0 0 5px var(--gold-500);
  }
}

/* ==========================================================================
   Utilities — ersetzt cdn.tailwindcss.com
   Vorher lud die Seite Tailwind bei jedem Aufruf von einem fremden Server und
   baute das CSS im Browser neu. Zwei Probleme: Die IP-Adresse jedes Besuchers
   ging an einen Dritten, und der Play-CDN ist laut Tailwind nicht für den
   Echtbetrieb gedacht — fällt er aus, steht die Seite ohne Layout da.

   Hier stehen genau die Klassen, die im Markup vorkommen (101 Stück), mit den
   Tailwind-Werten. Kommt eine neue dazu, gehört sie hier ergänzt.
   Maßstab: 1 = 0.25rem. Haltepunkte: sm 640px, md 768px.
   ========================================================================== */

/* --- Anzeige und Fluss --- */
.block         { display: block; }
.inline-block  { display: inline-block; }
.flex          { display: flex; }
.grid          { display: grid; }
.hidden        { display: none; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.relative      { position: relative; }
.sticky        { position: sticky; }
.top-0         { top: 0; }
.z-50          { z-index: 50; }

/* --- Abstände innen --- */
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-12 { gap: 3rem; }

.p-5  { padding: 1.25rem; }
.p-6  { padding: 1.5rem; }
.px-3 { padding-left: .75rem;  padding-right: .75rem; }
.px-6 { padding-left: 1.5rem;  padding-right: 1.5rem; }
.py-2  { padding-top: .5rem;   padding-bottom: .5rem; }
.py-3  { padding-top: .75rem;  padding-bottom: .75rem; }
.py-10 { padding-top: 2.5rem;  padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem;    padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem;  padding-bottom: 3.5rem; }
.py-16 { padding-top: 4rem;    padding-bottom: 4rem; }
.py-20 { padding-top: 5rem;    padding-bottom: 5rem; }
.pt-20 { padding-top: 5rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }

/* --- Abstände außen --- */
.mb-1  { margin-bottom: .25rem; }
.mb-2  { margin-bottom: .5rem; }
.mb-3  { margin-bottom: .75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mt-2  { margin-top: .5rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-20 { margin-top: 5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* space-y: Abstand zwischen Geschwistern, nicht am ersten Element */
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* --- Maße --- */
.w-full    { width: 100%; }
.h-full    { height: 100%; }
.min-w-0   { min-width: 0; }
.max-w-md  { max-width: 28rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-6xl { max-width: 72rem; }
.aspect-square   { aspect-ratio: 1 / 1; }
.aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.object-cover    { object-fit: cover; }

/* --- Schrift --- */
.text-xs  { font-size: .75rem;   line-height: 1rem; }
.text-sm  { font-size: .875rem;  line-height: 1.25rem; }
.text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl  { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl { font-size: 3rem;     line-height: 1; }
.font-medium     { font-weight: 500; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.tracking-wide   { letter-spacing: .025em; }
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* --- Farben --- */
.bg-white      { background-color: #fff; }
.text-white    { color: #fff; }
.text-white\/70 { color: rgba(255, 255, 255, .7); }
.text-white\/40 { color: rgba(255, 255, 255, .4); }
.text-ink-900  { color: var(--ink-900); }
.text-pine-800 { color: var(--pine-800); }
.hover\:text-gold-300:hover   { color: var(--gold-300); }
.hover\:border-gold-500:hover { border-color: var(--gold-500); }

/* --- Rahmen --- */
.border           { border-width: 1px; border-style: solid; }
.border-black\/5  { border-color: rgba(0, 0, 0, .05); }
.border-black\/10 { border-color: rgba(0, 0, 0, .1); }
.border-white\/30 { border-color: rgba(255, 255, 255, .3); }
.rounded    { border-radius: .25rem; }
.rounded-sm { border-radius: .125rem; }

.transition {
  transition-property: color, background-color, border-color, fill, stroke,
                       opacity, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* --- ab 640px --- */
@media (min-width: 640px) {
  .sm\:inline       { display: inline; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- ab 768px --- */
@media (min-width: 768px) {
  .md\:flex   { display: flex; }
  .md\:hidden { display: none; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:text-2xl { font-size: 1.5rem;  line-height: 2rem; }
  .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
}