@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Cinzel+Decorative:wght@400;700&family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Uncial+Antiqua&display=swap');

:root {
  --gold:#9c7a24; --gold-dim:#7a5f28; --gold-lt:#c9a84c;
  --ink:#1a140c; --ink-dim:#2e2618; --ink-faint:#463a26;
  --bg:#faf6ee; --card:#ffffff;
  --border:rgba(122,95,40,.24);
  --sang:#3f6bb0; --chol:#b04e22; --mel:#4f6b52; --phleg:#2f7690;
  --mercury:#6f4fa0;
  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cdefs%3E%3Cpattern id='t' width='16' height='16' patternUnits='userSpaceOnUse'%3E%3Crect width='16' height='16' fill='%23f2e6c8'/%3E%3Cpath d='M8 1L15 8L8 15L1 8Z' fill='none' stroke='%232f6ea3' stroke-width='1.4'/%3E%3Ccircle cx='8' cy='8' r='2.3' fill='%23c9a227'/%3E%3Cpath d='M1 1L4 1M1 1L1 4' stroke='%23b04e22' stroke-width='1.2'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='48' height='48' fill='url(%23t)'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:'IM Fell English',serif;font-size:17px;font-weight:600;min-height:100vh;overflow-x:hidden;}
body.home{background-image:linear-gradient(rgba(250,246,238,.93),rgba(250,246,238,.94)),url('images/geschenke-hero.jpg');background-attachment:fixed;background-size:cover;background-position:center;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:
 radial-gradient(1px 1px at 8% 12%,rgba(255,255,200,.5) 0%,transparent 100%),
 radial-gradient(1.5px 1.5px at 38% 8%,rgba(255,255,200,.6) 0%,transparent 100%),
 radial-gradient(1px 1px at 68% 22%,rgba(255,255,200,.4) 0%,transparent 100%),
 radial-gradient(1.5px 1.5px at 79% 68%,rgba(255,255,200,.5) 0%,transparent 100%),
 radial-gradient(1px 1px at 13% 72%,rgba(255,255,200,.4) 0%,transparent 100%),
 radial-gradient(1.5px 1.5px at 58% 91%,rgba(255,255,200,.5) 0%,transparent 100%),
 radial-gradient(1px 1px at 22% 38%,rgba(255,255,200,.3) 0%,transparent 100%),
 radial-gradient(1px 1px at 91% 43%,rgba(255,255,200,.3) 0%,transparent 100%),
 radial-gradient(1px 1px at 73% 4%,rgba(255,255,200,.4) 0%,transparent 100%),
 radial-gradient(1px 1px at 4% 48%,rgba(255,255,200,.38) 0%,transparent 100%);}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.72) 100%);}
.wrap{position:relative;z-index:1;}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(250,246,238,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);
 display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.5rem;backdrop-filter:blur(6px);flex-wrap:wrap;gap:.5rem;}
.nav-logo{font-family:'Cinzel Decorative',serif;font-size:clamp(.85rem,2vw,1.15rem);color:var(--gold);letter-spacing:.06em;text-decoration:none;}
.nav-logo span{font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.32em;color:var(--gold-dim);display:block;text-transform:uppercase;}
.nav-back{font-family:'Cinzel',serif;font-size:clamp(.68rem,1.8vw,.85rem);letter-spacing:.06em;}
.nav-back:hover{color:var(--gold-lt);}
.nav-links{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;}
.nav-links a{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:var(--gold);}
.cart-btn{position:relative;cursor:pointer;background:none;border:1px solid var(--border);color:var(--gold);
 font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .9rem;transition:all .2s;}
.cart-btn:hover{border-color:var(--gold);background:rgba(201,168,76,.06);}
.lang-switch{display:inline-flex;gap:.3rem;align-items:center;font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.08em;}
.lang-switch .lang-cur{color:var(--gold);padding:.2rem .3rem;}
.lang-switch a{color:var(--gold-dim);text-decoration:none;padding:.2rem .3rem;border:1px solid var(--border);border-radius:5px;transition:all .2s;}
.lang-switch a:hover{color:var(--gold);border-color:var(--gold);}
.cart-count{position:absolute;top:-8px;right:-8px;background:var(--chol);color:#fff;border-radius:50%;width:18px;height:18px;font-size:.62rem;display:flex;align-items:center;justify-content:center;font-family:sans-serif;}

/* NAVIGATION AUF DEM HANDY — seitliche Leiste statt dreizeiliger Kopfzeile.
   Der Knopf sitzt unten links in Daumenreichweite; die Leiste faehrt von
   links ein. Bleibt unter dem Warenkorb (z-index 200), damit sich beide
   nicht ueberdecken. */
.nav-toggle{display:none;}
@media(max-width:720px){
  /* backdrop-filter macht nav zum Bezugsrahmen fuer position:fixed — die
     Leiste haenge sonst am Kopf statt am Bildschirmrand. Daher hier aus. */
  nav{padding:.95rem 1rem 1.1rem;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(250,246,238,.97);}
  /* Knopf oben links, gross genug um sofort aufzufallen. nav bekommt links
     Platz, damit das Logo nicht darunter liegt. */
  nav{padding-left:4.9rem;}
  .nav-toggle{position:fixed;left:.7rem;top:.55rem;z-index:130;display:flex;flex-direction:column;
    justify-content:center;gap:7px;width:3.9rem;height:3.9rem;padding:0 .95rem;cursor:pointer;
    border:2px solid var(--gold);border-radius:50%;background:rgba(250,246,238,.98);
    box-shadow:0 5px 18px rgba(60,45,20,.34);}
  .nav-toggle span{display:block;height:3px;background:var(--gold);border-radius:2px;transition:transform .25s,opacity .25s;}
  body.nav-offen .nav-toggle span:nth-child(1){transform:translateY(10px) rotate(45deg);}
  body.nav-offen .nav-toggle span:nth-child(2){opacity:0;}
  body.nav-offen .nav-toggle span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}
  .nav-links{position:fixed;left:0;top:0;z-index:120;width:min(76vw,290px);max-height:100vh;
    overflow-y:auto;flex-direction:column;align-items:flex-start;gap:1.15rem;
    padding:5.2rem 1.4rem 2rem;background:rgba(250,246,238,.985);
    border-right:1px solid var(--border);
    box-shadow:8px 0 30px rgba(60,45,20,.26);
    transform:translateX(-102%);transition:transform .3s ease;}
  body.nav-offen .nav-links{transform:none;}
  .nav-links a{font-size:.78rem;letter-spacing:.16em;}
  .cart-btn{width:100%;text-align:left;font-size:.72rem;padding:.55rem .9rem;}
  /* Sprachwahl gross genug zum Antippen — vorher war sie kaum zu treffen */
  .lang-switch{gap:.5rem;font-size:.78rem;}
  .lang-switch a,.lang-switch .lang-cur{padding:.5rem .8rem;min-width:2.9rem;text-align:center;}
}
@media(prefers-reduced-motion:reduce){.nav-links{transition:none;}}

