/* Layout: eine Bühne in Merguet-Nachtblau, darauf die Visitenkarte; Steuerung dezent darunter. Bewusst nur ein Look (dunkle Bühne). */
:root{
  --night:#101936; --night-2:#1a2550; --ice:#8eb3ce; --lilac:#ad86b4;
  --paper:#f7f8fc; --ink:#101936; --muted:#5d6584; --line:#dde2ee;
  --on-night:#e7ecf7; --on-night-dim:#9aa5c4;
  --f-display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-serif:"Newsreader", Georgia, "Times New Roman", serif;
  color-scheme:dark;
}
html,body{height:100%}
body{
  background:var(--night); color:var(--on-night); font-family:var(--f-body); font-size:15px;
  background-image:
    radial-gradient(60% 50% at 18% 12%, rgba(142,179,206,.16), transparent 70%),
    radial-gradient(50% 45% at 85% 88%, rgba(173,134,180,.16), transparent 70%);
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  display:flex; flex-direction:column; overflow-x:hidden;
}
button,input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--ice); outline-offset:3px}

/* Prototyp-Leiste */
.proto{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; justify-content:space-between;
  padding-block:14px; font-family:var(--f-mono); font-size:11.5px; color:var(--on-night-dim); letter-spacing:.02em; max-width:960px; width:100%; margin:0 auto}
.proto b{color:var(--on-night); font-weight:600}
.proto-reset{appearance:none; background:transparent; border:1px dashed rgba(154,165,196,.5); color:var(--on-night-dim); border-radius:6px; padding:4px 10px; font:inherit; cursor:pointer}
.proto-reset:hover{color:var(--on-night); border-color:var(--on-night-dim)}
.toggle{display:flex; align-items:center; gap:8px; cursor:pointer}
.toggle input{accent-color:var(--lilac); width:15px; height:15px}

main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding-block:12px 36px}

/* Kartenstapel */
.stack{position:relative; width:min(600px,100%); height:400px}
.stack-hint{position:absolute; inset:0; border-radius:16px; background:#26315e; border:1px solid rgba(255,255,255,.06)}
.stack-hint.h1{transform:rotate(-3.2deg) translate(-10px,8px)}
.stack-hint.h2{transform:rotate(2.4deg) translate(12px,6px); background:#2f3a6c}
.wrap{position:absolute; inset:0; perspective:1600px}

/* Karte */
.card{position:absolute; inset:0; border-radius:16px; overflow:hidden; background:var(--paper); color:var(--ink);
  padding:30px 34px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 30px 60px -20px rgba(4,8,24,.65), 0 2px 0 rgba(255,255,255,.4) inset; transform-style:flat}
.card::before{content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--ice),var(--lilac))}
.card h2{font-family:var(--f-display); font-weight:700; font-size:30px; line-height:1.08; letter-spacing:-.015em; margin:0; text-wrap:balance}
.card h2:focus{outline:none}
.card p{margin:0; line-height:1.5; max-width:52ch}
.eyebrow{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted)}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.spacer{flex:1}
.next{appearance:none; border:0; cursor:pointer; background:var(--ink); color:#fff; border-radius:999px; padding:11px 18px 11px 20px;
  font-weight:600; font-size:14px; display:inline-flex; gap:10px; align-items:center; transition:transform .2s, box-shadow .2s;
  box-shadow:0 0 0 0 rgba(173,134,180,.6); animation:pulse 2.6s infinite}
.next:hover{transform:translateY(-2px)}
.next .ic{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--ice),var(--lilac)); color:var(--ink); font-size:13px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(173,134,180,.55)}70%{box-shadow:0 0 0 12px rgba(173,134,180,0)}100%{box-shadow:0 0 0 0 rgba(173,134,180,0)}}
.back{position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:1px solid currentColor; background:transparent; color:inherit; opacity:.55; cursor:pointer; font-size:15px; display:grid; place-items:center}
.back:hover{opacity:1}
.tlink{color:inherit; font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--lilac); padding-bottom:1px; font-size:14px}
.soon{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; border:1px dashed currentColor; border-radius:4px; padding:3px 7px; opacity:.75}

/* Vorderseite */
.mark{display:flex; align-items:baseline; gap:10px}
.mark strong{font-family:var(--f-display); font-weight:800; font-size:26px; letter-spacing:-.03em}
.mark span{font-size:12.5px; color:var(--muted)}
.card--karte h2{font-size:34px; margin-top:auto}
.contacts{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; border-top:1px solid var(--line); padding-top:14px}
.contacts div{min-width:0}
.contacts dt{font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:3px}
.contacts dd{margin:0; font-size:13.5px; line-height:1.4; overflow-wrap:anywhere}

