/* =========================================================================
   alihasani.vip — Design-System "Emerald & Brass"
   Smaragdgrün (Marke) · Elfenbein (Lesegrund) · Messing-Gold (Akzent) · RTL
   ========================================================================= */

/* ---------- Fonts (Vazirmatn, lokal, SIL OFL) ---------- */
@font-face { font-family:"Vazirmatn"; src:url("/assets/fonts/vazirmatn-arabic-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("/assets/fonts/vazirmatn-arabic-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("/assets/fonts/vazirmatn-arabic-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("/assets/fonts/vazirmatn-arabic-800.woff2") format("woff2"); font-weight:800; font-display:swap; }
@font-face { font-family:"Vazirmatn"; src:url("/assets/fonts/vazirmatn-arabic-900.woff2") format("woff2"); font-weight:900; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --forest:#0E3B2E;
  --forest-2:#0A2C22;
  --moss:#1E6B4F;
  --gold:#C9A24B;
  --gold-soft:#E4C77E;
  --ivory:#F5F1E6;
  --paper:#FBF9F2;
  --sage:#EAE7D8;
  --ink:#15201A;
  --muted:#5B6A5F;
  --line:rgba(20,40,30,.14);
  --line-gold:rgba(201,162,75,.38);
  --shadow:0 18px 50px -24px rgba(10,44,34,.45);
  --radius:16px;
  --maxw:1160px;
  --font: "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.95;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,4vw,40px); }
.section{ padding-block:clamp(56px,8vw,104px); }
.section--tint{ background:var(--ivory); }
.section--sage{ background:var(--sage); }
.section--dark{ background:var(--forest); color:var(--ivory); }

/* Eyebrow / Kapitel-Label */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  color:var(--moss); margin-bottom:1.1rem;
}
.eyebrow::before{ content:""; inline-size:26px; block-size:2px; background:var(--gold); display:inline-block; }
.section--dark .eyebrow{ color:var(--gold-soft); }

/* Überschriften */
.h-display{ font-weight:900; line-height:1.3; letter-spacing:-.01em; font-size:clamp(2rem,5.2vw,3.6rem); }
.h1{ font-weight:800; line-height:1.35; font-size:clamp(1.7rem,3.6vw,2.6rem); }
.h2{ font-weight:800; line-height:1.4; font-size:clamp(1.35rem,2.6vw,1.9rem); }
.h3{ font-weight:700; line-height:1.5; font-size:clamp(1.1rem,2vw,1.35rem); color:var(--forest); }
.section--dark .h3{ color:var(--gold-soft); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--muted); }
.section--dark .lead{ color:rgba(245,241,230,.78); }
.prose p{ margin-block:1.05em; color:#28352C; }
.section--dark .prose p{ color:rgba(245,241,230,.82); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:999px; font-weight:700; font-size:1rem;
  border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-gold{ background:var(--gold); color:var(--forest-2); box-shadow:0 10px 24px -12px rgba(201,162,75,.9); }
.btn-gold:hover{ background:var(--gold-soft); }
.btn-forest{ background:var(--forest); color:var(--ivory); }
.btn-forest:hover{ background:var(--moss); }
.btn-ghost{ border-color:var(--forest); color:var(--forest); }
.btn-ghost:hover{ background:rgba(14,59,46,.08); }
/* Auf dunklem Grund klar sichtbar: heller Rand + leichte Füllung */
.hero .btn-ghost,.section--dark .btn-ghost,.cta-band .btn-ghost{
  border-color:rgba(228,199,126,.7); color:#fff; background:rgba(255,255,255,.05);
}
.hero .btn-ghost:hover,.section--dark .btn-ghost:hover,.cta-band .btn-ghost:hover{ background:rgba(228,199,126,.16); border-color:var(--gold-soft); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,249,242,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; block-size:70px; }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ inline-size:40px; block-size:40px; }
.brand b{ font-weight:800; font-size:1.05rem; color:var(--forest); }
.brand span{ display:block; font-size:.72rem; font-weight:500; color:var(--muted); line-height:1; margin-top:2px; }
.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{ padding:.5rem .85rem; border-radius:999px; font-weight:500; font-size:.95rem; color:#33413a; transition:background .15s, color .15s; }
.nav a:hover{ background:var(--sage); color:var(--forest); }
.nav .nav-cta{ background:var(--forest); color:var(--ivory); }
.nav .nav-cta:hover{ background:var(--moss); color:#fff; }
.nav-toggle{ display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.nav-toggle svg{ inline-size:26px; block-size:26px; stroke:var(--forest); }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--forest); color:var(--ivory); overflow:hidden; }
.hero::after{ /* Messing-Bogen als Signatur-Atmosphäre */
  content:""; position:absolute; inset-block-start:-30%; inset-inline-start:-14%;
  inline-size:60%; block-size:160%; border-radius:50%;
  background:radial-gradient(circle at center, rgba(201,162,75,.16), transparent 62%);
  pointer-events:none;
}
.hero .container{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,64px); align-items:center; padding-block:clamp(56px,9vw,108px); }
.hero-eyebrow{ color:var(--gold-soft); font-weight:700; letter-spacing:.04em; font-size:.9rem; margin-bottom:1.2rem; display:flex; align-items:center; gap:.6rem; }
.hero-eyebrow::before{ content:""; inline-size:34px; block-size:2px; background:var(--gold); }
.hero h1{ font-weight:900; font-size:clamp(2.1rem,5.4vw,3.7rem); line-height:1.28; letter-spacing:-.01em; }
.hero h1 em{ font-style:normal; color:var(--gold-soft); }
.hero-copy > p{ margin-top:1.3rem; max-width:46ch; color:rgba(245,241,230,.82); font-size:clamp(1.02rem,1.5vw,1.16rem); }
.hero-actions{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.9rem; }
.hero-figure{ position:relative; justify-self:center; inline-size:min(380px,82vw); }
.hero-figure .frame{
  position:relative; z-index:1; border-radius:22px; overflow:hidden;
  border:1px solid rgba(201,162,75,.5); box-shadow:var(--shadow);
  aspect-ratio:4/5;
}
.hero-figure .frame img{ inline-size:100%; block-size:100%; object-fit:cover; object-position:center 22%; }
.hero-figure .frame .grade{ /* Emerald-Grading, vereint das Bild mit der Palette */
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,44,34,.62) 2%, rgba(10,44,34,.06) 34%, transparent 60%),
             linear-gradient(120deg, rgba(14,59,46,.28), transparent 55%);
}
.hero-figure::before{ /* versetzter Gold-Rahmen dahinter */
  content:""; position:absolute; z-index:0; inset-block:20px -16px; inset-inline:-16px 20px;
  border:1.5px solid rgba(201,162,75,.55); border-radius:22px;
}
.hero-figure .badge{
  position:absolute; z-index:2; inset-block-end:-16px; inset-inline-start:-16px;
  display:flex; align-items:center; gap:.6rem;
  background:var(--gold); color:var(--forest-2); border-radius:14px;
  padding:.6rem .9rem; box-shadow:var(--shadow);
}
.hero-figure .badge b{ font-size:1.7rem; font-weight:900; line-height:1; }
.hero-figure .badge span{ font-weight:800; font-size:.9rem; line-height:1.2; }
.hero-figure .badge small{ display:block; font-weight:500; font-size:.72rem; opacity:.85; }
.hero-strip{ position:relative; z-index:1; border-top:1px solid rgba(201,162,75,.22); }
.hero-strip .container{ display:flex; flex-wrap:wrap; gap:clamp(20px,5vw,64px); padding-block:1.4rem; }
.stat b{ font-size:1.5rem; font-weight:900; color:var(--gold-soft); }
.stat span{ color:rgba(245,241,230,.7); font-size:.92rem; }

/* ---------- About ---------- */
.about .container{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,5vw,56px); align-items:start; }
.about .prose p:first-child{ font-size:1.15rem; color:var(--forest); font-weight:500; }

