/* ============================================================================
   CANVASORY.DE (STOLZ) — FARBEN OLIV · ENTWURF 05.10.2026 (Claude)
   ----------------------------------------------------------------------------
   Wird als LETZTE Stildatei geladen und legt die Oliv-Farbwelt ueber den
   Unvergessen-Aufbau. Seitenton B #5C5A39 (Empfehlung; A #6F6C47 und
   C #524F32 siehe _entwurf\farbentwurf-oliv.html). Saskia entscheidet.
   Feste Vorgaben (Uebergabe 05.10., Teil 3):
   - Kaufknopf = Champagner-Beige-Glas (das Hellste im Bild)
   - Nebenknoepfe = Olivglas eine Stufe heller als die Seite, feine Goldkante,
     Creme-Schrift; gewaehlter Zustand noch etwas heller mit Goldkante und ✓
   Kasse, Danke-, Upload- und Bewertungsseite sind gesperrt und laden diese
   Datei NICHT.
   ============================================================================ */
:root:root{
  color-scheme: dark;
  --linie:#7E7A52; --leise:#DCD3B8; --oliv:#5C5A39; --creme:#F6EFDF;
  --grund:#5C5A39; --grund-rgb:92,90,57;
  --grund-weich:#524F32;           /* Karten: eine Stufe DUNKLER als die Seite (Ton in Ton) */
  --grund-linie:#7E7A52;
  --text:#F6EFDF;                  /* 6,16:1 auf --grund */
  --text-leise:#DCD3B8;            /* 4,72:1 */
  --text-gedaempft:#D6CFB2;        /* KI-Hinweis auf --fuss-grund */
  --gold:#C9A45C; --gold-tief:#D9B97C; --gold-dunkel:#EDD49A;   /* Kleinzeilen 4,87:1 */
  --fuss-grund:#4A4830;
  --zier:#B5AF84; --zier-dunkel:#CFC9A6;
  /* eigene Namen fuer diese Datei */
  --s-neben1:#77744C; --s-neben2:#66633F;
  --s-wahl1:#77744C;  --s-wahl2:#646140;
  --s-karte:rgba(246,239,223,.07);
  --s-wand:#2B2918; --s-wand-weich:rgba(22,20,8,.62);
}
html,body{background:var(--grund) !important;color:var(--text)}

/* ---------- Kaufknopf: Champagner-Beige-Glas ---------- */
.knopf--gold,a.knopf--gold,button.knopf--gold,
body[data-seite="gestalten"] .knopf,.mat .knopf{
  color:#3E3320 !important;border:1px solid #B8955A !important;border-radius:14px;font-weight:600;
  background:linear-gradient(rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.07) 100%),
             linear-gradient(135deg,#FCF3DF 0%,#EFD8AA 52%,#D9B97C 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 4px rgba(110,80,30,.24),0 4px 10px rgba(20,18,6,.35) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45) !important;
}
.knopf--gold:hover,body[data-seite="gestalten"] .knopf:hover{filter:brightness(1.04)}

