/* NEXUS Concierge-Seite V2.3 – Ergänzung zu ../../startseite/assets/style.css
   Eigene Identität: Türkis + Leder/Creme. Signature: Die klassische Gästemappe öffnet sich,
   ihre Seiten fliegen ins Smartphone und werden zur digitalen Gästemappe. */
:root{--cg-teal:#2FB8A6;--cg-mint:#9BE7DC;--cg-deep:#15786C;--cg-leather:#7A4A2C;--cg-leather2:#A0643C;--cg-cream:#F6F0E4;--cg-night:#0D1A2B;--cg-ease:var(--ease,cubic-bezier(.2,.7,.2,1))}
.nav-trigger.is-current{color:#fff;position:relative}
.nav-trigger.is-current::after{content:"";position:absolute;left:0;right:18px;bottom:2px;height:2px;border-radius:2px;background:var(--cg-teal)}
.cg-eyebrow{color:var(--cg-mint)}
.cg-eyebrow-dark{color:var(--cg-deep)}
.cg-section{padding:clamp(84px,10vw,130px) 0}
.cg-section h2{overflow-wrap:break-word;hyphens:auto}
.cg-section h2 em{color:var(--cg-deep)}
.cg-body{color:var(--schiefer);line-height:1.8;font-size:1.02rem}
.cg-body-dark{color:#B8C8DA}
.cg-subtle{margin-top:14px;font-size:.92rem;color:var(--schiefer)}
.cg-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:9%;align-items:end;margin-bottom:52px}
.cg-btn{background:var(--cg-teal);color:#062A25}
.cg-btn:hover{background:#45C9B7}

/* ================= HERO ================= */
.cg-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:radial-gradient(ellipse at 70% 55%,rgba(47,184,166,.18) 0%,rgba(13,26,43,0) 46%),radial-gradient(ellipse at 40% 90%,#173C66 0%,rgba(13,26,43,0) 55%),linear-gradient(150deg,#0D1A2B,#0A1523)}
.cg-crumb{display:flex;gap:12px;padding-top:34px;font-size:.9rem;color:#8DA6C3}
.cg-crumb a:hover{color:#fff}
.cg-crumb [aria-current]{color:#D8F5F0}
.cg-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4vw,60px);align-items:center;padding:24px 0 64px}
.cg-hero .eyebrow{animation:cgRise .8s var(--cg-ease) .1s both}
.cg-hero h1{font-size:clamp(2.5rem,4.2vw,4.1rem);line-height:1.06;letter-spacing:-.04em;font-weight:700;margin:6px 0 24px;animation:cgRise 1s var(--cg-ease) .18s both}
.cg-hero h1 em{font-style:normal;color:var(--cg-mint)}
.cg-lead{color:#C6D2DF;font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.75;max-width:33em;animation:cgRise .9s var(--cg-ease) .4s both}
.cg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px;animation:cgRise .9s var(--cg-ease) .52s both}
.cg-textlink{color:#D8F5F0;font-weight:650;padding:8px 0;border-bottom:1.5px solid rgba(155,231,220,.5)}
.cg-textlink:hover{color:#fff;border-color:#fff}
.cg-small{margin-top:40px;font-size:.88rem;color:#9FB6CF;animation:cgRise .9s var(--cg-ease) .64s both}

.cg-stage{position:relative;margin:0;animation:cgFade 1s ease .15s both}
.cg-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;min-height:500px;perspective:1600px}
/* Mappe */
.cg-folder{position:relative;justify-self:end;margin-right:6%;width:min(185px,46%);aspect-ratio:.74;transform:rotateY(18deg) rotateX(6deg);transform-style:preserve-3d;transition:opacity 1s,filter 1s}
.cg-stage.is-done .cg-folder{opacity:.3;filter:saturate(.6)}
.cg-pages{position:absolute;inset:4px 4px 4px 10px;border-radius:6px 12px 12px 6px;background:var(--cg-cream);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.cg-pages span{position:absolute;left:14%;right:14%;height:6px;border-radius:3px;background:#DDD3C1}
.cg-pages span:nth-child(1){top:20%}.cg-pages span:nth-child(2){top:28%;right:30%}.cg-pages span:nth-child(3){top:36%;right:22%}
.cg-sheets{position:absolute;inset:0}
.cg-sheet{position:absolute;left:12%;right:12%;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:9px;background:#fff;border:1px solid #E6DCCB;color:#3A2A1C;font-size:.82rem;font-weight:650;box-shadow:0 6px 16px rgba(60,40,20,.12);will-change:transform}
.cg-sheet:nth-child(1){top:46%}.cg-sheet:nth-child(2){top:58%}.cg-sheet:nth-child(3){top:70%}.cg-sheet:nth-child(4){top:82%}
.cg-sheet i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#F1E8D8}
.cg-sheet svg,.cg-tile svg,.cg-options svg{width:15px;height:15px;fill:none;stroke:var(--cg-leather2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cg-sheet.is-gone{opacity:0}
.cg-cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.5,0,.2,1)}
.cg-stage.is-open .cg-cover{transform:rotateY(-165deg)}
.cg-cover-front,.cg-cover-back{position:absolute;inset:0;border-radius:6px 14px 14px 6px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cg-cover-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#F3E2C8;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.18),transparent 55%),linear-gradient(145deg,var(--cg-leather2),var(--cg-leather) 60%,#5A341E);box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 0 0 7px rgba(0,0,0,.08)}
.cg-cover-front::before{content:"";position:absolute;inset:10px;border:1.5px dashed rgba(243,226,200,.45);border-radius:4px 10px 10px 4px}
.cg-cover-front strong{font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:.02em}
.cg-cover-front small{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.cg-crest{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(243,226,200,.6);background:radial-gradient(circle,rgba(243,226,200,.25),transparent 70%)}
.cg-cover-back{transform:rotateY(180deg);background:linear-gradient(145deg,#6A3F25,#4E2E1A)}
.cg-arc{position:absolute;left:40%;right:30%;top:30%;height:40%;border-top:2px dashed rgba(155,231,220,.35);border-radius:50% 50% 0 0;opacity:0;transition:opacity .6s}
.cg-stage.is-open .cg-arc{opacity:1}
.cg-stage.is-done .cg-arc{opacity:0}
/* Smartphone */
.cg-phone{position:relative;justify-self:start;width:250px;padding:42px 16px 18px;border-radius:36px;background:#F4F8F7;color:var(--tinte);box-shadow:0 0 0 8px #0A1524,0 0 0 9px rgba(255,255,255,.15),0 40px 80px rgba(0,0,0,.5),0 0 90px rgba(47,184,166,.25)}
.cg-notch{position:absolute;top:10px;left:50%;width:78px;height:20px;transform:translateX(-50%);border-radius:12px;background:#0A1524}
.cg-app-k{font-size:.74rem;font-weight:700;color:var(--cg-deep)}
.cg-app-t{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.cg-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cg-tile b{overflow-wrap:anywhere;hyphens:auto}
.cg-tile{display:flex;flex-direction:column;gap:4px;min-height:92px;padding:12px;border-radius:14px;border:1.5px dashed #C9DCD8;background:transparent;transition:background .4s,border-color .4s,box-shadow .4s,transform .4s var(--cg-ease)}
.cg-tile>*{opacity:0;transition:opacity .35s}
.cg-tile i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#E1F5F1}
.cg-tile svg{stroke:var(--cg-deep)}
.cg-tile b{font-size:.86rem}
.cg-tile small{font-size:.72rem;color:var(--schiefer)}
.cg-tile.is-in{border:1px solid #DCE9E6;border-style:solid;background:#fff;box-shadow:0 6px 16px rgba(13,26,43,.08)}
.cg-tile.is-in>*{opacity:1}
.cg-tile.is-hl{border-color:var(--cg-teal);box-shadow:0 0 0 3px rgba(47,184,166,.25),0 10px 20px rgba(13,26,43,.1);transform:translateY(-2px)}
.cg-app-bar{margin-top:12px;padding:10px 14px;border-radius:999px;background:var(--cg-teal);color:#062A25;font-size:.8rem;font-weight:700;text-align:center}
.cg-fly{position:fixed;z-index:30;pointer-events:none}
.cg-replay{display:inline-flex;align-items:center;gap:8px;margin:8px auto 0;padding:8px 14px;border-radius:999px;border:1px solid rgba(155,231,220,.35);background:transparent;color:#CFEFEA;font-size:.84rem;cursor:pointer;opacity:0;transition:opacity .4s,border-color .2s}
.cg-replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.cg-stage.is-done .cg-replay{opacity:1}
.cg-replay:hover{border-color:#fff}
.cg-stage{display:flex;flex-direction:column}
.cg-stage figcaption{text-align:center;font-size:.8rem;color:#7A98B9;margin-top:8px}
.cg-strip{background:rgba(6,19,35,.5);border-top:1px solid rgba(255,255,255,.1)}
.cg-strip .container{display:flex;justify-content:space-between;gap:20px;padding:20px 0}
.cg-strip span{display:flex;align-items:center;gap:12px;font-size:.95rem;color:#C6D2DF}
.cg-strip span::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--cg-teal)}

/* ================= NUTZEN ================= */
.cg-values{background:#fff}
.cg-three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cg-three article{padding:30px 26px;border-radius:20px;background:linear-gradient(170deg,#FBFEFD,#EEF8F6);border:1px solid #D7EDE8;transition:transform .3s var(--cg-ease),box-shadow .3s}
.cg-three article:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(21,120,108,.12)}
.cg-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid #CFE8E3}
.cg-icon svg{width:24px;height:24px;fill:none;stroke:var(--cg-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cg-three h3{font-size:1.3rem;margin:22px 0 8px}
.cg-three p{color:var(--schiefer);font-size:.97rem;line-height:1.65}

/* ================= AKTUELL HALTEN ================= */
.cg-update{background:var(--cg-night);color:#fff;position:relative;overflow:hidden}
.cg-update::before{content:"";position:absolute;width:900px;height:900px;right:-340px;top:-300px;background:radial-gradient(circle,rgba(47,184,166,.16),transparent 62%);pointer-events:none}
.cg-update h2 em{color:var(--cg-mint)}
.cg-updater{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0;border-radius:26px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(47,184,166,.25)}
.cg-upd-controls{padding:clamp(24px,3.5vw,38px);display:flex;flex-direction:column;gap:20px;border-right:1px solid rgba(47,184,166,.18)}
.cg-mode{display:inline-flex;padding:4px;border-radius:12px;background:rgba(255,255,255,.06)}
.cg-mode button{flex:1;border:0;background:transparent;color:#C6D2DF;padding:11px 12px;border-radius:9px;font-weight:600;cursor:pointer;transition:background .25s,color .25s}
.cg-mode button[aria-pressed="true"]{background:var(--cg-teal);color:#062A25}
.cg-change{padding:16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.cg-change small{display:block;font-size:.8rem;color:#9FB6CF}
.cg-change strong{font-size:1.05rem}
.cg-counter{margin-top:auto;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.cg-counter strong{display:block;font-size:2.6rem;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--cg-mint);line-height:1}
.cg-counter span{font-size:.9rem;color:#B8C8DA}
.cg-rooms{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;padding:clamp(20px,3vw,32px);align-content:center}
.cg-room{position:relative;aspect-ratio:.8;border-radius:10px;padding:8px;display:flex;flex-direction:column;justify-content:space-between;background:#172C44;border:1px solid rgba(255,255,255,.1);transition:background .35s,border-color .35s,box-shadow .35s}
.cg-room b{font-size:.72rem;color:#9FB6CF;font-variant-numeric:tabular-nums}
.cg-room i{display:block;height:5px;border-radius:3px;background:#E3A76F}
.cg-room i+i{width:60%;margin-top:4px;opacity:.6}
.cg-room.is-done{border-color:var(--cg-teal);background:#12383A}
.cg-room.is-done i{background:var(--cg-mint)}
.cg-room.is-flash{box-shadow:0 0 0 3px rgba(47,184,166,.5),0 0 22px rgba(47,184,166,.5)}
.cg-walker{position:absolute;width:22px;height:22px;border-radius:50%;background:#E3A76F;box-shadow:0 0 12px rgba(227,167,111,.7);transform:translate(-50%,-50%);transition:left .38s linear,top .38s linear;pointer-events:none}
.cg-rooms{position:relative}
.cg-upd-note{grid-column:1/-1;padding:14px 24px;font-size:.8rem;color:#8FA7C2;border-top:1px solid rgba(47,184,166,.14)}

/* ================= BEISPIEL ================= */
.cg-example{background:var(--porzellan,#F3F5F8)}
.cg-lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--linie)}
.cg-lab-menu{padding:clamp(24px,3.5vw,38px);display:flex;flex-direction:column;gap:18px}
.cg-lab-label{font-weight:650}
.cg-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cg-options button{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--linie);background:#fff;color:var(--tinte);font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.cg-options button i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#E1F5F1}
.cg-options svg{stroke:var(--cg-deep)}
.cg-options button:hover{border-color:var(--cg-teal)}
.cg-options button[aria-pressed="true"]{border-color:var(--cg-teal);background:#EFFAF8;box-shadow:0 0 0 3px rgba(47,184,166,.18)}
.cg-benefit{padding:18px;border-radius:14px;background:var(--cg-night);color:#fff}
.cg-benefit small{display:block;font-size:.8rem;font-weight:650;color:var(--cg-mint)}
.cg-benefit strong{font-weight:600;line-height:1.5}
.cg-lab-note{font-size:.82rem;color:var(--schiefer)}
.cg-lab-preview{display:grid;place-items:center;padding:36px 24px;background:radial-gradient(circle at 50% 40%,rgba(47,184,166,.2),transparent 60%),#EAF4F2}
.cg-phone-lg{justify-self:center;width:260px}
.cg-detail{min-height:240px;animation:cgRise .45s var(--cg-ease)}
.cg-detail-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--cg-teal);margin:6px 0 14px}
.cg-detail-icon svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cg-detail-k{font-size:.8rem;font-weight:650;color:var(--cg-deep)}
.cg-detail h3{font-size:1.4rem;margin:2px 0 8px}
.cg-detail p:not(.cg-detail-k){font-size:.9rem;color:var(--schiefer);line-height:1.6}

/* ================= ABSENDER ================= */
.cg-sender{background:var(--cg-night);color:#fff;position:relative;overflow:hidden}
.cg-sender h2 em{color:var(--cg-mint)}
.cg-sender .btn{margin-top:28px}
.cg-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,96px);align-items:center}
.cg-sender h2,.cg-modular h2{margin-bottom:22px}
.cg-flow{padding:28px;border-radius:24px;background:rgba(255,255,255,.04);border:1px solid rgba(47,184,166,.25);text-align:center}
.cg-flow-k{font-size:.88rem;font-weight:650;color:var(--cg-mint);margin-bottom:12px}
.cg-flow-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cg-flow-row span{padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);font-size:.86rem}
.cg-flow-out span{background:rgba(47,184,166,.14);border-color:rgba(47,184,166,.4)}
.cg-flow-pipe{position:relative;width:2px;height:44px;margin:10px auto;background:rgba(155,231,220,.25)}
.cg-flow-pipe i{position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--cg-mint);box-shadow:0 0 10px var(--cg-teal);animation:cgDrip 1.8s linear infinite}
.cg-flow-pipe i:nth-child(2){animation-delay:.6s}.cg-flow-pipe i:nth-child(3){animation-delay:1.2s}
.cg-flow-core{display:inline-flex;flex-direction:column;padding:16px 30px;border-radius:18px;background:linear-gradient(135deg,var(--cg-teal),#1E8C80);color:#062A25;box-shadow:0 0 40px rgba(47,184,166,.35)}
.cg-flow-core strong{font-size:1.25rem}
.cg-flow-core small{font-size:.82rem;font-weight:600}
.cg-flow>small{display:block;margin-top:16px;font-size:.78rem;color:#8FA7C2}

/* ================= MODULAR & ABSCHLUSS ================= */
.cg-modular{background:#fff}
.cg-related{display:grid;gap:14px}
.cg-related a{position:relative;display:flex;flex-direction:column;gap:4px;padding:26px;border-radius:20px;background:var(--porzellan,#F3F5F8);border:1px solid var(--linie);transition:border-color .25s,transform .3s var(--cg-ease)}
.cg-related a:hover{border-color:var(--cg-teal);transform:translateY(-3px)}
.cg-related small{color:var(--blau);font-weight:650}
.cg-rel-clara small{color:#6A5AE0}
.cg-related strong{font-size:1.45rem}
.cg-related span{color:var(--schiefer)}
.cg-related svg{position:absolute;right:22px;top:26px;width:18px;height:18px;fill:none;stroke:var(--tinte);stroke-width:1.7;stroke-linecap:round}
.cg-end{background:var(--porzellan,#F3F5F8)}
.cg-end-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(40px,8vw,110px);align-items:center}
.cg-end h2{margin-bottom:22px}
.cg-end-card{padding:clamp(28px,4vw,42px);border-radius:24px;background:var(--cg-night);color:#fff;box-shadow:0 40px 80px rgba(13,26,43,.2);border:1px solid rgba(47,184,166,.25)}
.cg-end-k{font-weight:650;color:var(--cg-mint)}
.cg-end-card h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin:12px 0 20px}
.cg-person{display:flex;align-items:center;gap:14px;padding:18px 0;margin-bottom:20px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.cg-person img{width:56px;height:56px;border-radius:50%;border:2px solid rgba(47,184,166,.7)}
.cg-person strong,.cg-person span{display:block}
.cg-person span{font-size:.88rem;color:#AFBDCD}
.cg-end-card .btn{width:100%}

@keyframes cgRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cgFade{from{opacity:0}to{opacity:1}}
@keyframes cgDrip{0%{top:-4px;opacity:0}20%{opacity:1}80%{opacity:1}100%{top:40px;opacity:0}}

@media(max-width:960px){
  .cg-grid,.cg-intro,.cg-updater,.cg-lab,.cg-split,.cg-end-grid{grid-template-columns:minmax(0,1fr)}
  .cg-intro{gap:20px}
  .cg-stage{max-width:620px;width:100%;justify-self:center}
  .cg-upd-controls{border-right:0;border-bottom:1px solid rgba(47,184,166,.18)}
  .cg-three{grid-template-columns:1fr}
}
@media(max-width:600px){
  .cg-hero h1{font-size:clamp(2.2rem,10vw,3rem)}
  .cg-actions{flex-direction:column;align-items:stretch}
  .cg-actions .btn{width:100%}
  .cg-actions .cg-textlink{align-self:flex-start}
  .cg-scene{min-height:400px;gap:12px}
  .cg-folder{width:44%;margin-right:4%}
  .cg-phone:not(.cg-phone-lg){width:170px}
  .cg-cover-front strong{font-size:1.05rem}
  .cg-sheet{font-size:.68rem;padding:6px}
  .cg-sheet i{display:none}
  .cg-phone{padding:36px 10px 14px;border-radius:28px}
  .cg-app-t{font-size:1.1rem}
  .cg-tile{min-height:70px;padding:8px}
  .cg-tile small{display:none}
  .cg-tile b{font-size:.72rem}
  .cg-tile i{width:24px;height:24px}
  .cg-app-bar{font-size:.7rem;padding:8px}
  .cg-strip .container{flex-direction:column;gap:8px}
  .cg-rooms{grid-template-columns:repeat(4,1fr);gap:8px}
  .cg-options{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .cg-hero *,.cg-stage{animation:none!important}
  .cg-cover,.cg-tile,.cg-room,.cg-walker{transition:none!important}
  .cg-flow-pipe i{animation:none;top:18px}
}