/* ---------- Journey / Signature-Timeline (RTL) ---------- */
.journey{ position:relative; }
.journey .spine{ position:relative; margin-top:2.5rem; padding-inline-start:0; }
.chapter{ position:relative; display:flow-root; padding-inline-end:clamp(42px,6vw,72px); padding-bottom:clamp(34px,5vw,56px); }
.chapter::before{ /* Linie */
  content:""; position:absolute; inset-block:6px 0; inset-inline-end:18px;
  inline-size:2px; background:linear-gradient(var(--line-gold), rgba(201,162,75,.08));
}
.chapter:last-child::before{ inset-block-end:auto; block-size:0; }
.chapter .node{
  position:absolute; inset-inline-end:8px; inset-block-start:2px;
  inline-size:22px; block-size:22px; border-radius:50%;
  background:var(--paper); border:2px solid var(--gold);
  display:grid; place-items:center; font-size:.72rem; font-weight:800; color:var(--forest);
  z-index:1;
}
.section--tint .chapter .node{ background:var(--ivory); }
.chapter .node::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--gold); opacity:0; transition:opacity .3s; }
.chapter.is-visible .node::after{ opacity:1; }
.chapter .ch-num{ font-weight:800; color:var(--moss); font-size:.82rem; letter-spacing:.04em; }
.chapter figure{
  margin:.4rem 0 1rem; float:inline-start;
  inline-size:min(300px,40%); margin-inline-end:1.8rem;
  shape-outside:inset(0 round 16px);
}
.chapter figure img{
  inline-size:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 18%;
  border-radius:var(--radius); border:1px solid var(--line-gold); box-shadow:var(--shadow);
}
@media (max-width:640px){
  .chapter figure{ float:none; inline-size:100%; margin-inline-end:0; }
}
.chapter .sub{ margin-top:1.6rem; }
.chapter .sub .h3{ margin-bottom:.3rem; }