/* HERO */
.hero{text-align:center;padding:3.2rem 1.5rem 1.8rem;}
.hero-orna{font-family:'Cinzel',serif;font-size:.64rem;letter-spacing:.5em;color:var(--gold-dim);text-transform:uppercase;margin-bottom:1.1rem;}
/* HERO-FOTO (Platzhalter, blendet echtes Bild ein sobald vorhanden) */
.hero-photo{position:relative;max-width:960px;margin:2rem auto 0;aspect-ratio:16/7;overflow:hidden;border:1px solid var(--border);background:linear-gradient(135deg,#1c1712,#26201a);}
.hero-photo-img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-photo-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--gold-dim);}
.hero-photo.noimg .hero-photo-img{display:none;}
.hero-photo.noimg .hero-photo-ph{display:flex;}
.hero-photo-gl{font-size:2.4rem;opacity:.5;}
.hero-photo-tx{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;opacity:.6;}
h1{font-family:'Cinzel Decorative',serif;font-size:clamp(1.8rem,5.2vw,3.8rem);color:var(--gold);text-shadow:0 0 45px rgba(201,168,76,.3);line-height:1.08;margin-bottom:.35rem;}
.hero-sub{font-family:'Cinzel Decorative',serif;font-size:clamp(1.1rem,3.4vw,1.9rem);color:var(--gold-dim);letter-spacing:.04em;text-transform:none;margin-bottom:1.4rem;line-height:1.25;}
/* "TEMPERAMENT" ist das laengste Wort und bestimmt die moegliche Groesse:
   es misst rund das 8,4-fache der Schriftgroesse. Statt fester Stufen daher
   direkt aus der verfuegbaren Breite gerechnet (abzueglich Rand und
   Scrollbalken), nach oben auf 8rem begrenzt. So wird die Zeile so gross
   wie moeglich, ohne je ueber den Rand zu laufen. */
.hero h1{font-size:clamp(1.05rem,2.6vw,1.9rem);letter-spacing:.16em;margin-bottom:.3rem;}
/* Reihenfolge im Kopf: Geschenkkoerbe, Unterzeile, dann der Markenname */
/* Die Aussage traegt jetzt die Groesse, der Markenname steht klein darunter.
   Teiler 11 statt 8,7, weil "Geschenkkoerbe," laenger ist als "TEMPERAMENT". */
.hero-kicker{font-family:'Cinzel Decorative',serif;font-size:min(8rem,calc((100vw - 4rem) / 11));color:var(--gold);letter-spacing:.03em;line-height:1.12;margin:0 auto .3rem;text-shadow:0 0 45px rgba(201,168,76,.3);}
.hero .hero-sub{font-family:'Cormorant Garamond',serif;font-size:clamp(.95rem,1.9vw,1.25rem);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;}
.hdiv{width:280px;height:1px;background:linear-gradient(to right,transparent,var(--gold),transparent);margin:1.2rem auto;position:relative;}
.hdiv::before{content:'✦';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--gold);background:var(--bg);padding:0 .45rem;font-size:.62rem;}
.hero-text{max-width:640px;margin:0 auto 1.5rem;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.02rem;color:var(--ink-dim);line-height:1.78;}
.cta{display:inline-block;font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:.72rem 2.1rem;text-decoration:none;transition:all .25s;background:rgba(201,168,76,.04);}
.cta:hover{background:rgba(201,168,76,.14);box-shadow:0 0 25px rgba(201,168,76,.2);}

/* ANLASS-BAND */
.occasions{display:flex;justify-content:center;gap:2.2rem;flex-wrap:wrap;padding:1.4rem 1.5rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);max-width:860px;margin:1.8rem auto 0;}
.occ{text-align:center;}
.occ-icon{font-size:1.5rem;margin-bottom:.3rem;}
.occ-name{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.occ-sub{font-family:'IM Fell English',serif;font-style:italic;font-size:.68rem;color:var(--ink-faint);}

section{max-width:1120px;margin:0 auto;padding:2.8rem 1.5rem;}
.sec-label{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-dim);text-align:center;margin-bottom:.45rem;}
.sec-title{font-family:'Cinzel Decorative',serif;font-size:clamp(1.15rem,2.9vw,1.9rem);color:var(--gold);text-align:center;margin-bottom:1.7rem;}

/* CALC */
/* Kalkulator ueber die volle Breite — das Seitenfoto ist entfallen.
   952px = Innenbreite des Korb-Karussells darueber (1000px minus 2x1.5rem
   Innenabstand von .hero-top-row), damit beide buendig stehen. */
.calc-layout{max-width:952px;margin:0 auto;}

/* ===== PAPYRUSROLLE =====
   Der Kalkulator entrollt sich beim Heranscrollen. Stab und Knäufe sind
   reine CSS-Verläufe, also aufloesungsunabhaengig — auf Retina- wie auf
   4K-Schirmen gestochen scharf, ohne eine einzige Bilddatei.
   Das Aufrollen laeuft ueber grid-template-rows 0fr -> 1fr; damit
   animiert die echte Inhaltshoehe, ohne sie in JS messen zu muessen. */
.papyrus{position:relative;}
.papyrus-rod{display:block;position:relative;height:26px;margin:0 14px;border-radius:13px;z-index:2;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 2px,rgba(255,255,255,.05) 2px 6px),
    linear-gradient(180deg,#a5813f 0%,#7d5f2c 28%,#4a3617 62%,#7a5d2b 88%,#5b4520 100%);
  box-shadow:0 4px 14px rgba(40,28,10,.42),inset 0 1px 0 rgba(255,231,176,.35);}
.papyrus-rod::before,.papyrus-rod::after{content:'';position:absolute;top:50%;width:22px;height:36px;
  transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#c9a227 0%,#8a6a34 45%,#4a3617 100%);
  box-shadow:0 3px 10px rgba(40,28,10,.45);}
.papyrus-rod::before{left:-14px;}
.papyrus-rod::after{right:-14px;}
.papyrus-rod-top{margin-bottom:-6px;}
.papyrus-rod-bottom{margin-top:-6px;}
/* Die Bahn: standardmaessig offen, damit der Kalkulator auch ohne
   JavaScript sichtbar bleibt. Ein winziges Skript direkt hinter der Rolle
   setzt .rolled noch vor dem ersten Zeichnen; die Hoehe wird beim Entrollen
   in JS gemessen und animiert (ein fr-Track loeste hier zu 0 auf). */
.papyrus-sheet{overflow:hidden;transition:height 1.9s cubic-bezier(.22,.61,.36,1);}
.papyrus.rolled .papyrus-sheet{height:0;}
.papyrus-sheet-inner{position:relative;}
/* Schattenkante direkt unter dem oberen Stab, wie bei aufgerolltem Papier */
.papyrus-sheet-inner::before{content:'';position:absolute;left:0;right:0;top:0;height:26px;z-index:3;
  pointer-events:none;background:linear-gradient(180deg,rgba(40,28,10,.34),rgba(40,28,10,0));}
/* Bewusst keine zusaetzliche Einblendung des Inhalts: Eine unterbrochene
   oder gedrosselte Opazitaets-Transition kann den Kalkulator unsichtbar
   stehen lassen. Das Entrollen allein traegt den Effekt. */
