/* ====================================================================== Der Rundgang, direkt in die Seite eingebettet (vormals rundgang-tour.html im iframe). Alle Regeln sind auf den .tour-Wrapper gescoped, damit sie die Site-Shell nicht berühren; --paper hängt an --hg der Site, damit die Fläche nahtlos in die Seite übergeht. ====================================================================== */ .tour{ --wine:#7C2231; --wine-dark:#5C1826; --gold:#C0975A; /* Gold als Flaeche, Rahmen und Schmuck. Fuer Text zu hell: gemessen 2,58:1 gegen --paper. Bedeutungstragende Schrift nimmt --gold-tief. */ --gold-tief:#7E5F1F; --gold-soft:#DDC79B; --sand:#F3EBDB; --paper:var(--hg); --card:#FFFFFF; --line:#E7DECC; --ink:#26211D; --muted:#75685A; --ok:#3E7A4E; --ok-bg:#EDF4EE; /* Gemessen 3,85:1 als Textfarbe - fuer eine Warnung zu wenig. */ --warn:#84610C; --warn-bg:#FAF2DC; --bad:#A0322E; --bad-bg:#FAECE9; --info-bg:#EDF1F6; --info:#37567A; --lede:#4B4239; } :where(.tour,.tour *){box-sizing:border-box;margin:0;padding:0} .tour{ flex:1; font-family:var(--font-ui,'Montserrat',sans-serif); background:var(--paper); color:var(--ink); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; } .tour ::selection{background:var(--gold-soft)} /* ---------- Fortschrittsbalken (sitzt an der Unterkante der Site-Topbar) ---------- */ .progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent} .progress .bar{height:100%;width:0;background:#C0975A;transition:width .5s ease} /* ---------- Layout ---------- */ .stage{max-width:1120px;margin:0 auto;padding:34px 24px 56px} section.step{display:none} section.step.active{display:block;animation:fadeUp .5s ease both} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .kicker{ font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--gold-tief);margin-bottom:14px;display:flex;align-items:center;gap:12px; } .kicker::after{content:"";flex:1;height:1px;background:var(--line)} .step-title{ font-size:clamp(1.7rem,3.6vw,2.5rem); font-weight:600;line-height:1.15;letter-spacing:-.01em; margin-bottom:14px;max-width:24ch; } .step-title .accent{color:var(--wine)} .lede{font-size:1.06rem;color:var(--lede);max-width:62ch;margin-bottom:30px} .grid2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:start} @media (max-width:920px){.grid2{grid-template-columns:1fr;gap:26px}} .copy p{margin-bottom:14px;color:var(--lede)} .copy strong{color:var(--ink);font-weight:600} /* ---------- Cards & boxes ---------- */ .panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px} .panel h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px} .note{ background:var(--sand);border:1px solid var(--gold-soft);border-radius:12px; padding:14px 16px;margin-top:22px;font-size:.98rem;color:var(--lede); } .note strong{color:var(--wine)} .note.hidden,.hidden{display:none!important} .okbox{background:var(--ok-bg);border:1px solid #C7DECB;color:#2F5E3B;border-radius:12px;padding:13px 15px} .badbox{background:var(--bad-bg);border:1px solid #EBC9C4;color:#8A2C28;border-radius:12px;padding:13px 15px} .warnbox{background:var(--warn-bg);border:1px solid #E9D9A8;color:#7A5C0E;border-radius:12px;padding:13px 15px} .chip{ display:inline-flex;align-items:center;gap:6px; background:var(--sand);border:1px solid var(--gold-soft);color:#7A5F35; border-radius:999px;padding:3px 11px;font-size:12.5px;font-weight:500;letter-spacing:.03em; } .chip.red{background:var(--bad-bg);border-color:#EBC9C4;color:#8A2C28} .chiprow{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px} /* ---------- Buttons ---------- */ .btn{ font:inherit;font-weight:500;border:none;border-radius:10px;cursor:pointer; padding:11px 20px;transition:background .18s,transform .06s,opacity .18s; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--wine);color:#fff} .btn-primary:hover{background:var(--wine-dark)} .btn-ghost{background:transparent;border:1px solid #CDBFA6;color:var(--ink)} .btn-ghost:hover{background:var(--sand)} .btn:disabled{opacity:.45;cursor:default;transform:none} .btn-block{display:block;width:100%} /* ---------- Phone frame ---------- */ .phone{ max-width:345px;margin:0 auto;background:var(--card); border:1px solid var(--line);border-radius:26px;overflow:hidden; box-shadow:0 22px 44px -26px rgba(70,45,25,.38); } .phone-head{ display:flex;align-items:center;justify-content:space-between; padding:10px 16px;border-bottom:1px solid var(--line); } .phone-head .app{display:flex;align-items:center;gap:1px;font-size:11px;letter-spacing:.28em;font-weight:500} .phone-head .app .logo-o{width:12px;height:12px;margin:0 3px} .phone-status{ font-size:12.5px;font-weight:500;padding:7px 16px;display:flex;align-items:center;gap:8px; transition:background .3s,color .3s; } .phone-status .dotpip{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} .phone-status.on{background:var(--ok-bg);color:#2F5E3B} .phone-status.off{background:var(--bad-bg);color:#93312E} .phone-status.sync{background:var(--info-bg);color:var(--info)} .phone-body{padding:16px} .phone-body .phone-titel{font-size:15px;font-weight:600;margin-bottom:12px} .field{margin-bottom:12px} .field label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:500} .field select,.field input{ width:100%;font:inherit;font-size:15px;padding:10px 12px; border:1px solid #D5C9B2;border-radius:9px;background:#FDFCF9;color:var(--ink); } .field select:focus,.field input:focus{outline:2px solid var(--gold-soft);border-color:var(--gold)} .gps{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-bottom:12px} .gps::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)} /* ---------- Event feed (Signatur-Element) ---------- */ .feed{position:relative;padding-left:26px;min-height:20px} .feed::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--gold-soft)} .feed:empty::before{display:none} .evt{ position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px; padding:12px 14px;margin-bottom:10px;font-size:.96rem; opacity:0;transform:translateX(14px);transition:opacity .45s ease,transform .45s ease; } .evt.in{opacity:1;transform:none} .evt::before{ content:"";position:absolute;left:-23px;top:16px;width:10px;height:10px;border-radius:50%; background:var(--gold);border:2.5px solid var(--paper); } .evt .src{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:3px} .evt .mark{width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none} .evt.ok .mark{background:var(--ok-bg);color:var(--ok)} .evt.warn{border-color:#E9D9A8;background:var(--warn-bg)} .evt.warn .mark{background:#F2E4B8;color:var(--warn)} .evt.warn .src{color:#7A5C0E} .feed-hint{margin-top:14px;font-size:.95rem;color:var(--muted)} /* ---------- Station 1: Inseln ---------- */ .islands{display:grid;gap:10px} .isl{ border:1px dashed #CDBFA6;border-radius:12px;padding:13px 15px;background:#FDFCF8; display:flex;align-items:center;justify-content:space-between;gap:12px; opacity:.45;transition:opacity .35s,border-color .35s,background .35s; } .isl.filled{opacity:1;border-style:solid;border-color:var(--line);background:var(--card)} .isl .isl-name{font-weight:500;font-size:.98rem} .isl .isl-sub{font-size:12.5px;color:var(--muted)} .isl .isl-val{font-variant-numeric:tabular-nums;font-weight:600;color:var(--muted);min-width:86px;text-align:right;font-size:.98rem} .isl.filled .isl-val{color:var(--ink)} .isl.err .isl-val{color:var(--bad)} .isl .badge{font-size:11px;font-weight:600;letter-spacing:.06em;background:var(--bad-bg);color:#8A2C28;border-radius:999px;padding:2px 9px;white-space:nowrap} .counter{ margin-top:14px;font-size:.95rem;color:var(--muted); display:flex;gap:14px;flex-wrap:wrap;font-variant-numeric:tabular-nums; } .counter b{color:var(--ink)} .counter .cbad b{color:var(--bad)} /* ---------- Station 2: Elf Themen ---------- */ .themegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:11px} .theme{ border:1px solid var(--line);border-radius:13px;background:var(--card);padding:13px 15px; cursor:pointer;transition:background .3s,border-color .3s;text-align:left;font:inherit;display:block;width:100%; } .theme:hover{background:#FDFBF6} .theme .thead{display:flex;align-items:baseline;gap:9px} .theme .tno{font-weight:600;color:var(--gold-tief);font-variant-numeric:tabular-nums;flex:none;width:22px} .theme .ttl{font-weight:600;font-size:.97rem} .theme .tstate{margin-left:auto;flex:none;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .theme .tprob{font-size:.9rem;color:var(--muted);margin-top:5px} .theme .tsol{display:none;font-size:.91rem;margin-top:9px;color:#2F5E3B;border-top:1px dashed #C7DECB;padding-top:9px} .theme.done{background:var(--ok-bg);border-color:#C7DECB} .theme.done .tsol{display:block} .theme.done .tstate{color:var(--ok)} .theme.done.part .tstate{color:var(--warn)} .theme.done.part .tsol em{font-style:normal;color:#7A5C0E} /* ---------- Station 4: Klima & Spritzfenster ---------- */ .ampeln{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:14px} @media (max-width:520px){.ampeln{grid-template-columns:1fr}} .ampel{border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--card)} .ampel .an{font-size:.92rem;font-weight:600} .ampel .av{font-size:.82rem;margin-top:3px;font-weight:600;letter-spacing:.03em;color:var(--ok)} .ampel.y{background:var(--warn-bg);border-color:#E9D9A8} .ampel.y .av{color:var(--warn)} .daysrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .bedarf{margin-top:2px;font-size:.9rem;color:#2F5E3B;background:var(--ok-bg);border:1px solid #C7DECB;border-radius:9px;padding:8px 11px} /* ---------- Station 5: Keller, Warteschlange, Sparkline ---------- */ .switchrow{display:flex;align-items:center;gap:12px;margin:14px 0 4px;font-size:.95rem} .switch{position:relative;width:46px;height:26px;flex:none;cursor:pointer} .switch input{opacity:0;width:100%;height:100%;position:absolute;cursor:pointer;z-index:2} .switch .track{position:absolute;inset:0;background:#CDBFA6;border-radius:999px;transition:background .25s} .switch .thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .25s;box-shadow:0 1px 3px rgba(0,0,0,.25)} .switch input:checked ~ .track{background:var(--bad)} .switch input:checked ~ .thumb{left:23px} .qlist{margin-top:12px;display:grid;gap:8px} .qitem{ display:flex;align-items:center;justify-content:space-between;gap:10px; border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.93rem;background:#FDFCF8; animation:fadeUp .35s ease both; } .qitem .qstate{font-size:12px;font-weight:600;letter-spacing:.05em;white-space:nowrap} .qitem.waiting .qstate{color:var(--warn)} .qitem.sent .qstate{color:var(--ok)} .qitem.warnrow .qstate{color:var(--warn)} .tankcard{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:12px;background:#FDFCF8;animation:fadeUp .4s ease both} .tankcard .tk{font-weight:600} .tankcard .tksub{font-size:.9rem;color:var(--muted);margin-top:2px} .actionrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px} .actionrow .btn{padding:9px 10px;font-size:.92rem} .actionrow .span2{grid-column:1 / -1} .spark{margin-top:10px} .spark .sl{font-size:10.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:3px} .spark svg{display:block;width:100%;height:46px} details.more{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--card)} details.more summary{list-style:none;cursor:pointer;padding:12px 15px;font-weight:600;font-size:.95rem;display:flex;justify-content:space-between;align-items:center} details.more summary::-webkit-details-marker{display:none} details.more summary .plus{color:var(--gold-tief);transition:transform .25s} details.more[open] summary .plus{transform:rotate(45deg)} details.more .mb{padding:0 15px 13px;font-size:.93rem;color:var(--lede)} details.more .mb p{margin-bottom:9px} /* ---------- Station 7: Office ---------- */ .bstage{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--card)} /* Der Kasten zeigt, was OHNE VINORUM nicht entsteht - er soll zurueckstehen. Das tat er bisher ueber opacity, und die faerbt die Schrift mit: gemessen 1,69:1 fuer die Erklaerung und 2,28:1 fuer „Noch nicht erzeugt". Selbst bei 0,9 bleiben 4,26:1. Das Zuruecktreten liegt jetzt in der Flaeche - im grauen Grund und im gestrichelten Rand -, nicht in der Tinte. */ .bstage.ghosted{border-style:dashed;background:#F1EDE6} .bstage .bk{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;gap:8px} .bstage .bk .okk{color:var(--ok);text-transform:none;letter-spacing:.02em} .bstage .bt{font-weight:600;margin-top:3px;font-size:.97rem} .bstage .bs{font-size:.89rem;color:var(--muted);margin-top:2px} .karrow{text-align:center;color:var(--gold-tief);margin:3px 0;font-size:15px;line-height:1} .kasse-items{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:11px} .kasse-items .btn{padding:9px 6px;font-size:.85rem} .bon{border:1px dashed #CDBFA6;border-radius:10px;padding:11px 13px;background:#FDFCF8;font-variant-numeric:tabular-nums;font-size:.93rem} .bon .brow{display:flex;justify-content:space-between;padding:2px 0} .bon .bsum{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;font-weight:600;display:flex;justify-content:space-between} .bon .bempty{color:var(--muted);text-align:center;padding:6px 0} .tse{margin-top:9px;font-size:10.5px;color:var(--muted);word-break:break-all;line-height:1.55} .tse b{color:var(--ok);font-size:11.5px} /* ---------- Station 8: Shop & Buero ---------- */ .splitcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px} @media (max-width:720px){.splitcols{grid-template-columns:minmax(0,1fr)}} /* Und damit die Adresse dann auch umbricht statt ueberzustehen. */ .chiprow,.shopcard{overflow-wrap:anywhere} .colhead{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between} .shopcard{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card)} .winephoto{ height:86px;border-radius:10px;margin-bottom:12px; background:linear-gradient(135deg,var(--sand),#EADCBE 55%,var(--gold-soft)); display:flex;align-items:flex-end;padding:10px;color:#7A5F35;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600; } .price{font-weight:600;font-variant-numeric:tabular-nums} .orderempty{border:1px dashed #CDBFA6;border-radius:14px;padding:26px 16px;text-align:center;color:var(--muted);font-size:.95rem} .ordercard{border:1px solid #C7DECB;background:var(--ok-bg);border-radius:14px;padding:16px;animation:fadeUp .5s ease both} .ordercard .ono{font-size:12.5px;letter-spacing:.1em;font-weight:600;color:#2F5E3B;text-transform:uppercase} .ordercard .orow{display:flex;justify-content:space-between;margin-top:6px;font-size:.96rem} .stockline{margin-top:12px;font-size:.93rem;color:var(--muted);font-variant-numeric:tabular-nums} .stockline .new{color:var(--ink);font-weight:600} /* ---------- Station 9: Booking ---------- */ .week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px} .wday{border:1px solid var(--line);border-radius:8px;padding:7px 3px;text-align:center;font-size:11px;background:var(--card);transition:background .3s,color .3s,border-color .3s} .wday .wd{color:#5F564A;letter-spacing:.05em;text-transform:uppercase;font-size:9.5px;display:block;margin-bottom:3px} .wday.busy{background:#EEE7D8;color:#645946} .wday.busy .wd{color:#6E634E} .wday.ask{background:var(--warn-bg);border-color:#E9D9A8;color:#7A5C0E} .wday.booked{background:var(--wine);border-color:var(--wine);color:#fff} .wday.booked .wd{color:#E4C2C9} .askbanner{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #E9D9A8;background:var(--warn-bg);border-radius:11px;padding:10px 13px;font-size:.93rem;color:#7A5C0E;margin-bottom:12px} .askbanner.ok{border-color:#C7DECB;background:var(--ok-bg);color:#2F5E3B} .ticketgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px} .ticket{border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:var(--card);cursor:pointer;font:inherit;text-align:left;transition:background .3s,border-color .3s;display:flex;justify-content:space-between;gap:8px;align-items:center} .ticket .tn{font-weight:600;font-size:.93rem} .ticket .ts2{font-size:.84rem;color:var(--muted)} .ticket .tq{font-size:22px;line-height:1;color:var(--ink);opacity:.8;flex:none} .ticket.scanned{background:var(--ok-bg);border-color:#C7DECB;cursor:default} .ticket.scanned .tn::after{content:" ✓";color:var(--ok)} .ticket.scanned .tq{opacity:.3} /* ---------- Station 10: Tabellen, Pruefampel ---------- */ table.rep{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} table.rep th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;padding:6px 4px;border-bottom:1px solid var(--line)} table.rep td{padding:8px 4px;border-bottom:1px solid #F0EADC;font-size:.97rem} table.rep td:last-child,table.rep th:last-child{text-align:right} table.rep tr.sum td{font-weight:600;border-bottom:none;border-top:1.5px solid var(--gold-soft)} .taskcard{ border:1px solid var(--line);border-radius:14px;padding:15px 17px;background:var(--card); display:flex;align-items:flex-start;gap:12px;transition:background .4s,border-color .4s; } .taskcard .flag{width:34px;height:34px;border-radius:10px;background:var(--sand);color:var(--wine);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;transition:background .4s,color .4s} .taskcard .tt{font-weight:600} .taskcard .ts{font-size:.9rem;color:var(--muted);margin-top:2px} .taskcard.done{background:var(--ok-bg);border-color:#C7DECB} .taskcard.done .flag{background:#D7E8DA;color:var(--ok)} .stamp{ display:inline-block;margin-top:16px;padding:7px 14px;border:1.5px solid var(--wine);color:var(--wine); border-radius:8px;font-weight:600;font-size:.95rem;transform:rotate(-1.5deg); animation:stampIn .4s cubic-bezier(.2,1.4,.4,1) both; } @keyframes stampIn{from{opacity:0;transform:rotate(-1.5deg) scale(1.4)}to{opacity:1;transform:rotate(-1.5deg) scale(1)}} .plist{display:grid;gap:6px} .plist .prow{display:flex;align-items:center;gap:9px;font-size:.92rem;border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:#FDFCF8} .prow .pdot{width:10px;height:10px;border-radius:50%;flex:none} .prow.g .pdot{background:var(--ok)} .prow.y .pdot{background:var(--warn)} /* ---------- Station 11: Insights & VINI ---------- */ .inscard{border:1px solid var(--line);border-radius:14px;padding:15px 17px;background:var(--card);margin-bottom:12px} .inscard .icat{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--wine);margin-bottom:4px} .inscard .icat .fr{color:var(--bad)} .inscard .ihead{font-weight:600} .inscard .iwhy{font-size:.92rem;color:var(--muted);margin-top:6px;border-left:2px solid var(--gold-soft);padding-left:10px} .inscard .btn{margin-top:10px;padding:8px 14px;font-size:.9rem} .vini{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden} .vini-head{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px} .vini-head .avatar{width:30px;height:30px;border-radius:50%;background:var(--wine);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:.05em} .vini-head .vs{font-size:12px;color:var(--muted)} .vini-log{padding:16px;min-height:120px;display:flex;flex-direction:column;gap:10px} .bubble{max-width:88%;padding:10px 14px;border-radius:14px;font-size:.95rem;animation:fadeUp .3s ease both} .bubble.user{align-self:flex-end;background:var(--wine);color:#fff;border-bottom-right-radius:4px} .bubble.vini{align-self:flex-start;background:var(--sand);border:1px solid var(--gold-soft);border-bottom-left-radius:4px} .bubble .qsrc{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#7A5F35;font-weight:600} .typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px} .typing span{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blink 1s infinite} .typing span:nth-child(2){animation-delay:.18s} .typing span:nth-child(3){animation-delay:.36s} @keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}} .vini-chips{padding:12px 16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px} .qchip{font:inherit;font-size:.88rem;background:#FDFCF8;border:1px solid #CDBFA6;border-radius:999px;padding:7px 13px;cursor:pointer;transition:background .18s} .qchip:hover{background:var(--sand)} .qchip:disabled{opacity:.4;cursor:default} /* ---------- Uebernahme und Finale ---------- */ .implist{display:grid;gap:7px;margin:14px 0} .imp{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;background:var(--card);font-size:.94rem;cursor:pointer} .imp input{width:17px;height:17px;accent-color:var(--wine);flex:none;cursor:pointer} .imp .icnt{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.87rem;white-space:nowrap} .finale{margin-top:52px;text-align:center;padding:46px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .finale .fl{font-size:clamp(1.5rem,4vw,2.3rem);font-weight:600;line-height:1.3} .finale .fl span{display:block;animation:fadeUp .6s ease both} .finale .fl span:nth-child(2){animation-delay:.15s} .finale .fl span:nth-child(3){animation-delay:.3s} .finale .fl span:nth-child(4){animation-delay:.45s;color:var(--wine)} .ctarow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px} .smallprint{margin-top:34px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.7} /* ---------- Start ---------- */ #step0{text-align:center;padding-top:26px} /* ---------- Stations-Navigation (klebt am unteren Rand, gibt den Footer frei) ---------- */ .navbar{ position:sticky;bottom:0;z-index:50; background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:10px 24px calc(10px + env(safe-area-inset-bottom)); } .navbar-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px} .dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center} .navbtn{font:inherit;font-weight:500;font-size:.95rem;background:none;border:none;color:var(--ink);cursor:pointer;padding:8px 10px;border-radius:8px;white-space:nowrap;flex:none} .navbtn:hover{background:var(--sand)} .navbtn[aria-disabled="true"]{opacity:.3;cursor:default;background:none} .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px;font-size:.92rem;font-weight:500} .breadcrumb .bcstep{background:var(--sand);border:1px solid var(--gold-soft);border-radius:999px;padding:4px 12px;color:#6B5330;animation:fadeUp .4s ease both} .breadcrumb .bcsep{color:var(--gold)} /* styles.css zwingt h1/h2 unter 760 px per !important auf 29/22 px — die Tour-Titel behalten ihre eigene Größenformel. */ @media (max-width:760px){ .tour .step-title{font-size:clamp(1.7rem,3.6vw,2.5rem)!important;line-height:1.15!important} /* Die Abschnittsmarken waren bis zum 30.08. h3 und blieben deshalb verschont. Als h2 treffen sie die Regel der Site voll: gemessen 22px Grossbuchstaben statt 13px, „Was jetzt im Hintergrund passiert" 102px hoch statt zwanzig. */ .tour .panel h2{font-size:13px!important;line-height:1.4!important} .tour .rg-alle-kopf h2{font-size:12.5px!important;line-height:1.4!important} .tour .rg-hero-titel{font-size:clamp(24px,6.6vw,32px)!important;line-height:1.12!important} } @media (prefers-reduced-motion:reduce){ .tour *,.tour *::before,.tour *::after{animation:none!important;transition:none!important} .evt{opacity:1;transform:none} } /* ---------- Eine einzelne Funktion im Katalog einer Einheit ---------- Bis zum 29.08.2026 standen alle 103 Funktionen auf einer Adresse - mit Suchfeld, Filterleiste und neun Bereichskaesten drumherum. Das Ganze war gemessen 14.741 Pixel hoch. Jetzt traegt jede Einheit ihren Teil, und uebrig bleibt die einzelne Funktion. */ .katfn-inhalt{padding:0 14px 13px} .katfn-inhalt > p{font-size:.92rem;color:var(--lede);margin:0 0 7px} .katfn-nutzen{font-size:.92rem;color:var(--ink);margin:0;padding-left:11px;border-left:2px solid var(--gold)} .bildplatz{position:relative;width:100%;height:0;border:1px dashed var(--line); border-radius:10px;background:var(--sand)} .bildplatz-inhalt{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:7px;padding:16px;text-align:center;color:var(--muted)} .bildplatz-inhalt b{font-size:.86rem;font-weight:500;color:var(--lede);line-height:1.45;max-width:34ch} .bildplatz-datei{font-size:.72rem;letter-spacing:.03em;opacity:.7;word-break:break-all} /* ---------- Programmbild: je Geraet eine Form, eine Quelle ---------- Gemessen: Die Vollaufnahmen sind 1500 bis 1876px breit im Verhaeltnis 2,1:1. Auf einem 375er Handy bleiben 312px Anzeigebreite, also 21 Prozent Massstab - eine 14px-Beschriftung im Programm wird 2,9px gross. Das Bild belegte dort Platz, statt etwas zu belegen. Jetzt laedt das Handy eine eigene, vorgeschnittene Datei (9 bis 47 KB statt 150 bis 550) und der Desktop die Vollaufnahme mit einem goldenen Rahmen ueber derselben Stelle. Der Wechsel laeuft ueber , nicht ueber CSS - sonst uebertraegt das Handy trotzdem die grosse Datei. Der Rahmen ist kein Schmuck: Eine 1500px-Aufnahme auf 720px enthaelt dreissig Bedienelemente, und ohne Hinweis sieht jeder ein anderes. */ .pb{margin:0 0 22px} .pb-fenster{ display:block;position:relative;line-height:0;overflow:hidden; border:1px solid var(--line);border-radius:12px;background:#16120F; } .pb-fenster img{width:100%;height:auto;display:block} /* Unter 1040px zeigt den Ausschnitt. Der ist zwischen 244 und 540px breit - auf einem Tablet waere die Spalte breiter als die Datei, und die Programmschrift wuerde hochskaliert und weich. Gemessen: auf 768px lief operations auf Faktor 1,88. Also nie ueber 1:1 hinaus. */ @media (max-width:1039px){ .pb:not(.pb-hoch) .pb-fenster img{width:auto;max-width:100%} } .pb-fokus{display:none} .pb-text{margin-top:9px;font-size:.86rem;line-height:1.55;color:var(--muted);max-width:66ch} .pb-text b{color:var(--lede);font-weight:600} /* Der Rahmen sitzt in Prozent der Vollaufnahme - er gilt also nur da, wo die Vollaufnahme steht, und das ist ab 1040px. Darunter ist die Aufnahme der Ausschnitt selbst und braucht keinen Rahmen. */ @media (min-width:1040px){ .pb-fokus{ display:block;position:absolute;pointer-events:none; border:2px solid #D8BF92;border-radius:5px; box-shadow:0 0 0 3000px rgba(16,11,8,.44); } } /* Die drei GO-Aufnahmen sind hochkant und nativ am Handy entstanden - ihre Schrift ist 28 bis 34px gross und uebersteht die Verkleinerung. Ihr Problem ist die Hoehe: 2048px werden zu einem Turm. Also beschneiden. Verhaeltnis und Lage stehen als Variablen am
, weil die tragende Stelle je Aufnahme woanders liegt (Wartezeit-Kasten oben, Mittelauswahl in der Mitte). */ .pb-hoch .pb-fenster{max-width:340px} .pb-hoch img{ aspect-ratio:var(--pb-verhaeltnis,944/1150); object-fit:cover; object-position:center var(--pb-lage,0%); } @media (min-width:780px){ .pb-hoch .pb-fenster{max-width:380px} } /* ====================================================================== Der Umbau vom 29.08.2026: vier Schritte, zwoelf Register-Einheiten ====================================================================== */ /* ---------- Startseite: der Weg ---------- Der Rundgang hat einen Anfang, und den soll man sehen. Vorher standen vier gleich grosse Kacheln nebeneinander - vier gleichwertige Angebote laden niemanden ein, irgendwo anzufangen. Jetzt liegen sie an einer Linie, der erste doppelt so gross, und er traegt den einzigen kraeftigen Knopf der Seite. Alles andere darauf ist ruhiger als er. Das Grosslogo ist weg: Es stand ein zweites Mal auf derselben Seite. */ .rg-weg{ position:relative;list-style:none;margin:0 0 8px;padding:0; display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:12px;align-items:stretch; } /* Die Linie hinter den Nummern. Sie liegt unter den Karten und wird nur in den Luecken sichtbar - genau das macht aus vier Kacheln einen Weg. */ .rg-weg::before{ content:"";position:absolute;z-index:0; left:40px;right:40px;top:41px;height:2px;background:var(--gold-soft); } .rg-weg > li{position:relative;z-index:1;display:flex} .rg-weg-karte{ display:flex;gap:13px;align-items:flex-start;text-align:left;width:100%; background:var(--card);border:1px solid var(--line);border-radius:14px; padding:16px 17px;cursor:pointer;font:inherit;color:inherit; transition:border-color .2s,transform .2s,box-shadow .2s; } .rg-weg-karte:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 10px 26px -18px rgba(38,33,29,.5)} .rg-weg-nr{ flex:none;width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--sand);border:2px solid var(--gold-soft);color:var(--gold-tief); font-family:var(--font-display,'Montserrat',sans-serif);font-weight:600;font-size:15px; font-variant-numeric:tabular-nums; } .rg-weg-txt b{display:block;font-size:14.5px;line-height:1.3;margin-bottom:4px} .rg-weg-was{display:block;font-size:12.5px;color:var(--muted);line-height:1.5} .rg-weg-los{ display:inline-block;margin-top:12px;background:var(--wine);color:#fff; border-radius:9px;padding:11px 20px;font-size:14.5px;font-weight:600; } /* Der erste Schritt ist die Einladung: groesser, auf dem Sandton, mit kraeftigerem Rand und einem echten Knopf im Text. */ .rg-weg-erst .rg-weg-karte{background:var(--sand);border-color:var(--gold-soft);padding:20px 22px} .rg-weg-erst .rg-weg-nr{width:40px;height:40px;font-size:17px;background:#fff} .rg-weg-erst .rg-weg-txt b{font-size:17px;margin-bottom:6px} .rg-weg-erst .rg-weg-was{font-size:13.5px} .rg-weg-erst .rg-weg-karte:hover .rg-weg-los{background:var(--wine-dark)} .rg-alle{margin:34px 0 0} .rg-alle-kopf h2{ font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--gold-tief);margin:0 0 10px; } .rg-alle-kopf p{font-size:14.5px;color:var(--lede);max-width:70ch;margin:0 0 14px} .rg-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .rg-karte{ text-align:left;background:var(--card);border:1px solid var(--line);border-radius:12px; padding:13px 15px;cursor:pointer;font:inherit;color:inherit;min-height:48px; transition:border-color .2s,transform .2s; } .rg-karte:hover{border-color:var(--gold);transform:translateY(-1px)} /* Die drei Querschnitte sind keine Module, sondern Eigenschaften des ganzen Betriebs. Sie stehen im selben Raster, aber auf anderem Grund. */ .rg-karte-quer{background:var(--sand);border-color:var(--gold-soft)} .rg-karte b{display:block;font-size:14.5px;line-height:1.3;margin-bottom:2px} .rg-karte span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45} .rg-fn{ float:right;font-size:11.5px;font-weight:500;color:var(--muted); background:var(--sand);border-radius:999px;padding:1px 8px;margin-left:8px; font-variant-numeric:tabular-nums; } .rg-karte-quer .rg-fn{background:#FFF} @media (max-width:900px){ .rg-weg{grid-template-columns:1fr 1fr} .rg-weg-erst{grid-column:1 / -1} .rg-weg::before{display:none} .rg-karten{grid-template-columns:1fr 1fr} } @media (max-width:620px){ .rg-weg{grid-template-columns:1fr;gap:9px} .rg-weg-erst{grid-column:auto} /* Auf dem Handy laeuft die Linie senkrecht durch die Nummern. */ .rg-weg::before{ display:block;left:33px;right:auto;top:44px;bottom:26px;width:2px;height:auto; } .rg-karten{grid-template-columns:1fr} .rg-weg-los{display:block;text-align:center;margin-top:14px} } /* ---------- Der Bereichsname im Kicker ---------- */ .ek-bereich{ background:var(--sand);border:1px solid var(--gold-soft);border-radius:999px; padding:2px 9px;font-size:11px;letter-spacing:.1em;color:#6B5330; } /* ---------- Die Rechnung ---------- Renes vierte Anforderung: Zeitersparnis und Automatisierung sichtbar machen. Zwei Zeichen, weil es zwei verschiedene Dinge sind - Arbeit, die wegfaellt, und Nachweis, der von selbst entsteht. Der Baustein steht in jeder Einheit an derselben Stelle: unter der Interaktion, ueber dem Katalog. Wer die zweite Einheit oeffnet, weiss schon, wo er hinsieht. */ .rechnung{ margin:26px 0 0;border-left:3px solid var(--gold);background:var(--sand); border-radius:0 12px 12px 0;padding:16px 20px; } .rechnung-kopf{ font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:#6B5330;margin-bottom:10px; } .rechnung-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .rechnung-liste li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline} .re-marke{ font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; border-radius:999px;padding:2px 9px;white-space:nowrap; } .re-weg .re-marke{background:#FFF;border:1px solid var(--bad);color:var(--bad)} .re-dazu .re-marke{background:#FFF;border:1px solid var(--ok);color:var(--ok)} .re-text{font-size:14.5px;line-height:1.55;color:var(--ink)} /* ---------- Der Katalog einer Einheit ---------- Geschlossen, vollstaendig, ganz unten. Zwischen 1 und 28 Eintraegen statt 103 auf einmal. */ .ek-katalog{margin:22px 0 0;border-top:1px solid var(--line);padding-top:14px} .ek-katalog > summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px; padding:11px 2px;min-height:44px;font-size:14.5px; } .ek-katalog > summary::-webkit-details-marker{display:none} .ek-katalog > summary .plus{margin-left:auto;color:var(--gold-tief);font-weight:600;transition:transform .25s;display:inline-block} .ek-katalog[open] > summary .plus{transform:rotate(45deg)} .ek-katalog-inhalt{padding-top:6px} .ek-katalog-vor{font-size:13px;color:var(--muted);margin:0 0 12px;max-width:66ch} /* ---------- Der Fuss einer Einheit ---------- Ein gefuehrter Ablauf ohne Weiterfuehrung ist auf dem Handy der haeufigste Abbruchgrund. Der naechste Schritt steht deshalb auch dann da, wenn die Einheit einzeln angesprungen wurde. */ .ek-fuss{ display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between; margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line); } .ek-fuss .btn{min-height:48px} /* Dritter, ruhiger Ausgang unterhalb der Fuss-Nav: Telefon plus Termin-Verweis. Kleiner Abstand, kein eigener Rand — dient nicht der Weiterfuehrung im Rundgang, sondern dem Ausgang aus dem Rundgang. */ .ek-ausgang{ display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center; margin:10px 0 0;padding:6px 0 0; } /* ---------- Handy ---------- */ @media (max-width:760px){ .rechnung{padding:14px 16px} .rechnung-liste li{grid-template-columns:1fr;gap:4px} .re-marke{justify-self:start} .ek-fuss{flex-direction:column;align-items:stretch} .ek-fuss .btn{width:100%} } @media (min-width:761px) and (max-width:1000px){ .rg-karten{grid-template-columns:1fr 1fr} } /* ====================================================================== Handy: die drei gemessenen Fehler an der Wurzel ====================================================================== */ /* ---------- 1. Tippziele ---------- Die pointer:coarse-Regel der Site polstert nur a und summary. Der Rundgang besteht aber aus button, select, input und label - gemessen waren das 155 Bedienelemente unter 44px. Hier gilt 48px, weil der Rundgang zum Antippen gebaut ist und nicht zum Lesen. */ @media (pointer: coarse), (max-width: 760px) { .tour button, .tour select, .tour input[type="text"], .tour input[type="number"], .tour input[type="search"] { min-height: 48px; } /* Auch Verweise, die wie Knoepfe aussehen: Der Knopf des schmalen Kontaktbands ist ein und lag gemessen bei 43,6px. Nur beim Verweis, der wie ein Knopf aussieht: Ein inline-Element nimmt keine Hoehe an, deshalb hier ein Anzeigewechsel - und dann auch die waagerechte Ausrichtung, sonst klebt die Beschriftung links. display in der Regel darueber hatte .theme und .rg-karte quergelegt: beides sind