/* Reveal-Animation */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Galerie ---------- */
.gallery-grid{ margin-top:2rem; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.gallery-grid a{ display:block; border-radius:14px; overflow:hidden; border:1px solid rgba(201,162,75,.28); background:var(--forest-2); }
.gallery-grid img{ inline-size:100%; block-size:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s ease, opacity .3s; opacity:.94; }
.gallery-grid a:hover img{ transform:scale(1.05); opacity:1; }

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:100; background:rgba(10,28,22,.92); display:none; align-items:center; justify-content:center; padding:24px; }
.lightbox.open{ display:flex; }
.lightbox img{ max-inline-size:92vw; max-block-size:88vh; border-radius:12px; box-shadow:var(--shadow); }
.lightbox button{ position:absolute; inset-block-start:20px; inset-inline-start:20px; background:var(--gold); color:var(--forest-2); border:0; inline-size:44px; block-size:44px; border-radius:50%; font-size:1.4rem; cursor:pointer; }

/* ---------- Kontakt ---------- */
.contact .container{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,52px); align-items:start; }
.card{ background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(20px,3vw,32px); box-shadow:var(--shadow); }
.card .field label{ color:var(--ink); }
.section--dark .card{ background:var(--forest-2); border-color:rgba(201,162,75,.24); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.45rem; }
.field input,.field textarea{
  inline-size:100%; padding:.85rem 1rem; border-radius:12px; border:1.5px solid var(--line);
  background:#fff; color:var(--ink); font-family:inherit; font-size:1rem; transition:border-color .15s, box-shadow .15s;
}
.field textarea{ min-block-size:130px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--moss); box-shadow:none; }
.contact-info dt{ font-weight:700; color:var(--gold-soft); margin-top:1.2rem; font-size:.9rem; }
.contact-info dd{ margin:.2rem 0 0; }

/* Social-Reihe */
.social{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
.social a{
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:999px;
  border:1px solid var(--line-gold); font-size:.9rem; font-weight:600; transition:background .15s, transform .15s;
}
.social a:hover{ background:rgba(201,162,75,.14); transform:translateY(-1px); }
.section--dark .social a{ color:var(--ivory); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--forest-2); color:rgba(245,241,230,.75); }
.site-footer .container{ padding-block:2.4rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; }
.site-footer .brand b{ color:var(--ivory); }
.site-footer .brand span{ color:rgba(245,241,230,.55); }
.site-footer .copy{ font-size:.86rem; }
.site-footer a:not(.btn):not(.to-top):hover{ color:var(--gold-soft); }

/* ---------- Blog ---------- */
.post-list{ margin-top:2rem; display:grid; gap:1.1rem; }
.post-card{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.3rem 1.5rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); transition:border-color .18s, transform .18s; }
.post-card:hover{ border-color:var(--line-gold); transform:translateY(-2px); }
.post-card .meta{ color:var(--muted); font-size:.85rem; }
.post-card .arrow{ color:var(--gold); font-weight:800; }
.article{ max-width:760px; }
.article .prose{ margin-top:1.6rem; }