/* ---------- Nebenknoepfe: Olivglas mit feiner Goldkante ---------- */
.erinnern__knopf,
.bew__nachladen .knopf--umriss,#bw-nachladen-knopf,
a.knopf--umriss[data-i18n="faqk.mehr"],a.knopf--umriss[data-i18n="mem.cta"],
.knopf--umriss,.erinnern .chip,.gk__chips .chip,
body[data-seite="gestalten"] .wunsch-auf,#matAuf,.formate button{
  color:#F6EFDF !important;border:1px solid rgba(201,164,92,.7) !important;
  background:linear-gradient(rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(0,0,0,.08) 100%),
             linear-gradient(135deg,var(--s-neben1) 0%,var(--s-neben2) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.18),0 4px 10px rgba(20,18,6,.28) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.3) !important;
}
.erinnern .chip.an,.gk__chips .chip.an,.formate button.an{
  border:2px solid #E6C680 !important;font-weight:600;
  background:linear-gradient(rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 34%,rgba(0,0,0,.06) 100%),
             linear-gradient(135deg,var(--s-wahl1) 0%,var(--s-wahl2) 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 4px rgba(230,198,128,.28),0 0 14px rgba(230,198,128,.35) !important;
}

/* ---------- Kopfzeile: dunkleres Oliv, wie der Cookie-Banner ---------- */
header.kopf,.kopf{background:linear-gradient(180deg,#4F4D33 0%,#4A4830 100%) !important;background-image:none;border-bottom:1px solid rgba(201,164,92,.28)}
header .nav > a.nav--rechner,.kopf__menue{color:var(--text) !important}
.kopf__rechts .sprache button,.sprache button{color:var(--text-leise) !important}
.kopf__rechts .sprache button[aria-pressed="true"],.sprache button[aria-pressed="true"]{color:#EDD49A !important;background:rgba(246,239,223,.08) !important}
a.sprung{background:#4A4830;color:var(--text)}

/* ---------- Grosse Karten Ton in Ton (statt Creme) ---------- */
.erinnern__karte,.gk__karte,.gs-kachel{background:#4A4830 !important;border:1px solid rgba(201,164,92,.3);color:var(--text)}
.gs-kachel__t b{color:var(--text) !important}
.gs-kachel__t span{color:var(--text-leise) !important}
.gk__titel,.gk__text,.gk__frage,.gk__unter{color:var(--text) !important}
.gs-frist b{color:#EDD49A !important}

/* ---------- Texte, die auf Sand fest dunkel gesetzt waren ---------- */
.ki-hinweis,.fuss .ki-hinweis,.fuss .fuss__schluss .ki-hinweis{color:var(--text-gedaempft) !important}
.kachel__inhalt h3,#tw-raster a.kachel[aria-current="true"] .kachel__inhalt h3{color:var(--text) !important}
.seitenkopf__textspalte h1 em,h1 em{color:var(--text-leise) !important}
.wandel__hinweis,.stil-beschreibung,.seitenkopf__beschreibung p{color:var(--text-leise) !important}
.mehrlesen,.gs-liste a{color:#EDD49A !important}
.faq details p{color:var(--text-leise) !important}
.haken svg,.vertrauen svg,.hero svg.haken,.seitenkopf svg{color:var(--text-leise)}

/* ---------- Geschenk-Erinnerung (gross und als Streifen) ---------- */
.erinnern__titel,.erinnern__frist,.erinnern__danke,.erinnern-band__titel{color:var(--text) !important}
.erinnern__text,.erinnern__frage,.erinnern__datum,.erinnern__oder,.erinnern__immer-text,
.erinnern__ok,.erinnern__vorher,.erinnern__klein,.erinnern-band__satz,.erinnern-band__gs{color:var(--text-leise) !important}
.erinnern__frist b{color:#EDD49A !important}
.erinnern-band__karte{background:#4A4830 !important;border:1px solid rgba(201,164,92,.3)}
.erinnern-band__gs:hover{color:#EDD49A !important}
.erinnern-pop__zu{background:#66633F !important;color:var(--text) !important;border:1px solid rgba(201,164,92,.5)}
.gk__hinweis,.gk__klein{color:var(--text-leise) !important}

/* ---------- Generator (gestalten.html) ---------- */
body[data-seite="gestalten"] .kopf .schliessen,.zurueck,.stilzeile button,.stilzeile .t,
.matzeile,.matzeile button,.mat-vergleich button,.staerken .st-text,.vid-link,.korb .zweit,
body[data-seite="gestalten"] .foto-hinweis,#unterFoto.wichtig,
body[data-seite="gestalten"] .schritt[data-s="1"] .wunsch-auf span+span{color:var(--text-leise) !important}
.stilzeile .t b,body[data-seite="gestalten"] .schritt[data-s="1"] .wunsch-auf span{color:var(--text) !important}
.kopf .schliessen{border-color:rgba(201,164,92,.5) !important}
.beleg .sterne,.bf-kopf .sterne,.rez__sterne{color:#E6C680 !important}
.staerken .st-hinweis{color:#EDD49A !important}
.drop,.vorschau .rahmen,.stimme,.karte,.zusammen,.fotogitter,.son-ablauf li{background:rgba(246,239,223,.07) !important}
.drop:hover,.karte:hover{background:rgba(246,239,223,.12) !important}
.karte.gewaehlt{background:rgba(246,239,223,.15) !important}
.leiste{background:rgba(74,72,48,.97) !important;border-top:1px solid rgba(201,164,92,.3)}
body[data-seite="gestalten"] .rez{background:#524F32 !important}
body[data-seite="gestalten"] .rez blockquote,.rez__fuss .siegel{color:var(--text-leise) !important}
.wunsch-feld textarea,#sonForm input,.lv-namefeld input,.son-feld input{background:#FBF6EC !important;color:#2B2418 !important}
.son-staerken button{color:#F6EFDF !important;border:1px solid rgba(201,164,92,.7) !important;
  background:linear-gradient(135deg,var(--s-neben1),var(--s-neben2)) !important}
/* Etiketten und Fortschritt: kleines Champagner statt Khaki (Khaki waere auf Oliv unsichtbar) */
.fort span.an,.marke-tag,.extra.gewaehlt .haken,.karte.inkl .haken{
  background:linear-gradient(135deg,#EFD8AA 0%,#D9B97C 100%) !important;color:#3E3320 !important}
.extra .haken{color:#3E3320 !important}
.beleg .sterne{color:#EDD49A !important}
body[data-seite="gestalten"] .schritt[data-s="1"] .wunsch-auf span+span,#wunschAuf span+span{color:#F6EFDF !important;opacity:.92}

/* ---------- Sonderanfertigung ---------- */
.son-mat__satz,.grund__text{color:var(--text-leise) !important}
.son-mat__liste b,.ablauf__gitter .schritt h3,.grund__titel{color:var(--text) !important}
.ablauf__gitter .schritt__nr{color:#EDD49A !important}

/* ---------- Materialseite ---------- */
.mat .ideal,.mat .ideal b,.vergleich .tabelle .z,.vergleich .tabelle .w,.vergleich .tabelle .w span,
.reihe .karte p{color:var(--text-leise) !important}
.vergleich .tabelle .k,.reihe .karte b{color:var(--text) !important}
.vergleich .tabelle .bald{color:#EDD49A !important}
.mat .ideal{background:rgba(246,239,223,.07) !important}
.tabelle .k{background:#4A4830 !important}
.tabelle .k:first-child{background:transparent !important}
.son-karte,.son-kopf ~ .abschnitt .ablauf__gitter .schritt,.son-kopf ~ .abschnitt .gruende__gitter .grund{
  background:#4A4830 !important;border:1px solid rgba(201,164,92,.3)}
.son-karte .son-feld input{background:#FBF6EC !important;color:#2B2418 !important}
.tabelle{background:#4A4830 !important;border:1px solid rgba(201,164,92,.3)}
.tabelle>div{border-top-color:rgba(201,164,92,.22) !important}
.tabelle .z,.tabelle .w,.tabelle .w span{color:var(--text-leise) !important}
.passt .karte{background:#4A4830 !important;border:1px solid rgba(201,164,92,.3)}
.passt .karte p,.mat .ideal,.mat .ideal b{color:var(--text-leise) !important}
.mat .ideal{background:#4A4830 !important}
/* Sonderanfertigung: Texte in der jetzt dunklen Anfrage-Karte */
.son-karte__titel,.son-feld .lbl,.son-karte label{color:var(--text) !important}
.son-karte__unter,.son-staerke-klein,.son-klein,.son-karte p,.son-kopf ~ .abschnitt .ablauf__gitter .schritt p{color:var(--text-leise) !important}

/* ---------- Sets ---------- */
.paket__marke,.paket__spar,.paket__nehmen{color:#EDD49A !important}
.paket__was,.bundles .konf__fuss,.konf__fuss{color:var(--text-leise) !important}

/* Startseite: jeder Satz der Ueberschrift auf eigener Zeile (Saskia 28.09.) */
.hero h1 .satz{display:block}

/* Haken-Zeichen: Oliv waere auf Oliv unsichtbar */
.hero-vertrauen svg,#ablauf .band svg{color:var(--text-leise) !important}

/* Generator Schritte 2-4 */
.wand .mass--bild span,.wand .mass--sofa span{color:#2B2418 !important}
.karte.gewaehlt{background:rgba(246,239,223,.10) !important}
.karte .info,.karte.extra .info,.stimme cite,.z-kopf small,.zusammen .lieferzeit,.zusammen p{color:#E9E0C8 !important}
.karte.gewaehlt .titel,.karte.gewaehlt .preis{color:var(--text) !important}
.stimme .sterne{color:#EDD49A !important}
a.sonder,.sonder b,.sonder span,.sonder p{color:var(--text) !important}
.stimme,.zusammen,.karte{background:rgba(246,239,223,.05) !important}
.karte.gewaehlt .info{color:var(--text) !important}

/* STOLZ-UMBAU Phase 16 E+F: Olivglas, gewaehlt dunkles Oliv, Erinnere-mich dunkel, Anderer Betrag wie Betraege */
/* Neben- und Auswahlknoepfe */
.bew__nachladen .knopf--umriss,#bw-nachladen-knopf,
a.knopf--umriss[data-i18n="faqk.mehr"],a.knopf--umriss[data-i18n="mem.cta"],
.knopf--umriss,.erinnern .chip,.gk__chips .chip,.gk__frei,
body[data-seite="gestalten"] .wunsch-auf,#matAuf,.formate button{
  color:#F6EFDF !important;border:1px solid rgba(217,185,124,.5) !important;
  background:linear-gradient(rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,.10) 100%),
             linear-gradient(160deg,#706D47 0%,#66633F 55%,#5F5D3B 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 4px rgba(0,0,0,.22),
             0 3px 8px rgba(20,18,6,.38) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
}
.knopf--umriss:hover,.erinnern .chip:hover,.gk__chips .chip:hover,.formate button:hover{filter:brightness(1.07)}
/* Gewaehlt -- und alle Knoepfe der Geschenk-Erinnerung (wie auf Unvergessen) */
.erinnern .chip.an,.gk__chips .chip.an,.formate button.an,
.gk__frei:has(input:not(:placeholder-shown)),
.erinnern__knopf{
  color:#F6EFDF !important;font-weight:600;border:1.5px solid #D9B97C !important;
  background:linear-gradient(rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.14) 100%),
             linear-gradient(135deg,#55532F 0%,#45432A 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 4px rgba(0,0,0,.28),
             0 0 0 3px rgba(217,185,124,.25),0 3px 8px rgba(20,18,6,.4) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
}
.erinnern__knopf:hover{filter:brightness(1.12)}
/* Feld "Anderer Betrag": Schrift hell wie auf den Betragsknoepfen */
.gk__frei input{color:#F6EFDF !important;background:none !important}
.gk__frei input::placeholder{color:#EFE7D2 !important;opacity:1}
.gk__frei span{color:#EFE7D2 !important}

/* STOLZ-UMBAU Phase 17: Leinwand-Kante -- Bild laeuft um die Kante, kein Strich */
/* Generator Schritt 1 (1:1 aus der Anweisung) */
.vorschau .rahmen{box-shadow:0 18px 26px -8px rgba(50,40,25,.45) !important}
.vorschau .rahmen.gk-leer{box-shadow:0 12px 22px -10px rgba(50,40,25,.35) !important}
.vorschau .rahmen.gk-mitkante{overflow:visible;box-shadow:
  11px 18px 22px -4px rgba(15,14,5,.75),
  4px 8px 12px rgba(15,14,5,.45),
  24px 42px 56px -10px rgba(15,14,5,.55) !important}
.vorschau .rahmen.gk-mitkante > img{border-radius:0 !important}
.gk-kanten{position:absolute;inset:0;pointer-events:none;display:block;z-index:0}
.gk-kante{position:absolute;overflow:hidden;display:block}
.vorschau .gk-kante img{position:absolute;display:block;max-width:none;object-fit:cover;box-shadow:none !important;border-radius:0 !important}
.gk-kante--rechts{top:0;left:100%;width:5px;height:100%;transform:skewY(45deg);transform-origin:left top;filter:brightness(.6) saturate(.9)}
.gk-kante--rechts img{right:0;top:0}
.gk-kante--unten{left:0;top:100%;width:100%;height:5px;transform:skewX(45deg);transform-origin:left top;filter:brightness(.5)}
.gk-kante--unten img{left:0;bottom:0}

/* Grosse Bilder mit Huelle .gk-bild (Stil-/Welt-Kacheln): Kante wie oben */
.gk-bild{position:relative;display:block;line-height:0}
.gk-bild .gk-kante img{position:absolute;display:block;max-width:none;object-fit:cover;box-shadow:none !important;
  border-radius:0 !important;transform:none !important;aspect-ratio:auto !important;margin:0 !important}
.gk-bild > img,.gk-bild > picture > img{border-radius:0 !important}
.stilwahl button img,.welt-kachel img,#themen .kachel__bild{box-shadow:10px 16px 20px -4px rgba(15,14,5,.75),4px 7px 11px rgba(15,14,5,.45),20px 34px 46px -10px rgba(15,14,5,.55) !important;border-radius:0 !important}
.stilwahl button:hover img,.stilwahl button:focus-visible img,.welt-kachel:hover img,.welt-kachel:focus-visible img{transform:none !important}
.stilwahl .gk-bild,.welt-kachel .gk-bild,#themen .kachel .gk-bild{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.stilwahl button:hover .gk-bild,.stilwahl button:focus-visible .gk-bild{transform:translateY(-4px) scale(1.03)}
.welt-kachel:hover .gk-bild,.welt-kachel:focus-visible .gk-bild{transform:translateY(-3px)}
#themen .kachel:hover .kachel__bild,#themen .kachel:focus-visible .kachel__bild{transform:none !important;
  box-shadow:10px 16px 20px -4px rgba(15,14,5,.75),4px 7px 11px rgba(15,14,5,.45),20px 34px 46px -10px rgba(15,14,5,.55) !important}
#themen .kachel:hover .gk-bild,#themen .kachel:focus-visible .gk-bild{transform:translateY(-6px) scale(1.03)}
#themen .kachel__bild{border-radius:0 !important}
@media(prefers-reduced-motion:reduce){.gk-bild{transition:none !important}
  .stilwahl button:hover .gk-bild,.welt-kachel:hover .gk-bild,#themen .kachel:hover .gk-bild{transform:none}}

/* Kleine Bildchen: nur weicher Schatten, kein Strich */
.stilzeile img,.stimme img,.karte .vbild,.zusammen .z-kopf img,.rez__foto,
.seitenkopf .bsp-daumen img,.seitenkopf .bsp-reihe--motive .stil-einzel-klein__knopf img{
  box-shadow:3px 5px 8px rgba(15,14,5,.55) !important}
.vid-buehne video,.tw-video,.tw-video:hover,.tw-video:focus-visible{box-shadow:10px 16px 20px -4px rgba(15,14,5,.75),4px 7px 11px rgba(15,14,5,.45),20px 34px 46px -10px rgba(15,14,5,.55) !important}

/* Sofa-Wand: Szene ohne Strich; Bild je nach Material */
.wand{box-shadow:0 18px 26px -8px rgba(10,9,3,.45) !important}
.wand .bild{box-shadow:8px 13px 16px -3px rgba(40,30,15,.62),3px 5px 8px rgba(40,30,15,.38),16px 28px 36px -8px rgba(40,30,15,.4) !important}
.wand .bild[data-mat="poster"]{box-shadow:4px 7px 10px -2px rgba(40,30,15,.5),2px 3px 5px rgba(40,30,15,.3) !important}
.wand .bild[data-mat="leinwand"]{container-type:size;overflow:visible}
.wand .bild[data-mat="leinwand"]::before,.wand .bild[data-mat="leinwand"]::after{
  content:"";position:absolute;pointer-events:none;background-image:inherit;background-repeat:no-repeat;
  background-size:100cqw 100cqh}
.wand .bild[data-mat="leinwand"]::before{top:0;left:100%;height:100%;width:calc(100cqw * 4 / var(--breite-cm, 60));
  background-position:right top;transform:skewY(45deg);transform-origin:left top;filter:brightness(.6) saturate(.9)}
.wand .bild[data-mat="leinwand"]::after{left:0;top:100%;width:100%;height:calc(100cqw * 4 / var(--breite-cm, 60));
  background-position:left bottom;transform:skewX(45deg);transform-origin:left top;filter:brightness(.5)}

/* STOLZ-UMBAU Phase 19: Generator-Tipp-Satz mittig */
.tipps-satz{text-align:center;text-wrap:balance;margin-inline:auto}
/* Haken: Gold, ohne Kreis, zeichnen sich 1-2-3 nacheinander (Animation wie Unvergessen).
   Saskia 05.10.: "Die Haken sollen Gold sein und sich eins, zwei, drei nacheinander abhaken." */
.tipps svg{color:#EDD49A !important;filter:drop-shadow(0 1px 1px rgba(10,9,3,.35))}
/* Auswahl-Karten im Generator (Material, Groesse, Extras): gewaehlt mit Goldrand, Punkt sichtbar */
/* Saskia 05.10.: "Die Formatkacheln heben sich zu wenig vom Hintergrund ab." -> alle Karten im
   Generator (Material, Groesse, Extras) im abgenommenen Olivglas der Nebenknoepfe (Variante E),
   gewaehlt bleibt dunkel mit Goldrand. */
.karte:not(.gewaehlt){border:1px solid rgba(217,185,124,.55) !important;
  background:linear-gradient(rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,.10) 100%),
             linear-gradient(160deg,#76734B 0%,#6A6741 55%,#615F3C 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 4px rgba(0,0,0,.18),0 4px 10px -2px rgba(15,14,5,.5) !important}
@media (hover:hover){.karte:not(.gewaehlt):not(.inkl):hover{border-color:rgba(237,212,154,.8) !important;filter:brightness(1.06)}}
/* Saskia 05.10. zu Schritt 4 (Wandaufhaengung inklusive, "Dein Bild"-Zusammenfassung): "Da hebt sich
   auch zu wenig ab ... so machen wie im Bild Nummer 2 [Kassen-Karten], vielleicht einen kleinen Tick
   dunkler." -> feste Info-Kaesten wie die Kassen-Karten (#4A4830), einen Tick dunkler, Goldkante. */
.karte.extra.inkl,.zusammen,.stimme{background:#44422B !important;border:1px solid rgba(201,164,92,.38) !important;
  box-shadow:0 6px 16px -6px rgba(10,9,3,.55) !important;filter:none !important}
/* Saskia 05.10.: Sonderanfertigung "sieht so aufgeklebt aus ... so richtig als Kachel machen, wie da
   drueber ... mit so einem kurzen, auslaufenden, goldenen Strich zwischen den Formaten und der
   Sonderanfertigungskachel ... angleichen, sodass man sieht, dass die Kachel nicht zu den Formaten
   dazu gehoert." -> Sonderanfertigung als Kachel im Olivglas der Formatkacheln, ohne Leuchtrand;
   darueber eine kurze, zu beiden Seiten auslaufende Goldlinie mit gleichem Abstand oben und unten. */
.s3-rechts .sonder{position:relative;margin-top:44px !important;border:1px solid rgba(217,185,124,.55) !important;
  background:linear-gradient(rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,.10) 100%),
             linear-gradient(160deg,#76734B 0%,#6A6741 55%,#615F3C 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 4px rgba(0,0,0,.18),0 4px 10px -2px rgba(15,14,5,.5) !important}
.s3-rechts .sonder::before{content:"";position:absolute;left:50%;top:-23px;width:min(240px,62%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent 0%,#B8955A 22%,#F1D9A4 50%,#B8955A 78%,transparent 100%);pointer-events:none}
@media (hover:hover){.s3-rechts .sonder:hover{border-color:rgba(237,212,154,.85) !important;filter:brightness(1.06)}}
/* Saskia 05.10.: unter der Sonderanfertigungs-Kachel "so die Haelfte von dem Abstand zum ganz unteren
   nochmal wegnehmen" -> nur in Schritt 3 die Luft bis zur Leiste halbiert (vorher ca. 52-61 px). */
body:has(.schritt[data-s="3"].aktiv) main.wrap,body:has(.schritt[data-s="4"].aktiv) main.wrap{padding-bottom:124px !important}
/* Saskia 05.10. zu Schritt 4 (unter der Kundenstimme): "und auch hier den Abstand zur Haelfte reduzieren." */
/* Saskia 05.10. zu Schritt 1 ("Spaeter schicken") und Schritt 2 ("Alle drei Materialien im Vergleich"):
   "und auch hier den Abstand zur Haelfte reduzieren. Auf beiden Seiten." (vorher PC 75/51 px, Handy 81/70 px) */
body:has(.schritt[data-s="1"].aktiv) main.wrap{padding-bottom:110px !important}
body:has(.schritt[data-s="2"].aktiv) main.wrap{padding-bottom:122px !important}
/* Saskia 05.10.: "das Logo sitzt zu weit unten" -> im Generator-Kopf oben und unten gleich viel Luft */
body[data-seite="gestalten"] header.kopf{padding-top:8px !important;padding-bottom:9px !important}
.karte.gewaehlt{border:2px solid #D9B97C !important;
  background:linear-gradient(rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.12) 100%),#45432A !important;
  box-shadow:0 0 0 3px rgba(217,185,124,.22),0 6px 16px -6px rgba(10,9,3,.5) !important}
.karte .punkt{border:2px solid rgba(237,212,154,.75) !important;background:rgba(0,0,0,.12)}
.karte.gewaehlt .punkt{border-color:#D9B97C !important;background:#45432A}
.karte.gewaehlt .punkt::after{background:#EDD49A !important;width:11px;height:11px;box-shadow:0 0 6px rgba(237,212,154,.6)}
.extra .haken{border:2px solid rgba(237,212,154,.75) !important}
.extra.gewaehlt .haken{border:1.5px solid #D9B97C !important;color:#F6EFDF !important;
  background:linear-gradient(rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 45%,rgba(0,0,0,.14) 100%),#45432A !important;
  box-shadow:0 0 0 3px rgba(217,185,124,.22) !important}
/* Zurueck (Generator-Leiste) und kleine Rahmen-Knoepfe: feine Umrandung wie auf Unvergessen, hell auf Oliv */
.zurueck,body[data-seite="gestalten"] .kopf .schliessen,.stilzeile button{
  background:transparent !important;border:1px solid rgba(237,212,154,.6) !important;color:#F6EFDF !important;border-radius:12px}
.zurueck:hover,body[data-seite="gestalten"] .kopf .schliessen:hover,.stilzeile button:hover{background:rgba(246,239,223,.1) !important;border-color:#EDD49A !important}
/* Fenster im Generator ("Dein Bild liegt im Warenkorb", Material, Sonderanfertigung, Bewertungen):
   minimal heller als die Seite, feine Goldkante, Hintergrund abgedunkelt -- hebt sich ab wie auf Unvergessen */
.korb,.bewfenster{background:rgba(10,9,3,.55) !important}
.korb .blatt,.bf-blatt{background:linear-gradient(rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 30%),#67643F !important;
  border:1px solid rgba(217,185,124,.4) !important;box-shadow:0 -10px 34px rgba(10,9,3,.5),0 18px 40px rgba(10,9,3,.45) !important}
.korb .blatt{border-bottom:0 !important}
.korb p,.bf-blatt p{color:#EAE2CB !important}
.korb h2,.korb .geschenk,.bf-blatt h2,.bf-blatt h3{color:#F6EFDF !important}
.korb .zweit{background:transparent !important;border:1px solid rgba(237,212,154,.65) !important;color:#F6EFDF !important}
.korb .zweit:hover{background:rgba(246,239,223,.1) !important}

/* STOLZ-UMBAU Phase 20: Eigenes Foto im Generator + alter Konfigurator lesbar */
/* Satz "Am schoensten ... Gesichter ..." gibt es auf canvasory.de nicht */
.tipps-satz{display:none !important}
/* Kundenstimme: Sterne #AA804E waren auf Oliv kaum zu sehen -> helles Gold (ca. 4,7:1) */
.stimme .sterne{color:#F1DCA8 !important}
/* Alter Konfigurator (dort laufen noch die Sets): nur lesbar machen, nicht neu gestalten */
#konfigurator.konf > .huelle > .augbraue{color:#EDD49A !important}
#konfigurator.konf .konf__titel{color:#F6EFDF !important}
#konfigurator.konf .konf__label-text{color:#EDD49A !important}
#konfigurator.konf .konf__kasten .konf__label-text{color:#4A4030 !important}
#konf-welten button{color:#F6EFDF !important;border:1px solid rgba(217,185,124,.5) !important;
  background:linear-gradient(rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,.10) 100%),
             linear-gradient(160deg,#706D47 0%,#66633F 55%,#5F5D3B 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 4px rgba(0,0,0,.22),0 3px 8px rgba(20,18,6,.38) !important}
#konf-welten button[aria-pressed="true"]{color:#F6EFDF !important;border:1.5px solid #D9B97C !important;
  background:linear-gradient(rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 40%,rgba(0,0,0,.12) 100%),
             linear-gradient(135deg,#55532F 0%,#45432A 100%) !important;
  box-shadow:0 0 0 3px rgba(217,185,124,.25),inset 0 1px 0 rgba(255,255,255,.2),0 3px 8px rgba(20,18,6,.4) !important}
#konfigurator .eigenes-hinweis,#konfigurator .eigenes-hinweis__inhalt{background:#EFE3CF !important;border-color:rgba(201,164,92,.45) !important}
#konfigurator .eigenes-hinweis{border:1px solid rgba(201,164,92,.45) !important;border-radius:10px}
#konfigurator .eigenes-hinweis p{color:#2B2418 !important}
#konf-eigenes-reihe .konf__label{color:#EDD49A !important}
#konf-eigenes-reihe .k-hilfe{color:#DCD3B8 !important}
#konf-eigenes-wunsch{background:#FBF6EC !important;color:#2B2418 !important;border:1px solid rgba(217,185,124,.55) !important;border-radius:10px}
#konf-eigenes-wunsch::placeholder{color:#6E6250;opacity:1}
#konfigurator .zahlarten__titel{color:#EDD49A !important}
#konfigurator .konf__enthalten,#konfigurator .konf__fotohinweis{color:#DCD3B8 !important}
#konfigurator .konf__kasten #groesse-hinweis{color:#5A4E3C !important}
#konfigurator .konf__kasten #preis-wert2{color:#2B2418 !important}
#konfigurator #groessen button[aria-pressed="true"] .wahl__preis{color:#F6EFDF !important}
/* ENDE Phase 20 */

/* STOLZ-UMBAU Phase 26: Nr. 1 auf Oliv */
.fuss .fuss__nr1{color:#8F8A6B !important}
/* Saskia 05.10.: "Ich moechte die Plakette in olivfarbener Glasplakette haben. Und damit meine ich
   nicht nur am Handy, sondern auch am PC." -> Olivglas mit Goldkante auf allen Breiten. */
.nr1-knopf{color:#F6EFDF !important;border:1px solid rgba(217,185,124,.65) !important;text-shadow:0 1px 1px rgba(0,0,0,.35) !important;
  background:linear-gradient(rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,.10) 100%),
             linear-gradient(160deg,#76734B 0%,#6A6741 55%,#615F3C 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 4px rgba(0,0,0,.18),0 0 0 3px rgba(217,185,124,.16),0 4px 10px -2px rgba(15,14,5,.5) !important}
.nr1-knopf b,.nr1-knopf b .nr1-a,.nr1-knopf .nr1-b,.nr1-knopf .nr1-c{color:#F6E4B8 !important}   /* helles Gold, >= 4,5:1 */
.nr1-knopf span,.nr1-knopf i{color:#F6EFDF !important}
.nr1-knopf span::before{background:linear-gradient(90deg,transparent,#D9B97C,transparent) !important}
@media (min-width:1040px){
  /* PC-Plakette: doppelter feiner Rahmen wie bisher, jetzt in Gold auf Oliv */
  .seitenkopf__knoepfe .nr1-knopf,.hero__knoepfe .nr1-knopf,.gs-kopf__plakette .nr1-knopf{
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.05),inset 0 0 0 4px rgba(217,185,124,.5),inset 0 -3px 6px rgba(0,0,0,.16),0 0 0 3px rgba(217,185,124,.14),0 6px 14px -2px rgba(15,14,5,.55) !important}
}
/* ENDE Phase 26 */

/* STOLZ-UMBAU Phase 27: gewaehlte Stil-Kachel wie Material-Karte */
#tw-raster a.kachel[aria-current="true"] .kachel__bild{outline:0 !important;transform:none !important;box-shadow:none !important}
#tw-raster a.kachel .gk-bild{position:relative;display:block;isolation:isolate}
#tw-raster a.kachel[aria-current="true"] .gk-bild::before,
#tw-raster a.kachel[aria-current="true"] .gk-bild::after{content:"";position:absolute;pointer-events:none;
  top:-3px;left:-3px;right:-8px;bottom:-8px;border-radius:4px}
#tw-raster a.kachel[aria-current="true"] .gk-bild::before{z-index:-1;background:#45432A;
  box-shadow:8px 12px 18px -6px rgba(10,9,3,.6),3px 5px 9px rgba(10,9,3,.35)}
#tw-raster a.kachel[aria-current="true"] .gk-bild::after{z-index:3;border:2px solid #D9B97C;
  box-shadow:0 0 0 2px rgba(217,185,124,.20)}
#tw-raster a.kachel .kachel__inhalt{padding-top:calc(.7rem + 6px)}
#tw-raster a.kachel[aria-current="true"] .kachel__inhalt h3{color:#EDD49A !important;font-weight:600}
#themen #tw-raster{column-gap:1.6rem}
@media(min-width:900px){ #themen #tw-raster .kachel{flex:0 0 calc(20% - 1.28rem);max-width:calc(20% - 1.28rem)} }
@media(min-width:641px) and (max-width:899px){ #themen #tw-raster .kachel{flex:0 0 calc(33.333% - 1.067rem);max-width:calc(33.333% - 1.067rem)} }
@media(max-width:640px){ #themen #tw-raster{column-gap:1.1rem}
  #themen #tw-raster .kachel{flex:0 0 calc(33.333% - .734rem);max-width:calc(33.333% - .734rem)} }
/* ENDE Phase 27 */

/* ============================================================================
   KNOPF ZUR ZWEITEN SEITE -- Oliv-Glas mit Goldkante (Auftrag 08.10.2026)
   ----------------------------------------------------------------------------
   Auf canvasory.de traegt die Nr.-1-Plakette Oliv-Glas mit Goldkante
   (Phase 26 weiter oben). Der Knopf zur zweiten Seite uebernimmt genau
   diese Werte -- in eigenen Klassen, damit an der Plakette nichts
   geaendert wird. Der Grundaufbau steht in styles.css.
   ============================================================================ */
.zweiteseite__knopf{
  color:#F6EFDF;border:1px solid rgba(217,185,124,.65);text-shadow:0 1px 1px rgba(0,0,0,.35);
  background:linear-gradient(rgba(255,255,255,.22) 0%,rgba(255,255,255,.04) 38%,rgba(0,0,0,.10) 100%),
             linear-gradient(160deg,#76734B 0%,#6A6741 55%,#615F3C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 4px rgba(0,0,0,.18),0 0 0 3px rgba(217,185,124,.16),0 4px 10px -2px rgba(15,14,5,.5);
}
.zweiteseite__a,.zweiteseite__b{color:#F6E4B8}   /* helles Gold, >= 4,5:1 auf Oliv */
.zweiteseite__c{color:#F6EFDF}
.zweiteseite__c::before{background:linear-gradient(90deg,transparent,#D9B97C,transparent)}
.zweiteseite__knopf:focus-visible{outline:2px solid #F6E4B8;outline-offset:3px}