@media(prefers-reduced-motion:reduce){.papyrus-sheet{transition:none;}}
.calc-box{position:relative;border:15px solid #c9a227;border-image:var(--tile) 16 round;border-radius:6px;
  background:
    radial-gradient(circle at 18% 12%,rgba(180,150,90,.12),transparent 42%),
    radial-gradient(circle at 88% 85%,rgba(150,120,70,.12),transparent 46%),
    linear-gradient(#faf3e2,#f1e7cd);
  padding:2rem 1.9rem;
  box-shadow:inset 0 0 70px rgba(150,120,60,.10),0 16px 48px rgba(60,45,20,.16);}
.occ-side{flex:none;flex-direction:column;align-items:center;gap:.55rem;max-width:none;margin:0;padding:1.3rem 1.2rem;justify-content:center;text-align:center;border:1px solid var(--border);border-radius:14px;background-image:linear-gradient(rgba(255,253,248,.82),rgba(255,253,248,.82)),url('images/anlaesse-bg.jpg');background-size:cover;background-position:center;height:100%;box-sizing:border-box;}
.occ-side-title{font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.45rem;text-align:center;}
.occ-side .occ{display:flex;align-items:center;justify-content:center;gap:.6rem;text-align:center;font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:600;color:var(--ink);}
.occ-side .occ .occ-icon{font-size:1.35rem;}
.occ-side .occ .occ-icon{font-size:1.1rem;margin:0;}
.calc-title{font-family:'Uncial Antiqua',serif;font-size:1.35rem;color:var(--gold);margin-bottom:.3rem;text-align:center;letter-spacing:.03em;}
.meander{display:block;margin:.35rem auto 1.35rem;max-width:75%;opacity:.85;}
.calc-sub{font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim);text-align:center;margin-bottom:1.3rem;}
/* minmax(0,1fr) statt 1fr: Rasterelemente duerfen sonst nicht unter ihre
   Inhaltsbreite schrumpfen — die langen Ortsnamen im Auswahlfeld sprengten
   dadurch auf dem Handy den Rahmen nach rechts. */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}
.fgroup{display:flex;flex-direction:column;gap:.26rem;min-width:0;}
.fgroup.full{grid-column:1/-1;}
.fgroup label{font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim);}
.fgroup input,.fgroup select{width:100%;max-width:100%;background:#fffdf8;border:1px solid var(--border);color:var(--ink);font-family:'Cormorant Garamond',serif;font-size:.95rem;padding:.52rem .68rem;outline:none;transition:border .2s;color-scheme:light;}
.fgroup input:focus,.fgroup select:focus{border-color:var(--gold);}
.calc-go{width:100%;margin-top:1.4rem;font-family:'Cinzel',serif;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:#fffdf8;background:var(--gold);border:none;border-radius:10px;padding:1.3rem 1rem;cursor:pointer;transition:all .25s;box-shadow:0 6px 20px rgba(60,45,20,.2);}
.calc-go:hover{background:var(--gold-lt);transform:translateY(-2px);}
.calc-go:hover{background:var(--gold-lt);box-shadow:0 0 25px rgba(201,168,76,.3);}
.coord-note{font-family:'IM Fell English',serif;font-style:italic;font-size:.68rem;color:var(--ink-faint);grid-column:1/-1;}
#result{display:none;margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1.3rem;}
.factor-table{width:100%;border-collapse:collapse;margin-bottom:1.1rem;}
.factor-table td{padding:.32rem .42rem;font-family:'Cormorant Garamond',serif;font-size:.84rem;color:var(--ink-dim);border-bottom:1px solid rgba(201,168,76,.07);vertical-align:middle;}
.factor-table td.fv{color:var(--ink);}
.factor-table td.fp{text-align:right;white-space:nowrap;}
.factor-table td.fp span{font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.06em;padding:.1rem .32rem;border:1px solid;}
.c-sang{color:var(--sang);border-color:var(--sang)!important;}
.c-chol{color:var(--chol);border-color:var(--chol)!important;}
.c-mel{color:var(--mel);border-color:var(--mel)!important;}
.c-phleg{color:var(--phleg);border-color:var(--phleg)!important;}
.rbars{display:flex;flex-direction:column;gap:.42rem;margin:1rem 0;}
.rbar{display:flex;align-items:center;gap:.55rem;}
.rbar-l{font-family:'Cinzel',serif;font-size:.57rem;letter-spacing:.08em;text-transform:uppercase;width:5.1rem;text-align:right;flex-shrink:0;}
.rbar-t{flex:1;height:13px;background:rgba(60,45,20,.06);border:1px solid rgba(60,45,20,.12);overflow:hidden;}
.rbar-f{height:100%;transition:width .9s ease;}
.rbar-p{font-family:'Cinzel',serif;font-size:.6rem;width:2.4rem;flex-shrink:0;}
.analyse-title{font-family:'Cinzel Decorative',serif;font-size:1.2rem;color:var(--gold);text-align:center;margin-bottom:.15rem;}
.analyse-sub{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dim);text-align:center;margin-bottom:1.1rem;}
.verdict{text-align:center;margin-top:1rem;padding:.9rem;border:1px solid var(--border);background:rgba(201,168,76,.03);}
.deutung{max-width:660px;margin:1.2rem auto 0;padding:1.15rem 1.35rem;border:1px solid var(--border);border-radius:12px;background:rgba(201,168,76,.04);font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--ink);line-height:1.72;text-align:left;}
.deutung-title{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:.7rem;}
.deutung p{margin-bottom:.65rem;}
.deutung p:last-child{margin-bottom:0;}
.verdict-main{font-family:'Cinzel Decorative',serif;font-size:clamp(.92rem,1.85vw,1.28rem);margin-bottom:.22rem;}
.verdict-sub{font-family:'IM Fell English',serif;font-style:italic;font-size:.78rem;color:var(--ink-dim);}

/* LORE */
.lore-panel{display:flex;flex-direction:column;gap:1.2rem;}
/* Lehrmeister als Swipe-Karussell: eine grosse Karte statt vier schmaler Spalten */
.lore-carousel{position:relative;overflow:hidden;max-width:760px;margin:0 auto;}
.lore-panel-page{display:flex;flex-direction:row;gap:0;max-width:none;margin:0;}
.lore-carousel .lore-card{flex:0 0 100%;box-sizing:border-box;padding:2rem 4.6rem 2.8rem;}
.lore-carousel .lore-portrait{width:180px;height:180px;}
.lore-carousel .lore-title{font-size:.86rem;letter-spacing:.28em;}
.lore-carousel .lore-sub{font-size:1rem;}
.lore-carousel .lore-text{font-size:1.12rem;line-height:1.75;}
/* Grundgestalt fuer Pfeile und Punkte — gilt fuer alle Karussells.
   Das Korb-Karussell auf der Startseite ueberschreibt sie weiter unten,
   weil es auf dunklen Fotos liegt. */