/* ---------- Responsiv ---------- */
@media (max-width:900px){
  .hero .container,.about .container,.contact .container{ grid-template-columns:minmax(0,1fr); }
  .hero-figure{ order:-1; }
  .gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nav{ display:none; position:absolute; inset-block-start:70px; inset-inline:0; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--line); padding:1rem; gap:.3rem; }
  .nav.open{ display:flex; }
  .nav a{ inline-size:100%; }
  .nav-toggle{ display:block; }
}
@media (max-width:520px){
  .gallery-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
  .site-footer .container{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Focus / A11y ---------- */
:focus-visible{ outline:3px solid var(--forest); outline-offset:2px; border-radius:4px; box-shadow:0 0 0 5px var(--gold-soft); }
.section--dark :focus-visible, .hero :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible{ outline-color:var(--gold-soft); box-shadow:0 0 0 5px rgba(10,44,34,.6); }
.btn-gold:focus-visible, .to-top:focus-visible, .lightbox button:focus-visible{ outline-color:var(--forest-2); }
.skip-link{ position:absolute; inset-block-start:-60px; inset-inline-start:16px; background:var(--gold); color:var(--forest-2); padding:.6rem 1rem; border-radius:0 0 10px 10px; z-index:100; transition:inset-block-start .2s; }
.skip-link:focus{ inset-block-start:0; }

/* =========================================================================
   PREMIUM-UPGRADES — Textur · Tiefe · Choreografie · Craft
   ========================================================================= */

/* Feiner Film-Grain über der ganzen Seite (Reichhaltigkeit) */
body::after{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ body::after{ display:none; } }

/* ---------- Hero: Marken-Textur + Tiefe ---------- */
.hero{
  background:
    radial-gradient(115% 85% at 88% -10%, rgba(30,107,79,.55), transparent 58%),
    radial-gradient(90% 120% at 6% 108%, rgba(6,32,25,.7), transparent 55%),
    url("/assets/img/pattern-hex.svg") repeat,
    var(--forest);
}
.hero::before{ /* innerer Gold-Hairline-Rahmen */
  content:""; position:absolute; inset:16px; z-index:1; pointer-events:none;
  border:1px solid rgba(201,162,75,.16); border-radius:20px;
}
.section--dark{ background:var(--forest) url("/assets/img/pattern-hex.svg") repeat; }

/* Hero-Copy Feinschliff */
.hero h1{ letter-spacing:-.015em; }
.hero h1 em{ position:relative; }
.hero-eyebrow{ text-transform:none; }

/* ---------- Choreografierte Load-Animation ---------- */
@keyframes riseIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes frameIn{ from{ opacity:0; transform:translateY(22px) scale(.985); } to{ opacity:1; transform:none; } }
.hero-copy > *{ animation:riseIn .75s both cubic-bezier(.2,.75,.2,1); }
.hero-copy > *:nth-child(1){ animation-delay:.05s; }
.hero-copy > *:nth-child(2){ animation-delay:.13s; }
.hero-copy > *:nth-child(3){ animation-delay:.23s; }
.hero-copy > *:nth-child(4){ animation-delay:.33s; }
.hero-figure{ animation:frameIn .9s .18s both cubic-bezier(.2,.75,.2,1); }
.hero-strip .stat{ animation:riseIn .7s both; }
.hero-strip .stat:nth-child(1){ animation-delay:.42s; }
.hero-strip .stat:nth-child(2){ animation-delay:.5s; }
.hero-strip .stat:nth-child(3){ animation-delay:.58s; }
@media (prefers-reduced-motion:reduce){
  .hero-copy > *,.hero-figure,.hero-strip .stat{ animation:none !important; }
}

/* Gold-Trennlinie unter Sektions-Titeln */
.h-display{ position:relative; padding-bottom:.5rem; }
.h-display::after{ content:""; position:absolute; inset-block-end:-4px; inset-inline-start:0; inline-size:64px; block-size:3px; background:linear-gradient(90deg,var(--gold),transparent); border-radius:2px; }

/* ---------- Journey: sich zeichnende Spine + kräftigere Knoten ---------- */
.chapter::before{ transform:scaleY(0); transform-origin:top center; transition:transform .9s cubic-bezier(.4,0,.2,1); }
.chapter.is-visible::before{ transform:scaleY(1); }
.chapter .node{
  inline-size:30px; block-size:30px; inset-inline-end:4px; font-size:.9rem;
  box-shadow:0 0 0 6px rgba(201,162,75,.08);
  transition:box-shadow .4s ease;
}
.chapter.is-visible .node{ box-shadow:0 0 0 8px rgba(201,162,75,.14); }
.chapter{ padding-inline-end:clamp(50px,6vw,80px); }
.chapter .ch-num{ display:inline-block; margin-bottom:.2rem; padding:.15rem .6rem; border:1px solid var(--line-gold); border-radius:999px; color:var(--moss); font-size:.78rem; }
@media (prefers-reduced-motion:reduce){ .chapter::before{ transform:none; transition:none; } }

/* ---------- Galerie: kuratiert (Featured-First) + Craft-Hover ---------- */
.gallery-grid{ grid-auto-flow:dense; }
.gallery-grid a{ position:relative; }
.gallery-grid a:first-child{ grid-column:span 2; grid-row:span 2; }
.gallery-grid a:first-child img{ aspect-ratio:auto; block-size:100%; }
.gallery-grid a::after{ /* Gold-Wash + Lupe beim Hover */
  content:"⤢"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.6rem; color:var(--forest-2);
  background:linear-gradient(0deg, rgba(201,162,75,.28), rgba(201,162,75,.08));
  opacity:0; transition:opacity .35s ease;
}
.gallery-grid a:hover::after{ opacity:1; }
.gallery-grid a::before{ /* dünner Gold-Innenrand beim Hover */
  content:""; position:absolute; inset:0; z-index:1; border-radius:14px;
  box-shadow:inset 0 0 0 0 rgba(228,199,126,0); transition:box-shadow .35s ease; pointer-events:none;
}
.gallery-grid a:hover::before{ box-shadow:inset 0 0 0 3px rgba(228,199,126,.85); }

/* ---------- Buttons: Craft ---------- */
.btn{ transition:transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(201,162,75,1); }
.btn-forest:hover{ transform:translateY(-2px); }

/* ---------- Eyebrow: Craft ---------- */
.eyebrow{ text-transform:none; }

/* ---------- Stat-Reihe: edler ---------- */
.hero-strip .stat{ display:flex; align-items:baseline; gap:.5rem; }
.hero-strip .stat b{ font-size:1.7rem; }

/* =========================================================================
   HEADER & FOOTER — Premium
   ========================================================================= */

/* ---------- Header ---------- */
.site-header{ transition:box-shadow .3s ease, background .3s ease, block-size .3s ease; }
.site-header::before{ /* Gold-Akzent ganz oben */
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:2px;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-soft) 50%, var(--gold) 70%, transparent);
}
.site-header.scrolled{ background:rgba(251,249,242,.94); box-shadow:0 10px 30px -18px rgba(10,44,34,.5); }
.site-header.scrolled .container{ block-size:60px; }
.brand img{ transition:transform .3s ease; }
.brand:hover img{ transform:rotate(-6deg) scale(1.05); }

