/* ==========================================================================
   cleobetra-austro.com — „Der Goldschrein"
   Schweres ägyptisches Ornament: getriebenes Gold, Einlegearbeit, Edelsteine.
   Alle Zierformen sind reines CSS oder Inline-SVG. Keine Bilddateien, keine
   Schriftdateien, keine Fremdanfragen.
   ========================================================================== */

:root{
  /* Grund — warmes Schwarzbraun, aus der Kontur des Logos gezogen */
  --nacht:        #120803;
  --grund:        #1B0D06;
  --grund-hoch:   #26130A;
  --nische:       #150A05;

  /* Karneol und Lapis — die Einlagen des Pektorals */
  --karneol:      #7E2011;
  --karneol-tief: #4A0D06;
  --lapis:        #12264C;
  --lapis-hell:   #2B5490;

  /* Gold als Werkstoff: Glanzlicht, Licht, Mitte, Tiefe, Schatten */
  --gold-glanz:   #FFF9E4;
  --gold-licht:   #F2D983;
  --gold:         #E0B85E;
  --gold-mitte:   #C67F2E;
  --gold-tief:    #8E4716;
  --gold-schatt:  #4A1F0C;

  /* Papyrus — die Schriftfarben */
  --papyrus:      #F6E9D2;
  --papyrus-matt: #DBC7A2;
  --papyrus-still:#BFAA85;
  --warnrot:      #FFB09A;

  /* Getriebenes Gold: mehrere Glanzbänder statt einer Fläche */
  --metall: linear-gradient(168deg,#8E4716 0%,#C67F2E 9%,#F2D983 24%,#FFF9E4 33%,#E7C572 42%,#C67F2E 55%,#8E4716 66%,#D9AE55 78%,#F2D983 88%,#A85F20 100%);
  --metall-knopf: linear-gradient(100deg,#C88B33 0%,#EBCB7B 12%,#FFF6D6 26%,#F0D68F 38%,#E0B85E 52%,#EFD489 66%,#FFF6D6 80%,#DDAE52 92%,#C88B33 100%);
  --metall-schrift: linear-gradient(180deg,#FFFBEE 0%,#F6E2A4 30%,#E9C878 52%,#F5DE95 70%,#DDB25E 100%);

  /* Edelsteine: Cabochons mit Goldfassung, in einem Verlauf gefasst */
  --stein-lapis: radial-gradient(circle closest-side at 38% 32%,#B6D9F7 0 12%,#5A90CE 30%,#20447F 52%,#0B1A31 62%,#4A1F0C 68%,#FFF9E4 78%,#C67F2E 90%,#7E3A12 98%,rgba(0,0,0,0) 100%);
  --stein-karneol: radial-gradient(circle closest-side at 36% 30%,#F7BCA8 0 12%,#CE4B31 30%,#7E2011 52%,#4A0D06 62%,#4A1F0C 68%,#FFF9E4 78%,#C67F2E 90%,#7E3A12 98%,rgba(0,0,0,0) 100%);
  /* Rauten: dieselben Steine, aber als gefasste Lozenge */
  --raute-lapis: radial-gradient(125% 125% at 32% 24%,#C3E0F9 0,#5A90CE 26%,#20447F 58%,#0A1830 100%);
  --raute-karneol: radial-gradient(125% 125% at 32% 24%,#F9C6B3 0,#CE4B31 26%,#7E2011 58%,#480C05 100%);
  --fassung: 0 0 0 1px var(--gold-schatt),0 0 0 2px var(--gold-mitte),0 0 0 3px rgba(74,31,12,.85),inset 0 -1px 2px rgba(0,0,0,.65),inset 0 1px 1px rgba(255,249,228,.4);

  /* Musterfelder: getriebene Pyramidenköpfe und Rautengitter */
  --pyramidenfeld: conic-gradient(from 45deg at 50% 50%,rgba(255,249,228,.07) 0 25%,rgba(0,0,0,.22) 0 50%,rgba(255,249,228,.035) 0 75%,rgba(0,0,0,.13) 0 100%);
  --rautenfeld:
    repeating-linear-gradient(62deg,rgba(224,184,94,0) 0 17px,rgba(224,184,94,.085) 17px 18px),
    repeating-linear-gradient(-62deg,rgba(224,184,94,0) 0 17px,rgba(224,184,94,.085) 17px 18px);
  --kornung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='.05'/%3E%3C/svg%3E");
  /* Lotosfries: Kranz über den Tafeln */
  --lotosband: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='20' viewBox='0 0 34 20'%3E%3Cg fill='none' stroke='%23E0B85E' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M17 19V8'/%3E%3Cpath d='M17 9.5c-5.4 0-8.4 3.6-9.2 9.5'/%3E%3Cpath d='M17 9.5c5.4 0 8.4 3.6 9.2 9.5'/%3E%3Cpath d='M0 19c.6-4 2.2-6 4.6-6.8M34 19c-.6-4-2.2-6-4.6-6.8'/%3E%3Cpath d='M0 19.4h34' stroke-width='1.1' stroke-opacity='.85'/%3E%3C/g%3E%3Ccircle cx='17' cy='5' r='2.6' fill='%23F2D983'/%3E%3Ccircle cx='17' cy='5' r='2.6' fill='none' stroke='%238E4716' stroke-width='.8'/%3E%3C/svg%3E");

  --zier:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,"Times New Roman",serif;
  --brot:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --breite:74rem;
  --rand:1.15rem;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  color:var(--papyrus-matt);
  background-color:var(--nacht);
  background-image:
    var(--kornung),
    var(--rautenfeld),
    radial-gradient(1100px 620px at 50% -6%,rgba(198,127,46,.22),rgba(0,0,0,0) 72%),
    radial-gradient(900px 620px at 50% 104%,rgba(18,38,76,.5),rgba(0,0,0,0) 72%),
    linear-gradient(180deg,#1B0D06 0%,#120803 46%,#150A08 100%);
  font-family:var(--brot);
  font-size:1.0625rem;
  line-height:1.68;
  overflow-wrap:break-word;
}

img{ max-width:100%; }
h1,h2,h3{ margin:0; font-family:var(--zier); font-weight:700; line-height:1.14; }
p{ margin:0; }
a{ color:var(--gold-licht); }

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

.sprungmarke{
  position:absolute; left:var(--rand); top:-10rem; z-index:30;
  background:var(--gold-licht); color:var(--nacht);
  padding:.7rem 1.1rem; border-radius:3px;
  font-weight:800; font-size:.9rem; text-decoration:none;
}
.sprungmarke:focus{ top:.7rem; }

/* --------------------------------------------------------------------------
   Werkstoff Gold
   -------------------------------------------------------------------------- */

/* Goldrahmen: getriebene Leiste mit Fase, Innenschatten und vier
   Lapis-Cabochons in den Ecken. Trägt alle vier Aufnahmen. */
.goldrahmen{
  position:relative; margin:0;
  padding:.95rem; border-radius:3px;
  background-image:var(--metall);
  box-shadow:
    inset 0 1px 0 rgba(255,249,228,.85),
    inset 0 -1px 0 rgba(74,31,12,.9),
    inset 2px 0 4px rgba(255,249,228,.2),
    inset -2px 0 4px rgba(74,31,12,.55),
    0 0 0 1px #3B1607,
    0 0 0 4px #130804,
    0 0 0 5px var(--gold-tief),
    0 0 0 6px var(--gold),
    0 0 0 7px var(--gold-schatt),
    0 26px 52px -22px rgba(0,0,0,.95);
}
/* eingravierte Kehle mitten in der Goldleiste */
.goldrahmen::before{
  content:""; position:absolute; inset:.42rem; border-radius:2px; pointer-events:none;
  border:1px solid rgba(74,31,12,.9);
  box-shadow:0 1px 0 rgba(255,249,228,.35);
}
.goldrahmen-bild{
  display:block; width:100%; height:auto;
  border:3px solid #0A1830; border-radius:2px;
}
/* vier Lapis-Cabochons in Goldfassung */
.goldrahmen::after{
  content:""; position:absolute; inset:0; border-radius:3px; pointer-events:none;
  background-image:var(--stein-lapis),var(--stein-lapis),var(--stein-lapis),var(--stein-lapis);
  background-repeat:no-repeat;
  background-size:16px 16px;
  background-position:left 3px top 3px,right 3px top 3px,left 3px bottom 3px,right 3px bottom 3px;
}

/* Goldknopf: gefasste Platte mit Fase, darüber ein wanderndes Glanzband. */
.goldknopf{
  position:relative; overflow:hidden;
  display:inline-block; border:0; border-radius:3px;
  padding:.92rem 1.7rem;
  background-image:var(--metall-knopf);
  color:#170B04;
  font-family:var(--brot); font-size:.82rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
  text-align:center; text-decoration:none; cursor:pointer;
  text-shadow:0 1px 0 rgba(255,249,228,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.95),
    inset 0 -2px 0 rgba(74,31,12,.42),
    0 0 0 1px var(--gold-schatt),
    0 12px 22px -12px rgba(0,0,0,.95);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.goldknopf:hover{
  transform:translateY(-2px);
  filter:brightness(1.07) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,252,240,.95),
    inset 0 -2px 0 rgba(74,31,12,.42),
    0 0 0 1px var(--gold-schatt),
    0 18px 30px -14px rgba(0,0,0,.95),
    0 0 22px -4px rgba(242,217,131,.42);
}
.goldknopf:active{ transform:translateY(0); }
.goldknopf::after{
  content:""; position:absolute; top:-60%; left:0;
  width:26%; height:220%;
  background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));
  transform:translate3d(-200%,0,0) rotate(16deg);
  pointer-events:none;
}

/* Zierleiste: Trennrune aus Goldstab und Karneol-Raute. */
.zierleiste{
  position:relative; height:30px;
  max-width:var(--breite); margin:0 auto;
  background-image:var(--stein-lapis),var(--stein-lapis);
  background-repeat:no-repeat;
  background-size:14px 14px;
  background-position:calc(50% - 34px) 8px,calc(50% + 34px) 8px;
}
.zierleiste::before{
  content:""; position:absolute; top:14px; left:var(--rand); right:var(--rand); height:2px;
  background-image:linear-gradient(90deg,rgba(142,71,22,0),#8E4716 7%,#C67F2E 20%,#E0B85E 38%,#FFF9E4 50%,#E0B85E 62%,#C67F2E 80%,#8E4716 93%,rgba(142,71,22,0));
}
.zierleiste::after{
  content:""; position:absolute; top:6px; left:50%;
  width:17px; height:17px; margin-left:-8.5px;
  transform:rotate(45deg); border-radius:2px;
  background-image:var(--raute-karneol);
  box-shadow:var(--fassung),0 0 18px -2px rgba(242,217,131,.4);
}

/* --------------------------------------------------------------------------
   Stirnband
   -------------------------------------------------------------------------- */
.stirnband{
  position:relative;
  background-color:#160B04;
  background-image:var(--rautenfeld),linear-gradient(180deg,#24120A,#140A04);
  border-bottom:1px solid var(--gold-schatt);
  box-shadow:0 1px 0 rgba(255,249,228,.16),0 3px 0 -1px var(--gold-tief),0 12px 26px -18px #000;
}
.stirnband-innen{
  max-width:var(--breite); margin:0 auto; padding:.8rem var(--rand);
  display:flex; align-items:center; justify-content:space-between;
  gap:.9rem; flex-wrap:wrap;
}
.hausmarke{ display:flex; align-items:center; gap:.85rem; text-decoration:none; color:inherit; }
.hausmarke-bild{
  display:block; width:152px; height:auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.85));
}
.hausmarke-wort{
  font-size:.66rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold);
  padding-left:.85rem; border-left:1px solid rgba(224,184,94,.35);
  text-shadow:0 1px 0 #000;
}
.stirnband-rechts{ display:flex; align-items:center; gap:.95rem; }
.jahresmarke{
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--papyrus);
  border:1px solid rgba(224,184,94,.45); border-radius:3px;
  padding:.28rem .55rem;
  box-shadow:inset 0 1px 0 rgba(255,249,228,.14);
}
.stirnlink{
  font-size:.78rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold-licht); text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid var(--gold-tief);
  transition:color .16s ease,border-color .16s ease;
}
.stirnlink:hover{ color:var(--gold-glanz); border-bottom-color:var(--gold-licht); }

/* --------------------------------------------------------------------------
   Auftakt
   -------------------------------------------------------------------------- */
.weihe{
  position:relative; overflow:hidden;
  padding:1.6rem 0 1.3rem;
}
.weihe::before{
  content:""; position:absolute; inset:-30% -20% auto -20%; height:150%;
  background-image:radial-gradient(46% 52% at 50% 34%,rgba(242,217,131,.16),rgba(0,0,0,0) 70%);
  pointer-events:none;
}
/* Sonnenstrahlen hinter der Flügelsonne */
.weihe::after{
  content:""; position:absolute; left:-25%; right:-25%; top:-60%; height:220%;
  pointer-events:none;
  background-image:repeating-conic-gradient(from -4deg at 24% 30%,rgba(242,217,131,.09) 0 1.3deg,rgba(0,0,0,0) 1.3deg 6.4deg);
  -webkit-mask-image:radial-gradient(34% 40% at 24% 30%,#000 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 78%);
  mask-image:radial-gradient(34% 40% at 24% 30%,#000 0,rgba(0,0,0,.5) 46%,rgba(0,0,0,0) 78%);
}
.weihe-raster{
  position:relative;
  max-width:var(--breite); margin:0 auto; padding:0 var(--rand);
  display:grid; gap:2.2rem;
}
.sonnenscheibe{
  display:block; width:min(19rem,88%); height:auto;
  margin:0 0 .55rem -.4rem;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(242,217,131,.2));
}
.weihe-ruf{
  font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 1px 0 #000,0 -1px 0 rgba(255,249,228,.12);
  margin-bottom:.75rem;
}
.weihe-titel{
  font-size:clamp(2.05rem,1.25rem + 3.6vw,3.7rem);
  line-height:1.02; letter-spacing:-.012em;
  max-width:15ch;
  color:var(--gold-licht);
  text-shadow:0 2px 0 rgba(74,31,12,.9),0 4px 18px rgba(0,0,0,.8);
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .weihe-titel{
    background-image:var(--metall-schrift);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 2px 0 rgba(74,31,12,.85)) drop-shadow(0 6px 16px rgba(0,0,0,.75));
  }
}
.weihe-lead{
  margin-top:.95rem; max-width:44ch;
  font-size:1.09rem; color:var(--papyrus-matt);
}
.weihe-fein{
  margin-top:1.15rem;
  font-size:.79rem; color:var(--papyrus-still);
}

/* --------------------------------------------------------------------------
   Einschreibung — die eingelegte Tafel mit dem Eingabefeld
   -------------------------------------------------------------------------- */
.einschreibung{
  position:relative;
  margin-top:1.5rem; max-width:34rem;
  padding:1.7rem 1.35rem 1.3rem;
  border-radius:4px;
  background-color:#0C1830;
  background-image:var(--pyramidenfeld),radial-gradient(130% 130% at 50% 0%,#1A3055,#080F1F 74%);
  background-size:22px 22px,auto;
  box-shadow:
    inset 0 0 0 1px rgba(224,184,94,.4),
    inset 0 0 40px rgba(0,0,0,.8),
    0 0 0 4px #150A05,
    0 0 0 6px var(--gold-tief),
    0 0 0 7px var(--gold),
    0 0 0 8px var(--gold-schatt),
    0 24px 46px -22px rgba(0,0,0,.95);
}
/* vier Cabochons in den Ecken der Tafel */
.einschreibung::after{
  content:""; position:absolute; top:2px; left:50%; margin-left:-9px;
  width:18px; height:18px; transform:rotate(45deg); border-radius:2px;
  pointer-events:none;
  background-image:var(--raute-karneol);
  box-shadow:0 0 0 1px var(--gold-schatt),0 0 0 2px var(--gold-mitte);
}
.einschreibung::before{
  content:""; position:absolute; left:0; right:0; top:0; height:20px;
  background-image:var(--lotosband),linear-gradient(180deg,rgba(9,4,2,.85),rgba(0,0,0,0));
  background-repeat:repeat-x,no-repeat; background-position:center top;
  opacity:.9; border-radius:4px 4px 0 0;
}
.einschreibung-form{ display:block; }
.weihe-seite,.abschied-seite{ min-width:0; }
.einschreibung-etikett{
  display:block; margin-bottom:.72rem;
  font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 1px 0 #000;
}
.einschreibung-zeile{ display:flex; flex-wrap:wrap; gap:.62rem; }
.einschreibung-feld{
  flex:1 1 13rem; min-width:0;
  font:inherit; font-size:1rem;
  color:#170B04; background-color:#FBF4E3;
  border:0; border-radius:3px;
  padding:.82rem .9rem;
  box-shadow:inset 0 2px 5px rgba(74,31,12,.45),0 0 0 1px var(--gold-tief),0 0 0 2px rgba(255,249,228,.14);
  transition:box-shadow .18s ease;
}
.einschreibung-feld::placeholder{ color:#6A5B44; }
.einschreibung-feld:focus{
  box-shadow:inset 0 2px 5px rgba(74,31,12,.3),0 0 0 1px var(--gold-licht),0 0 16px -2px rgba(242,217,131,.55);
}
.einschreibung-feld[aria-invalid="true"]{
  box-shadow:inset 0 2px 5px rgba(74,31,12,.3),0 0 0 2px #C6412A;
}
.einschreibung-hinweis{ margin-top:.8rem; font-size:.78rem; color:var(--papyrus-still); }
.einschreibung-fehler{ margin-top:.65rem; font-size:.86rem; font-weight:700; color:var(--warnrot); }
.einschreibung-vollzug:focus-visible{ outline-offset:6px; }
.vollzug-titel{
  font-family:var(--zier); font-size:1.24rem; font-weight:700; color:var(--gold-licht);
}
.vollzug-text{ margin-top:.45rem; font-size:.96rem; color:var(--papyrus-matt); }

/* --------------------------------------------------------------------------
   Tempel — die Abschnitte
   -------------------------------------------------------------------------- */
.tempel{ padding:2.6rem 0; }
.tempel-innen{ max-width:var(--breite); margin:0 auto; padding:0 var(--rand); }
/* Die Überschriften stehen auf der Mittelachse, flankiert von Karneol-Rauten. */
.tempel-ruf{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 1px 0 #000,0 -1px 0 rgba(255,249,228,.12);
  margin-bottom:.7rem;
}
.tempel-ruf::before,.tempel-ruf::after{
  content:""; flex:0 0 auto; width:10px; height:10px;
  transform:rotate(45deg); border-radius:1px;
  background-image:var(--raute-karneol);
  box-shadow:0 0 0 1px var(--gold-schatt),0 0 0 2px var(--gold-mitte);
}
.tempel-titel{
  font-size:clamp(1.55rem,1.1rem + 1.9vw,2.35rem);
  max-width:26ch; margin:0 auto; text-align:center;
  color:var(--papyrus);
  text-shadow:0 2px 0 rgba(0,0,0,.75);
}
.tempel-titel::after{
  content:""; display:block; width:132px; height:2px; margin:1rem auto 0;
  background-image:linear-gradient(90deg,rgba(142,71,22,0),#C67F2E 16%,#FFF9E4 50%,#C67F2E 84%,rgba(142,71,22,0));
}
.tempel-tat{ margin-top:2.2rem; text-align:center; }

/* --------------------------------------------------------------------------
   Schatzplatte — die Zahlen des Hauptexponats auf getriebenem Grund
   -------------------------------------------------------------------------- */
.schatzplatte{
  position:relative;
  margin:2.3rem auto 0; max-width:46rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.1rem 2.4rem;
  padding:2.4rem 1.4rem 2rem;
  border-radius:4px;
  background-color:#0D1B31;
  background-image:var(--pyramidenfeld),radial-gradient(120% 130% at 50% 0%,#1B3560,#0A1526 72%);
  background-size:26px 26px,auto;
  box-shadow:
    inset 0 0 0 1px rgba(224,184,94,.42),
    inset 0 0 60px rgba(0,0,0,.75),
    0 0 0 5px #1A0C05,
    0 0 0 7px var(--gold-tief),
    0 0 0 8px var(--gold),
    0 0 0 9px var(--gold-schatt),
    0 28px 56px -26px rgba(0,0,0,.95);
}
.schatzplatte::before{
  content:""; position:absolute; left:0; right:0; top:0; height:20px;
  background-image:var(--lotosband),linear-gradient(180deg,rgba(11,26,49,.9),rgba(0,0,0,0));
  background-repeat:repeat-x,no-repeat;
  background-position:center top;
  border-radius:4px 4px 0 0; opacity:.9;
}
.schatzplatte::after{
  content:""; position:absolute; inset:0; border-radius:4px; pointer-events:none;
  background-image:var(--stein-karneol),var(--stein-karneol),var(--stein-karneol),var(--stein-karneol);
  background-repeat:no-repeat; background-size:15px 15px;
  background-position:left 6px top 6px,right 6px top 6px,left 6px bottom 6px,right 6px bottom 6px;
}
.schatzwert{ text-align:center; }
.schatzname{
  display:block;
  font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 1px 0 #000;
}
.schatzzahl{
  display:block; margin-top:.3rem;
  font-family:var(--zier); font-weight:700; line-height:1.02;
  font-size:clamp(2.5rem,1.5rem + 4.6vw,4.1rem);
  letter-spacing:-.02em;
  color:var(--gold-licht);
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .schatzzahl{
    background-image:var(--metall-schrift);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    filter:drop-shadow(0 2px 0 rgba(74,31,12,.9)) drop-shadow(0 5px 14px rgba(0,0,0,.7));
  }
}
.schatzstein{
  width:19px; height:19px; flex:0 0 auto;
  transform:rotate(45deg); border-radius:2px;
  background-image:var(--raute-karneol);
  box-shadow:var(--fassung),0 0 20px -2px rgba(242,217,131,.45);
}
/* --------------------------------------------------------------------------
   Königstext — die Worte des Hauses, als Zitat auf einer eingefassten Tafel
   -------------------------------------------------------------------------- */
.koenigstext{
  position:relative; margin:2.3rem auto 0; max-width:64ch;
  padding:2.1rem 1.5rem 1.7rem;
  border-radius:4px;
  background-color:var(--grund);
  background-image:linear-gradient(170deg,rgba(198,127,46,.14),rgba(0,0,0,0) 44%),linear-gradient(180deg,#2A150C,#180C06);
  box-shadow:
    inset 0 0 0 1px rgba(224,184,94,.3),
    inset 0 0 40px rgba(0,0,0,.6),
    0 0 0 1px var(--gold-schatt),
    0 20px 40px -26px rgba(0,0,0,.9);
}
.koenigstext::before{
  content:""; position:absolute; left:0; right:0; top:0; height:14px;
  background-image:var(--lotosband);
  background-repeat:repeat-x; background-position:center top;
  opacity:.8; border-radius:4px 4px 0 0;
}
.koenigszeile{ margin-bottom:1rem; color:var(--papyrus-matt); }
.koenigszeile:first-of-type::first-letter{
  float:left; margin:.16em .5rem 0 0;
  font-family:var(--zier); font-size:3.15em; line-height:.78; font-weight:700;
  color:var(--gold-licht);
  text-shadow:0 2px 0 rgba(74,31,12,.95),0 4px 10px rgba(0,0,0,.7);
}
.koenigsruf{
  position:relative; margin-top:1.6rem; padding:1.05rem 0 0;
  font-family:var(--zier); font-size:1.4rem; font-weight:700; line-height:1.3;
  color:var(--gold-licht);
  text-shadow:0 2px 0 rgba(74,31,12,.9);
}
.koenigsruf::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background-image:linear-gradient(90deg,#8E4716,#E0B85E 22%,#FFF9E4 48%,#C67F2E 78%,rgba(142,71,22,0));
}
/* Quellenzeile: kleine, weit gesperrte Marke unter dem Zitat */
.koenigsquelle{
  margin-top:.85rem;
  font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 1px 0 #000;
}

/* --------------------------------------------------------------------------
   Bestand
   -------------------------------------------------------------------------- */
.bestandsraster{ margin-top:2.1rem; display:grid; gap:2.2rem; align-items:start; }
.dienstliste{ margin:0; }
.dienstposten{
  position:relative;
  padding:1.05rem 0 1.05rem 2.2rem;
  border-top:1px solid rgba(224,184,94,.2);
}
.dienstposten:first-child{ border-top:0; padding-top:.2rem; }
.dienstposten::before{
  content:""; position:absolute; left:0; top:1.3rem;
  width:15px; height:15px;
  transform:rotate(45deg); border-radius:2px;
  background-image:var(--raute-lapis);
  box-shadow:var(--fassung);
}
.dienstposten:first-child::before{ top:.45rem; }
.dienstname{ font-family:var(--zier); font-size:1.1rem; font-weight:700; color:var(--papyrus); }
.diensttext{ margin:.35rem 0 0; max-width:56ch; font-size:.96rem; color:var(--papyrus-matt); }
.bestandstafel{ align-self:start; }

/* --------------------------------------------------------------------------
   Auskunft
   -------------------------------------------------------------------------- */
.auskunftfeld{ margin-top:2.1rem; display:grid; gap:1.5rem; }
.auskunftstueck{
  position:relative;
  padding:.15rem 0 .15rem 1.35rem;
}
.auskunftstueck::before{
  content:""; position:absolute; left:0; top:.25rem; bottom:.25rem; width:3px;
  border-radius:2px;
  background-image:linear-gradient(180deg,#FFF9E4,#E0B85E 22%,#C67F2E 60%,#8E4716);
}
.auskunftfrage{ font-size:1.06rem; color:var(--gold-licht); }
.auskunftwort{ margin-top:.42rem; font-size:.95rem; max-width:58ch; color:var(--papyrus-matt); }

/* --------------------------------------------------------------------------
   Abschied
   -------------------------------------------------------------------------- */
.abschied{
  position:relative; overflow:hidden;
  margin-top:1rem;
  padding:3rem 0;
  background-color:#1A0A06;
  background-image:
    var(--rautenfeld),
    radial-gradient(70% 90% at 50% 0%,rgba(126,32,17,.42),rgba(0,0,0,0) 70%),
    linear-gradient(180deg,#25100A,#120704);
  border-top:1px solid var(--gold-schatt);
  box-shadow:inset 0 1px 0 rgba(255,249,228,.14),inset 0 3px 0 -1px var(--gold-tief);
}
.abschied-raster{
  position:relative;
  max-width:var(--breite); margin:0 auto; padding:0 var(--rand);
  display:grid; gap:2.2rem; align-items:center;
}
.abschied-ruf{
  font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.62rem;
  text-shadow:0 1px 0 #000;
}
.abschied-titel{
  font-size:clamp(1.65rem,1.15rem + 2vw,2.5rem);
  color:var(--papyrus);
  text-shadow:0 2px 0 rgba(0,0,0,.8);
}
.abschied-lead{ margin-top:.9rem; max-width:46ch; color:var(--papyrus-matt); }

/* --------------------------------------------------------------------------
   Sockelbau
   -------------------------------------------------------------------------- */
.sockelbau{
  position:relative;
  background-color:#0E0603;
  background-image:var(--rautenfeld),linear-gradient(180deg,#170C05,#0C0502);
  border-top:1px solid var(--gold-tief);
  box-shadow:inset 0 1px 0 rgba(255,249,228,.16),inset 0 4px 0 -2px rgba(198,127,46,.55);
  padding:2.6rem 0 2rem;
  font-size:.86rem;
}
.sockel-innen{ max-width:var(--breite); margin:0 auto; padding:0 var(--rand); }
.sockel-spalten{
  display:grid; gap:1.7rem;
  padding-bottom:1.7rem; border-bottom:1px solid rgba(224,184,94,.2);
}
.sockel-bild{ display:block; width:172px; height:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.sockel-marke .sockel-text{ margin-top:.85rem; max-width:40ch; }
.sockel-text{ margin-top:.9rem; max-width:88ch; color:var(--papyrus-still); }
.sockel-wege{ display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; align-content:start; }
.sockel-wege a{
  color:var(--gold-licht); text-decoration:none;
  font-size:.8rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  padding-bottom:2px; border-bottom:1px solid rgba(224,184,94,.4);
  transition:color .16s ease,border-color .16s ease;
}
.sockel-wege a:hover{ color:var(--gold-glanz); border-bottom-color:var(--gold-glanz); }
.sockel-recht{ padding-top:1.5rem; }
.sockel-alter{ color:var(--papyrus); font-weight:600; }
.sockel-alterzeichen{
  display:inline-block; margin-right:.5rem;
  padding:.16rem .5rem; border-radius:3px;
  background-image:var(--metall-knopf);
  color:#170B04; font-weight:800; font-size:.76rem; letter-spacing:.04em;
  box-shadow:inset 0 1px 0 rgba(255,252,240,.9),0 0 0 1px var(--gold-schatt);
}
.sockel-schluss{
  margin-top:1.7rem; padding-top:1.15rem;
  border-top:1px solid rgba(224,184,94,.2);
  font-size:.78rem; color:#9C8A6C;
}

/* --------------------------------------------------------------------------
   Breiten
   -------------------------------------------------------------------------- */
/* Schmale Geräte: Kopf einzeilig halten, damit das Eingabefeld
   im ersten Bildausschnitt bleibt. */
@media (max-width:29.99rem){
  .hausmarke-wort{ display:none; }
  .hausmarke-bild{ width:126px; }
  .stirnband-innen{ padding:.6rem var(--rand); gap:.6rem; }
  .stirnband-rechts{ gap:.7rem; }
  .weihe{ padding-top:1.05rem; }
  .sonnenscheibe{ width:min(15rem,76%); margin-bottom:.35rem; }
  .weihe-lead{ margin-top:.8rem; font-size:1.02rem; }
  .einschreibung{ margin-top:1.2rem; }
}

@media (min-width:34rem){
  .schatzplatte{ gap:1.1rem 3.4rem; }
}

@media (min-width:48rem){
  :root{ --rand:1.6rem; }
  .tempel{ padding:3.6rem 0; }
  .abschied{ padding:4.2rem 0; }
  .weihe{ padding:2.2rem 0 2.4rem; }
  .auskunftfeld{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.7rem 2.6rem; }
  .sockel-spalten{ grid-template-columns:minmax(0,1fr) auto; gap:2.6rem; }
  .sockel-wege{ justify-content:flex-end; }
  .koenigstext{ padding:2.4rem 2.2rem 2rem; }
  .schatzplatte{ padding:2.4rem 2rem; }
}

@media (min-width:64rem){
  .weihe-raster{ grid-template-columns:minmax(0,1fr) 30rem; align-items:center; gap:3rem; }
  .bestandsraster{ grid-template-columns:minmax(0,1fr) 26rem; gap:3rem; }
  .abschied-raster{ grid-template-columns:minmax(0,1fr) 30rem; gap:3rem; }
  .goldrahmen{ padding:.78rem; }
  /* Pilaster: zwei goldene Kanten fassen den ganzen Innenraum ein */
  .tempel-innen,.weihe-raster,.abschied-raster{
    position:relative; padding-left:2.6rem; padding-right:2.6rem;
  }
  .tempel-innen::before,.tempel-innen::after,
  .weihe-raster::before,.weihe-raster::after,
  .abschied-raster::before,.abschied-raster::after{
    content:""; position:absolute; top:.2rem; bottom:.2rem; width:2px;
    background-image:linear-gradient(180deg,rgba(142,71,22,0),#8E4716 12%,#E0B85E 46%,#C67F2E 70%,rgba(142,71,22,0));
  }
  .tempel-innen::before,.weihe-raster::before,.abschied-raster::before{ left:0; }
  .tempel-innen::after,.weihe-raster::after,.abschied-raster::after{ right:0; }
}

/* --------------------------------------------------------------------------
   Bewegung — nur transform und opacity, nichts, was Layout verschiebt
   -------------------------------------------------------------------------- */
@keyframes glanzzug{
  0%,68%   { transform:translate3d(-200%,0,0) rotate(16deg); }
  100%     { transform:translate3d(560%,0,0) rotate(16deg); }
}
@keyframes sonnenglut{
  0%,100%{ opacity:.1; transform:scale(1); }
  50%    { opacity:.34; transform:scale(1.07); }
}
@keyframes aufgang{
  from{ opacity:0; transform:translateY(28px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes sonnenlauf{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:no-preference){
  .goldknopf::after{ animation:glanzzug 6s ease-in-out infinite; }
  .scheibenglut{ transform-origin:118px 31px; animation:sonnenglut 7.5s ease-in-out infinite; }
  .weihe::after{ transform-origin:24% 30%; animation:sonnenlauf 190s linear infinite; }
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .aufgang{
      animation:aufgang linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 12%;
    }
  }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.001ms !important;
  }
}