.swipe-nav{position:absolute;top:50%;transform:translateY(-50%);width:3.4rem;height:3.4rem;border:2px solid var(--gold);border-radius:50%;background:rgba(255,253,248,.93);color:var(--gold);font-size:2.4rem;line-height:1;padding-bottom:.18em;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 4px 16px rgba(60,45,20,.28);transition:background .2s,transform .2s;}
.swipe-nav:hover{background:#fffdf8;transform:translateY(-50%) scale(1.08);}
.swipe-prev{left:.5rem;}
.swipe-next{right:.5rem;}
.lore-carousel .swipe-prev{left:.4rem;}
.lore-carousel .swipe-next{right:.4rem;}
.swipe-dots{position:absolute;left:0;right:0;bottom:.7rem;display:flex;justify-content:center;gap:.5rem;z-index:2;}
.swipe-dots button{width:.6rem;height:.6rem;padding:0;border:1px solid var(--gold-dim);border-radius:50%;background:transparent;cursor:pointer;}
.swipe-dots button[aria-current="true"]{background:var(--gold);}
@media(max-width:560px){.lore-carousel .lore-card{padding:1.2rem 3.7rem 2.4rem;}
 .lore-carousel .lore-portrait{width:110px;height:110px;}
 /* Kleiner gesetzt, damit die Karte auf dem Handy nicht zu hoch wird */
 .lore-carousel .lore-title{font-size:.72rem;letter-spacing:.2em;}
 .lore-carousel .lore-sub{font-size:.86rem;}
 .lore-carousel .lore-text{font-size:.86rem;line-height:1.62;}
 .swipe-nav{width:2.7rem;height:2.7rem;font-size:1.9rem;}}
.lore-text a{color:var(--gold);text-decoration:underline;}
/* GALEN-AUSZUG */
.galen-excerpt{max-width:640px;margin:2.2rem auto 0;border:1px solid var(--gold-dim);border-radius:12px;background:#fffdf8;padding:1.4rem 1.6rem;text-align:center;}
.galen-excerpt-title{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;}
.galen-excerpt-text{font-family:'Cormorant Garamond',serif;font-size:.95rem;color:var(--ink);line-height:1.6;margin-bottom:.9rem;}
.galen-excerpt-item{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.6rem;align-items:center;background:rgba(74,138,170,.1);border:1px solid var(--phleg);border-radius:8px;padding:.5rem 1rem;margin-bottom:.9rem;}
.galen-excerpt-food{font-family:'Cinzel Decorative',serif;font-size:1rem;color:#2a2113;}
.galen-excerpt-quality{font-family:'IM Fell English',serif;font-style:italic;font-size:.85rem;color:var(--phleg);}
.galen-excerpt-note{font-family:'IM Fell English',serif;font-style:italic;font-size:.8rem;color:var(--ink-faint);line-height:1.55;}
/* PLANETEN-TEMPERAMENT-LEGENDE */
.planet-legend{display:flex;flex-direction:column;gap:.6rem;max-width:700px;margin:0 auto;}
.planet-row{display:flex;align-items:stretch;gap:.9rem;}
.planet-id{flex:0 0 130px;display:flex;align-items:center;gap:.5rem;font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.04em;color:var(--ink);border:1px solid var(--gold-dim);border-radius:8px;padding:.55rem .7rem;background:#fffdf8;}
.planet-glyph{font-size:1.3rem;color:var(--gold);line-height:1;}
.planet-strip{flex:1;display:flex;align-items:center;gap:.4rem;font-family:'Cormorant Garamond',serif;font-size:.95rem;color:#fffdf8;padding:.55rem .9rem;border-radius:8px;background:var(--pc);box-shadow:0 3px 12px rgba(60,45,20,.14);}
.planet-strip em{font-style:italic;opacity:.85;font-size:.86rem;}
.planet-strip-dual{background:linear-gradient(to right,var(--pc) 0%,var(--pc) 48%,var(--pc2) 52%,var(--pc2) 100%);}
.planet-strip-mixed{background:linear-gradient(to right,var(--sang) 0%,var(--sang) 25%,var(--chol) 25%,var(--chol) 50%,var(--mel) 50%,var(--mel) 75%,var(--phleg) 75%,var(--phleg) 100%);}
@media(max-width:520px){.planet-row{flex-direction:column;gap:.3rem;}.planet-id{flex:none;}}
/* ROHSTOFF-TABELLE */
.ingredient-box{max-width:760px;margin:0 auto 2.5rem;border:1px solid var(--gold-dim);border-radius:12px;background:#fffdf8;padding:.4rem 1.2rem;overflow-x:auto;}
.ingredient-table{width:100%;border-collapse:collapse;font-family:'Cormorant Garamond',serif;}
.ingredient-table th{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);text-align:left;padding:.7rem .5rem;border-bottom:1px solid var(--gold-dim);}
.ingredient-table th:nth-child(2){text-align:center;}
.ingredient-table td{padding:.5rem;font-size:.95rem;color:var(--ink);border-bottom:1px solid rgba(201,168,76,.12);vertical-align:middle;}
.ingredient-table td:nth-child(2){text-align:center;font-size:1.15rem;color:var(--gold);}
.ing-tag{display:inline-block;font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .5rem;border:1px solid;border-radius:5px;}
.ing-tag-mixed{color:var(--mercury);border-color:var(--mercury);}
.lore-card{border:1px solid var(--border);background:var(--card);padding:1.3rem;}
.lore-fig{display:flex;justify-content:center;margin-bottom:.85rem;}
.lore-portrait{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:top center;border:6px solid #c9a227;border-image:var(--tile) 7 round;box-shadow:0 6px 20px rgba(60,45,20,.2);}
.lore-portrait-engraving{background:#f0e6c8;filter:sepia(.5) contrast(1.05);object-position:center 15%;}
.lore-title{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:.12rem;}
.lore-sub{font-family:'IM Fell English',serif;font-style:italic;font-size:.7rem;color:var(--gold-dim);text-align:center;margin-bottom:.7rem;}
.lore-text{font-family:'Cormorant Garamond',serif;font-size:.9rem;color:var(--ink-dim);line-height:1.7;}
.lore-text em{color:var(--ink);}

/* OPTIONEN / KÖRBE */
#options{display:none;margin-top:2.4rem;}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.3rem;margin-top:1.6rem;}
/* Geschenkkoerbe-Seite: dieselben Karten, aber einzeln und gross zum Wischen.
   Das Raster oben bleibt fuer die Vorschlaege auf der Startseite unveraendert. */
.korb-slider{position:relative;overflow:hidden;max-width:820px;margin:0 auto;}
.korb-slider .opt-grid{display:flex;grid-template-columns:none;gap:0;margin-top:0;}
.korb-slider .opt-card{flex:0 0 100%;box-sizing:border-box;padding:2rem 4.4rem 3rem;}
.korb-slider .swipe-nav{top:28%;}
.korb-slider .opt-photo{margin:-2rem -4.4rem 1.4rem;aspect-ratio:16/9;}
.korb-slider .opt-name{font-size:1.6rem;}
.korb-slider .opt-count{font-size:.72rem;}
.korb-slider .basket-photos{gap:.7rem;margin-top:1.4rem;}
.korb-slider .basket-eg{font-size:.6rem;margin-top:.8rem;}
.korb-slider .opt-own-text{font-size:1.14rem;}
@media(max-width:560px){
 .korb-slider .opt-card{padding:1.4rem 3.2rem 2.8rem;}
 .korb-slider .opt-photo{margin:-1.4rem -3.2rem 1.1rem;}
 .korb-slider .opt-name{font-size:1.25rem;}}
.opt-own{border-style:dashed;}
.opt-own-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f4efe4,#e9e0cc);font-size:2.4rem;color:var(--gold-dim);}
.opt-own-text{flex:1;font-family:'Cormorant Garamond',serif;font-size:1rem;color:var(--ink-dim);line-height:1.6;padding:.3rem 0 .8rem;}
.opt-card{border:1px solid var(--border);background:var(--card);padding:1.5rem 1.3rem;display:flex;flex-direction:column;transition:all .25s;position:relative;}
.opt-clickable{cursor:pointer;}
.opt-clickable:hover{border-color:var(--gold);box-shadow:0 8px 30px rgba(60,45,20,.14);transform:translateY(-3px);}
.opt-photo{margin:-1.5rem -1.3rem 1rem;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--border);}
.opt-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.basket-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:1rem;}
.basket-photos img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#f4efe4;border:1px solid var(--border);padding:.2rem;}
.basket-eg{font-family:'Cinzel',serif;font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);text-align:center;margin-top:.5rem;}
.geschenke-bild{max-width:560px;margin:1.5rem auto 2.5rem;padding:0 1.5rem;text-align:center;}
.geschenke-bild img{width:100%;height:auto;display:block;border:1px solid var(--gold-dim);border-radius:8px;}
.geschenke-bild-cap{font-family:'IM Fell English',serif;font-style:italic;font-size:.88rem;color:var(--ink-faint);margin-top:.7rem;}
.opt-card:hover{border-color:var(--gold-dim);box-shadow:0 8px 30px rgba(0,0,0,.5);}
.opt-card.chosen{border-color:var(--gold);box-shadow:0 0 30px rgba(201,168,76,.18);}
.opt-basket{position:absolute;top:.7rem;right:.8rem;font-size:1.1rem;opacity:.5;}
.opt-fig{display:flex;justify-content:center;margin-bottom:.8rem;}
.opt-name{font-family:'Cinzel Decorative',serif;font-size:1.05rem;color:var(--gold);text-align:center;margin-bottom:.15rem;}
.opt-years{font-family:'Cinzel',serif;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dim);text-align:center;margin-bottom:.7rem;}
.opt-contrib{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.85rem;color:var(--ink-dim);line-height:1.62;margin-bottom:.9rem;text-align:center;}
.opt-count{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:.5rem 0;margin-bottom:.8rem;}
.opt-list{flex:1;font-family:'Cormorant Garamond',serif;font-size:1.08rem;color:var(--ink);line-height:1.65;}
.opt-item{display:flex;align-items:center;justify-content:flex-start;gap:.55rem;padding:.32rem 0;border-bottom:1px solid rgba(201,168,76,.1);}
.opt-item-img{width:30px;height:30px;object-fit:contain;background:#f4efe4;border:1px solid var(--border);border-radius:4px;flex-shrink:0;padding:2px;}
.opt-item span:last-child{font-family:'Cinzel',serif;font-size:.66rem;color:var(--gold-dim);white-space:nowrap;}
.opt-total{display:flex;justify-content:space-between;font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.1em;color:var(--gold);margin:.8rem 0;}
.opt-btns{display:flex;flex-wrap:wrap;gap:.5rem;}
.opt-btns .opt-print{min-width:90px;}
.opt-add{flex:1;font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:#fffdf8;background:var(--gold);border:none;padding:.6rem;cursor:pointer;transition:all .2s;}
.opt-add:hover{background:var(--gold-lt);}
.opt-print{flex:1;font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);background:none;border:1px solid var(--gold-dim);padding:.6rem;cursor:pointer;transition:all .2s;}
.opt-print:hover{border-color:var(--gold);background:rgba(201,168,76,.08);}

/* SHOP */
.shop-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-bottom:1.5rem;}
.fbtn{font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border);background:#fffdf8;color:var(--ink-dim);padding:.6rem 1.35rem;cursor:pointer;transition:all .2s;}
.fbtn:hover,.fbtn.on{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,.07);}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:.9rem;}
.pcard{background:var(--card);border:1px solid var(--border);padding:1rem;position:relative;transition:all .25s;display:flex;flex-direction:column;}
.pcard:hover{transform:translateY(-3px);border-color:var(--gold-dim);box-shadow:0 6px 22px rgba(0,0,0,.5);}
.pstripe{display:flex;gap:1px;height:3px;margin-bottom:.62rem;}
.pseg{height:100%;}
/* PRODUKT-FOTO (Platzhalter, blendet echtes Foto ein sobald vorhanden) */
.pphoto{position:relative;width:calc(100% + 2rem);margin:-1rem -1rem .75rem;aspect-ratio:1/1;overflow:hidden;background:#f4efe4;border-bottom:1px solid var(--border);}
.pphoto.noimg{background:linear-gradient(135deg,#1c1712,#26201a);}
.pphoto-img{width:100%;height:100%;object-fit:contain;display:block;padding:.5rem;}
.pphoto-ph{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:var(--gold-dim);}
.pphoto.noimg .pphoto-img{display:none;}
.pphoto.noimg .pphoto-ph{display:flex;}
.pphoto-gl{font-size:1.6rem;opacity:.55;}
.pphoto-tx{font-family:'Cinzel',serif;font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;opacity:.6;}
.pcorner{position:absolute;top:.38rem;right:.48rem;font-size:.84rem;opacity:.32;}
.pname{font-family:'Cormorant Garamond',serif;font-size:.94rem;color:var(--ink);line-height:1.3;margin-bottom:.28rem;padding-right:1rem;}
.pit{font-family:'IM Fell English',serif;font-style:italic;font-size:.68rem;color:var(--gold-dim);margin-bottom:.3rem;}
.pwhy{font-family:'IM Fell English',serif;font-style:italic;font-size:.72rem;color:var(--ink-faint);line-height:1.44;flex:1;}
.phumor{font-family:'Cinzel',serif;font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.4rem;opacity:.68;}
.pfoot{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem;}
.pprice{font-family:'Cinzel',serif;font-size:.72rem;letter-spacing:.05em;color:var(--gold);}
.addbtn{font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:none;border:1px solid var(--gold-dim);padding:.28rem .65rem;cursor:pointer;transition:all .2s;}
.addbtn:hover{background:rgba(201,168,76,.12);border-color:var(--gold);}

/* CART */
.cart-drawer{position:fixed;top:0;right:-420px;width:min(400px,92vw);height:100vh;background:#fffdf8;border-left:1px solid var(--gold-dim);z-index:200;transition:right .35s ease;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(60,45,20,.18);}
.cart-drawer.open{right:0;}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:1.05rem 1.25rem;border-bottom:1px solid var(--border);}
.cart-head h3{font-family:'Cinzel Decorative',serif;font-size:.92rem;color:var(--gold);}
.cart-close{background:none;border:none;color:var(--ink-dim);font-size:1.3rem;cursor:pointer;}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.25rem;}
.citem{display:flex;justify-content:space-between;align-items:center;gap:.55rem;padding:.55rem 0;border-bottom:1px solid rgba(201,168,76,.08);}
.citem-name{font-family:'Cormorant Garamond',serif;font-size:.86rem;color:var(--ink);flex:1;line-height:1.3;}
.citem-qty{display:flex;align-items:center;gap:.4rem;}
.qbtn{background:none;border:1px solid var(--border);color:var(--gold);width:20px;height:20px;cursor:pointer;font-size:.72rem;line-height:1;}
.citem-price{font-family:'Cinzel',serif;font-size:.66rem;color:var(--gold);white-space:nowrap;}
.cart-foot{padding:1.05rem 1.25rem;border-top:1px solid var(--border);}
.cart-total{display:flex;justify-content:space-between;font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:.1em;color:var(--gold);margin-bottom:.85rem;}
.checkout-btn{width:100%;font-family:'Cinzel',serif;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:#fffdf8;background:var(--gold);border:none;padding:.78rem;cursor:pointer;transition:all .2s;}
.checkout-btn:hover{background:var(--gold-lt);}
.cart-note{font-family:'IM Fell English',serif;font-style:italic;font-size:.65rem;color:var(--ink-faint);margin-top:.55rem;text-align:center;line-height:1.5;}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150;display:none;}
.overlay.on{display:block;}

/* DISCLAIMER + FOOTER */
.disclaimer{max-width:820px;margin:2.4rem auto;border:1px solid rgba(191,90,42,.4);background:rgba(191,90,42,.05);padding:1.35rem 1.7rem;}
.disc-title{font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--chol);margin-bottom:.55rem;text-align:center;}
.disc-text{font-family:'Cormorant Garamond',serif;font-size:.89rem;color:var(--ink-dim);line-height:1.68;text-align:center;font-style:italic;}
footer{text-align:center;padding:2.3rem 1.5rem;border-top:1px solid var(--border);margin-top:2rem;}
.colo{font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.2em;color:var(--ink-faint);text-transform:uppercase;line-height:2.1;}
.footer-hinweis{font-family:'Cinzel',serif;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim);margin-top:.9rem;line-height:1.6;}
.footer-links{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;margin-top:1rem;}
.footer-links a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:1px;}
.footer-links a:hover{color:var(--gold);}
/* LEGAL */
.legal-box{max-width:820px;margin:1.6rem auto;border:1px solid var(--border);background:rgba(201,168,76,.03);padding:1.5rem 1.8rem;}
.legal-title{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;text-align:center;}
.legal-text{font-family:'Cormorant Garamond',serif;font-size:.95rem;color:var(--ink-dim);line-height:1.72;}
.legal-text p{margin:0 0 .85rem;}
.legal-text p:last-child{margin-bottom:0;}
.legal-note{font-style:italic;font-size:.86rem;color:var(--ink-faint);border-top:1px solid var(--border);padding-top:.8rem;margin-top:.4rem;}
.legal-ext{color:var(--ink-dim);font-style:normal;}
.legal-details{max-width:820px;margin:0 auto;text-align:center;}
.legal-toggle{display:inline-block;font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:#fffdf8;border:1px solid var(--gold-dim);border-radius:10px;padding:.62rem 1.5rem;cursor:pointer;list-style:none;transition:all .2s;}
.legal-toggle::-webkit-details-marker{display:none;}
.legal-toggle::marker{content:'';}
.legal-toggle:hover{background:rgba(201,168,76,.08);}
.legal-details[open] .legal-toggle{margin-bottom:1.2rem;}
.legal-details .legal-box{text-align:left;}
/* KONTAKT */
.kontakt-layout{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:900px;margin:1.6rem auto 0;align-items:start;}
@media(max-width:760px){.kontakt-layout{grid-template-columns:1fr;}}
.kontakt-info{font-family:'Cormorant Garamond',serif;font-size:1.06rem;color:var(--ink);line-height:1.7;text-align:left;}
.kontakt-info p{margin-bottom:1.1rem;}
.kontakt-row{display:flex;gap:.7rem;padding:.55rem 0;border-top:1px solid var(--border);}
.kontakt-lbl{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);min-width:118px;padding-top:.2rem;}
.kontakt-info a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold-dim);}
.kontakt-info a:hover{color:var(--gold);}
.kontakt-form{border:1px solid var(--gold-dim);border-radius:20px;background:linear-gradient(#faf3e2,#f1e7cd);padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;text-align:left;}
.kontakt-form textarea{width:100%;background:#fffdf8;border:1px solid var(--border);color:var(--ink);font-family:'Cormorant Garamond',serif;font-size:.95rem;padding:.52rem .68rem;outline:none;resize:vertical;color-scheme:light;}
.kontakt-form textarea:focus{border-color:var(--gold);}
.kontakt-note{font-family:'IM Fell English',serif;font-style:italic;font-size:.78rem;color:var(--ink-faint);text-align:center;margin-top:.3rem;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--gold);color:#fffdf8;font-family:'Cinzel',serif;font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;padding:.62rem 1.35rem;z-index:300;transition:transform .3s;box-shadow:0 4px 20px rgba(0,0,0,.5);}
.toast.show{transform:translateX(-50%) translateY(0);}

/* URKUNDE */
#certificate{display:none;}
.cert-page{background:#f7f0dd;color:#2a2113;max-width:760px;margin:2rem auto;padding:2.4rem 2.6rem;border:14px solid #c9a227;border-image:var(--tile) 16 round;position:relative;font-family:'Cormorant Garamond',serif;}
.cert-inner{border:1px solid #b59a55;padding:1.9rem 2.1rem;position:relative;z-index:1;}
.cert-orna{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.45em;color:#8a6f35;text-transform:uppercase;text-align:center;margin-bottom:.75rem;}
.cert-sub{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.3em;color:#8a6f35;text-transform:uppercase;text-align:center;margin-bottom:1.3rem;}
.cert-occ{font-family:'Cinzel Decorative',serif;font-size:1.7rem;color:#7a5f28;text-align:center;margin:.4rem 0 .9rem;line-height:1.15;}
.cert-div{width:220px;height:1px;background:linear-gradient(to right,transparent,#8a6f35,transparent);margin:.9rem auto;}
.cert-flow{text-align:center;margin:.6rem auto 1.2rem;max-width:90%;}
.cert-name-big{font-family:'Uncial Antiqua',serif;font-size:2.1rem;color:#5a4520;line-height:1.1;margin-bottom:.5rem;}
.cert-birth{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:#4a3c1e;line-height:1.5;}
.cert-astro{font-family:'IM Fell English',serif;font-style:italic;font-size:1rem;color:#6b5a35;margin-top:.35rem;}
/* Elemente-Rad als latentes Wasserzeichen hinter dem Urkundentext */
.cert-bg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:78%;max-width:560px;opacity:.07;pointer-events:none;z-index:0;}
.cert-bg svg{width:100%;height:auto;display:block;}
.cert-name{font-family:'Uncial Antiqua',serif;font-size:clamp(1.5rem,4.6vw,2.3rem);color:#5a4520;line-height:1.15;text-align:center;margin:.2rem 0 1rem;overflow-wrap:break-word;}
/* VIER-ELEMENTE-BAND */
.hero-top-row{max-width:1000px;margin:0 auto 2rem;padding:0 1.5rem;}
.occ-line{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.8rem;margin-bottom:1.1rem;}
.occ-line .occ{display:inline-flex;align-items:center;gap:.45rem;font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:600;color:var(--ink);}
.occ-line .occ .occ-icon{font-size:1.1rem;}
@media(max-width:480px){.occ-line{gap:.45rem 1.1rem;}.occ-line .occ{font-size:1.1rem;}}
.korb-carousel{position:relative;overflow:hidden;border:7px solid #c9a227;border-image:var(--tile) 8 round;border-radius:4px;box-shadow:0 8px 26px rgba(60,45,20,.2);background:#000;}
.swipe-track{transition:transform .45s cubic-bezier(.4,0,.2,1);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;}
.swipe-track.dragging{transition:none;cursor:grabbing;}
.korb-track{display:flex;height:100%;}
.korb-slide{position:relative;flex:0 0 100%;display:block;aspect-ratio:16/9;overflow:hidden;}
@media(max-width:640px){.korb-slide{aspect-ratio:1/1;}}
.korb-slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;}
.korb-carousel .swipe-prev{left:.7rem;}
.korb-carousel .swipe-next{right:.7rem;}
.korb-dots{position:absolute;left:0;right:0;bottom:.7rem;display:flex;justify-content:center;gap:.5rem;}
.korb-dots button{width:.62rem;height:.62rem;padding:0;border:1px solid rgba(255,253,248,.85);border-radius:50%;background:transparent;cursor:pointer;transition:background .2s;}
.korb-dots button[aria-current="true"]{background:#fffdf8;}
.cert-row{display:flex;justify-content:space-between;gap:1.5rem;padding:.32rem 0;border-bottom:1px dotted #c9b788;font-size:.94rem;}
.cert-row .cl{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:#8a6f35;align-self:center;}
.cert-row .cv{color:#2a2113;font-size:1rem;}
.cert-verdict{text-align:center;margin:1.3rem 0;padding:.95rem;border:1px solid #b59a55;background:rgba(138,111,53,.06);}
.cert-verdict-main{font-family:'Cinzel Decorative',serif;font-size:1.22rem;color:#7a5f28;margin-bottom:.22rem;}
.cert-verdict-sub{font-style:italic;font-size:.84rem;color:#6b5a35;}
.cert-bars{margin:.9rem 0;}
.cert-bar{display:flex;align-items:center;gap:.55rem;padding:.16rem 0;}
.cert-bar-l{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;width:6.3rem;text-align:right;color:#6b5a35;}
.cert-bar-t{flex:1;height:11px;background:rgba(138,111,53,.1);border:1px solid #c9b788;}
.cert-bar-f{height:100%;}
.cert-bar-p{font-family:'Cinzel',serif;font-size:.62rem;width:2.5rem;color:#6b5a35;}
.cert-products-title{font-family:'Cinzel Decorative',serif;font-size:1.15rem;letter-spacing:.06em;color:#7a5f28;text-align:center;margin:1.5rem 0 .8rem;}
.cert-prod{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px dotted #c9b788;font-size:1.08rem;color:#2a2113;}
.cert-analyse-h{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#8a6f35;text-align:center;margin:1.3rem 0 .55rem;border-top:1px solid #d8c99a;padding-top:.85rem;}
.cert-korb-block{max-width:30rem;margin:0 auto;text-align:center;}
.cert-korb-block .cert-analyse-h{margin-top:.6rem;}
.cert-korb-block .cert-bars{display:inline-block;width:100%;text-align:left;}
.cert-korb-intro{font-family:'Cormorant Garamond',serif;font-size:.95rem;color:#5a4a28;text-align:center;margin:.15rem auto .7rem;max-width:92%;line-height:1.55;}
body.certwin{background:#e6dcc0;padding:1.6rem 0;}
body.certwin #certificate{display:block !important;}
.certwin-actions{display:flex;gap:.7rem;justify-content:center;margin:1.3rem;}
.certwin-actions button{font-family:'Cinzel',serif;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#fffdf8;background:var(--gold);border:none;border-radius:8px;padding:.62rem 1.5rem;cursor:pointer;}
.certwin-actions button:hover{background:var(--gold-lt);}
.cert-prod span:last-child{font-family:'Cinzel',serif;font-size:.66rem;color:#7a5f28;white-space:nowrap;align-self:center;}
/* Temperament je Produkt: Mischbalken + vorherrschender Humor */
.cert-prod-t{display:flex;align-items:center;gap:.5rem;flex:none;}
.cpt-bar{display:flex;width:3.4rem;height:7px;border:1px solid #c9b788;overflow:hidden;flex:none;}
.cpt-bar i{display:block;height:100%;}
.cpt-n{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;width:6.2rem;text-align:right;}
.cert-total{display:flex;justify-content:space-between;font-family:'Cinzel',serif;font-size:.74rem;letter-spacing:.12em;color:#7a5f28;margin-top:.55rem;padding-top:.5rem;border-top:1px solid #b59a55;}
.cert-foot{font-style:italic;font-size:.7rem;color:#8a7a55;text-align:center;margin-top:1.4rem;line-height:1.6;}
.cert-date{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#8a6f35;text-align:center;margin-top:.9rem;}
.print-actions{max-width:760px;margin:0 auto 2.5rem;display:flex;gap:.7rem;justify-content:center;}
.print-btn{font-family:'Cinzel',serif;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#fffdf8;background:var(--gold);border:none;padding:.75rem 1.8rem;cursor:pointer;}
.print-btn:hover{background:var(--gold-lt);}
.print-close{font-family:'Cinzel',serif;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:none;border:1px solid var(--gold-dim);padding:.75rem 1.8rem;cursor:pointer;}

/* Kompakte Druckmasse. Als Klasse, damit dieselben Werte vor dem Druck
   zum Ausmessen der Hoehe dienen (siehe fitCertToOnePage) und nicht
   zwischen Mess- und Druckzustand auseinanderlaufen koennen.
   Bewusst knapp gehalten: so passt selbst der groesste Korb (14 Produkte)
   ohne Verkleinerung auf eine Seite, und die Verkleinerung bleibt reine
   Rueckversicherung fuer Drucker mit groesseren Raendern. */
.printfit .cert-page{margin:0 auto;box-shadow:none;max-width:100%;padding:.6rem 1.1rem;font-size:.72em;}
.printfit .cert-inner{padding:.75rem .9rem;}
.printfit .cert-bg{opacity:.1;width:66%;}
.printfit .cert-orna{margin-bottom:.35rem;}
.printfit .cert-occ{margin:.2rem 0 .4rem;}
.printfit .cert-flow,.printfit .cert-verdict,.printfit .cert-analyse-h,
.printfit .cert-korb-intro,.printfit .cert-bars,.printfit .cert-products-title{margin-top:.28rem;margin-bottom:.28rem;}
.printfit .cert-analyse-h{padding-top:.28rem;}
.printfit .cert-verdict{padding:.4rem;}
.printfit .cert-name{margin:.1rem 0 .3rem;}
.printfit .cert-korb-intro{font-size:.92em;}
.printfit .cert-bar{padding:.08rem 0;}
.printfit .cert-prod{padding:.05rem 0;font-size:.94em;}
.printfit .cert-prod em{font-size:.72rem;}
.printfit .cpt-bar{height:6px;}
.printfit .cert-foot{font-size:.82em;margin-top:.35rem;line-height:1.35;}
.printfit .cert-date{margin-top:.3rem;}

@media print {
  @page{margin:1.1cm;}
  body{background:#fff;}
  body::before,body::after{display:none;}
  body *{visibility:hidden;}
  #certificate,#certificate *{visibility:visible;}
  #certificate{display:block !important;position:absolute;left:0;top:0;width:100%;}
  .print-actions,.certwin-actions{display:none !important;}
  /* Farbflaechen (Wasserzeichen, Balken) sollen mitgedruckt werden */
  .cert-bg,.cpt-bar i,.cert-bar-f,.cert-bar-t{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  /* Feste Papierbreite: Handy-Browser legen die Seite sonst in
     Bildschirmbreite an und skalieren sie erst danach — daraus werden
     mehrere Seiten. Derselbe Wert dient in fitCertToOnePage zum Messen. */
  #certificate{width:18.6cm;}
  .cert-page{width:18.6cm;max-width:none;break-inside:avoid;page-break-inside:avoid;}
}

/* Handy: Abstaende im Kopfbereich straffen, damit weniger Leerlauf zwischen
   Titel, Anlaessen und Karussell steht. */
@media(max-width:560px){
  .hero{padding:1.4rem 1rem .5rem;}
  /* Unterseiten: weniger Luft zwischen Titel und Inhalt */
  section{padding:1.4rem 1.2rem;}
  .sec-title{margin-bottom:1rem;}
  .hdiv{margin:.55rem auto;width:200px;}
  .hero-top-row{margin-bottom:1rem;}
  .occ-line{gap:.35rem 1rem;margin-bottom:.6rem;}
  .occ-line .occ{font-size:1.05rem;}
  .occ-line .occ .occ-icon{font-size:.95rem;}
  /* Schmalerer Rahmen und weniger Polsterung geben den Feldern mehr Platz */
  .calc-box{border-width:10px;padding:1.3rem 1rem;}
  .calc-title{font-size:1.15rem;}
  /* Karussell so breit wie der Kalkulator: die Zeile hat schon den
     Aussenabstand des Abschnitts, ein zweiter machte es schmaler */
  .hero-top-row{padding:0;}
}

/* Startseite: "Geschenkkoerbe" traegt die Seite und darf gross stehen —
   dieselbe breitenabhaengige Rechnung wie im Kopf der Kalkulatorseite,
   damit das lange Wort auf keinem Schirm ueber den Rand laeuft. */
.home .hero h1{font-size:min(7rem,calc((100vw - 4rem) / 8.9));letter-spacing:.02em;}
/* Zwischenueberschrift linksbuendig statt mittig */
.sec-title-left{text-align:left;}

/* ===== KALKULATOR-KNOPF =====
   Nur der Text, gerahmt vom sizilianischen Majolika-Kachelmuster. Das
   Muster liegt als SVG in --tile vor, ist also vektorbasiert und damit
   auf jedem Bildschirm gestochen scharf — schaerfer als jedes Foto, und
   ohne eine weitere Datei zu laden. */
.cta-kalk{display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
  max-width:100%;text-decoration:none;
  padding:1.5rem 2.4rem;
  border:16px solid #c9a227;border-image:var(--tile) 17 round;
  background:radial-gradient(circle at 22% 18%,rgba(180,150,90,.13),transparent 48%),
             linear-gradient(#faf3e2,#f1e7cd);
  box-shadow:inset 0 0 60px rgba(150,120,60,.12),0 10px 32px rgba(60,45,20,.22);
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1.05rem,3.6vw,1.75rem);line-height:1.2;letter-spacing:.04em;
  color:var(--gold);text-align:center;
  transition:transform .2s,box-shadow .2s;}
.cta-kalk:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 60px rgba(150,120,60,.12),0 16px 42px rgba(60,45,20,.3);}
@media(max-width:560px){.cta-kalk{padding:1.1rem 1.2rem;border-width:12px;}}

/* Seitentitel, die die Seite tragen sollen — gleiche breitenabhaengige
   Rechnung wie auf der Startseite, damit nichts ueber den Rand laeuft.
   Teiler 8,2 fuer das laengste Wort "dahinter" im Zeilenumbruch. */
.hero h1.h1-gross{font-size:min(7rem,calc((100vw - 4rem) / 8.2));letter-spacing:.02em;}

/* Beschreibung auf der Kalkulatorseite: sie ist dort der einzige Fliesstext
   und darf deutlich groesser stehen als der uebliche Zwischentext. */
.hero-text-gross{max-width:720px;font-size:clamp(1.32rem,3.4vw,1.65rem);line-height:1.65;color:var(--ink);}

/* Startseite: der Schriftzug in der Kopfzeile traegt die Seite und steht
   deshalb gross. Ueberschrift und Zwischentitel darunter entfallen dafuer. */
.home .nav-logo{font-size:clamp(1.3rem,5.2vw,2.4rem);line-height:1.1;}
.home .nav-logo span{font-size:clamp(.82rem,2.7vw,1.25rem);letter-spacing:.3em;margin-top:.2rem;}
.home nav{padding-top:.9rem;padding-bottom:.9rem;}
/* Ohne Ueberschrift braucht der Kopfbereich nur noch die Trennlinie */
.hero-schmal{padding-top:.8rem;padding-bottom:0;}
@media(max-width:560px){.hero-schmal{padding-top:.4rem;}}

/* Startseite auf dem Handy: der Schriftzug ist der Titelkopf der Seite und
   steht deshalb gross. Die Leiste laeuft dafuer mit dem Inhalt weg statt
   oben zu kleben — die Navigation bleibt ueber den festen Knopf links oben
   jederzeit erreichbar. Die Breite ist so gerechnet, dass "TEMPERAMENT"
   neben dem Knopf immer Platz hat. */
@media(max-width:720px){
  .home nav{position:static;padding:1.1rem 1rem 1.5rem 5.1rem;border-bottom:none;}
  .home .nav-logo{font-size:min(3.4rem,calc((100vw - 6.4rem) / 8.4));line-height:1.06;}
  .home .nav-logo span{font-size:min(1.35rem,calc((100vw - 6.4rem) / 19));letter-spacing:.3em;margin-top:.35rem;}
  .home .hero-schmal{padding-top:0;}
}

/* Im Korb-Karussell sass der Knopf direkt unter der Bildzeile. Er bekommt
   Abstand nach oben und steht mittig statt ueber die volle Kartenbreite. */
.korb-slider .opt-btns{margin-top:1.5rem;justify-content:center;}
.korb-slider .opt-add{flex:0 1 auto;padding:.85rem 1.8rem;font-size:.66rem;letter-spacing:.16em;}
@media(max-width:560px){
  .korb-slider .opt-btns{margin-top:1.2rem;}
  .korb-slider .opt-add{padding:.8rem 1.2rem;font-size:.6rem;}
}

/* Papyrusrolle als Zeichen im Knopf: zwei Rollstaebe mit der Bahn dazwischen,
   als SVG gezeichnet und damit in jeder Groesse scharf. */
.cta-kalk-ico{flex:none;width:clamp(1.9rem,5.5vw,2.7rem);height:auto;
  fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;}
@media(max-width:560px){.cta-kalk{gap:.6rem;}}

/* Planetenzuordnung unter dem Temperament einer Produktkarte */
.pplanet{display:flex;align-items:center;gap:.4rem;
  font-family:'Cinzel',serif;font-size:.53rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-dim);margin-top:.25rem;}
.pplanet-glyph{font-size:1rem;line-height:1;color:var(--gold);}

/* Unterseiten auf dem Handy: die Zurueck-Zeile war sehr klein. Sie steht nun
   deutlich groesser, bleibt aber unter dem Titelkopf der Startseite. */
@media(max-width:720px){
  .nav-back{font-size:clamp(1rem,3.6vw,1.4rem);letter-spacing:.04em;line-height:1.2;}
}

/* Trinacria-Emblem neben dem Schriftzug. Rund beschnitten, weil im Original
   der Schriftzug "Trinacria Express" unten in die Ecken ragt — die Kreis-
   flaeche selbst ist frei davon. */
/* margin-right:auto haelt das Emblem am Schriftzug; sonst schiebt es
   das space-between der Leiste an den rechten Rand. */
.marken-emblem{flex:none;width:clamp(2.6rem,7vw,4.4rem);height:auto;border-radius:50%;margin-left:.9rem;margin-right:auto;}
@media(max-width:720px){
  /* Schriftzug und Emblem teilen sich eine Zeile: der Schriftzug darf
     schrumpfen (min-width:0), das Emblem behaelt seine Groesse. */
  .home nav{flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:.2rem;}
  .home .nav-logo{min-width:0;flex:0 1 auto;}
  .marken-emblem{width:clamp(2.9rem,12vw,4.4rem);margin-left:.7rem;}
  /* Breitenrechnung beruecksichtigt jetzt auch Emblem und Abstand */
  .home .nav-logo{font-size:min(3.4rem,calc((100vw - 10.6rem) / 8.4));}
  .home .nav-logo span{font-size:min(1.35rem,calc((100vw - 10.6rem) / 19));}
}

/* Rueckmeldung der Ortssuche im Kalkulator */
.ort-hinweis{font-family:'IM Fell English',serif;font-style:italic;font-size:.78rem;
  color:var(--gold-dim);margin:.3rem 0 .5rem;min-height:1.1em;}
.ort-hinweis.warn{color:var(--chol);}
#bplaceSuche{margin-bottom:.1rem;}

/* Trinacria-Emblem im Kopf der Urkunde */
.cert-emblem{display:block;width:64px;height:auto;margin:0 auto .5rem;border-radius:50%;}
.printfit .cert-emblem{width:46px;margin-bottom:.3rem;}
@media print{.cert-emblem{-webkit-print-color-adjust:exact;print-color-adjust:exact;}}