/* Nav: animierter Gold-Unterstrich statt Pille */
.nav a:not(.nav-cta){ background:none; padding:.5rem .55rem; position:relative; color:#2c3a32; }
.nav a:not(.nav-cta) span{ position:relative; }
.nav a:not(.nav-cta) span::after{
  content:""; position:absolute; inset-block-end:-5px; inset-inline:0; block-size:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:inline-end; transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav a:not(.nav-cta):hover{ background:none; color:var(--forest); }
.nav a:not(.nav-cta):hover span::after{ transform:scaleX(1); transform-origin:inline-start; }
.nav .nav-cta{ display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.05rem; box-shadow:0 8px 20px -12px rgba(14,59,46,.8); }
.nav .nav-cta:hover{ transform:translateY(-1px); }

/* ---------- Footer ---------- */
.site-footer{
  position:relative; margin-top:0;
  background:var(--forest-2) url("/assets/img/pattern-hex.svg") repeat;
  color:rgba(245,241,230,.72);
}
.site-footer::before{ /* Gold-Hairline oben */
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,75,.6), transparent);
}
.to-top{
  position:absolute; inset-block-start:-24px; inset-inline-start:50%; transform:translateX(50%);
  inline-size:48px; block-size:48px; border-radius:50%;
  background:var(--gold); color:var(--forest-2); display:grid; place-items:center;
  box-shadow:0 12px 26px -12px rgba(201,162,75,.9); transition:transform .25s ease, background .25s ease;
}
.to-top:hover{ transform:translateX(50%) translateY(-4px); background:var(--gold-soft); }
.to-top svg{ inline-size:22px; block-size:22px; }

.footer-grid{
  display:grid; grid-template-columns:1.5fr .8fr 1fr; gap:clamp(28px,5vw,64px);
  padding-block:clamp(52px,6vw,76px) 2.4rem;
}
.footer-brand .brand b{ color:var(--ivory); font-size:1.15rem; }
.footer-brand .brand span{ color:rgba(245,241,230,.55); }
.footer-brand .brand img{ inline-size:46px; block-size:46px; }
.footer-note{ margin:1.2rem 0 1.4rem; max-width:42ch; font-size:.95rem; line-height:1.9; color:rgba(245,241,230,.66); }
.footer-brand .social a{ color:var(--ivory); border-color:rgba(201,162,75,.3); }
.footer-brand .social a:hover{ background:rgba(201,162,75,.16); }

.footer-col h4{ color:var(--gold-soft); font-size:.95rem; font-weight:800; margin-bottom:1.1rem; position:relative; padding-bottom:.6rem; }
.footer-col h4::after{ content:""; position:absolute; inset-block-end:0; inset-inline-start:0; inline-size:28px; block-size:2px; background:var(--gold); }
.footer-col > a:not(.btn){ display:block; padding:.32rem 0; color:rgba(245,241,230,.72); font-size:.96rem; transition:color .18s ease, padding-inline-start .18s ease; }
.footer-col > a:not(.btn):hover{ color:var(--gold-soft); padding-inline-start:.35rem; }
.footer-email{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; }
.footer-cta-note{ margin:1rem 0 1.1rem; font-size:.92rem; color:rgba(245,241,230,.6); max-width:30ch; }
.footer-col .btn-gold{ padding:.7rem 1.3rem; }

.footer-bar{ border-top:1px solid rgba(201,162,75,.16); }
.footer-bar .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.3rem; }
.footer-bar .copy{ font-size:.85rem; color:rgba(245,241,230,.6); }
.footer-bar .copy-min{ font-size:.82rem; color:rgba(201,162,75,.7); letter-spacing:.08em; }

@media (max-width:820px){
  .footer-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bar .container{ flex-direction:column; align-items:flex-start; gap:.4rem; }
}

/* =========================================================================
   CLEAN — keine Entrance-/Scroll-Animationen (nur statische Optik + Hover)
   ========================================================================= */
.hero-copy > *,
.hero-figure,
.hero-strip .stat{ animation:none !important; }
.reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
.chapter::before{ transform:scaleY(1) !important; transition:none !important; }
.chapter .node,
.chapter.is-visible .node{ box-shadow:0 0 0 7px rgba(201,162,75,.1); transition:none; }
.chapter .node::after{ opacity:1 !important; }

/* Galerie-Overlay: sauberes Lupen-Icon statt Emoji-Glyph */
.gallery-grid a::after{
  content:"";
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%230A2C22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 30px no-repeat,
    linear-gradient(0deg, rgba(201,162,75,.30), rgba(201,162,75,.10));
}

/* Stat-Icons */
.stat-ico{ inline-size:20px; block-size:20px; color:var(--gold-soft); flex:0 0 auto; }
.hero-strip .stat{ align-items:center; }

/* Kontakt-Info Icons */
.contact-info dt{ display:flex; align-items:center; gap:.45rem; }
.contact-info .info-ico{ inline-size:16px; block-size:16px; color:var(--gold); }

/* =========================================================================
   NEUE SEKTIONEN — Expertise · Marquee · Achievements · FAQ · Blog · CTA
   ========================================================================= */