/* Artie */
.card--artie{background:#f3eff7}
.card--artie h2{font-size:31px}
.artie-dot{width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,var(--lilac),var(--ice)); display:grid; place-items:center; font-family:var(--f-display); font-weight:800; color:#fff; font-size:20px}

/* Development */
.card--development{background:#0b1230; color:var(--on-night)}
.card--development .eyebrow{color:var(--ice)}
.card--development h2{font-family:var(--f-mono); font-weight:600; font-size:24px; letter-spacing:-.02em}
.card--development h2 i{font-style:normal; color:var(--lilac)}
.card--development .next{background:linear-gradient(135deg,var(--ice),var(--lilac)); color:var(--ink)}
.card--development .next .ic{background:var(--ink); color:#fff}
.tiles{display:flex; gap:12px; flex:1; min-height:0; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:#2c376a transparent; padding-bottom:6px;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,1.0) 74.0%,rgba(0,0,0,0.957) 77.25%,rgba(0,0,0,0.844) 80.5%,rgba(0,0,0,0.684) 83.75%,rgba(0,0,0,0.5) 87.0%,rgba(0,0,0,0.316) 90.25%,rgba(0,0,0,0.156) 93.5%,rgba(0,0,0,0.043) 96.75%,rgba(0,0,0,0.0) 100.0%); mask-image:linear-gradient(90deg,rgba(0,0,0,1.0) 74.0%,rgba(0,0,0,0.957) 77.25%,rgba(0,0,0,0.844) 80.5%,rgba(0,0,0,0.684) 83.75%,rgba(0,0,0,0.5) 87.0%,rgba(0,0,0,0.316) 90.25%,rgba(0,0,0,0.156) 93.5%,rgba(0,0,0,0.043) 96.75%,rgba(0,0,0,0.0) 100.0%)}
.tiles.at-end{-webkit-mask-image:none; mask-image:none}
.tiles.mid{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0.0) 0.0%,rgba(0,0,0,0.043) 3.25%,rgba(0,0,0,0.156) 6.5%,rgba(0,0,0,0.316) 9.75%,rgba(0,0,0,0.5) 13.0%,rgba(0,0,0,0.684) 16.25%,rgba(0,0,0,0.844) 19.5%,rgba(0,0,0,0.957) 22.75%,rgba(0,0,0,1.0) 26.0%,rgba(0,0,0,1.0) 74.0%,rgba(0,0,0,0.957) 77.25%,rgba(0,0,0,0.844) 80.5%,rgba(0,0,0,0.684) 83.75%,rgba(0,0,0,0.5) 87.0%,rgba(0,0,0,0.316) 90.25%,rgba(0,0,0,0.156) 93.5%,rgba(0,0,0,0.043) 96.75%,rgba(0,0,0,0.0) 100.0%); mask-image:linear-gradient(90deg,rgba(0,0,0,0.0) 0.0%,rgba(0,0,0,0.043) 3.25%,rgba(0,0,0,0.156) 6.5%,rgba(0,0,0,0.316) 9.75%,rgba(0,0,0,0.5) 13.0%,rgba(0,0,0,0.684) 16.25%,rgba(0,0,0,0.844) 19.5%,rgba(0,0,0,0.957) 22.75%,rgba(0,0,0,1.0) 26.0%,rgba(0,0,0,1.0) 74.0%,rgba(0,0,0,0.957) 77.25%,rgba(0,0,0,0.844) 80.5%,rgba(0,0,0,0.684) 83.75%,rgba(0,0,0,0.5) 87.0%,rgba(0,0,0,0.316) 90.25%,rgba(0,0,0,0.156) 93.5%,rgba(0,0,0,0.043) 96.75%,rgba(0,0,0,0.0) 100.0%)}
.tiles.mid.at-end{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0.0) 0.0%,rgba(0,0,0,0.043) 3.25%,rgba(0,0,0,0.156) 6.5%,rgba(0,0,0,0.316) 9.75%,rgba(0,0,0,0.5) 13.0%,rgba(0,0,0,0.684) 16.25%,rgba(0,0,0,0.844) 19.5%,rgba(0,0,0,0.957) 22.75%,rgba(0,0,0,1.0) 26.0%); mask-image:linear-gradient(90deg,rgba(0,0,0,0.0) 0.0%,rgba(0,0,0,0.043) 3.25%,rgba(0,0,0,0.156) 6.5%,rgba(0,0,0,0.316) 9.75%,rgba(0,0,0,0.5) 13.0%,rgba(0,0,0,0.684) 16.25%,rgba(0,0,0,0.844) 19.5%,rgba(0,0,0,0.957) 22.75%,rgba(0,0,0,1.0) 26.0%)}
.tile{flex:0 0 calc(50% - 30px); scroll-snap-align:start; border:1px solid rgba(142,179,206,.28); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-width:0; background:rgba(255,255,255,.03)}
.hl-strip{appearance:none; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; width:100%; text-align:left; cursor:pointer; background:transparent; color:var(--on-night); border:0; border-top:1px solid rgba(142,179,206,.2); border-bottom:1px solid rgba(142,179,206,.2); padding:7px 2px; font:inherit}
.hl-strip .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice)}
.hl-strip b{font-family:var(--f-display); font-size:15px; font-weight:700}
.hl-strip .hl-go{margin-left:auto; font-size:13px; color:var(--ice)}
.hl-strip:hover .hl-go{color:var(--on-night); text-decoration:underline}
.card--development .tile{padding:12px 14px; gap:4px}
.card--development .tile p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card--development{gap:12px}
.card--development h2{font-size:22px}
.hl-feature{display:flex; align-items:center; gap:14px; padding:10px 12px 10px 10px; border-radius:12px; position:relative;
  background:linear-gradient(#0b1230,#0b1230) padding-box, linear-gradient(120deg,var(--ice),var(--lilac)) border-box; border:1.5px solid transparent}
.hl-mini{width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px var(--lilac)}
.hl-ftxt{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.hl-ftxt .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ice)}
.hl-ftxt b{font-family:var(--f-display); font-size:17px; font-weight:700}
.hl-ftxt b .lightmark{font-size:1.05em}
.hl-ftxt small{font-size:12.5px; color:#c3cbe0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hl-try{flex:none; border:0; border-radius:999px; padding:9px 16px; background:linear-gradient(135deg,var(--ice),var(--lilac)); color:var(--ink); font-weight:600; cursor:pointer; font-size:13.5px}
.hl-try:hover{transform:translateY(-1px)}
@media (max-width:620px){ .hl-ftxt small{white-space:normal} .hl-feature{flex-wrap:wrap} .hl-try{width:100%} }
.card--artie{flex-direction:row; gap:22px}
.artie-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:14px}
.reel{position:relative; flex:none; width:150px; height:267px; margin-top:36px; border-radius:18px; overflow:hidden; background:#1b1530; box-shadow:0 0 0 5px #fff, 0 0 0 6px #e3dbea, 0 18px 30px -10px rgba(16,25,54,.45)}
.reel video{width:100%; height:100%; object-fit:cover; display:block}
.reel-tag{position:absolute; left:8px; top:8px; right:8px; font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(16,25,54,.55); padding:3px 6px; border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.reel-btn{position:absolute; bottom:8px; width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.88); color:var(--ink); cursor:pointer; font-size:13px; display:grid; place-items:center}
.reel-sound{left:8px}
.reel-next{right:8px}
.reel-full{left:50%; transform:translateX(-50%)}
.reel video{cursor:zoom-in}
.reel-lb{position:fixed; inset:0; z-index:80; background:rgba(5,8,20,.94); display:flex; align-items:center; justify-content:center; padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.reel-lb video{height:min(92vh, 177.7vw); max-width:100%; aspect-ratio:9/16; border-radius:14px; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.6)}
.reel-lb .lb-x{position:absolute; top:calc(14px + env(safe-area-inset-top, 0px)); right:calc(14px + env(safe-area-inset-right, 0px)); width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; font-size:18px; cursor:pointer}
.reel-lb .lb-next{position:absolute; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%); border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; border-radius:999px; padding:8px 16px; cursor:pointer; font-size:13.5px}
.reel-lb .lb-t{position:absolute; top:calc(22px + env(safe-area-inset-top, 0px)); left:calc(20px + env(safe-area-inset-left, 0px)); color:#c3cbe0; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; max-width:60%}
@media (max-width:620px){ .card--artie{gap:12px} .reel{width:104px; height:185px; margin-top:44px} .card--artie h2{font-size:23px} }
.card--artie h2{font-size:28px}
.tscroll{width:32px; height:32px; border-radius:50%; border:1px solid rgba(142,179,206,.35); background:transparent; color:var(--on-night); cursor:pointer; font-size:14px}
.tscroll:hover{border-color:var(--lilac)}
.tscroll:disabled{opacity:.3; cursor:default}
.tile .k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-night-dim)}
.tile h3{margin:0; font-family:var(--f-display); font-size:18px; font-weight:700; overflow-wrap:anywhere}
.tile p{font-size:13.5px; color:#c3cbe0; line-height:1.45}
.tile a{margin-top:auto; color:var(--ice); font-family:var(--f-mono); font-size:12px; text-decoration:none}
.tile a:hover{text-decoration:underline}

/* Magazin */
.card--magazin{background:#fff}
.card--design{background:#f6f7fb}
.card--design h2{font-size:30px}
:is(.card--magazin,.card--design) .tile{border-color:var(--line); background:#fff}
:is(.card--magazin,.card--design) .tscroll{color:var(--ink); border-color:var(--line)}
:is(.card--magazin,.card--design) .tiles{scrollbar-color:#d5dbea transparent}
.thumb.sw{background:#fff; border:1px solid var(--line); gap:4px; justify-content:flex-start}
.thumb.sw i{display:block; height:18px; border-radius:2px}
.thumb.sw small{margin-top:auto; color:var(--muted); font-size:7.5px}
.ptxt .k .soon{font-size:9px}
.tile.ptile{flex-basis:calc(78% - 12px); flex-direction:row; gap:18px; align-items:stretch; padding:16px 18px}
.ptxt{display:flex; flex-direction:column; gap:6px; min-width:0}
.ptxt .k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ptxt{justify-content:center; gap:8px}
.ptxt h3{margin:0; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:22px; line-height:1.1}
.ptxt p{font-size:14px; color:var(--muted); line-height:1.5}
.thumb{flex:none; width:96px; border-radius:3px; padding:9px 8px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:4px 5px 0 #e8ebf3}
.thumb b{font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:15px; line-height:1.05}
.thumb small{font-family:var(--f-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; opacity:.8}
.thumb.ad{background:#eef3fa; color:#0f2f66; border:1px solid #d8e2f0; border-top:10px solid var(--lilac)}
.mag-text{flex:1; display:flex; flex-direction:column; gap:14px; min-width:0}
.card--magazin h2{font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:30px; letter-spacing:-.01em}
.magfan{flex:none; display:flex; align-items:flex-end; align-self:center; padding:14px 6px 0 2px}
.magfan button{border:0; padding:0; background:none; cursor:zoom-in; width:70px; margin-right:-26px; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.magfan button:last-child{margin-right:0}
.magfan button:nth-child(1){transform:rotate(-6deg)} .magfan button:nth-child(2){transform:translateY(-6px)} .magfan button:nth-child(3){transform:rotate(5deg)}
.magfan button:hover,.magfan button:focus-visible{transform:translateY(-12px) rotate(0); z-index:2}
.magfan img{display:block; width:100%; aspect-ratio:210/297; object-fit:cover; border-radius:2px; box-shadow:0 6px 16px rgba(15,25,54,.2); background:#fff}
@media (max-width:560px){
  .tile.ptile{flex-direction:column; gap:12px; flex-basis:84%}
  .magfan{align-self:flex-start; padding-top:10px} .magfan button{width:58px; margin-right:-20px}
  .adfan{height:104px; width:120px}
}
/* Text & Konzeption */
.card--text{background:#fbfaf6}
.card--text h2{font-family:var(--f-mono); font-weight:600; font-size:23px; letter-spacing:-.02em}
.tr{color:transparent}
.typing .tv{border-right:2px solid currentColor; margin-right:-2px; animation:caretb .8s steps(1) infinite}
@keyframes caretb{50%{border-right-color:transparent}}
@keyframes caret{50%{opacity:0}}
.card--text .tile{border-color:var(--line); background:#fff}
.card--text .tiles{scrollbar-color:#d5dbea transparent}
.card--text .tscroll{color:var(--ink); border-color:var(--line)}
.tile.xhead{flex-basis:calc(80% - 12px); justify-content:space-between; gap:10px; background:#fff}
.card .tile p.xline{color:var(--ink); opacity:1; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:clamp(26px,3.6vw,38px); line-height:1.08; letter-spacing:-.01em; margin:0; max-width:none; min-height:2.2em; text-wrap:balance}
.xsrc{color:var(--muted)}
.card h3.bf-title{margin:0; line-height:0} .card h3.bf-title img{height:50px; width:auto; display:block}
.card .tile p.xline.ursa{font-family:"Signika", var(--f-body); font-style:normal; font-weight:600; letter-spacing:-.005em; color:#3d92d0}
.xnav{display:flex; align-items:center; gap:10px}
.xlink{order:3; margin-left:auto; font-size:13px; color:var(--ink); text-underline-offset:3px}
.xcount{font-family:var(--f-mono); font-size:11px; color:var(--muted); letter-spacing:.08em}
.tile.xtile{flex-basis:calc(62% - 12px); justify-content:center}
.xtile h3{margin:0; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:21px; line-height:1.15}
.card .xtile p{font-size:14px; color:var(--muted); line-height:1.5}
.xbtn{align-self:flex-start; border:0; background:none; padding:2px 0; color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.xbook{flex-direction:row; align-items:center; gap:16px}
.xbt{display:flex; flex-direction:column; gap:6px; min-width:0}
.xcov,.bookcov{flex:none; border:0; padding:0; background:none; cursor:zoom-in}
.xcov img,.bookcov img{display:block; width:96px; aspect-ratio:1; object-fit:cover; border-radius:3px; box-shadow:4px 6px 0 #e8ebf3, 0 6px 16px rgba(15,25,54,.16); transition:transform .3s}
.bookcov{align-self:center} .bookcov img{width:104px}
.xcov:hover img,.bookcov:hover img{transform:rotate(-3deg) translateY(-3px)}
@media (max-width:560px){ .tile.xhead{flex-basis:88%} .tile.xtile{flex-basis:84%} .xbook{flex-direction:column; align-items:flex-start} }
.msg.a.bare{background:none; padding:0; box-shadow:none; border:0}
.reader{align-items:flex-start; overflow-y:auto; padding-top:max(56px, env(safe-area-inset-top, 0px)); padding-bottom:40px}
.reader .sheet{background:#fff; color:#111; width:min(680px, 100%); border-radius:6px; padding:clamp(28px,5vw,56px); box-shadow:0 30px 80px rgba(0,0,0,.5); outline:none; margin:auto}
.reader .rk{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#666}
.reader h3{margin:14px 0 6px; font-family:var(--f-display); font-weight:700; font-size:clamp(28px,4.4vw,40px); line-height:1.08; letter-spacing:-.015em; color:#111}
.reader .rd{margin:0 0 26px; font-size:18px; color:#444}
.reader .rb p{margin:0 0 1.05em; font-size:17.5px; line-height:1.65; color:#111; max-width:none; hyphens:auto}
.reader .rmag{margin-top:10px; border:0; background:none; padding:0; font:inherit; font-size:14px; font-weight:600; color:#111; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
[hidden]{display:none !important}
/* Anzeigen */
.adfan{position:relative; flex:none; width:118px; border:0; padding:0; background:none; cursor:zoom-in}
.adfan img{position:absolute; left:14px; top:6px; width:78px; aspect-ratio:224/300; object-fit:cover; border-radius:2px; box-shadow:0 6px 16px rgba(15,25,54,.18); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.adfan img:nth-child(1){transform:rotate(-9deg) translate(-8px,6px)}
.adfan img:nth-child(2){transform:rotate(6deg) translate(12px,4px)}
.adfan img:nth-child(3){transform:rotate(-1deg)}
.adfan:hover img:nth-child(1){transform:rotate(-15deg) translate(-16px,8px)}
.adfan:hover img:nth-child(2){transform:rotate(12deg) translate(22px,6px)}
.adstrip{display:flex; gap:5px; flex-wrap:nowrap; margin-top:2px}
.adstrip button{flex:1 1 0; min-width:0; max-width:30px; aspect-ratio:224/300; border:1px solid var(--line); padding:0; border-radius:2px; overflow:hidden; cursor:zoom-in; background:#fff; transition:transform .2s}
.adstrip button:hover,.adstrip button:focus-visible{transform:translateY(-3px)}
.adstrip img{width:100%; height:100%; object-fit:cover; display:block}
.ad-lb img{max-height:calc(100vh - 120px); max-width:calc(100vw - 120px); border-radius:3px; box-shadow:0 30px 80px rgba(0,0,0,.6); background:#fff}
.ad-lb .lb-arr{position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(5,8,20,.4); color:#fff; font-size:18px; cursor:pointer}
.ad-lb .lb-prev{left:calc(14px + env(safe-area-inset-left, 0px))} .ad-lb .lb-nx{right:calc(14px + env(safe-area-inset-right, 0px))}
.ad-lb .lb-c{position:absolute; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%); color:#c3cbe0; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em}
@media (max-width:560px){ .ad-lb img{max-width:100vw; max-height:calc(100vh - 140px)} .ad-lb .lb-arr{top:auto; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); transform:none} }
.cover{color:#fff; background:linear-gradient(170deg,#1b4f9c 0%,#0f2f66 60%,#101936 100%); color:#fff; padding:16px 14px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:6px 8px 0 #e8ebf3}
.cover b{font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:26px; line-height:1}
.cover small{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.8}
.thumb.cover{padding:9px 8px; box-shadow:4px 5px 0 #e8ebf3}
.thumb.cover b{font-size:15px; line-height:1.05}
.thumb.cover small{font-size:8px}

/* Kampagne */
.card--kampagne{background:var(--ice); }
.card--kampagne::after{content:""; position:absolute; right:-60px; top:-40px; width:260px; height:520px; background:var(--lilac); transform:rotate(18deg); opacity:.55}
.card--kampagne > *{position:relative; z-index:1}
.card--kampagne .eyebrow{color:var(--ink)}
.poster{font-family:var(--f-display); font-weight:800; font-size:64px; line-height:.9; letter-spacing:-.04em; margin:0; text-transform:uppercase}
.card--kampagne h2{font-size:20px}

/* Kontakt */
.card--kontakt{gap:12px}
.card--kontakt h2{font-size:28px}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.field{display:flex; flex-direction:column; gap:4px; min-width:0}
.field label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.field input,.field textarea{border:1px solid var(--line); border-radius:8px; padding:8px 10px; background:#fff; color:var(--ink); resize:none; width:100%; box-sizing:border-box}
.field input:focus,.field textarea:focus{outline:2px solid var(--lilac); outline-offset:0; border-color:transparent}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:5px 12px; font-size:13px; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.fine{font-size:11.5px; color:var(--muted); line-height:1.4; max-width:40ch}
.ts{display:flex; align-items:center; gap:10px; flex-wrap:wrap; border:1px dashed #c4cbe0; border-radius:8px; padding:6px 10px; font-size:12.5px; color:var(--ink); background:#fff}
.ts-box{width:18px; height:18px; border-radius:4px; background:#2f8f5b; color:#fff; display:grid; place-items:center; font-size:12px}
.ts-note{font-family:var(--f-mono); font-size:10.5px; color:var(--muted); margin-left:auto}
.card--danke{align-items:flex-start; justify-content:center; text-align:left}
.card--danke h2{font-size:38px}

/* Steuerung unter der Karte */
.nav{width:min(600px,100%); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px}
.ghost{appearance:none; background:transparent; border:0; color:var(--on-night-dim); cursor:pointer; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; padding:6px 2px}
.ghost:hover{color:var(--on-night)}
.ghost.r{justify-self:end}
.ghost.l{justify-self:start}
.deck-ic{width:16px; height:14px; position:relative}
.deck-ic::before,.deck-ic::after{content:""; position:absolute; inset:0; border:1.5px solid currentColor; border-radius:3px}
.deck-ic::before{transform:rotate(-12deg) translateX(-3px)}
.dots{display:flex; gap:8px}
.dot{width:8px; height:8px; border-radius:50%; background:#3a4678; border:0; padding:0; cursor:pointer; transition:width .3s, background .3s}
.dot.on{width:22px; border-radius:4px; background:linear-gradient(90deg,var(--ice),var(--lilac))}
.dot.pre{background:transparent; box-shadow:inset 0 0 0 1.5px #4d5a92}
.dot.pre.on{background:linear-gradient(90deg,var(--ice),var(--lilac)); box-shadow:none}
.caption{font-family:var(--f-mono); font-size:11.5px; color:var(--on-night-dim); letter-spacing:.03em; text-align:center; min-height:1.2em}
.caption b{color:var(--ice); font-weight:600}

.toprow{width:min(600px,100%); display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.home{justify-self:start; appearance:none; background:transparent; border:0; padding:6px 2px; color:var(--on-night-dim); cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:13.5px}
.home:hover{color:var(--on-night)}



/* Effekt-Hilfen */
.fx-canvas{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60}
.piece{position:absolute; inset:0; filter:drop-shadow(0 2px 0 #eef0f5) drop-shadow(0 14px 18px rgba(0,0,0,.35)); z-index:4}
.shade{position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,25,54,.45), rgba(16,25,54,0) 70%); pointer-events:none; z-index:5}
.gloss{position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.9) 85%, rgba(16,25,54,.25)); opacity:0; pointer-events:none}
.env{position:absolute; inset:0; z-index:6; pointer-events:none}
.env > *{position:absolute}
.env svg{overflow:visible}
.e-back{border-radius:6px; background:linear-gradient(180deg,#0c1430,#182654); box-shadow:0 30px 60px -18px rgba(0,0,0,.75)}
.seal{width:48px; height:48px; border-radius:50%; opacity:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-display); font-weight:800; font-size:24px; color:#101936; background:radial-gradient(circle at 35% 30%, #c9dcea, #8eb3ce 45%, #ad86b4); box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 -3px 6px rgba(16,25,54,.25)}

/* Fächer: alle Projekte */
.fan{position:fixed; inset:0; z-index:50; background:rgba(8,12,30,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; opacity:0; pointer-events:none; transition:opacity .3s;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.fan.open{opacity:1; pointer-events:auto}
.fan-head{display:flex; gap:16px; align-items:center; margin-bottom:56px}
.fan-k{font-family:var(--f-mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ice)}
.fan-x{position:absolute; top:max(22px, env(safe-area-inset-top, 0px)); right:max(22px, env(safe-area-inset-right, 0px))}
.fan-cards{position:relative; width:100%; height:var(--fh,300px)}
.mini{position:absolute; left:50%; top:30px; width:150px; height:205px; margin-left:-75px; border-radius:12px; border:0; cursor:pointer; text-align:left;
  padding:14px; display:flex; flex-direction:column; justify-content:space-between; color:var(--ink); background:var(--paper);
  box-shadow:0 18px 30px -10px rgba(0,0,0,.6); transform-origin:50% 50%;
  transform:translate(0px, 60px) rotate(0deg); opacity:0; transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s, box-shadow .3s; transition-delay:var(--d,0s)}
.fan.open .mini{transform:translate(var(--x), calc(var(--y) + var(--lift,0px))) rotate(var(--a)); opacity:1}
.fan.open .mini:hover,.fan.open .mini:focus-visible{--lift:-16px; transition-delay:0s; z-index:30; box-shadow:0 26px 40px -12px rgba(0,0,0,.7)}
.mini.here{outline:2px solid var(--ice); outline-offset:3px}
.mini .mt{font-size:12.5px; line-height:1.3; color:var(--muted); margin-top:6px}
.mini.m-development .mt{color:#aeb8d6}
.mini b + .mt{display:block}
.mini b{font-family:var(--f-display); font-size:19px; line-height:1.05; display:block}
@media (max-width:620px){ .mini b{font-size:16px} .mini .mt{font-size:11.5px} .fan-head{margin-bottom:44px} }
.mini small{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.mini.m-artie{background:#f3eff7}
.mini.m-development{background:#0b1230; color:var(--on-night)}
.mini.m-development small{color:var(--ice)}
.mini.m-magazin{background:#fff}
.mini.m-design{background:#f6f7fb}
.mini.m-magazin b{font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:22px}
.mini.m-kampagne{background:var(--ice)}
.mini.m-kontakt{background:linear-gradient(160deg,var(--paper),#e4e9f5)}
.fan-close{border:1px solid rgba(255,255,255,.3); background:transparent; color:var(--on-night); border-radius:999px; padding:6px 14px; cursor:pointer; font-size:13px}

/* Philosophie */
.philo-btn{appearance:none; background:transparent; border:1px solid rgba(142,179,206,.35); color:var(--on-night); border-radius:999px; padding:7px 16px; cursor:pointer;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; gap:10px; align-items:center}
.philo-btn:hover{border-color:var(--lilac)}
.philo-btn i{width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--ice),var(--lilac)); box-shadow:0 0 12px var(--lilac)}
.philo{position:fixed; inset:0; z-index:55; background:radial-gradient(70% 60% at 50% 0%, #1b2656 0%, #0a1028 70%); overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity .45s;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
.philo.open{opacity:1; pointer-events:auto}
.philo-in{max-width:720px; margin:0 auto; padding-block:72px 64px; display:flex; flex-direction:column; gap:34px}
.philo-top{display:flex; justify-content:space-between; align-items:center; gap:12px}
.philo-close{border:1px solid rgba(255,255,255,.3); background:transparent; color:var(--on-night); border-radius:999px; padding:6px 14px; cursor:pointer; font-size:13px}
.vorg-btn{justify-self:end}
.lightmark{display:inline-block; position:relative; margin:0 .06em 0 .02em; padding:0 .1em .05em; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:1.12em; letter-spacing:0;
  background:linear-gradient(100deg,var(--ice) 10%,var(--lilac) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; transform:rotate(-5deg) translateY(-.05em)}
.lightmark::after{content:""; position:absolute; left:.12em; right:-.02em; bottom:.06em; height:.07em; border-radius:1em; background:linear-gradient(90deg,var(--ice),var(--lilac)); transform:skewX(-25deg) rotate(-1.5deg); opacity:.85}
.vorg-intro{display:flex; flex-direction:column; gap:10px}
.vorg-intro h2{margin:0; font-family:var(--f-display); font-weight:700; font-size:clamp(26px,4.4vw,40px); letter-spacing:-.02em; line-height:1.08; text-wrap:balance}
.vorg-intro p{margin:0; color:var(--on-night-dim); line-height:1.55; max-width:56ch}
.vorg{display:flex; flex-direction:column; padding-block:max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px))}
.vorg .philo-in{margin:auto; width:100%; min-height:0; padding-block:16px; gap:28px}
.vorg .chat{flex:none; padding:26px 26px 22px; gap:20px; border-color:rgba(142,179,206,.18)}
.vorg .log{max-height:min(44vh,420px); min-height:0; gap:14px; padding-right:4px}
.vorg .ask{padding-top:18px; border-top:1px solid rgba(142,179,206,.14); gap:10px}
.vorg .ask textarea{padding:13px 18px}
.vorg .ask #askBtn{padding:13px 22px}
.vorg .chat-note{margin-top:-6px}
@media (max-width:620px){ .vorg .chat{padding:18px 16px 16px} }
.vorg .book{flex:none}
.vorg:has(#book:not([hidden])) .vorg-intro{display:none}
.vorg.open .philo-in{animation:sheetUp .55s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetUp{from{transform:translateY(60px); opacity:0}to{transform:none; opacity:1}}
.direct{appearance:none; background:transparent; border:0; padding:4px 0; color:var(--ice); cursor:pointer; font-size:13.5px; text-align:left; align-self:flex-start}
.direct:hover{color:var(--on-night); text-decoration:underline}
.book-head{display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:space-between; align-items:flex-start}
.orig{position:relative; flex:none; width:68px; height:68px}
.orig-av{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 2px var(--night), 0 0 0 4px var(--ice)}
.orig-badge{position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); background:var(--ice); color:var(--ink); font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:999px; white-space:nowrap}
.book-title{flex:1; min-width:0}
.book-head{align-items:center}
.book-head h3{margin:0 0 4px; font-family:var(--f-display); font-size:22px}
.book-head p{margin:0; font-size:13.5px; color:var(--on-night-dim)}
.days{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px}
.day{border:1px solid rgba(142,179,206,.3); background:transparent; color:var(--on-night); border-radius:10px; padding:10px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px}
.day small{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-night-dim)}
.day b{font-family:var(--f-display); font-size:20px}
.day[aria-pressed="true"]{background:linear-gradient(135deg,var(--ice),var(--lilac)); color:var(--ink); border-color:transparent}
.day[aria-pressed="true"] small{color:var(--ink)}
.slots{display:flex; flex-wrap:wrap; gap:8px}
.slot{border:1px solid rgba(142,179,206,.4); background:transparent; color:var(--on-night); border-radius:999px; padding:8px 14px; cursor:pointer; font-variant-numeric:tabular-nums; font-size:14px}
.slot:hover{border-color:var(--lilac)}
.slot:disabled{opacity:.3; text-decoration:line-through; cursor:default}
.slot[aria-pressed="true"]{background:var(--ice); color:var(--ink); border-color:var(--ice)}
.bform{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.bform .full{grid-column:1 / -1}
.bfield{display:flex; flex-direction:column; gap:4px; min-width:0}
.bfield label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-night-dim)}
.bfield input,.bfield textarea{border:1px solid rgba(142,179,206,.35); background:#0d1430; color:var(--on-night); border-radius:8px; padding:9px 11px; resize:vertical; width:100%; box-sizing:border-box}
.bsum{font-size:14px; line-height:1.5; margin:0}
.bsum b{color:var(--ice)}
.bts{font-family:var(--f-mono); font-size:11px; color:var(--on-night-dim); border:1px dashed #5d6a9e; border-radius:8px; padding:7px 10px}
.bdone h3{margin:0; font-family:var(--f-display); font-size:clamp(24px,4vw,34px)}
@media (max-width:620px){ .bform{grid-template-columns:1fr} .day{padding:8px 2px} .day b{font-size:17px} }
.vorg-intro{flex-direction:row; align-items:center; gap:24px}
.hl-text{display:flex; flex-direction:column; gap:10px; min-width:0}
.hl-avatar{position:relative; flex:none; width:112px; height:112px}
.hl-avatar img{position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:50%; object-fit:cover; filter:saturate(.8) brightness(1.07) contrast(.96); animation:hlBreathe 5.5s ease-in-out infinite}
.hl-ring{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, var(--ice), var(--lilac), transparent 70%, var(--ice)); animation:hlSpin 9s linear infinite;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px))}
.hl-badge{position:absolute; right:-6px; bottom:4px; background:#fff; border-radius:999px; padding:1px 9px 3px; font-family:var(--f-serif); font-style:italic; font-size:15px; line-height:1.2; box-shadow:0 4px 12px rgba(0,0,0,.35); transform:rotate(-8deg)}
.hl-badge{color:var(--lilac)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){ .hl-badge{color:#7d6aa8} }
.vorg.open .hl-avatar{animation:hlPop .7s cubic-bezier(.2,1.4,.4,1) both .15s}
.hl-avatar.talking .hl-ring{animation-duration:1.6s}
.hl-avatar.talking img{animation:hlTalk .5s ease-in-out infinite alternate}
.hl-avatar.talking::after{content:""; position:absolute; inset:-6px; border-radius:50%; box-shadow:0 0 0 0 rgba(173,134,180,.5); animation:hlGlow 1.4s ease-out infinite}
@keyframes hlSpin{to{transform:rotate(360deg)}}
@keyframes hlBreathe{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.025) rotate(-1.2deg)}}
@keyframes hlTalk{from{transform:scale(1) translateY(0)}to{transform:scale(1.035) translateY(-1px) rotate(.8deg)}}
@keyframes hlGlow{0%{box-shadow:0 0 0 0 rgba(173,134,180,.5)}100%{box-shadow:0 0 0 14px rgba(173,134,180,0)}}
@keyframes hlPop{from{opacity:0; transform:scale(.6) rotate(-14deg)}to{opacity:1; transform:none}}
@media (max-width:620px){ .vorg-intro{gap:16px} .hl-avatar{width:78px; height:78px} .hl-badge{font-size:12px; right:-8px} }
@media (prefers-reduced-motion:reduce){ .hl-avatar img,.hl-ring,.vorg.open .hl-avatar,.hl-avatar.talking::after{animation:none} }
.tile.ctile{flex-basis:calc(50% - 6px); gap:6px; padding:16px 18px}
.ctile .mono{width:46px; height:46px; border-radius:10px; display:grid; place-items:center; font-family:var(--f-serif); font-style:italic; font-size:20px; color:var(--ink); background:#f6f7fb; border:1px solid var(--line); border-bottom:3px solid var(--lilac); margin-bottom:6px}
.ctile .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ctile h3{margin:0; font-family:var(--f-display); font-size:19px; font-weight:700; line-height:1.15}
.ctile p{font-size:13.5px; color:var(--muted); line-height:1.45}
@media (max-width:620px){ .tile.ctile{flex-basis:78%} }
.logo-box{height:54px; display:flex; align-items:center; justify-content:flex-start; margin-bottom:8px}
.logo-box img{height:100%; width:auto; max-width:100%; object-fit:contain; object-position:left center; display:block}
.sw3{display:flex; height:54px; border-radius:8px; overflow:hidden; border:1px solid var(--line); margin-bottom:8px}
.sw3 i{flex:1; display:flex; align-items:flex-end; padding:4px 6px}
.sw3 i:first-child{flex:1.6}
.sw3 b{font-family:var(--f-mono); font-weight:500; font-size:8.5px; letter-spacing:.04em; color:#fff; mix-blend-mode:difference; opacity:.9}
.philo-x{appearance:none; background:transparent; border:0; padding:6px; color:var(--on-night-dim); cursor:pointer; display:inline-flex}
.philo-x:hover{color:var(--on-night)}
.creed{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.creed li{font-family:var(--f-display); font-weight:700; font-size:clamp(26px,4.6vw,42px); line-height:1.08; letter-spacing:-.02em; text-wrap:balance}
.creed li:nth-child(even){color:var(--ice)}
.w{display:inline-block; opacity:0; transform:translateY(.4em); filter:blur(6px); animation:wIn .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes wIn{to{opacity:1; transform:none; filter:none}}
.philo-in{min-height:100%; box-sizing:border-box}
.thoughts{position:relative; flex:1; min-height:min(56vh,460px); touch-action:pan-y; user-select:none; cursor:grab}
.thought{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:22px}
.t-h .big{font-family:var(--f-display); font-weight:800; font-size:clamp(36px,6.6vw,66px); line-height:1.02; letter-spacing:-.03em; margin:0; text-wrap:balance}
.t-h .big .w:nth-last-child(-n+2){color:var(--ice)}
.t-q blockquote{margin:0; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:clamp(26px,4.2vw,40px); line-height:1.2; max-width:24ch; position:relative; padding-top:.6em}
.t-q blockquote::before{content:"„"; position:absolute; top:-.55em; left:-.05em; font-size:3em; line-height:1; color:var(--lilac); opacity:.55}
.t-q cite{font-style:normal; font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-night-dim)}
.t-end .big{font-family:var(--f-display); font-weight:700; font-size:clamp(28px,4.6vw,44px); line-height:1.1; letter-spacing:-.02em; margin:0; max-width:20ch}
.t-end .big b{color:var(--ice); font-weight:800}
.t-end .who{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-night-dim)}
.t-end .row{gap:10px}
.t-end .next{animation:none}
.t-kind{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-night-dim)}
.t-nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.t-arrow{width:46px; height:46px; border-radius:50%; border:1px solid rgba(142,179,206,.4); background:transparent; color:var(--on-night); font-size:18px; cursor:pointer}
.t-arrow:hover{border-color:var(--lilac)}
.t-arrow:disabled{opacity:.3; cursor:default}
.t-prog{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.t-prog span{width:6px; height:6px; border-radius:50%; background:#34407a; transition:all .3s}
.t-prog span.h{width:10px; border-radius:3px}
.t-prog span.on{background:var(--lilac); box-shadow:0 0 8px var(--lilac)}
.sig{font-size:16px; line-height:1.5; color:var(--on-night-dim); max-width:46ch}
.sig b{color:var(--on-night); font-weight:600}
.chat{border:1px solid rgba(142,179,206,.22); border-radius:16px; background:rgba(255,255,255,.03); padding:20px; display:flex; flex-direction:column; gap:14px}
.chat-head{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between}
.chat-head h3{margin:0; font-family:var(--f-display); font-size:20px}
.chat-head p{margin:0; font-size:13px; color:var(--on-night-dim); flex-basis:100%}
.log{display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow-y:auto}
.msg{max-width:88%; padding:10px 14px; border-radius:14px; line-height:1.5; font-size:14.5px; overflow-wrap:anywhere}
.msg.u{align-self:flex-end; background:var(--ice); color:var(--ink); border-bottom-right-radius:4px}
.msg.a{align-self:flex-start; background:#1c2652; color:var(--on-night); border-bottom-left-radius:4px}
.msg.a ul{margin:6px 0; padding-left:18px}
.msg.a p{margin:0 0 6px}
.msg.a p:last-child{margin:0}
.msg.err{background:transparent; border:1px dashed #5d6a9e; color:var(--on-night-dim)}
.hans{margin-top:8px; border-left:3px solid var(--lilac); padding:6px 10px; background:rgba(173,134,180,.12); border-radius:0 8px 8px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between}
.hans-txt ul{margin:0; padding-left:18px}
.hans-txt li + li{margin-top:4px}
.kontakt-cta{margin-top:10px}
.kontakt-cta button{border:1px solid rgba(142,179,206,.45); background:transparent; color:var(--on-night); border-radius:999px; padding:7px 14px; cursor:pointer; font-size:13.5px}
.kontakt-cta button:hover{border-color:var(--lilac); background:rgba(173,134,180,.12)}
.hans-note{font-size:13px; color:var(--ice)}
.hans button{border:0; background:var(--lilac); color:var(--ink); font-weight:600; border-radius:999px; padding:5px 12px; cursor:pointer; font-size:13px}
.hans button.hans-alt{background:none; color:var(--ice); font-weight:500; padding:5px 4px; text-decoration:underline; text-underline-offset:3px; margin-right:auto}
.hans .hans-txt{flex-basis:100%}
.opts{display:flex; flex-wrap:wrap; gap:6px}
.opts button,.starter{border:1px solid rgba(142,179,206,.45); background:transparent; color:var(--on-night); border-radius:999px; padding:6px 13px; cursor:pointer; font-size:13.5px}
.opts.multi button[aria-pressed="true"]{background:var(--ice); color:var(--ink); border-color:var(--ice)}
.opts .opts-go{background:linear-gradient(135deg,var(--ice),var(--lilac)); color:var(--ink); border-color:transparent; font-weight:600}
.opts .opts-go:disabled{opacity:.4; cursor:default}
.opts .opts-go:hover{background:linear-gradient(135deg,var(--ice),var(--lilac)); border-color:transparent}
.opts button:hover,.starter:hover{border-color:var(--lilac); background:rgba(173,134,180,.12)}
.ask{display:flex; gap:8px}
.ask{align-items:flex-end}
.ask textarea{flex:1; min-width:0; border:1px solid rgba(142,179,206,.35); background:#0d1430; color:var(--on-night); border-radius:22px; padding:10px 16px; resize:none; line-height:1.45; min-height:calc(1.45em + 22px); max-height:200px; overflow-y:hidden; font:inherit; box-sizing:border-box}
.vorg .ask textarea{min-height:calc(1.45em + 28px)}
.ask #askBtn{border:0; border-radius:999px; padding:10px 18px; background:linear-gradient(135deg,var(--ice),var(--lilac)); color:var(--ink); font-weight:600; cursor:pointer}
.ask #askBtn:disabled{opacity:.5; cursor:default}
.chat-note{font-family:var(--f-mono); font-size:10.5px; color:var(--on-night-dim); letter-spacing:.03em}
.thinking{display:inline-flex; gap:4px}
.thinking span{width:6px; height:6px; border-radius:50%; background:var(--ice); animation:blink 1s infinite}
.thinking span:nth-child(2){animation-delay:.15s}.thinking span:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}

@media (max-width:620px){
  .toprow{grid-template-columns:auto 1fr auto; gap:8px}
  .toprow .philo-btn{justify-self:center; padding:7px 12px; letter-spacing:.08em}
  .stack{height:560px}
  .card{padding:24px 22px}
  .card h2{font-size:26px}
  .card--karte h2{font-size:28px}
  .contacts{grid-template-columns:1fr}
  .tile{flex-basis:78%}
  .card--magazin h2{font-size:30px}
  .poster{font-size:48px}
  .fgrid{grid-template-columns:1fr}
  .mini{width:min(150px, calc((100vw - 48px) / 2)); height:150px; margin-left:calc(min(150px, calc((100vw - 48px) / 2)) / -2)}
  .fan{overflow-y:auto; justify-content:flex-start; padding-top:max(28px, env(safe-area-inset-top, 0px)); padding-bottom:28px}
  .nav{grid-template-columns:1fr 1fr}
  .dots{grid-column:1 / -1; grid-row:1; justify-self:center}
}
@media (prefers-reduced-motion:reduce){
  .next{animation:none}
  .w{animation:none; opacity:1; transform:none; filter:none}
  .mini{transition:opacity .2s}
}

/* ===== Designsystem merguet.de: Schrift, Logo, Modi Nacht und Papier ===== */
:root{
  --f-display:"Manrope","Avenir Next",system-ui,sans-serif;
  --f-body:"Manrope","Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Manrope","Avenir Next",system-ui,sans-serif;
  --cream:#f7f1e7; --cream-hi:#f8f1e5; --sand:#d8cab5;
  --navy-0:#07101c; --navy-1:#101936; --navy-2:#1a2848;
  --paper-bg:#f2ede5; --paper-card:#fffdf9; --paper-tile:#f6f2ea;
}
body{font-family:var(--f-body)}
.eyebrow,.tile .k,.ctile .k,.ptxt .k,.xsrc,.field label,.contacts dt,.fan-k,.rk{font-weight:600}
.card h2,.vorg-intro h2,.creed li,.t-h .big,.t-end .big{letter-spacing:-.025em}
.mark{align-items:flex-end; justify-content:space-between; gap:16px}
.mark .logo{height:40px; width:auto; display:block}
.mark span{font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
.toprow-r{justify-self:end; display:inline-flex; gap:8px; align-items:center}
.theme-btn{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:transparent; border:1px solid rgba(142,179,206,.35); color:var(--sand); transition:border-color .2s, transform .3s}
.theme-btn:hover{border-color:var(--lilac); transform:rotate(-12deg)}

/* Nacht (Standard) */
:root:not([data-theme="papier"]) body{background-color:var(--navy-1);
  background-image:radial-gradient(60% 50% at 18% 12%, rgba(142,179,206,.16), transparent 70%), radial-gradient(50% 45% at 85% 88%, rgba(173,134,180,.15), transparent 70%), linear-gradient(160deg, var(--navy-0) 0%, var(--navy-1) 55%, var(--navy-2) 100%);
  background-attachment:fixed}
:root:not([data-theme="papier"]){--ink:var(--cream); --muted:rgba(247,241,231,.66); --line:rgba(247,241,231,.14); --paper:#141d3a}
:root:not([data-theme="papier"]) .card,
:root:not([data-theme="papier"]) :is(.card--artie,.card--magazin,.card--design,.card--text){background:linear-gradient(165deg, rgba(22,32,58,.98) 0%, rgba(10,15,31,.97) 100%); color:var(--cream)}
:root:not([data-theme="papier"]) .card{border:1px solid rgba(247,241,231,.13); box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 -60px 120px -60px rgba(248,241,229,.10) inset}
:root:not([data-theme="papier"]) .card .tile{background:rgba(247,241,231,.05); border-color:rgba(247,241,231,.12)}
:root:not([data-theme="papier"]) .card .tile p{color:rgba(247,241,231,.72)}
:root:not([data-theme="papier"]) .card .tile.ctile{background:#fbf9f5; color:var(--navy-1); border-color:transparent}
:root:not([data-theme="papier"]) .card .tile.ctile :is(h3,a){color:var(--navy-1)}
:root:not([data-theme="papier"]) .card .tile.ctile :is(p,.k){color:#5b6482}
:root:not([data-theme="papier"]) .next{background:var(--cream-hi); color:var(--navy-1)}
:root:not([data-theme="papier"]) .card--development .next{background:linear-gradient(135deg,var(--ice),var(--lilac)); color:var(--navy-1)}
.card--development .next .ic{background:var(--navy-1); color:#fff}
:root:not([data-theme="papier"]) .field :is(input,textarea){background:rgba(247,241,231,.06); color:var(--cream); border-color:rgba(247,241,231,.18)}
:root:not([data-theme="papier"]) .ferr{color:#ffb4ab}
:root:not([data-theme="papier"]) .contacts dt{color:var(--ice)}
:root:not([data-theme="papier"]) .card .tile p.xline.ursa{color:#6fb3e6}
:root:not([data-theme="papier"]) .thumb{box-shadow:4px 5px 0 rgba(0,0,0,.25)}
:root:not([data-theme="papier"]) .logo-navy{display:none}

/* Papier */
:root[data-theme="papier"]{--ink:var(--navy-1); --muted:#5b6482; --line:rgba(16,25,54,.12); --paper:var(--paper-card); color-scheme:light}
:root[data-theme="papier"] body{background-color:var(--paper-bg); color:var(--navy-1);
  background-image:radial-gradient(60% 50% at 16% 10%, rgba(142,179,206,.24), transparent 70%), radial-gradient(50% 45% at 88% 92%, rgba(173,134,180,.17), transparent 70%), linear-gradient(160deg, #f4f0e9 0%, #efe9df 100%);
  background-attachment:fixed}
:root[data-theme="papier"] .card,
:root[data-theme="papier"] :is(.card--artie,.card--magazin,.card--design,.card--text){background:var(--paper-card); color:var(--navy-1)}
:root[data-theme="papier"] .card{border:1px solid rgba(16,25,54,.08); box-shadow:0 34px 70px -34px rgba(16,25,54,.35), 0 2px 6px rgba(16,25,54,.05)}
:root[data-theme="papier"] .card--development{background:var(--paper-card); color:var(--navy-1)}
:root[data-theme="papier"] .card .tile{background:var(--paper-tile); border-color:rgba(16,25,54,.08)}
:root[data-theme="papier"] .card .tile p{color:#4e5672}
:root[data-theme="papier"] .card .tile.ctile{background:#fff}
:root[data-theme="papier"] .contacts dt,:root[data-theme="papier"] .card .eyebrow{color:#8a5d93}
:root[data-theme="papier"] .card--development .eyebrow{color:#8a5d93}
:root[data-theme="papier"] .card--development h2 i{color:#8a5d93}
:root[data-theme="papier"] .hl-strip{color:var(--navy-1); border-color:rgba(16,25,54,.12)}
:root[data-theme="papier"] .hl-strip :is(.k,.hl-go){color:#3f7aa6}
:root[data-theme="papier"] .hl-strip:hover .hl-go{color:var(--navy-1)}
:root[data-theme="papier"] .card--development .tile a{color:#3f7aa6}
:root[data-theme="papier"] .card--development .tile .k{color:#5b6482}
:root[data-theme="papier"] .card .tile p.xline.ursa{color:#2f7fbf}
:root[data-theme="papier"] :is(.home,.ghost){color:#4e5672}
:root[data-theme="papier"] :is(.home,.ghost):hover{color:var(--navy-1)}
:root[data-theme="papier"] .philo-btn{color:var(--navy-1); background:rgba(255,255,255,.55); border-color:rgba(16,25,54,.16)}
:root[data-theme="papier"] .theme-btn{color:var(--navy-1); background:rgba(255,255,255,.55); border-color:rgba(16,25,54,.16)}
:root[data-theme="papier"] .dot{background:rgba(16,25,54,.18)}
:root[data-theme="papier"] .dot.on{background:linear-gradient(90deg,var(--ice),var(--lilac))}
:root[data-theme="papier"] .stack-hint{background:#e6dfd2; border-color:rgba(16,25,54,.06)}
:root[data-theme="papier"] .stack-hint.h2{background:#ddd5c7}
:root[data-theme="papier"] .logo-hell{display:none}
:root[data-theme="papier"] .i-sun{display:none}
:root:not([data-theme="papier"]) .i-moon{display:none}
.brandrow{width:min(600px,100%); display:flex; align-items:center; justify-content:space-between; margin-bottom:-6px}
.brand{display:flex}
.brand .logo{height:38px; width:auto; display:block; transition:opacity .2s}
.brand:hover .logo{opacity:.8}
.mark{justify-content:flex-start}
:root:not([data-theme="papier"]) .brand .logo-navy{display:none}
:root[data-theme="papier"] .brand .logo-hell{display:none}
/* Overlays (Philosophie, Vorgespräch, Übersicht, Lightbox) bleiben in beiden Modi dunkel */
.philo,.fan,.reel-lb{--ink:#101936; --muted:#5d6584; --line:#dde2ee; --paper:#f7f8fc; color:var(--on-night)}
/* Papier: auch Overlays, Vorgespräch, Übersicht und Lightboxen hell */
:root[data-theme="papier"] :is(.philo,.fan,.reel-lb){--on-night:#101936; --on-night-dim:#4e5672; color:#101936}
:root[data-theme="papier"] .philo{background:radial-gradient(70% 60% at 50% 0%, #fbf8f2 0%, #efe9df 75%)}
:root[data-theme="papier"] .fan{background:rgba(242,237,229,.88)}
:root[data-theme="papier"] .reel-lb{background:rgba(242,237,229,.97)}
:root[data-theme="papier"] :is(.fan-k,.t-kind,.philo-top .eyebrow){color:#8a5d93 !important}
:root[data-theme="papier"] .t-h .big .w:nth-last-child(-n+2),:root[data-theme="papier"] .creed li:nth-child(even),:root[data-theme="papier"] .t-end .big b{color:#3f7aa6}
:root[data-theme="papier"] .t-arrow{border-color:rgba(16,25,54,.25)}
:root[data-theme="papier"] .t-prog span{background:rgba(16,25,54,.18)}
:root[data-theme="papier"] .t-prog span.on{background:var(--lilac)}
:root[data-theme="papier"] .chat{background:rgba(255,255,255,.6); border-color:rgba(16,25,54,.12)}
:root[data-theme="papier"] .vorg .ask{border-top-color:rgba(16,25,54,.12)}
:root[data-theme="papier"] .msg.a{background:#fffdf9; color:#101936; box-shadow:0 1px 0 rgba(16,25,54,.06), 0 6px 18px -10px rgba(16,25,54,.25)}
:root[data-theme="papier"] .msg.a.bare{background:none; box-shadow:none}
:root[data-theme="papier"] .msg.u{background:#d9e7f2; color:#101936}
:root[data-theme="papier"] .msg.err{border-color:rgba(16,25,54,.25)}
:root[data-theme="papier"] .ask textarea{background:#fff; color:#101936; border-color:rgba(16,25,54,.18)}
:root[data-theme="papier"] :is(.opts button,.starter,.kontakt-cta button){border-color:rgba(16,25,54,.22); color:#101936}
:root[data-theme="papier"] :is(.direct,.hans-note,.bsum b){color:#3f7aa6}
:root[data-theme="papier"] .hans{background:rgba(173,134,180,.14)}
:root[data-theme="papier"] .bnote summary{color:#3f7aa6}
:root[data-theme="papier"] .orig-av{box-shadow:0 0 0 2px #f6f2ea, 0 0 0 4px var(--ice)}
:root[data-theme="papier"] .reel-lb :is(.lb-x,.lb-next,.lb-arr){color:#101936; border-color:rgba(16,25,54,.3); background:rgba(255,255,255,.6)}
:root[data-theme="papier"] .reel-lb :is(.lb-t,.lb-c){color:#5b6482}
:root[data-theme="papier"] .ad-lb img,:root[data-theme="papier"] .reel-lb video{box-shadow:0 30px 70px -20px rgba(16,25,54,.45)}
:root[data-theme="papier"] .mini{box-shadow:0 18px 30px -12px rgba(16,25,54,.35)}
@media (max-width:560px){ .home-t{display:none} .toprow-r{gap:6px} .theme-btn{width:32px; height:32px} }
.fan .mini.m-development{color:#e7ecf7} .fan .mini.m-development .mt{color:#aeb8d6}
.legal-links{display:flex; gap:10px; align-items:center; justify-content:center; font-size:12px; color:var(--on-night-dim); margin-top:-8px}
.legal-links a{color:inherit; text-decoration:none}
.legal-links a:hover{color:var(--on-night); text-decoration:underline; text-underline-offset:3px}
:root[data-theme="papier"] .legal-links{color:#5b6482}
:root[data-theme="papier"] .legal-links a:hover{color:#101936}
main{gap:34px}
.nav{margin-top:8px}
.brandrow{margin-bottom:-16px}
.legal-links{margin-top:-22px}
@media (max-width:560px){ main{gap:26px} .brandrow{margin-bottom:-10px} .legal-links{margin-top:-14px} }
/* Dezente Flächen im Hintergrund: zwei große, schräge Karten-Silhouetten, die langsam treiben */
body::before,body::after{content:""; position:fixed; z-index:-1; pointer-events:none; border-radius:56px; will-change:transform}
body::before{width:78vmax; height:50vmax; left:-22vmax; top:-14vmax; transform:rotate(-14deg);
  background:linear-gradient(135deg, rgba(142,179,206,.075), rgba(142,179,206,0) 70%); border:1px solid rgba(142,179,206,.06);
  animation:driftA 38s ease-in-out infinite alternate}
body::after{width:70vmax; height:46vmax; right:-24vmax; bottom:-18vmax; transform:rotate(11deg);
  background:linear-gradient(315deg, rgba(173,134,180,.08), rgba(173,134,180,0) 70%); border:1px solid rgba(173,134,180,.06);
  animation:driftB 44s ease-in-out infinite alternate}
@keyframes driftA{to{transform:rotate(-9deg) translate(3vmax,2vmax)}}
@keyframes driftB{to{transform:rotate(15deg) translate(-3vmax,-1.5vmax)}}
:root[data-theme="papier"] body::before{background:linear-gradient(135deg, rgba(142,179,206,.16), rgba(142,179,206,0) 70%); border-color:rgba(16,25,54,.05)}
:root[data-theme="papier"] body::after{background:linear-gradient(315deg, rgba(173,134,180,.14), rgba(173,134,180,0) 70%); border-color:rgba(16,25,54,.05)}
body{isolation:isolate}
@media (prefers-reduced-motion: reduce){ body::before,body::after{animation:none} }
.toprow{display:flex; align-items:center; gap:10px}
.toprow .home{margin-right:auto}
.toprow-r{gap:10px}
@media (max-width:560px){ .toprow{gap:6px} .toprow-r{gap:5px} .toprow .philo-btn{padding:7px 10px; gap:7px; letter-spacing:.06em; font-size:10.5px} .toprow .theme-btn{width:30px; height:30px} }
/* ===== Fancy-Modus ===== */
.fancy-btn[aria-pressed="true"]{border-color:transparent; color:#101936; background:linear-gradient(135deg,#ff2d87,#ffd23f)}
:root[data-theme="papier"] .fancy-btn[aria-pressed="true"]{background:linear-gradient(135deg,#2347d6,#e2623b); color:#fff}

/* Geschnittene Headline: obere Hälfte und untere Hälfte gegeneinander verschoben */
:root[data-fancy="an"]:not([data-theme="papier"]) .card:not(.card--text):not(.card--development) h2[data-text]{position:relative; color:transparent}
:root[data-fancy="an"]:not([data-theme="papier"]) .card:not(.card--text):not(.card--development) h2[data-text] > *{visibility:hidden}
:root[data-fancy="an"]:not([data-theme="papier"]) .card:not(.card--text):not(.card--development) h2[data-text]::before,
:root[data-fancy="an"]:not([data-theme="papier"]) .card:not(.card--text):not(.card--development) h2[data-text]::after{content:attr(data-text); position:absolute; inset:0; pointer-events:none}
:root[data-fancy="an"]:not([data-theme="papier"]) .card h2[data-text]::before{color:var(--fx-top); -webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 .58em,transparent .58em var(--lh,1.08em)); mask-image:repeating-linear-gradient(to bottom,#000 0 .58em,transparent .58em var(--lh,1.08em)); transform:translateX(-.05em)}
:root[data-fancy="an"]:not([data-theme="papier"]) .card h2[data-text]::after{color:var(--fx-bottom); -webkit-mask-image:repeating-linear-gradient(to bottom,transparent 0 .58em,#000 .58em var(--lh,1.08em)); mask-image:repeating-linear-gradient(to bottom,transparent 0 .58em,#000 .58em var(--lh,1.08em)); transform:translateX(.1em)}
:root[data-fancy="an"]:not([data-theme="papier"]) .card h2[data-text]{line-height:1.08; --lh:1.08em}

/* Fancy + Nacht = punkig */
:root[data-fancy="an"]:not([data-theme="papier"]){--fx-top:#f7f1e7; --fx-bottom:#ff2d87; --pink:#ff2d87; --acid:#e8ff3a; --ice:#ff2d87; --lilac:#ffd23f}
:root[data-fancy="an"]:not([data-theme="papier"]) body{background-color:#0c0910;
  background-image:radial-gradient(rgba(255,45,135,.16) 1.2px, transparent 1.4px), radial-gradient(70% 55% at 85% 90%, rgba(255,45,135,.22), transparent 70%), linear-gradient(160deg,#0c0910,#16101f);
  background-size:14px 14px, auto, auto}
:root[data-fancy="an"]:not([data-theme="papier"]) body::before{background:#ff2d87; opacity:.16; border:0; border-radius:6px; transform:rotate(-18deg); animation:none}
:root[data-fancy="an"]:not([data-theme="papier"]) body::after{background:repeating-linear-gradient(45deg, rgba(232,255,58,.18) 0 14px, transparent 14px 28px); border:0; border-radius:6px; transform:rotate(9deg); animation:none}
:root[data-fancy="an"]:not([data-theme="papier"]) .card,
:root[data-fancy="an"]:not([data-theme="papier"]) :is(.card--artie,.card--magazin,.card--design,.card--text){background:#120d18; border:2px solid #ff2d87; box-shadow:9px 9px 0 #ff2d87; border-radius:6px}
:root[data-fancy="an"]:not([data-theme="papier"]) .wrap{transform:rotate(-1.1deg)}
:root[data-fancy="an"]:not([data-theme="papier"]) .stack-hint{background:#e8ff3a; border:0; border-radius:4px; opacity:.9}
:root[data-fancy="an"]:not([data-theme="papier"]) .stack-hint.h2{background:#ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .card::before{background:repeating-linear-gradient(90deg,#e8ff3a 0 18px,#120d18 18px 30px); height:6px}
:root[data-fancy="an"]:not([data-theme="papier"]) .card .eyebrow{display:inline-block; align-self:flex-start; background:#e8ff3a; color:#0c0910; padding:3px 8px; transform:rotate(-2deg); letter-spacing:.18em}
:root[data-fancy="an"]:not([data-theme="papier"]) .next{background:#e8ff3a; color:#0c0910; border-radius:3px; box-shadow:4px 4px 0 #ff2d87; animation:none}
:root[data-fancy="an"]:not([data-theme="papier"]) .next .ic{background:#0c0910; color:#e8ff3a; border-radius:2px}
:root[data-fancy="an"]:not([data-theme="papier"]) .tlink{border-bottom:3px solid #ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .card .tile{border:1.5px dashed rgba(255,45,135,.6); border-radius:4px; background:rgba(255,45,135,.06)}
:root[data-fancy="an"]:not([data-theme="papier"]) .card .tile.ctile{border:0; background:#fff}
:root[data-fancy="an"]:not([data-theme="papier"]) .contacts dt{color:#ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .philo-btn{border:1.5px solid #ff2d87; border-radius:3px}
:root[data-fancy="an"]:not([data-theme="papier"]) .philo-btn i{background:#e8ff3a; box-shadow:none}
:root[data-fancy="an"]:not([data-theme="papier"]) .dot.on{background:#ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .philo{background:radial-gradient(rgba(255,45,135,.14) 1.2px, transparent 1.4px) 0 0/14px 14px, #0c0910}
:root[data-fancy="an"]:not([data-theme="papier"]) .t-h .big .w:nth-last-child(-n+2),
:root[data-fancy="an"]:not([data-theme="papier"]) .creed li:nth-child(even),
:root[data-fancy="an"]:not([data-theme="papier"]) .t-end .big b{color:#ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .t-h .big{text-shadow:4px 4px 0 rgba(232,255,58,.35)}
:root[data-fancy="an"]:not([data-theme="papier"]) .msg.a{background:#1d1426; border:1.5px solid #ff2d87; border-radius:4px}
:root[data-fancy="an"]:not([data-theme="papier"]) .msg.u{background:#e8ff3a; color:#0c0910; border-radius:4px}
:root[data-fancy="an"]:not([data-theme="papier"]) .mini{border-radius:4px; box-shadow:6px 6px 0 #ff2d87}

/* Fancy + Papier = künstlerisch: Gouache-Flächen, Tinte, Marker */
:root[data-fancy="an"][data-theme="papier"]{--ink-a:#1d2240; --sage:#8fa98c; --rose:#d9907e; --ochre:#d8a64a; --ice:#8fa98c; --lilac:#d9907e}
:root[data-fancy="an"][data-theme="papier"] body{background-color:#f4eee3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(160deg,#f6f1e7,#efe7d9)}
:root[data-fancy="an"][data-theme="papier"] body::before{width:min(360px,62vw); height:min(340px,58vw); left:calc(50% - min(500px,50vw)); top:calc(50% - 150px); border:0; transform:rotate(-8deg);
  border-radius:48% 52% 44% 56% / 55% 45% 58% 42%; background:radial-gradient(circle at 40% 35%, rgba(143,169,140,.85), rgba(143,169,140,.55) 70%, rgba(143,169,140,.25)); mix-blend-mode:multiply; animation:driftA 34s ease-in-out infinite alternate}
:root[data-fancy="an"][data-theme="papier"] body::after{width:min(320px,55vw); height:min(260px,46vw); right:auto; bottom:auto; left:calc(50% + min(170px,20vw)); top:calc(50% - 360px); border:0; transform:rotate(14deg);
  border-radius:62% 38% 46% 54% / 45% 58% 42% 55%; background:radial-gradient(circle at 55% 45%, rgba(217,144,126,.8), rgba(217,144,126,.5) 70%, rgba(216,166,74,.35)); mix-blend-mode:multiply; animation:driftB 40s ease-in-out infinite alternate}
:root[data-fancy="an"][data-theme="papier"] .card,
:root[data-fancy="an"][data-theme="papier"] :is(.card--artie,.card--magazin,.card--design,.card--text){background:#fffbf3; border:0; border-radius:3px; box-shadow:0 1px 0 rgba(29,34,64,.05), 0 28px 60px -30px rgba(29,34,64,.4)}
:root[data-fancy="an"][data-theme="papier"] .wrap{transform:rotate(.6deg)}
:root[data-fancy="an"][data-theme="papier"] .card--development .eyebrow{color:#b0563f}
:root[data-fancy="an"][data-theme="papier"] .stack-hint{background:#e6cf9c; border:0; border-radius:2px}
:root[data-fancy="an"][data-theme="papier"] .stack-hint.h2{background:#c5d3bf}
:root[data-fancy="an"][data-theme="papier"] .card::before{background:linear-gradient(90deg,var(--sage),var(--rose) 55%,var(--ochre)); height:5px}
:root[data-fancy="an"][data-theme="papier"] .card .eyebrow{color:#b0563f}
:root[data-fancy="an"][data-theme="papier"] .contacts dt{color:#5e7c5c}
/* Typo-Effekt: Überschrift in kursiver Serife, darunter ein schräger Marker-Strich */
:root[data-fancy="an"][data-theme="papier"] .card:not(.card--development) h2{color:var(--ink-a)}
:root[data-fancy="an"][data-theme="papier"] .card h2 .wd0{font-family:var(--f-display); font-style:normal; font-weight:800; letter-spacing:-.03em}
:root[data-fancy="an"][data-theme="papier"] .card h2 .wd1{font-family:var(--f-serif); font-style:italic; font-weight:500; letter-spacing:-.01em; font-size:1.08em; color:#b0563f}
:root[data-fancy="an"][data-theme="papier"] .next{background:#d9e2d3; color:var(--ink-a); border-radius:3px; animation:none; box-shadow:none}
:root[data-fancy="an"][data-theme="papier"] .next:hover{background:#cdd9c6}
:root[data-fancy="an"][data-theme="papier"] .next .ic{background:#fffbf3; color:#b0563f}
:root[data-fancy="an"][data-theme="papier"] .tlink{border-bottom:2px solid var(--rose)}
:root[data-fancy="an"][data-theme="papier"] .card .tile{background:#f5eddf; border:0; border-radius:2px}
:root[data-fancy="an"][data-theme="papier"] .philo-btn{border-radius:3px; background:#fffbf3}
:root[data-fancy="an"][data-theme="papier"] .philo-btn i{background:var(--rose); box-shadow:none}
:root[data-fancy="an"][data-theme="papier"] .dot.on{background:linear-gradient(90deg,var(--sage),var(--rose))}
:root[data-fancy="an"][data-theme="papier"] .philo{background:radial-gradient(36vmax 32vmax at 92% 10%, rgba(143,169,140,.55) 0 98%, transparent 100%), radial-gradient(28vmax 22vmax at 5% 95%, rgba(217,144,126,.55) 0 98%, transparent 100%), #f4eee3}
:root[data-fancy="an"][data-theme="papier"] .t-h .big .w:nth-last-child(-n+2),
:root[data-fancy="an"][data-theme="papier"] .creed li:nth-child(even),
:root[data-fancy="an"][data-theme="papier"] .t-end .big b{color:#b0563f; font-family:var(--f-serif); font-style:italic; font-weight:500}
:root[data-fancy="an"][data-theme="papier"] .mini{border-radius:2px}
:root[data-fancy="an"][data-theme="papier"] .fancy-btn[aria-pressed="true"]{background:linear-gradient(135deg,var(--sage),var(--rose)); color:#fff}
/* Fancy: Übersicht Leistungen & Projekte */
:root[data-fancy="an"]:not([data-theme="papier"]) .fan{background:radial-gradient(rgba(255,45,135,.18) 1.2px, transparent 1.4px) 0 0/14px 14px, rgba(12,9,16,.9)}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan .mini{border-radius:4px; background:#fff; border:2px solid #0c0910; box-shadow:7px 7px 0 #ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan .mini:nth-child(odd){background:#e8ff3a}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan .mini.m-development{background:#120d18; border-color:#ff2d87; box-shadow:7px 7px 0 #e8ff3a}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan .mini small{color:#0c0910; font-weight:700}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan .mini.m-development small{color:#ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan .mini .mt{color:#3a2a40}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan .mini.m-development{color:#f7f1e7}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan .mini.m-development .mt{color:#e8ff3a}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan .mini.here{outline:3px dashed #ff2d87; outline-offset:4px}
:root[data-fancy="an"]:not([data-theme="papier"]) .fan-k{background:#e8ff3a; color:#0c0910 !important; padding:4px 10px; transform:rotate(-2deg); display:inline-block}
:root[data-fancy="an"][data-theme="papier"] .fan{background:rgba(244,238,227,.9)}
:root[data-fancy="an"][data-theme="papier"] .fan .mini{border-radius:2px; background:#fffbf3; box-shadow:0 18px 30px -14px rgba(29,34,64,.35)}
:root[data-fancy="an"][data-theme="papier"] .fan .mini:nth-child(3n+1){background:#e3ead9}
:root[data-fancy="an"][data-theme="papier"] .fan .mini:nth-child(3n+2){background:#f3ddd3}
:root[data-fancy="an"][data-theme="papier"] .fan .mini:nth-child(3n){background:#f1e3c3}
:root[data-fancy="an"][data-theme="papier"] .fan .mini.m-development{background:#fffbf3; color:var(--ink-a)}
:root[data-fancy="an"][data-theme="papier"] .fan .mini.m-development .mt{color:#4e5672}
:root[data-fancy="an"][data-theme="papier"] .fan .mini small{color:#b0563f}
:root[data-fancy="an"][data-theme="papier"] .fan .mini b{font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:21px}
:root[data-fancy="an"][data-theme="papier"] .fan .mini.here{outline:2px solid #b0563f; outline-offset:4px}
:root[data-fancy="an"][data-theme="papier"] .fan-k{color:#b0563f !important}
/* Untere Navigation: links Leistungen & Kontakt, rechts Blätterpfeile, alles wie oben */
.nav{display:flex !important; align-items:center; justify-content:space-between; gap:10px}
.nav-l,.nav-r{display:inline-flex; align-items:center; gap:10px}
.nav-b{white-space:nowrap}
.nav-b .deck-ic{width:14px; height:12px}
.nav-b .nav-ic{flex:none}
#dots[hidden]{display:none}
@media (max-width:560px){ .nav{gap:6px} .nav-l,.nav-r{gap:5px} .nav-b{padding:6px 8px; letter-spacing:.02em; font-size:9.5px; gap:6px} .nav-arr{width:28px; height:28px} }
/* Logo statt Home in der Menüzeile */
.toprow .brand{margin-right:auto; display:flex; align-items:center}
.toprow .brand .logo{height:34px}
.reset-btn{color:var(--on-night-dim)}
.reset-btn[hidden]{display:none}
@media (max-width:560px){ .toprow .brand .logo{height:19px} .toprow{gap:4px} .toprow-r{gap:4px} .toprow .philo-btn{padding:6px 6px; letter-spacing:.02em; font-size:9.5px} .toprow .philo-btn i{display:none} .toprow .theme-btn{width:28px; height:28px} .toprow .theme-btn svg{width:14px; height:14px} }
.caption{display:none}
:root[data-fancy="an"]:not([data-theme="papier"]) .tiles{-webkit-mask-image:none !important; mask-image:none !important}
/* Impressum/Datenschutz: linksbündig unter der Navigation, mit dem m aus dem Favicon */
.legal-links{width:min(600px,100%); justify-content:flex-start; margin-top:-4px !important; font-size:12px}
.legal-m{width:16px; height:16px; border-radius:4px; display:block; margin-right:2px; box-shadow:0 0 0 1px rgba(247,241,231,.16)}
:root[data-theme="papier"] .legal-m{box-shadow:0 1px 3px rgba(16,25,54,.2)}
@media (max-width:560px){ .legal-links{margin-top:-10px !important} }
/* Rechtliches-Overlay: ruhig, gut lesbar */
.legal-ov .philo-in{max-width:680px}
.legal-body{font-size:15px; line-height:1.65; color:var(--on-night)}
.legal-body h2{font-family:var(--f-display); font-size:18px; font-weight:700; margin:30px 0 6px}
.legal-body h3{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--on-night-dim); margin:22px 0 4px}
.legal-body p{margin:0 0 10px; color:var(--on-night-dim)}
.legal-body .stand{font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.legal-body a{color:inherit}
:root[data-theme="papier"] .legal-body p{color:#3a4262}
/* ===== Größe wie merguet.de, Lichtkegel, Neigung, Spezialeffekt je Station ===== */
@media (min-width:900px){
  .stack{zoom:var(--z,1)}
  .toprow,.nav,.brandrow,.legal-links{width:min(calc(600px * var(--z,1)), 100%)}
}
.stack{transform:perspective(1400px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg)); transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card{isolation:isolate}
.card > .fxl{position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; --r:calc(190px + 4vw);
  -webkit-mask:radial-gradient(circle var(--r) at var(--mx,70%) var(--my,30%), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  mask:radial-gradient(circle var(--r) at var(--mx,70%) var(--my,30%), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  --fi:rgba(247,241,231,.16); --fs:rgba(247,241,231,.07)}
:root[data-theme="papier"] .card:not(.card--development) > .fxl{--fi:rgba(16,25,54,.13); --fs:rgba(16,25,54,.055)}
#pglow{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(36rem 36rem at var(--gx,60%) var(--gy,35%), rgba(173,134,180,.13), transparent 70%), radial-gradient(30rem 30rem at calc(var(--gx,60%) + 9%) calc(var(--gy,35%) - 7%), rgba(142,179,206,.14), transparent 70%)}
:root[data-theme="papier"] #pglow{opacity:.75}

/* Visitenkarte: Lichtkegel und Glanz wie auf merguet.de, eine Spur edler */
.card--karte > .fxl{background:radial-gradient(circle at var(--mx,70%) var(--my,30%), rgba(248,241,229,.20), transparent 60%), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 48%, transparent 62%)}
:root[data-theme="papier"] .card--karte > .fxl{background:radial-gradient(circle at var(--mx,70%) var(--my,30%), rgba(142,179,206,.22), transparent 60%), linear-gradient(115deg, transparent 30%, rgba(255,255,255,.8) 48%, transparent 62%)}

/* Social Media: Story-Ring, der im Licht kreist */
@property --fa{syntax:'<angle>'; inherits:false; initial-value:0deg}
.card--artie > .fxl{background:conic-gradient(from var(--fa) at var(--mx,70%) var(--my,30%), rgba(173,134,180,.30), rgba(142,179,206,.28), rgba(232,150,120,.24), rgba(173,134,180,.30)); animation:fxSpin 9s linear infinite; opacity:.85}
@keyframes fxSpin{to{--fa:360deg}}

/* Corporate Design: Gestaltungsraster und Konstruktionskreise unter dem Licht */
.card--design > .fxl{background:
  radial-gradient(circle at var(--mx,70%) var(--my,30%), transparent 0 59px, var(--fi) 60px 61px, transparent 62px 96px, var(--fi) 97px 98px, transparent 99px),
  linear-gradient(var(--fi) 1px, transparent 1px) 0 0/100% 24px,
  linear-gradient(90deg, var(--fi) 1px, transparent 1px) 0 0/48px 100%,
  repeating-linear-gradient(45deg, var(--fs) 0 1px, transparent 1px 34px)}

/* Text & Konzeption: liniertes Konzeptpapier mit Randlinie */
.card--text > .fxl{background:
  linear-gradient(90deg, transparent 52px, rgba(207,94,74,.35) 52px 53px, transparent 53px),
  repeating-linear-gradient(transparent 0 26px, var(--fi) 26px 27px)}

/* Development: Taschenlampe auf Quelltext */
.card--development > .fxl{background:radial-gradient(circle at var(--mx,70%) var(--my,30%), rgba(142,179,206,.16), transparent 55%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%22120%22%3E%3Cg%20font-family%3D%22monospace%22%20font-size%3D%2211%22%20fill%3D%22%238eb3ce%22%3E%3Ctext%20x%3D%224%22%20y%3D%2214%22%3E%26lt%3Bdiv%20class%3D%22idee%22%26gt%3B%3C/text%3E%3Ctext%20x%3D%2216%22%20y%3D%2230%22%3E%7B%20fein%3A%20true%20%7D%3C/text%3E%3Ctext%20x%3D%228%22%20y%3D%2246%22%3E01101%20%3D%26gt%3B%20%26lt%3B/%26gt%3B%3C/text%3E%3Ctext%20x%3D%2222%22%20y%3D%2262%22%3Econst%20m%20%3D%20%22merguet%22%3B%3C/text%3E%3Ctext%20x%3D%224%22%20y%3D%2278%22%3Eif%20%28gut%29%20%7B%20live%28%29%3B%20%7D%3C/text%3E%3Ctext%20x%3D%2214%22%20y%3D%2294%22%3E%5B%20%5D%20%3B%20%23%20%24%20_%20%7C%2010%3C/text%3E%3Ctext%20x%3D%226%22%20y%3D%22110%22%3E%26lt%3B/main%26gt%3B%20%2B%2B%20ok%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0/240px 120px; opacity:.4}

/* Development: Code nur dezent im Hintergrund – nie hinter Überschrift/Text, Kacheln decken ihn ab */
.card--development > .fxl{opacity:.28;
  -webkit-mask:radial-gradient(circle var(--r) at var(--mx,70%) var(--my,30%), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%), linear-gradient(to bottom, transparent 0 40%, #000 52%);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--r) at var(--mx,70%) var(--my,30%), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%) intersect, linear-gradient(to bottom, transparent 0 40%, #000 52%)}
/* Innere Karten (Kacheln) immer deckend: Effekte liegen nur dahinter, nie hinter Text */
:root:not([data-theme="papier"]) .card .tile:not(.ctile){background:linear-gradient(rgba(247,241,231,.05),rgba(247,241,231,.05)),#121a31}
:root[data-fancy="an"]:not([data-theme="papier"]) .card .tile:not(.ctile){background:linear-gradient(rgba(255,45,135,.06),rgba(255,45,135,.06)),#120d18}
:root[data-theme="papier"] .card .tile:not(.ctile){background-color:var(--paper-tile, #f6f2ea)}
/* Print: Lupe auf Druckraster (CMY) */
.card--magazin > .fxl{--r:150px; background:
  radial-gradient(circle, rgba(0,160,220,.38) 1.6px, transparent 2.2px) 0 0/8px 8px,
  radial-gradient(circle, rgba(225,0,130,.32) 1.6px, transparent 2.2px) 3px 2px/8px 8px,
  radial-gradient(circle, rgba(245,210,0,.40) 1.6px, transparent 2.2px) 5px 5px/8px 8px}
:root:not([data-theme="papier"]) .card--magazin > .fxl{opacity:.75}
@media (prefers-reduced-motion:reduce){ .stack{transform:none} .card--artie > .fxl{animation:none} }
/* Stationspfeile unten: größer und betonter als die Pfeile in der Karte */
.nav-r{gap:12px}
.nav-r .nav-arr{width:52px; height:52px; border-width:1.5px}
.nav-r .nav-arr svg{width:22px; height:22px; stroke-width:2.1}
@media (min-width:900px){ .nav-r .nav-arr{width:calc(46px * var(--z,1)); height:calc(46px * var(--z,1))} .nav-r .nav-arr svg{width:calc(20px * var(--z,1)); height:calc(20px * var(--z,1))} }
.nav-r .nav-arr:hover{transform:translateX(-3px)}
.nav-r .nav-arr[data-go="next"]:hover{transform:translateX(3px)}
@media (max-width:560px){ .nav-r{gap:6px} .nav-r .nav-arr{width:44px; height:44px} .nav-r .nav-arr svg{width:19px; height:19px} }
.nav-r .nav-arr[data-go="next"]{border:0; background:linear-gradient(135deg,var(--ice),var(--lilac)); color:#101936; box-shadow:0 10px 28px -8px rgba(173,134,180,.65)}
:root[data-theme="papier"] .nav-r .nav-arr[data-go="next"]{background:#101936; color:#f7f1e7; box-shadow:0 10px 24px -10px rgba(16,25,54,.55)}
:root[data-fancy="an"]:not([data-theme="papier"]) .nav-r .nav-arr[data-go="next"]{background:#e8ff3a; color:#120d18; border-radius:4px; box-shadow:5px 5px 0 #ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .nav-r .nav-arr[data-go="prev"]{border:1.5px solid #ff2d87; border-radius:4px}
:root[data-fancy="an"][data-theme="papier"] .nav-r .nav-arr[data-go="next"]{background:var(--rose,#b5523b); color:#fffbf3}
/* Logo oben größer */
.toprow .brand .logo{height:42px}
@media (min-width:900px){ .toprow .brand .logo{height:calc(40px * var(--z,1))} }
@media (max-width:560px){ .toprow .brand .logo{height:24px} }
@media (max-width:380px){ .toprow .brand .logo{height:19px} .nav-r{gap:4px} .nav-r .nav-arr{width:36px; height:36px} .nav-r .nav-arr svg{width:17px; height:17px} .nav{gap:4px} .nav-l{gap:4px} }
/* ===== Mobile: Kopfzeile mit Logo und Menü, Karte groß, Stationsleiste unten ===== */
.menu-btn,.nav-st{display:none}
.hb{position:relative; width:20px; height:14px; display:block}
.hb i{position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor; transition:transform .3s, opacity .2s, top .3s}
.hb i:nth-child(1){top:0} .hb i:nth-child(2){top:6px} .hb i:nth-child(3){top:12px}
.hb.x i:nth-child(1){top:6px; transform:rotate(45deg)} .hb.x i:nth-child(2){opacity:0} .hb.x i:nth-child(3){top:6px; transform:rotate(-45deg)}
.mmenu{position:fixed; inset:0; z-index:58; overflow-y:auto; visibility:hidden; opacity:0; transition:opacity .28s, visibility 0s .28s;
  background:radial-gradient(80% 50% at 85% 0%, rgba(173,134,180,.22), transparent 70%), radial-gradient(70% 50% at 0% 100%, rgba(142,179,206,.18), transparent 70%), #0d1430; color:var(--on-night)}
.mmenu.open{visibility:visible; opacity:1; transition:opacity .28s}
.mm-in{box-sizing:border-box; min-height:100%; display:flex; flex-direction:column; gap:26px; padding:max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); transform:translateY(-12px); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mmenu.open .mm-in{transform:none}
.mm-head{display:flex; align-items:center; justify-content:space-between; min-height:50px}
.mm-x{width:50px; height:50px}
.mm-main{display:flex; flex-direction:column}
.mmenu .mm-main .philo-btn{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:14px; width:100%; padding:17px 2px; cursor:pointer;
  font-family:var(--f-display); font-size:23px; font-weight:700; letter-spacing:-.015em; border-bottom:1px solid rgba(247,241,231,.12); color:inherit}
.mmenu .mm-main .philo-btn:first-child{border-top:1px solid rgba(247,241,231,.12)}
.mmenu .mm-main .philo-btn::after{content:"→"; margin-left:auto; font-weight:500; opacity:.55}
.mmenu .mm-main .philo-btn > i{width:9px; height:9px; border-radius:50%; background:var(--lilac); flex:none}
.mmenu .mm-main .nav-ic,.mmenu .mm-main .deck-ic{flex:none; transform:scale(1.15)}
.mm-mode-wrap{display:flex; flex-direction:column; gap:12px; margin-top:auto}
.mm-mode{display:flex; gap:12px}
.mm-mode .theme-btn{width:52px; height:52px}
.mm-mode .theme-btn svg{width:21px; height:21px}
.mm-legal .legal-links{width:auto !important; margin:0 !important; font-size:14px}
:root[data-theme="papier"] .mmenu{background:radial-gradient(80% 50% at 85% 0%, rgba(173,134,180,.18), transparent 70%), radial-gradient(70% 50% at 0% 100%, rgba(142,179,206,.24), transparent 70%), #f4efe7; color:var(--navy-1)}
:root[data-theme="papier"] .mmenu .mm-main .philo-btn{border-color:rgba(16,25,54,.12)}
:root[data-fancy="an"]:not([data-theme="papier"]) .mmenu{background:repeating-linear-gradient(135deg, rgba(255,45,135,.07) 0 14px, transparent 14px 28px), #120d18}
:root[data-fancy="an"]:not([data-theme="papier"]) .mmenu .mm-main .philo-btn{border-color:rgba(255,45,135,.45); border-bottom-style:dashed}
:root[data-fancy="an"]:not([data-theme="papier"]) .mmenu .mm-main .philo-btn > i{background:#e8ff3a; border-radius:0}
:root[data-fancy="an"]:not([data-theme="papier"]) :is(.menu-btn,.mm-x){border:1.5px solid #ff2d87; border-radius:4px}
:root[data-fancy="an"][data-theme="papier"] .mmenu{background:radial-gradient(60% 40% at 90% 5%, rgba(207,94,74,.18), transparent 70%), radial-gradient(60% 40% at 5% 95%, rgba(130,160,120,.22), transparent 70%), #fbf6ec}
:root[data-fancy="an"][data-theme="papier"] .mmenu .mm-main .philo-btn{font-family:"Newsreader",Georgia,serif; font-style:italic; font-weight:500; font-size:27px}
:root[data-fancy="an"][data-theme="papier"] .mmenu .mm-main .philo-btn > i{background:var(--rose,#cf5e4a)}
@media (max-width:620px){
  body{padding-left:max(14px, env(safe-area-inset-left, 0px)); padding-right:max(14px, env(safe-area-inset-right, 0px))}
  main{gap:16px !important; padding-block:6px 14px}
  .toprow{width:100% !important; display:flex !important; align-items:center; justify-content:space-between; gap:12px; min-height:52px}
  .toprow .toprow-r:empty{display:none}
  .toprow .brand .logo{height:32px !important}
  .toprow .menu-btn{display:grid !important; width:50px !important; height:50px !important; flex:none}
  .stack{width:100% !important; height:clamp(540px, calc(100svh - 190px), 620px) !important}
  body{margin:0}
  main{justify-content:space-between !important; min-height:100svh; box-sizing:border-box}
  .nav{width:100% !important; display:flex !important; align-items:center; justify-content:space-between}
  .nav-l:empty{display:none}
  .mm-legal .legal-links{display:flex}
  .nav-st{display:block; font-size:13px; line-height:1.35; color:var(--on-night-dim); min-width:0}
  .nav-st b{display:block; font-family:var(--f-display); font-size:17px; color:var(--on-night); letter-spacing:-.01em}
  :root[data-theme="papier"] .nav-st{color:#5b6482} :root[data-theme="papier"] .nav-st b{color:var(--navy-1)}
  .card--design .tiles{align-items:flex-start}
  .xcount{white-space:nowrap}
  .stack-hint.h1{transform:rotate(-1.8deg) translate(-4px,8px) !important} .stack-hint.h2{transform:rotate(1.4deg) translate(3px,6px) !important}
  html{overflow-x:clip}
  .mm-in{gap:20px}
  .nav-r{gap:10px !important} .nav-r .nav-arr{width:54px !important; height:54px !important} .nav-r .nav-arr svg{width:22px !important; height:22px !important}
}
@media (max-width:360px){ .toprow .brand .logo{height:28px !important} .nav-r .nav-arr{width:48px !important; height:48px !important} }
/* ===== Mobile, Runde 2: mehr Luft zum Rand, große Karte, Inhalte gestapelt ===== */
@media (max-width:620px){
  .toprow{padding:14px 8px 0; min-height:62px; box-sizing:border-box}
  .toprow .brand .logo{height:44px !important}
  .toprow .menu-btn{width:52px !important; height:52px !important}
  .nav{padding:0 8px 14px; box-sizing:border-box}
  main{gap:14px !important; padding-block:0 4px}
  .stack{height:max(500px, calc(100svh - 234px)) !important}
  main > .legal-links{display:flex !important; width:100% !important; margin:-6px 0 0 !important; padding:0 8px 10px; box-sizing:border-box; font-size:12.5px}
  .card{padding:26px 22px 22px !important; gap:14px}
  .card h2{font-size:28px}
  /* Kacheln untereinander statt Slider, scrollen in der Karte */
  .card .tiles{flex-direction:column !important; align-items:stretch !important; overflow-x:hidden; overflow-y:auto; scroll-snap-type:none; gap:12px; padding:0 0 18px;
    -webkit-mask-image:none !important; mask-image:none !important; overscroll-behavior:contain; scrollbar-width:none}
  .card .tiles::-webkit-scrollbar{display:none}
  .card .tiles.vmore{-webkit-mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,.6) 90%,transparent) !important; mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,.6) 90%,transparent) !important}
  .card .tiles > .tile{flex:0 0 auto !important; width:auto !important; max-width:none !important; min-height:0 !important}
  .card .row:has(> [data-scroll]){display:none}
  /* Visitenkarte: über die ganze Höhe verteilt */
  .card--karte{justify-content:space-between}
  .card--karte h2{font-size:34px !important; line-height:1.05}
  .card--karte .contacts{gap:16px}
  /* Social Media: Text oben, Reel darunter */
  .card--artie{flex-direction:column !important; gap:16px !important}
  .card--artie .reel{width:150px !important; height:267px !important; margin:0 !important; align-self:center}
  /* Corporate Design: kompakte Logo-Kacheln */
  .card--design .tile .k{display:none}
  .card--design .tile{padding:16px 18px; gap:6px}
  .card--design .tile .logo-box{margin-bottom:6px}
  /* Print: Kacheln mit Bild oben */
  .card--magazin .ptile{flex-direction:column !important}
  .card--magazin .tile .magfan,.card--magazin .tile .adfan{align-self:center}
}
@media (max-width:620px) and (max-height:700px){ .toprow .brand .logo{height:38px !important} .card--artie .reel{width:120px !important; height:213px !important} }
@media (max-width:380px){ .toprow .brand .logo{height:38px !important} .toprow{padding:12px 4px 0} .nav{padding:0 4px 12px} }
/* ===== Mobile-Typografie: große Headlines, einheitliche Copy, größere Bilder ===== */
@media (max-width:620px){
  .card h2{font-size:clamp(32px, 9.4vw, 40px) !important; line-height:1.04 !important; letter-spacing:-.03em}
  .card--karte h2{font-size:clamp(32px, 9.9vw, 46px) !important; line-height:1 !important; font-weight:800 !important}
  .card--development h2{font-size:clamp(30px, 9vw, 38px) !important}
  .card--magazin h2{font-size:clamp(34px, 10vw, 42px) !important}
  /* Copy überall gleich: 16 px, Subtexte 15 px, Kennzeilen 11,5 px */
  .card > p,.card .artie-main p,.card .contacts dd{font-size:16px !important; line-height:1.5 !important}
  .card .tile p,.card .ptxt p,.card .xtile p{font-size:15px !important; line-height:1.5 !important}
  .card .tile h3,.card .ptxt h3{font-size:21px !important; line-height:1.2}
  .card .eyebrow,.card .tile .k,.card .ptxt .k,.card .contacts dt,.card .mark span{font-size:11.5px !important; letter-spacing:.14em}
  .card .tile a,.card .tlink,.card .xlink,.card .xbtn{font-size:15px !important}
  .card .tile p.xline{font-size:clamp(30px, 9vw, 38px) !important; line-height:1.08 !important}
  /* Bilder größer */
  .card--artie{overflow-y:auto !important; overscroll-behavior:contain; scrollbar-width:none}
  .card--artie::-webkit-scrollbar{display:none}
  .card--artie .reel{width:100% !important; height:auto !important; flex:none !important; min-height:0; max-height:none; aspect-ratio:9/16; align-self:stretch}
  .card--design .tile .logo-box img{transform:scale(1.35); transform-origin:left center}
  .card--design .tile .logo-box{min-height:62px; display:flex; align-items:center; margin-bottom:10px}
  .card--magazin .magfan{transform:scale(1.25); transform-origin:center top; margin-bottom:28px}
  .card--magazin .bookcov img{width:140px}
  .card--text .xcov img{width:130px}
}
/* Mobile: kein Zurück-Button in der Karte, Wischen links/rechts blättert */
@media (max-width:620px){ .card .back{display:none !important} .stack{touch-action:pan-y} .card .tiles{touch-action:pan-y} }
/* Mobile: dezenter Hinweis auf die Darstellungsmodi */
.mb-badge,.mtip{display:none}
@media (max-width:620px){
  .toprow{position:relative}
  .toprow .menu-btn{position:relative}
  .mb-badge{display:grid; place-items:center; position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%;
    background:linear-gradient(135deg,var(--ice),var(--lilac)); color:#101936; box-shadow:0 0 0 2px var(--navy-1,#101936)}
  :root[data-theme="papier"] .mb-badge{background:#101936; color:#f7f1e7; box-shadow:0 0 0 2px #f2ede5}
  :root[data-fancy="an"]:not([data-theme="papier"]) .mb-badge{background:#e8ff3a; color:#120d18; border-radius:3px; box-shadow:0 0 0 2px #120d18}
  :root[data-fancy="an"][data-theme="papier"] .mb-badge{background:var(--rose,#cf5e4a); color:#fffbf3}
  .mtip{display:block; position:absolute; right:8px; top:calc(100% + 10px); z-index:20; max-width:230px; padding:9px 13px; border-radius:12px;
    font-size:13px; line-height:1.35; font-weight:600; background:#f7f1e7; color:#101936; box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
    opacity:0; transform:translateY(-6px); transition:opacity .35s, transform .35s; pointer-events:none}
  .mtip::before{content:""; position:absolute; right:20px; top:-6px; width:12px; height:12px; background:inherit; transform:rotate(45deg); border-radius:2px}
  .mtip.show{opacity:1; transform:none; pointer-events:auto}
  .mtip[hidden]{display:none}
  :root[data-theme="papier"] .mtip{background:#101936; color:#f7f1e7}
  :root[data-fancy="an"]:not([data-theme="papier"]) .mtip{background:#e8ff3a; color:#120d18; border-radius:3px}
}
/* ===== Mobile: Vorgespräch wie ein Messenger ===== */
@media (max-width:620px){
  .vorg{padding:0 !important; overflow:hidden !important}
  .vorg .philo-in{margin:0 !important; height:100dvh; max-height:100dvh; box-sizing:border-box; display:flex; flex-direction:column; gap:12px !important;
    padding:max(10px, env(safe-area-inset-top)) 18px 0 !important; max-width:none !important}
  .vorg .philo-top{min-height:52px; align-items:center; flex:none}
  .vorg .philo-top .eyebrow{font-size:11px; letter-spacing:.12em}
  .vorg .philo-x{width:46px; height:46px}
  .vorg .vorg-intro{flex:none; display:flex !important; flex-direction:row !important; align-items:center; gap:14px !important}
  .vorg .hl-avatar{display:none !important}
  .vorg .hl-badge{font-size:11px !important; right:-10px !important; bottom:-4px !important; padding:1px 7px !important}
  .vorg .hl-text h2{font-size:22px !important; line-height:1.12 !important; margin:0}
  .vorg .hl-text p{font-size:14px !important; line-height:1.4; margin:4px 0 0}
  .vorg .chat:not([hidden]){flex:1 1 auto; min-height:0; display:flex; flex-direction:column; border:0 !important; background:none !important; padding:0 !important; gap:10px !important; border-radius:0}
  .vorg .log{flex:1 1 auto; max-height:none !important; min-height:0; overflow-y:auto; padding:6px 0 4px; overscroll-behavior:contain; font-size:16px}
  .vorg .opts{flex-direction:column; gap:8px}
  .vorg .opts button,.vorg .starter{width:100%; text-align:left; padding:13px 16px !important; font-size:16px !important; border-radius:14px !important}
  .vorg .ask{flex:none; align-items:flex-end; gap:10px; padding:10px 0 4px !important; margin:0 -18px; padding-inline:18px !important}
  .vorg .ask textarea{font-size:16px !important; padding:13px 16px !important; border-radius:24px; max-height:120px}
  .vorg .ask #askBtn{flex:none; width:50px; height:50px; padding:0 !important; border-radius:50%; font-size:0 !important; display:grid; place-items:center}
  .vorg .ask #askBtn{position:relative; color:#101936}
  .vorg .ask #askBtn::after{content:""; position:absolute; inset:0; margin:auto; display:block; width:22px; height:22px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
  .vorg .chat-note{flex:none; font-size:11px !important; margin:0 !important; padding-bottom:max(12px, env(safe-area-inset-bottom))}
  .vorg .opts button{min-width:240px}
  .vorg .direct{flex:none; font-size:14px; padding:2px 0 max(14px, env(safe-area-inset-bottom)) !important}
  .vorg .book:not([hidden]){overflow-y:auto; padding-bottom:max(16px, env(safe-area-inset-bottom)) !important}
}
/* Mobile Visitenkarte: passt auf jeden Bildschirm */
@media (max-width:620px){
  .card--karte{gap:12px !important}
  .card--karte > p.legal{font-size:10.5px !important; line-height:1.45 !important; color:var(--muted)}
  .card--karte .qr-open{display:none !important}
  .card--karte .contacts{display:grid !important; grid-template-columns:1fr 1fr; gap:12px 14px !important}
  .card--karte .contacts > div:first-child{grid-column:1 / -1}
  .card--karte .contacts dd{font-size:15px !important}
  .card--karte .row{gap:10px 16px}
}
@media (max-width:620px) and (max-height:760px){
  .card--karte h2{font-size:clamp(30px, 8.6vw, 38px) !important}
  .card--karte{gap:10px !important; padding-top:20px !important; padding-bottom:18px !important}
  .card--karte .next{padding:9px 14px 9px 16px}
}
@media (max-width:620px) and (max-height:620px){
  .card--karte h2{font-size:26px !important} .card--karte .contacts dd{font-size:13.5px !important} .card--karte > p.legal,.card--karte .mark{display:none !important}
  .card--karte{gap:8px !important} .toprow .brand .logo{height:32px !important} .toprow{min-height:50px; padding-top:8px}
}
/* Reel-Buttons: schlichte Linien-Piktogramme, passend zum Modus */
.reel-btn{width:34px; height:34px; background:rgba(16,25,54,.55); color:#f7f1e7; border:1px solid rgba(247,241,231,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s, transform .2s}
.reel-btn:hover{background:rgba(16,25,54,.8); transform:scale(1.06)}
.reel-full:hover{transform:translateX(-50%) scale(1.06)}
.reel-btn svg{display:block}
.reel-sound .i-on,.reel-sound[aria-pressed="true"] .i-off{display:none}
.reel-sound[aria-pressed="true"] .i-on{display:block}
.reel-sound[aria-pressed="true"]{background:linear-gradient(135deg,var(--ice),var(--lilac)); color:#101936; border-color:transparent}
:root[data-theme="papier"] .reel-btn{background:rgba(255,253,249,.82); color:#101936; border-color:rgba(16,25,54,.14)}
:root[data-theme="papier"] .reel-sound[aria-pressed="true"]{background:#101936; color:#f7f1e7}
:root[data-fancy="an"]:not([data-theme="papier"]) .reel-btn{background:#120d18; color:#e8ff3a; border:1.5px solid #ff2d87; border-radius:4px}
:root[data-fancy="an"]:not([data-theme="papier"]) .reel-sound[aria-pressed="true"]{background:#e8ff3a; color:#120d18}
:root[data-fancy="an"][data-theme="papier"] .reel-btn{background:#fffbf3; color:#a8432d; border-color:rgba(168,67,45,.45)}
:root[data-fancy="an"][data-theme="papier"] .reel-sound[aria-pressed="true"]{background:var(--rose,#cf5e4a); color:#fffbf3}
@media (max-width:620px){ .reel-btn{width:44px; height:44px; bottom:12px} .reel-btn svg{width:20px; height:20px} .reel-sound{left:12px} .reel-next{right:12px} }
/* Kleine Modus-Anzeige im Footer, mit dezentem Zurücksetzen */
#resetBtn{display:none !important}
.legal-links{flex-wrap:wrap}
.mode-note{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.02em; opacity:.6; white-space:nowrap}
.mode-reset{all:unset; cursor:pointer; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; color:inherit; transition:opacity .2s, transform .3s}
.mode-reset:hover{transform:rotate(-40deg)}
.mode-reset:focus-visible{outline:1px solid currentColor}
.mode-reset[hidden]{display:none}
/* Mobile: „Direkt mit Hans sprechen“ klar aufgebaut */
@media (max-width:620px){
  .vorg:has(.book:not([hidden])) .vorg-intro{display:none !important}
  .vorg .book:not([hidden]){gap:22px !important; padding-top:4px !important}
  .vorg .book-head{display:grid !important; grid-template-columns:82px 1fr; grid-template-areas:"back back" "av h" "p p"; gap:14px 16px !important; align-items:center}
  .vorg .book-head > .direct{grid-area:back; justify-self:start; font-size:14px; padding:0 !important; order:-1}
  .vorg .book-head .orig{grid-area:av; width:72px; height:72px; margin:5px 0 0 5px}
  .vorg .book-title{display:contents}
  .vorg .book-title h3{grid-area:h; font-size:24px; line-height:1.15; margin:0; letter-spacing:-.02em}
  .vorg .book-title p{grid-area:p; font-size:16px; line-height:1.5; margin:6px 0 0; color:var(--on-night-dim)}
  :root[data-theme="papier"] .vorg .book-title p{color:#4e5672}
  .vorg #bookBody .bsum{font-size:16px; line-height:1.5; margin:0; padding:16px 18px; border-radius:14px; border:1px solid rgba(142,179,206,.22); background:rgba(255,255,255,.03)}
  :root[data-theme="papier"] .vorg #bookBody .bsum{border-color:rgba(16,25,54,.12); background:rgba(255,255,255,.6)}
  .vorg #bookBody .next{width:100%; justify-content:space-between; padding:15px 18px 15px 22px; font-size:16px}
  .vorg #bookBody .gcal{width:100%; height:calc(100dvh - 300px); min-height:420px; border:0; border-radius:14px; background:#fff}
}
/* Hans-light-Einstieg unten links */
.hl-cta{all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:4px 16px 4px 4px; border-radius:999px; border:1px solid rgba(142,179,206,.35); color:var(--on-night); min-width:0; transition:border-color .2s, background .2s}
.hl-cta:hover{border-color:var(--lilac); background:rgba(173,134,180,.1)}
.hl-cta:focus-visible{outline:2px solid var(--ice); outline-offset:3px}
.hl-cta-av{position:relative; flex:none; width:34px; height:34px}
.hl-cta-av img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 2px var(--lilac)}
.hl-cta-av i{position:absolute; right:-9px; bottom:-5px; font:italic 500 10px/1 "Newsreader",Georgia,serif; background:#f7f1e7; color:#6b4f86; padding:2px 5px 3px; border-radius:7px; transform:rotate(-8deg); box-shadow:0 2px 6px rgba(0,0,0,.25)}
.hl-cta-t{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.hl-cta-t b{font-size:12.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hl-cta-t small{display:none}
:root[data-theme="papier"] .hl-cta{color:var(--navy-1); background:rgba(255,255,255,.55); border-color:rgba(16,25,54,.16)}
:root[data-fancy="an"]:not([data-theme="papier"]) .hl-cta{border:1.5px solid #ff2d87; border-radius:4px}
:root[data-fancy="an"]:not([data-theme="papier"]) .hl-cta-av img{box-shadow:0 0 0 2px #e8ff3a}
:root[data-fancy="an"][data-theme="papier"] .hl-cta-av img{box-shadow:0 0 0 2px var(--rose,#cf5e4a)}
@media (min-width:621px){ .nav-l{min-width:0; flex-wrap:nowrap} .hl-cta-t b{overflow:visible} }
@media (min-width:621px){ .hl-cta{display:none !important} }
@media (max-width:620px){
  .nav-st{display:none !important}
  .nav-l{display:flex !important; min-width:0; flex:1}
  .hl-cta{padding:5px 14px 5px 5px; gap:12px; max-width:100%}
  .hl-cta-av{width:44px; height:44px}
  .hl-cta-t b{font-size:14.5px; letter-spacing:-.005em; white-space:normal; overflow:visible; line-height:1.2}
  .hl-cta-t small{display:none}
  .hl-cta{border-radius:30px; padding-right:16px}
  .nav{gap:12px}
}
/* Reels: KI-Hinweis und Ton-Schalter im Großformat */
.ki-badge{position:absolute; right:8px; top:30px; z-index:2; font-family:var(--f-mono); font-size:8.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#101936; background:rgba(247,241,231,.92); padding:3px 6px; border-radius:4px; pointer-events:none}
.reel-lb .lb-v{position:relative; display:flex}
.reel-lb .lb-v .ki-badge{top:14px; right:14px; font-size:10.5px; padding:4px 8px}
.lb-sound{position:absolute; left:14px; top:12px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:9px 14px 9px 11px; border-radius:999px; border:1px solid rgba(247,241,231,.4);
  background:rgba(16,25,54,.62); color:#f7f1e7; font:600 14px/1 var(--f-body); cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.lb-sound .i-on,.lb-sound[aria-pressed="true"] .i-off{display:none}
.lb-sound[aria-pressed="true"] .i-on{display:block}
.lb-sound[aria-pressed="false"]{animation:sndPulse 2.4s ease-in-out 1.2s 2}
@keyframes sndPulse{0%,100%{box-shadow:0 0 0 0 rgba(247,241,231,0)}50%{box-shadow:0 0 0 7px rgba(247,241,231,.18)}}
.lb-sound[aria-pressed="true"]{background:rgba(16,25,54,.4); border-color:rgba(247,241,231,.2)}
@media (max-width:620px){ .ki-badge{font-size:10px; top:40px; right:12px; padding:4px 7px} }
@media (prefers-reduced-motion:reduce){ .lb-sound{animation:none} }
/* Zurück-Button in der Karte wird generell nicht gebraucht */
.card .back{display:none !important}
/* Gespräch zurücksetzen: dezenter Textlink */
.chat-reset{color:var(--on-night-dim) !important; font-size:12.5px !important; text-decoration:underline; text-underline-offset:3px; opacity:.8}
.chat-reset:hover{opacity:1}
:root[data-theme="papier"] .chat-reset{color:#5b6482 !important}
/* Mikrofon im Eingabefeld */
.ask{position:relative}
.mic-btn{all:unset; box-sizing:border-box; flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--on-night-dim); border:1px solid rgba(142,179,206,.35); transition:color .2s, border-color .2s, background .2s}
.mic-btn:hover{color:var(--on-night); border-color:var(--ice)}
.mic-btn:focus-visible{outline:2px solid var(--ice); outline-offset:2px}
.mic-btn.rec{--mc:#8eb3ce; color:#101936; background:linear-gradient(135deg,var(--ice),var(--lilac)); border-color:transparent; box-shadow:0 0 0 calc(3px + var(--lvl,0) * 13px) color-mix(in srgb, var(--mc) 35%, transparent); transition:box-shadow .08s linear}
:root[data-theme="papier"] .mic-btn.rec{--mc:#101936; background:#101936; color:#f7f1e7}
:root[data-fancy="an"]:not([data-theme="papier"]) .mic-btn.rec{--mc:#e8ff3a; background:#e8ff3a; color:#120d18; border-color:transparent}
:root[data-fancy="an"][data-theme="papier"] .mic-btn.rec{--mc:#cf5e4a; background:var(--rose,#cf5e4a); color:#fffbf3}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(194,65,12,.45)}50%{box-shadow:0 0 0 8px rgba(194,65,12,0)}}
:root[data-theme="papier"] .mic-btn{color:#4e5672; border-color:rgba(16,25,54,.2)}
:root[data-fancy="an"]:not([data-theme="papier"]) .mic-btn{border:1.5px solid #ff2d87; color:#e8ff3a}
@media (max-width:620px){ .vorg .ask .mic-btn{width:50px; height:50px} }

/* Fancy Dark: Auswahl ohne Antworttext ohne pinken Rahmen */
:root[data-fancy="an"]:not([data-theme="papier"]) .msg.a.bare{background:none; border:0; padding-left:0; padding-right:0}
.t-end .t-call{color:inherit; text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.14em}
.t-end .t-call:hover{text-decoration-thickness:.1em}
/* Terminbuchung: Begrüßung von Hans light ausblenden, auch am Desktop */
.vorg:has(.book:not([hidden])) .vorg-intro{display:none !important}
/* Philosophie-Autoplay: der aktive Punkt füllt sich bis zur nächsten Folie */
.t-prog span{position:relative; overflow:hidden}
.t-prog.auto span.on{width:24px; border-radius:3px; background:rgba(173,134,180,.35); box-shadow:none}
.t-prog.auto span.on::after{content:""; position:absolute; inset:0; background:var(--lilac); transform-origin:left; animation:tFill var(--dur,6s) linear forwards}
@keyframes tFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
:root[data-fancy="an"]:not([data-theme="papier"]) .t-prog.auto span.on::after{background:#e8ff3a}
:root[data-fancy="an"][data-theme="papier"] .t-prog.auto span.on::after{background:var(--rose,#cf5e4a)}
@media (prefers-reduced-motion:reduce){ .t-prog.auto span.on::after{animation:none; transform:none} }
/* Mobile: jede Karte scrollt innen, wenn ihr Inhalt nicht ganz passt (z. B. Safari mit Leisten) */
@media (max-width:620px){
  .card{overflow-y:auto !important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .card::-webkit-scrollbar{display:none}
  .card--karte{justify-content:flex-start !important}
  .card--karte h2{margin-top:auto}
  .card--karte > :last-child{margin-bottom:0}
}
/* Mobile Chat: kompakter Fuß, Auswahl als Chips, Weiter-Button bleibt sichtbar */
.chat-links{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px}
@media (max-width:620px){
  .vorg .chat:not([hidden]){gap:6px !important}
  .vorg .ask{padding-top:8px !important; padding-bottom:2px !important}
  .vorg .chat-note{font-size:10.5px !important; line-height:1.3; padding:0 !important; opacity:.8}
  .vorg .chat-links{flex:none; padding-bottom:max(8px, env(safe-area-inset-bottom))}
  .vorg .chat-links .direct{font-size:13px !important; padding:2px 0 !important; margin:0 !important}
  .vorg .chat-links .chat-reset{font-size:12px !important}
  /* Auswahl als kompakte Chips in Reihen statt einer langen Liste */
  .vorg .opts{flex-direction:row !important; flex-wrap:wrap; gap:7px !important}
  .vorg .opts button,.vorg .starter{width:auto !important; min-width:0 !important; padding:9px 13px !important; font-size:14.5px !important; border-radius:999px !important; line-height:1.2}
  .vorg .opts button[aria-pressed="true"]::before{content:"✓ "; font-weight:700}
  .vorg .opts.multi .opts-go{position:sticky; bottom:0; width:100% !important; text-align:center; padding:12px 16px !important; font-size:15px !important; z-index:2; box-shadow:0 -10px 18px -6px rgba(0,0,0,.18); margin-top:4px}
}
/* Mobile: Weiter-Button deckend und klar abgesetzt (Leiste in Blasenfarbe mit Verlauf darüber) */
@media (max-width:620px){
  .vorg .opts.multi .opts-go{--bb:#1c2652; opacity:1 !important; position:sticky; bottom:0; border:0 !important;
    box-shadow:0 0 0 10px var(--bb), 0 -26px 22px 4px var(--bb) !important; margin-top:14px}
  .vorg .opts.multi .opts-go:disabled{background:#2b3768 !important; color:#aab4d0 !important}
  :root[data-theme="papier"] .vorg .opts.multi .opts-go{--bb:#fffdf9}
  :root[data-theme="papier"] .vorg .opts.multi .opts-go:disabled{background:#e9e6f0 !important; color:#5b6482 !important}
  :root[data-fancy="an"]:not([data-theme="papier"]) .vorg .opts.multi .opts-go{--bb:#1d1426}
  :root[data-fancy="an"]:not([data-theme="papier"]) .vorg .opts.multi .opts-go:disabled{background:#2a1f33 !important; color:#b9a9c6 !important}
}
/* Mobile Kontakt: Nachrichtenfeld immer bedienbar, Karte scrollt, Tastatur verdeckt nichts */
@media (max-width:620px){
  .card--kontakt #kform{flex:none !important; min-height:auto !important}
  .card--kontakt #kform > .field{flex:none !important; min-height:auto !important}
  .card--kontakt #kmsg{flex:none !important; min-height:140px; resize:vertical}
  .card--kontakt input,.card--kontakt textarea{font-size:16px !important}
  .card--kontakt .ts,.card--kontakt .cf-turnstile{flex:none; min-height:65px}
  .card--kontakt{padding-bottom:28px !important}
  .card--kontakt :is(input,textarea){scroll-margin:90px 0 140px}
}
/* Kontaktformular: Pflichtfelder und Einwilligung */
.req{color:var(--lilac); font-weight:700}
:root[data-theme="papier"] .req{color:#8a5d93}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--muted); cursor:pointer}
.consent input{flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--lilac); cursor:pointer}
.consent a{color:inherit; text-decoration:underline}
.fine .req-note{display:block; margin-top:2px}
@media (max-width:620px){ .card--kontakt .consent{font-size:13.5px} .card--kontakt .consent input{width:20px; height:20px} }
/* Kontaktformular Desktop: Nachrichtenfeld mit fester Mindesthöhe, Karte scrollt bei Bedarf */
.card--kontakt{overflow-y:auto; scrollbar-width:thin}
@media (min-width:621px){ .card--kontakt #kmsg{min-height:110px; flex:1 0 110px !important} .card--kontakt #kform > .field{flex:1 0 auto !important; min-height:auto !important} .card--kontakt #kform{flex:none !important; min-height:auto !important} }
.card--kontakt .ts-widget:empty{display:none}
.card--kontakt .consent{margin-top:10px}
@media (min-width:621px){ .card--kontakt .consent{font-size:11.5px; line-height:1.4; gap:8px} .card--kontakt .consent input{width:15px; height:15px; margin-top:1px} .card--kontakt .fine{font-size:11px} }
/* Visitenkarte: Kontakt speichern als Icon auf dem Handy, Firmenzeile raus */
.tlink .vcf-ic{display:none}
@media (max-width:620px){
  .card--karte > p.legal{display:none !important}
  .card--karte .row{flex-wrap:nowrap; gap:10px !important}
  .card--karte .row .spacer{display:none}
  .card--karte .tlink.vcf{display:none !important}
  .card--karte .contacts > div:first-child{grid-column:auto !important}
  .card--karte .contacts > .vcf-cell{display:block}
  .card--karte .contacts{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) !important}
  .card--karte .vcf-m{color:inherit; text-decoration:none}
  .card--karte .vcf-m .nw{white-space:nowrap}
  .card--karte .vcf-m svg{display:inline-block; vertical-align:-3px; margin-left:3px; opacity:.8}
}
.vcf-cell{display:none}
/* van greetchen auf der Social-Media-Station */
.vg-h{margin:.1em 0 .35em !important; line-height:1}
.vg-logo{display:block; width:min(100%, 340px); height:auto}
html[data-theme="nacht"] .vg-logo{filter:invert(1) brightness(.96) sepia(.08)}
.card--artie .artie-main > .row{margin-top:28px !important}
@media (max-width:620px){ .card--artie .artie-main > .row{margin-top:16px !important} }
.vg-lead{font-size:1.3em; font-weight:700; line-height:1.3; letter-spacing:-.01em}
/* „Mehr dazu“: Leseebene hinter den Karten */
.more-line{display:flex; align-items:baseline; justify-content:space-between; gap:18px; width:100%}
@media (min-width:621px){
  .card--artie{flex-wrap:wrap; align-content:stretch; row-gap:0}
  .card--artie > .more-line{flex:0 0 100%; height:auto}
  .card--artie > .artie-main{flex:1 1 0; align-self:center; justify-content:center}
  .card--artie > .reel{align-self:center}
  .card--artie > .more-line + .artie-main, .card--artie > .more-line ~ .reel{margin-top:auto !important; margin-bottom:auto !important}
}
@media (max-width:620px){ .more-line{gap:10px} .more-line > .mark,.more-line > .eyebrow{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .more-btn .tx2{display:none} }
.more-line > .mark,.more-line > .eyebrow{margin-bottom:0}
.more-btn{flex:none; margin:0 0 0 auto; padding:2px 0; background:none; border:0; cursor:pointer; font-family:var(--f-mono); font-size:11px; line-height:1.2; text-transform:uppercase; letter-spacing:.13em; color:#8a5d93; opacity:.85; white-space:nowrap; transform-origin:50% 55%; animation:moreShiver 8s linear 1.9s infinite, moreShiverOnce .7s linear 1.1s 1; transition:opacity .2s}
.more-btn:hover,.more-btn:focus-visible{opacity:1; animation:none}
.more-btn .ar{display:inline-block; margin-right:.9em; transition:transform .2s}
.more-btn:hover .ar{transform:translateX(2px)}
@keyframes moreShiverOnce{0%,100%{transform:none}14%{transform:rotate(-2.2deg)}30%{transform:rotate(2deg)}46%{transform:rotate(-1.6deg)}62%{transform:rotate(1.2deg)}80%{transform:rotate(-.5deg)}}
@keyframes moreShiver{0%,93%,100%{transform:none}94%{transform:rotate(-2.2deg)}95%{transform:rotate(2deg)}96%{transform:rotate(-1.6deg)}97%{transform:rotate(1.2deg)}98%{transform:rotate(-.5deg)}}
.more-scrim{position:fixed; inset:0; z-index:80; background:rgba(8,12,28,.38); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; transition:opacity .3s}
.more-scrim.on{opacity:1}
.more{position:fixed; z-index:81; top:0; right:0; bottom:0; overscroll-behavior:contain; width:min(480px, 100vw); overflow-y:auto; padding:56px 42px 48px; background:#fbf8f2; color:#101936; box-shadow:-30px 0 60px -20px rgba(0,0,0,.35); transform:translateX(102%); transition:transform .42s cubic-bezier(.2,.8,.2,1); scrollbar-width:thin; box-sizing:border-box}
.more.on{transform:none}
html[data-theme="nacht"] .more{background:#161f3d; color:#eef0f7}
.more .eyebrow{display:block}
.more h2{font-size:28px; line-height:1.15; margin:.35em 0 .7em; letter-spacing:-.01em}
.more p{font-size:16px; line-height:1.62; margin:0 0 1em}
.more a{color:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px}
.more a:hover{text-decoration-color:currentColor}
.more-x{position:sticky; top:-42px; z-index:3; display:block; margin:-42px -26px 2px auto; width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb, currentColor 22%, transparent); background:inherit; color:inherit; font-size:22px; line-height:1; cursor:pointer; box-shadow:0 2px 10px -4px rgba(0,0,0,.25)}
@media (max-width:620px){
  .more{top:auto; left:0; width:100vw; max-height:86vh; max-height:calc(100dvh - 56px); overscroll-behavior:contain; border-radius:22px 22px 0 0; padding:52px 24px calc(36px + env(safe-area-inset-bottom, 0px)); transform:translateY(102%); box-shadow:0 -30px 60px -20px rgba(0,0,0,.35)}
  .more.on{transform:none}
  .more-x{top:-42px; margin:-40px -10px 0 auto}
  .more h2{font-size:24px}
}
@media (prefers-reduced-motion: reduce){ .more,.more-scrim{transition:none} .more-btn{animation:none} .live-dot{animation:none} }
:root[data-fancy="an"]:not([data-theme="papier"]) .more{background:#120d18; color:#f7f1e7; border-left:3px solid #ff2d87; border-radius:0}
:root[data-fancy="an"]:not([data-theme="papier"]) .more .eyebrow{display:inline-block; background:#e8ff3a; color:#0c0910; padding:3px 8px; transform:rotate(-2deg); letter-spacing:.18em}
:root[data-fancy="an"]:not([data-theme="papier"]) .more h2{color:#f7f1e7; text-shadow:3px 3px 0 #ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .more a{color:#e8ff3a; text-decoration-color:#ff2d87}
:root[data-fancy="an"]:not([data-theme="papier"]) .more-x{border:1.5px solid #ff2d87; border-radius:4px; color:#e8ff3a}
:root[data-fancy="an"]:not([data-theme="papier"]) .more-scrim{background:rgba(18,13,24,.55)}
:root[data-fancy="an"][data-theme="papier"] .more{background:#f5eddf; color:#1d2240; border-left:3px solid #b0563f}
:root[data-fancy="an"][data-theme="papier"] .more .eyebrow{color:#b0563f}
:root[data-fancy="an"][data-theme="papier"] .more h2{font-family:var(--f-serif); font-style:italic; font-weight:500; color:#b0563f; letter-spacing:-.01em}
:root[data-fancy="an"][data-theme="papier"] .more a{color:#b0563f; text-decoration-color:rgba(176,86,63,.45)}
@media (max-width:620px){ :root[data-fancy="an"] .more{border-left:0; border-top:3px solid #ff2d87} :root[data-fancy="an"][data-theme="papier"] .more{border-top-color:#b0563f} }
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}

/* Agentur & Online-Marketing */
.tl{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line)}
.tl li{display:grid; grid-template-columns:138px 1fr; gap:16px; padding:7px 0; border-bottom:1px solid var(--line); align-items:baseline}
.tl b{font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.tl span{font-size:14px; line-height:1.42}
.card--agentur h2,.card--marketing h2{font-size:30px}
.card--agentur .row,.card--marketing .row{margin-top:auto}
.card--agentur .tl{margin-top:auto; margin-bottom:auto}
.svc{display:grid; grid-template-columns:1fr 1fr; gap:10px 26px; margin:0; border-top:1px solid var(--line); padding-top:12px}
.svc div{min-width:0}
.svc dt{font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.svc dd{margin:0; font-size:14px; line-height:1.42}
.live-strip{appearance:none; margin-top:auto; display:flex; align-items:center; gap:16px; width:100%; text-align:left; cursor:pointer; color:inherit; font:inherit;
  padding:9px 16px; border-radius:12px; background:linear-gradient(var(--paper),var(--paper)) padding-box, linear-gradient(120deg,var(--ice),var(--lilac)) border-box; border:1.5px solid transparent}
.live-strip .k{display:flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#c0392b}
.live-dot{width:8px; height:8px; border-radius:50%; background:#e0443a; box-shadow:0 0 0 0 rgba(224,68,58,.5); animation:liveDot 1.8s infinite}
@keyframes liveDot{0%{box-shadow:0 0 0 0 rgba(224,68,58,.5)}70%{box-shadow:0 0 0 8px rgba(224,68,58,0)}100%{box-shadow:0 0 0 0 rgba(224,68,58,0)}}
.live-strip .lt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.live-strip b{font-family:var(--f-display); font-size:17px; font-weight:700}
.live-strip small{font-size:13px; color:var(--muted)}
.seo-pos{white-space:nowrap}
.live-strip .lg{flex:none; font-weight:600; font-size:14px; border-bottom:1.5px solid var(--lilac); padding-bottom:1px}
.live-strip:hover .lg{border-color:currentColor}
:root:not([data-theme="papier"]) .live-strip .k{color:#ff7a6e}
.more .seo-fig{margin:1.2em 0 .8em}
.more .seo-chart{height:320px; flex:none}
#more-challenge{width:min(860px, 100vw)}
.more h3{font-size:19px; margin:1.4em 0 .4em}
.more .seo-now{margin:0 0 .6em}
.more .seo-src{font-size:13px; color:inherit; opacity:.7}
.more .sc-p1t,.more .sc-ax{fill:currentColor; opacity:.6}
.more .sc-grid{stroke:currentColor; opacity:.15}
.seo-fig{margin:0; flex:1; min-height:110px; display:flex; flex-direction:column; gap:6px}
.seo-fig figcaption{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.seo-chart{position:relative; flex:1; min-height:100px}
.seo-chart svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; touch-action:pan-y}
.sc-p1{fill:color-mix(in srgb, var(--lilac) 16%, transparent)}
.sc-p1t{font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; fill:var(--muted)}
.sc-grid{stroke:var(--line); stroke-width:1}
.sc-ax{font-family:var(--f-mono); font-size:10px; fill:var(--muted)}
.sc-line{fill:none; stroke:var(--lilac); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.sc-last{fill:var(--lilac); stroke:var(--paper); stroke-width:2}
.sc-hov{fill:var(--ink); stroke:var(--paper); stroke-width:2}
.sc-cross{stroke:var(--muted); stroke-width:1; stroke-dasharray:2 3}
.sc-tip{position:absolute; transform:translate(-50%, -100%); background:var(--ink); color:var(--paper); border-radius:6px; padding:5px 8px; font-size:12px; line-height:1.25; pointer-events:none; white-space:nowrap; display:flex; flex-direction:column; align-items:center}
.sc-tip span{font-size:10.5px; opacity:.75}
.seo-now{display:flex; gap:22px; font-size:15px}
.seo-now b{font-family:var(--f-display); font-size:20px}
.seo-src{font-size:11.5px; color:var(--muted)}
.more ul{margin:0 0 1em; padding-left:1.1em}
.more li{font-size:16px; line-height:1.55; margin:0 0 .45em}
.mini.m-marketing,.mini.m-agentur{background:var(--paper)}
@media (max-width:620px){ .fan-cards.three .mini{width:var(--mw); height:var(--mh); margin-left:calc(var(--mw) / -2); padding:11px} .fan-cards.three .mini b{font-size:14.5px} .fan-cards.three .mini .mt{font-size:10.5px; line-height:1.25} .fan-cards.three .mini small{font-size:8.5px} }
@media (max-width:620px){
  .tl li{grid-template-columns:1fr; gap:2px; padding:8px 0}
  .tl span{font-size:13.5px}
  .card--agentur h2,.card--marketing h2{font-size:24px}
  .svc{grid-template-columns:1fr; gap:10px} .svc dd{font-size:13.5px}
  .live-strip{flex-wrap:wrap; gap:6px 12px; padding:11px 13px} .live-strip .lt{flex:1 1 calc(100% - 80px)} .live-strip .lg{margin-left:auto; font-size:13.5px}
  .more .seo-chart{height:240px}
}

/* Live-Ergaenzungen */
.caption{display:none}
.contacts a{color:inherit; text-decoration:none}
.contacts a:hover{text-decoration:underline; text-underline-offset:3px}
.legal{font-size:10.5px; line-height:1.45; color:var(--muted); margin:0; max-width:none}
.legal a{color:inherit}
button.tlink{appearance:none; background:none; border:0; border-bottom:1.5px solid var(--lilac); font:inherit; font-weight:600; font-size:14px; color:inherit; padding:0 0 1px; margin-left:14px; cursor:pointer}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ts-widget{min-height:0}
.ferr{margin:0; font-size:12.5px; color:#b3261e; min-height:0}
.ferr:empty{display:none}
.fine a{color:inherit}
.chat-note a{color:inherit}
.gcal{width:100%; height:min(620px, 64vh); border:0; border-radius:10px; background:#fff}
.bnote summary{cursor:pointer; color:var(--ice); font-size:13.5px}
.bnote pre{white-space:pre-wrap; font:inherit; font-size:13px; color:var(--on-night-dim); margin:10px 0}
.qr-lb .qr-sheet{background:#fff; color:#111; border-radius:12px; padding:28px; display:flex; flex-direction:column; align-items:center; gap:14px; width:min(340px, 100%)}
.qr-lb .qr-sheet img{width:100%; height:auto}
.qr-lb .rk{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#666}
.qr-lb .qr-t{font-size:14px; color:#333}