/* Icons inline sauber ausrichten */
.ico{ flex:0 0 auto; vertical-align:-.2em; }
.btn .ico{ vertical-align:middle; }

/* Sektions-Kopf (Titel + Lead nebeneinander) */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.sec-head-lead{ max-width:38ch; }

/* ---------- Marquee ---------- */
.marquee{ background:var(--forest-2); color:var(--gold-soft); overflow:hidden; border-block:1px solid rgba(201,162,75,.2); }
.marquee-track{ display:flex; align-items:center; gap:1.4rem; white-space:nowrap; padding-block:.9rem; width:max-content; animation:marquee 34s linear infinite; }
.marquee-track span{ font-weight:700; font-size:1rem; letter-spacing:.01em; }
.marquee-dot{ inline-size:6px; block-size:6px; border-radius:50%; background:var(--gold); display:inline-block; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }
[dir=rtl] .marquee-track{ animation-name:marquee-rtl; }
@keyframes marquee-rtl{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* ---------- Expertise-Tiles ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.tile{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.6rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative; overflow:hidden;
}
.tile::before{ content:""; position:absolute; inset-block-start:0; inset-inline-end:0; inline-size:0; block-size:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); transition:inline-size .3s ease; }
.tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-gold); }
.tile:hover::before{ inline-size:100%; }
.tile-ico{ display:inline-grid; place-items:center; inline-size:52px; block-size:52px; border-radius:14px; background:rgba(30,107,79,.1); color:var(--forest); margin-bottom:1.1rem; }
.tile .h3{ margin-bottom:.4rem; }
.tile p{ color:var(--muted); font-size:.98rem; line-height:1.85; }

/* ---------- Achievements-Band ---------- */
.achievements{ padding-block:clamp(36px,5vw,56px); }
.achievements .container{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; text-align:center; }
.ach{ position:relative; padding:.4rem 0; }
.ach + .ach::before{ content:""; position:absolute; inset-inline-start:0; inset-block:15% 15%; inline-size:1px; background:rgba(201,162,75,.28); }
.ach b{ display:block; font-size:clamp(2rem,4vw,2.9rem); font-weight:900; color:var(--gold-soft); line-height:1.1; }
.ach span{ color:rgba(245,241,230,.72); font-size:.95rem; }

/* ---------- FAQ ---------- */
.faq-wrap{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,5vw,60px); align-items:start; }
.faq-aside .btn{ margin-top:1.4rem; }
.faq-list{ display:flex; flex-direction:column; gap:.9rem; }
.faq-item{ border:1px solid var(--line); border-radius:14px; background:var(--paper); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; }
.faq-item[open]{ border-color:var(--line-gold); box-shadow:var(--shadow); }
.faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.4rem; cursor:pointer; font-weight:700; color:var(--forest); list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .ico{ color:var(--gold); transition:transform .25s ease; flex:0 0 auto; }
.faq-item[open] summary .ico{ transform:rotate(180deg); }
.faq-body{ padding:0 1.4rem 1.3rem; }
.faq-body p{ color:var(--muted); line-height:1.9; margin:0; }

/* ---------- Blog-Vorschau ---------- */
.posts-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.post-tile{ display:flex; flex-direction:column; gap:.7rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.post-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-gold); }
.post-tag{ align-self:flex-start; font-size:.75rem; font-weight:700; color:var(--moss); background:rgba(30,107,79,.1); padding:.25rem .7rem; border-radius:999px; }
.post-excerpt{ color:var(--muted); font-size:.95rem; line-height:1.85; flex:1; }
.post-more{ display:inline-flex; align-items:center; gap:.4rem; color:var(--gold); font-weight:700; font-size:.85rem; }

/* ---------- CTA-Band ---------- */
.cta-band{ background:var(--forest) url("/assets/img/pattern-hex.svg") repeat; color:var(--ivory); position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset-block:0; inset-inline-start:-10%; inline-size:50%; background:radial-gradient(circle at center, rgba(201,162,75,.18), transparent 60%); pointer-events:none; }
.cta-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-block:clamp(40px,6vw,64px); }
.cta-inner .h1{ max-width:22ch; }
.cta-inner .lead{ color:rgba(245,241,230,.8); margin-top:.7rem; max-width:44ch; }
.cta-actions{ display:flex; gap:.9rem; flex-wrap:wrap; }

/* ---------- Responsive Feinschliff ---------- */
@media (max-width:900px){
  .cards-grid,.posts-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .achievements .container{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; }
  .ach:nth-child(3)::before,.ach:nth-child(2)::before{ display:none; }
  .faq-wrap{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .cards-grid,.posts-grid{ grid-template-columns:1fr; }
  .sec-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
  .hero h1{ font-size:clamp(1.9rem,8vw,2.4rem); }
  .hero .container{ padding-block:2.4rem; }
}
@media (max-width:400px){
  .achievements .container{ grid-template-columns:1fr; }
  .ach::before{ display:none !important; }
}

/* Aktiver Nav-Link (Scroll-Spy) */
.nav a.active:not(.nav-cta){ color:var(--forest); }
.nav a.active:not(.nav-cta) span::after{ transform:scaleX(1); transform-origin:inline-start; }

/* Marquee: nahtlose Endlosschleife (Zwei-Gruppen-Muster, exakt -50%) */
.marquee-track{ gap:0; padding-block:0; width:max-content; animation:marquee 30s linear infinite; }
.marquee-group{ display:flex; align-items:center; gap:1.4rem; padding-block:.9rem; padding-inline-end:1.4rem; flex:0 0 auto; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-33.3333%); } }
[dir=rtl] .marquee-track{ animation-name:marquee; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

/* =========================================================================
   SEITEN-KÖPFE · KAMPAGNE · SUCCESS · FORMULARE
   ========================================================================= */

.btn-block{ inline-size:100%; }

/* Seiten-Kopf (Blog etc.) */
.page-head{ padding-block:clamp(48px,7vw,88px); }
.page-head .lead{ margin-top:1rem; max-width:52ch; }
.crumbs{ display:flex; gap:.5rem; align-items:center; font-size:.88rem; color:rgba(245,241,230,.6); margin-bottom:1.2rem; }
.crumbs a:hover{ color:var(--gold-soft); }
.post-meta{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; color:var(--gold-soft); font-weight:600; }

/* Artikel */
.article{ max-width:760px; margin-inline:auto; }
.article .prose p{ font-size:1.1rem; }
.article-back{ margin-top:2rem; }

/* Alerts */
.alert{ border-radius:12px; padding:.9rem 1.1rem; margin-bottom:1.2rem; font-weight:600; font-size:.95rem; }
.alert p{ margin:.2rem 0; display:flex; align-items:center; gap:.5rem; }
.alert-error{ background:rgba(176,58,46,.1); border:1px solid rgba(176,58,46,.4); color:#8f2f26; }
.alert-info{ background:rgba(30,107,79,.12); border:1px solid var(--line-gold); color:var(--forest); display:flex; align-items:center; gap:.5rem; }

/* ---------- Kampagnen-Landing ---------- */
.campaign{ align-items:center; display:flex; min-block-size:calc(100vh - 70px); }
.campaign .campaign-grid{ display:grid; grid-template-columns:1fr 460px; gap:clamp(30px,5vw,64px); align-items:center; padding-block:clamp(40px,6vw,72px); position:relative; z-index:1; }
.campaign-intro h1{ font-weight:900; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.3; }
.campaign-intro p{ margin-top:1.1rem; color:rgba(245,241,230,.82); max-width:46ch; }
.prize{ display:inline-flex; align-items:center; gap:.9rem; margin-top:1.6rem; background:rgba(201,162,75,.12); border:1px solid var(--line-gold); border-radius:14px; padding:.9rem 1.2rem; }
.prize-ico{ display:grid; place-items:center; inline-size:46px; block-size:46px; border-radius:12px; background:var(--gold); color:var(--forest-2); }
.prize small{ display:block; color:var(--gold-soft); font-size:.8rem; }
.prize b{ color:var(--ivory); font-size:1.1rem; }
.campaign-steps{ list-style:none; padding:0; margin:1.8rem 0 0; display:grid; gap:.7rem; }
.campaign-steps li{ display:flex; align-items:center; gap:.6rem; color:rgba(245,241,230,.85); }
.campaign-steps .ico{ color:var(--gold-soft); }

.campaign-card{ background:var(--paper); }
.card-title{ margin-bottom:1.3rem; padding-bottom:.9rem; border-bottom:1px solid var(--line); }
.captcha-field{ display:flex; justify-content:center; }
.form-hint{ margin-top:.9rem; font-size:.85rem; color:#3e4a43; text-align:center; }
.card .form-hint, .campaign-card .form-hint{ color:#3e4a43; }
.campaign-card .btn-block{ margin-top:.4rem; }

/* ---------- Success ---------- */
.success{ display:flex; align-items:center; min-block-size:calc(100vh - 70px); text-align:center; }
.success .success-inner{ max-width:600px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; position:relative; z-index:1; padding-block:3rem; grid-template-columns:none; }
.success-ico{ display:grid; place-items:center; inline-size:76px; block-size:76px; border-radius:50%; background:rgba(201,162,75,.16); border:2px solid var(--gold); color:var(--gold-soft); margin-bottom:1.4rem; }
.success h1{ font-weight:900; font-size:clamp(1.7rem,4vw,2.4rem); }
.ticket{ margin:2rem 0; background:var(--forest-2); border:1px solid var(--line-gold); border-radius:20px; padding:2rem 2.4rem; box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; gap:1.2rem; inline-size:min(420px,90vw); }
.ticket-label{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold-soft); font-weight:600; font-size:.9rem; }
.ticket-code{
  font-size:clamp(3rem,12vw,5rem); font-weight:900; color:var(--gold-soft);
  letter-spacing:.15em; line-height:1; direction:ltr;
  text-shadow:0 4px 24px rgba(201,162,75,.35);
}
.ticket-copy.copied{ background:var(--gold); color:var(--forest-2); }
.success-msg{ color:rgba(245,241,230,.82); max-width:44ch; line-height:1.9; }

/* Responsive */
@media (max-width:860px){
  .campaign .campaign-grid{ grid-template-columns:minmax(0,1fr); }
  .campaign-intro{ order:-1; }
  .campaign-card{ width:100%; }
}

/* Artikel-Detail */
.post-meta-row{ display:flex; gap:1.4rem; margin-top:1rem; color:var(--gold-soft); font-weight:600; font-size:.9rem; }
.post-meta-row span{ display:inline-flex; align-items:center; gap:.4rem; }
.article-h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:800; color:var(--forest); margin:2rem 0 .3rem; }
.article-foot{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line); }

/* Ticket-Download-Button */
.ticket-actions{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }

/* =========================================================================
   TOUCH-GERÄTE — klebende :hover-Zustände neutralisieren (Handy/Tablet)
   ========================================================================= */
@media (hover: none) {
  .btn-gold:hover{ transform:none; box-shadow:0 10px 24px -12px rgba(201,162,75,.9); background:var(--gold); }
  .btn-forest:hover{ transform:none; background:var(--forest); }
  .btn-ghost:hover{ background:transparent; }
  .hero .btn-ghost:hover, .section--dark .btn-ghost:hover{ background:rgba(255,255,255,.05); border-color:rgba(228,199,126,.7); }
  .nav .nav-cta:hover, .brand:hover img{ transform:none; }
  .nav .nav-cta:hover{ background:var(--forest); color:var(--ivory); }
  .tile:hover, .post-tile:hover, .post-card:hover{ transform:none; box-shadow:var(--shadow); }
  .tile:hover::before{ inline-size:0; }
  .tile:hover, .post-tile:hover{ border-color:var(--line); }
  .gallery-grid a:hover img{ transform:none; opacity:.94; }
  .gallery-grid a:hover::after{ opacity:0; }
  .gallery-grid a:hover::before{ box-shadow:none; }
  .social a:hover, .footer-brand .social a:hover{ transform:none; background:transparent; }
  .footer-col > a:not(.btn):hover{ padding-inline-start:0; color:rgba(245,241,230,.72); }
  .nav a:not(.nav-cta):hover span::after{ transform:scaleX(0); }
  .site-footer a:not(.btn):not(.to-top):hover{ color:rgba(245,241,230,.72); }
  .crumbs a:hover{ color:rgba(245,241,230,.6); }
  /* Back-to-Top: Positionierung (translateX) erhalten, nur Lift entfernen */
  .to-top:hover{ transform:translateX(50%); background:var(--gold); }
}

/* Mobile: CTA-Buttons voll ausnutzen, klarer trennen */
@media (max-width: 600px) {
  .cta-actions{ width:100%; }
  .cta-actions .btn{ flex:1 1 auto; justify-content:center; }
  .hero-actions .btn, .article-foot .btn{ flex:1 1 auto; justify-content:center; }
  .ticket-actions{ width:100%; }
  .ticket-actions .btn{ flex:1 1 auto; justify-content:center; }
}

/* Grid-/Flex-Overflow verhindern: Kinder dürfen unter Inhaltsbreite schrumpfen */
.hero-copy, .campaign-intro, .about .container > *, .contact-lead, .faq-aside, .faq-list, .sec-head > *, .tile, .post-tile, .ach, .footer-col{ min-width:0; }
.tile p, .post-excerpt{ overflow-wrap:anywhere; }
.hero-eyebrow{ flex-wrap:wrap; }
.hero p, .campaign-intro p{ max-width:100%; }
.h-display, .hero h1, .campaign-intro h1{ overflow-wrap:break-word; word-break:break-word; }

/* Touch-Zielgrößen (>=44px) */
.nav-toggle{ min-inline-size:44px; min-block-size:44px; display:none; align-items:center; justify-content:center; }
@media (max-width:900px){ .nav-toggle{ display:inline-flex; } }
@media (hover: none){ .social a{ min-block-size:44px; } }
@media (max-width:520px){
  .footer-col > a:not(.btn){ padding-block:.7rem; min-block-size:44px; display:flex; align-items:center; }
}

/* Telefon-Eingabe: Nummer + Ländercode in EINER Box, Trennlinie, Code links */
.phone-row{ display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; }
.phone-row:focus-within{ border-color:var(--moss); box-shadow:none; }
.phone-row input{ flex:1 1 auto; min-width:0; border:0; background:transparent; padding:.85rem 1rem; color:var(--ink); font-family:inherit; font-size:1rem; }
.phone-row input:focus, .phone-row input:focus-visible{ outline:none; box-shadow:none; border:0; }
.phone-row .country-code{
  flex:0 0 auto; border:0; border-inline-start:1px solid var(--line);
  appearance:none; -webkit-appearance:none;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6A5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat left .8rem center;
  padding:.85rem 1rem .85rem 2.2rem; text-align:right;
  color:var(--ink); font-family:inherit; font-weight:600; font-size:.95rem; cursor:pointer; direction:ltr;
}
.phone-row .country-code:focus{ outline:none; }

/* Pflichtfeld-Markierung */
.req{ color:#c0392b; font-weight:700; margin-inline-start:.15rem; }