@property --far { syntax:''; inherits:true; initial-value:#22355C; } @property --mid { syntax:''; inherits:true; initial-value:#141F38; } @property --haze{ syntax:''; inherits:true; initial-value:#2C4472; } :root{ --navy:#16243F; --navy-2:#1B2B4B; --indigo:#3B3577; --purple:#7A2E8E; --purple-2:#A055B8; --lavender:#E4D5EE; --heath:#5B8C4A; --red:#E1252B; --paper:#FBF8FC; --ink:#141024; --line:#E2D9EA; --muted:#6B6280; --bg:#F4F0F8; /* Die drei Schriftrollen als Variablen. Sie standen an rund fuenfzig Stellen fest im Bestand - eine Marke konnte sie damit gar nicht tauschen, ohne jede einzelne Regel zu ueberschreiben. */ --schrift-titel:"Bricolage Grotesque",sans-serif; --schrift-text:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif; --schrift-mono:"Space Mono",ui-monospace,monospace; /* Flaechen und Schrift auf dunklem Markengrund. Diese Werte standen an zwanzig Stellen fest im Bestand - und weil eine Marke nur die Token hier oben ueberschreibt, kam sie an keinen davon heran. Eine zweite Marke hatte damit eine eingefaerbte Startseite und Unterseiten in den Farben der ersten. */ --auf-dunkel:#EDE6F5; /* Schrift auf dunkler Markenflaeche */ --auf-dunkel-2:#E0D3EE; /* eine Stufe leiser */ --akzent-hell:#C98FDD; /* heller Akzent auf dunkel */ --verlauf-kopf:linear-gradient(150deg,#16243F,#3B2A63 55%,#5A2F73); --verlauf-bild:linear-gradient(160deg,#1B2B4B,#4C2A69); --verlauf-dunkel:linear-gradient(158deg,#16243F 0%,#2B2359 52%,#4C2A69 100%); --verlauf-anmeldung:radial-gradient(120% 80% at 70% 0%, #3B2A63 0%, transparent 60%), linear-gradient(160deg,#0F1830,#16243F 55%,#241B3F); --shell:min(1180px, 100% - 2.5rem); --bar:52px; } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink); font-family:var(--schrift-text);font-size:16px;line-height:1.55} h1,h2,h3,h4{font-family:var(--schrift-titel);margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.08} .mono{font-family:var(--schrift-mono);text-transform:uppercase;letter-spacing:.13em;font-size:.66rem} button{font:inherit} /* ======================= HERO ======================= */ .hero{position:relative;min-height:min(78svh,660px);display:flex;flex-direction:column;isolation:isolate;color:var(--paper)} .scene{position:absolute;inset:0;z-index:0;overflow:hidden} .scene svg{width:100%;height:100%;display:block} /* Die drei Himmel der Szene. Sie standen als feste Hexwerte in szene.js; dort kam keine Marke an sie heran, ohne das Skript zu kopieren. Nacht in der Stadt, Daemmerung, Sonnenaufgang ueber der Heide. */ #sA .s1{stop-color:#0C1526} #sA .s2{stop-color:#1E3157} #sA .s3{stop-color:#3D5382} #sB .s1{stop-color:#1A1338} #sB .s2{stop-color:#3B3577} #sB .s3{stop-color:#6E5A9B} #sC .s1{stop-color:#3A1C52} #sC .s2{stop-color:#7A2E8E} #sC .s3{stop-color:#D9BEE6} .tint{animation:tint 48s linear infinite} @keyframes tint{ 0%{--far:#22355C;--mid:#141F38;--haze:#2C4472} 20%{--far:#33356E;--mid:#1B1F3F;--haze:#3B3577} 40%{--far:#6A3B92;--mid:#2C2148;--haze:#6B3A8E} 55%{--far:#8E52A8;--mid:#3C2B57;--haze:#8A55A6} 72%{--far:#6A3B92;--mid:#2C2148;--haze:#6B3A8E} 88%{--far:#33356E;--mid:#1B1F3F;--haze:#3B3577} 100%{--far:#22355C;--mid:#141F38;--haze:#2C4472} } .lay-far{animation:sfar 48s linear infinite} .lay-mid{animation:smid 7s linear infinite} .lay-marks{animation:smarks .5s linear infinite} .lay-fore{animation:sfore .4s linear infinite} .lay-cloud{animation:scloud 80s linear infinite} @keyframes sfar{to{transform:translateX(-3600px)}} @keyframes smid{to{transform:translateX(-1200px)}} @keyframes smarks{to{transform:translateX(-200px)}} @keyframes sfore{to{transform:translateX(-300px)}} @keyframes scloud{to{transform:translateX(-1200px)}} .sky-b{animation:skyb 48s linear infinite} .sky-c{animation:skyc 48s linear infinite} @keyframes skyb{0%,10%{opacity:0}22%,34%{opacity:1}46%,100%{opacity:0}} @keyframes skyc{0%,32%{opacity:0}46%,64%{opacity:1}78%,100%{opacity:0}} .truck{animation:bob 1.1s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}65%{transform:translateY(2px)}} .wheel{transform-box:fill-box;transform-origin:center;animation:spin .4s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* Der Koffer wechselt nicht mehr die Lackierung, sondern nur das Licht. Vorher lief hier ein Lackwechsel: navy ueber lila nach weiss und zurueck, dazu zwei Beschriftungen, die sich ueber die Opazitaet abloesten. Der Wagen hat jetzt nur noch eine Lackierung. Geblieben ist die Bewegung, aber mit einem Grund: Der Wagen faehrt in 48 Sekunden von der Stadt bei Nacht ueber die Vorstadt in die Heide im Sonnenaufgang - der Himmel macht das schon (skyb, skyc). Das Blech nimmt dieses Licht jetzt auf. Vier Toene, alle hell, alle dicht beieinander: kuehlgrau, ein Hauch Lila in der Daemmerung, warmweiss im Sonnenaufgang, zurueck ins Kuehle. Die Beschriftung bleibt auf allen vier lesbar - auf dem navy Koffer war lila Schrift es nicht, deshalb musste sie dort ausgeblendet werden. */ /* Die Teile der Lackierung einzeln benannt. Sie tragen ihre Farbe auch als SVG-Attribut - das ist der Wert ohne Stylesheet. Eine CSS-Regel sticht das Attribut, also reicht einer Marke eine Zeile je Teil. */ .liv-name{fill:#3B1147} .liv-zusatz{fill:#456F39} .liv-zeichen{fill:#7A2E8E} .liv-band{fill:#7A2E8E} .liv-glas{fill:#4C5F86} .body-shift{animation:bshift 48s linear infinite} @keyframes bshift{0%,14%{fill:#E9EEF7}34%{fill:#EFE7F5}52%,68%{fill:#FDF7F1}86%,100%{fill:#E9EEF7}} .topbar{position:relative;z-index:2;width:var(--shell);margin:0 auto;padding:1.4rem 0;display:flex; align-items:center;justify-content:space-between;gap:1rem;text-shadow:0 1px 14px rgba(8,5,18,.9)} .brand{display:flex;align-items:center;gap:.65rem;font-family:var(--schrift-titel);font-weight:800;font-size:1rem;color:#fff} .brand i{width:10px;height:24px;background:var(--purple-2);border-radius:2px;transform:skewX(-12deg);flex:0 0 auto} .hnav{display:flex;gap:1.4rem} .hnav a{color:var(--auf-dunkel);text-decoration:none;font-size:.9rem} .hero-copy{position:relative;z-index:2;width:var(--shell);margin:0 auto;padding:2rem 0;flex:1;display:flex;flex-direction:column;justify-content:center} .hero-copy::before{content:"";position:absolute;z-index:-1;inset:-14% -30% -12% -34%;pointer-events:none; background:radial-gradient(58% 62% at 26% 50%, rgba(8,5,18,.86), rgba(8,5,18,.62) 44%, rgba(8,5,18,0) 78%)} .hero-copy .eyebrow{color:var(--auf-dunkel-2);display:inline-flex;gap:.7rem;align-items:center;margin-bottom:1.1rem;text-shadow:0 1px 12px rgba(8,5,18,.9)} .hero-copy .eyebrow s{width:44px;height:1px;background:currentColor;opacity:.6} .hero-copy h1{font-size:clamp(2.2rem,6vw,4.4rem);max-width:14ch;color:#fff;text-wrap:balance; text-shadow:0 1px 2px rgba(8,5,18,.75),0 6px 34px rgba(8,5,18,.85)} .hero-copy h1 em{font-style:normal;color:var(--akzent-hell)} .hero-copy p{max-width:44ch;color:#F0EAF7;margin:1.2rem 0 1.9rem;text-shadow:0 1px 2px rgba(8,5,18,.8),0 4px 22px rgba(8,5,18,.85)} .cta{display:flex;gap:.8rem;flex-wrap:wrap} .btn{padding:.78rem 1.4rem;border-radius:2px;border:0;font-weight:600;cursor:pointer;transition:.18s;text-decoration:none;display:inline-block} .btn:hover:not(:disabled){transform:translateY(-2px)} .btn:disabled{opacity:.45;cursor:not-allowed} .b-light{background:var(--paper);color:var(--ink)} .b-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(251,248,252,.42)} .b-main{background:var(--purple);color:#fff} .b-go{background:var(--heath);color:#fff} .b-line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line)} .b-sm{padding:.5rem .95rem;font-size:.84rem} /* ======================= ANFRAGE ======================= */ .sect{width:var(--shell);margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) 0} .card{background:#fff;border-radius:4px;box-shadow:0 6px 24px rgba(30,12,50,.07);padding:clamp(1.4rem,3.5vw,2.2rem)} .card h2{font-size:1.6rem;color:var(--navy);margin-bottom:.4rem} .card .l{color:var(--muted);margin:0 0 1.8rem;max-width:52ch;font-size:.95rem} .g2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} /* Zwei Regeln, die zusammengehoeren, weil beide dasselbe Missverstaendnis betreffen: dass eine Regel fuer Texteingaben auch fuer alles andere gilt. ERSTENS: .f input{width:100%} traf auch Radioknoepfe und Haekchen. Ein Radioknopf war damit 290 Pixel breit, und der Text daneben stand weit rechts - das Formular lief auseinander. Derselbe Fehler wie einmal in der Seitenleiste, wo .side a{width:100%} den Abmeldeknopf auf 204 Pixel zog. ZWEITENS: Das Attribut hidden setzt display:none - aber nur als Vorgabe des Browsers. Jede eigene Regel mit display sticht es. Ein Block mit .g2 blieb deshalb sichtbar, obwohl hidden gesetzt war; auf einem System mit eingerichtetem Mailversand standen die Passwortfelder da, die eigentlich verborgen sein sollten. */ .f input[type=radio], .f input[type=checkbox]{width:auto;padding:0;border:0; background:none;flex:0 0 auto;margin:.2rem 0 0} [hidden]{display:none!important} .f{margin-bottom:1.1rem} .f label{display:block;color:var(--muted);margin-bottom:.4rem} .f input,.f select,.f textarea{width:100%;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:3px;font:inherit;background:#fff;color:var(--ink)} .f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--purple)} .f textarea{min-height:100px;resize:vertical} .chk{display:flex;gap:.75rem;align-items:flex-start;font-size:.89rem;color:#4C4459;margin:.3rem 0 1.4rem} .chk input{margin-top:.28rem;accent-color:var(--purple);width:17px;height:17px;flex:0 0 auto} .chk a{color:var(--purple)} .err{color:var(--red);font-size:.85rem;margin:.8rem 0 0;display:none} .err.on{display:block} .sent{display:none;padding:1.2rem 1.4rem;border-left:2px solid var(--heath);background:rgba(91,140,74,.1);margin-top:1.4rem} .sent.on{display:block} .sent b{display:block;margin-bottom:.3rem} .foot{background:#0C0817;color:#8E819F;padding:2.4rem 0;font-size:.86rem} .foot .inner{width:var(--shell);margin:0 auto;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} .foot a{color:#B6A8C9;text-decoration:none} /* ======================= PAKETE ======================= */ .pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-bottom:1.8rem} .pkg{background:#fff;border:2px solid var(--line);border-radius:5px;padding:1.3rem;cursor:pointer; transition:.2s;position:relative;display:flex;flex-direction:column} .pkg:hover{border-color:var(--purple-2)} .pkg.on{border-color:var(--purple);box-shadow:0 14px 36px rgba(122,46,142,.18)} .pkg .tagx{position:absolute;top:-10px;left:1.2rem;background:var(--purple);color:#fff;font-family:var(--schrift-mono); font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;padding:.22rem .55rem;border-radius:2px} .pkg h4{font-family:var(--schrift-titel);font-size:1.2rem;color:var(--navy);margin-bottom:.3rem} .pkg .d{color:var(--muted);font-size:.85rem;margin:0 0 1rem;min-height:2.6em} .pkg .pr{border-top:1px solid var(--line);padding-top:.9rem;margin-top:auto} .pkg .pr .one{font-family:var(--schrift-titel);font-size:1.6rem;font-weight:800;color:var(--navy);line-height:1} .pkg .pr small{display:block;color:var(--muted);font-size:.78rem;margin-top:.15rem} .pkg .pr .mon{margin-top:.6rem;font-family:var(--schrift-mono);font-size:.9rem;color:var(--purple)} .pkg ul{list-style:none;padding:0;margin:1rem 0 0;font-size:.84rem} .pkg ul li{padding-left:1.3rem;position:relative;padding-bottom:.28rem;color:#4C4459} .pkg ul li::before{content:"✓";position:absolute;left:0;color:var(--heath);font-weight:700} .addon{display:flex;gap:1rem;align-items:flex-start;padding:.95rem 0;border-bottom:1px solid var(--line)} .addon:last-child{border-bottom:0} .addon input{margin-top:.3rem;accent-color:var(--purple);width:38px;height:20px;flex:0 0 auto;cursor:pointer} .addon b{display:block;font-size:.95rem} .addon small{color:var(--muted);display:block;margin-top:.1rem;font-size:.84rem} .addon .pp{margin-left:auto;text-align:right;white-space:nowrap;padding-left:1rem;align-self:center} .addon .pp b{font-family:var(--schrift-mono);font-size:.88rem;color:var(--navy);font-weight:400} .addon .pp small{color:var(--purple);font-size:.78rem} .sumbox{position:sticky;top:1.2rem;background:var(--navy);color:var(--paper);border-radius:4px;padding:1.4rem; box-shadow:0 16px 44px rgba(20,8,40,.22)} .sumbox h3{color:#fff;font-size:1.05rem;margin-bottom:1rem} .sumbox .row{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0;font-size:.87rem;color:#CFC3E0} .sumbox .row b{color:#fff;font-weight:500;font-family:var(--schrift-mono)} .sumbox .big{border-top:1px solid rgba(255,255,255,.16);margin-top:.9rem;padding-top:1rem} .sumbox .big .mono{color:#B7A9CB} .sumbox .big .amt{font-family:var(--schrift-titel);font-size:1.75rem;font-weight:800;color:#fff;margin:.2rem 0} .sumbox .big .amt2{font-family:var(--schrift-mono);font-size:1rem;color:var(--akzent-hell)} .sumbox p{font-size:.79rem;color:#B7A9CB;margin:1.1rem 0 0;line-height:1.5} /* ======================= TEAM UND FLOTTE ======================= */ .sub{display:none} .sub.on{display:block} .phead{background:var(--verlauf-kopf);color:var(--paper);padding:1.3rem 0 3rem} .phead .inner{width:var(--shell);margin:0 auto} .phead .row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2.2rem} .phead h1{font-size:clamp(1.8rem,4.4vw,2.9rem);max-width:16ch;margin:.5rem 0 .6rem} .phead p{color:#D5C9E6;max-width:50ch;margin:0} .phead .mono{color:#C4B2DA} .team{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.3rem} .tm{background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 6px 24px rgba(30,12,50,.07); transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease} .tm:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(30,12,50,.16)} .tm .ph{aspect-ratio:4/5;background:#EDE4F3;position:relative;overflow:hidden} .tm .ph img{width:100%;height:100%;object-fit:cover;display:block} .tm .ph svg{width:100%;height:100%;display:block} .tm .bd{padding:1rem 1.1rem 1.2rem} .tm b{font-family:var(--schrift-titel);font-size:1.08rem;display:block;color:var(--navy)} .tm .ro{color:var(--purple);font-family:var(--schrift-mono);font-size:.63rem;letter-spacing:.12em; text-transform:uppercase;display:block;margin:.3rem 0 .5rem} .tm p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.5} .tm .si{display:block;margin-top:.7rem;font-size:.78rem;color:#9A8FAD} .fleet{display:grid;gap:1.2rem} .fv{background:#fff;border-radius:4px;box-shadow:0 6px 24px rgba(30,12,50,.07);display:grid; grid-template-columns:340px 1fr;overflow:hidden} .fv .pic{background:var(--verlauf-bild);padding:1.4rem;display:flex;align-items:center} .fv .pic svg,.fv .pic img{width:100%;display:block} .fv .pic img{border-radius:3px;aspect-ratio:16/9;object-fit:cover} .fv .bd{padding:1.4rem 1.6rem} .fv h3{font-size:1.25rem;color:var(--navy)} .fv .kz{font-family:var(--schrift-mono);font-size:.68rem;letter-spacing:.12em;color:var(--purple); text-transform:uppercase;display:block;margin:.3rem 0 .8rem} .fv p{margin:0 0 1rem;color:var(--muted);font-size:.9rem;max-width:52ch} .specs{display:flex;gap:1.6rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:.9rem} .specs div span{font-family:var(--schrift-mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);display:block} .specs div b{font-family:var(--schrift-titel);font-size:1.05rem;color:var(--navy)} /* Pflegeansichten */ .mgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem} .mgcard{background:#fff;border-radius:4px;box-shadow:0 4px 16px rgba(30,12,50,.06);overflow:hidden;cursor:pointer; transition:box-shadow .2s ease;position:relative} .mgcard:hover{box-shadow:0 10px 30px rgba(30,12,50,.14)} .mgcard .ph{aspect-ratio:4/3;background:#EDE4F3;overflow:hidden} .mgcard .ph img,.mgcard .ph svg{width:100%;height:100%;object-fit:cover;display:block} .mgcard .bd{padding:.8rem .9rem 1rem} .mgcard b{display:block;font-size:.95rem;color:var(--navy)} .mgcard small{color:var(--muted);font-size:.82rem} .mgcard .hid{position:absolute;top:.6rem;right:.6rem;background:rgba(20,16,36,.8);color:#fff; font-family:var(--schrift-mono);font-size:.55rem;letter-spacing:.11em;text-transform:uppercase; padding:.2rem .45rem;border-radius:2px} .mgnew{border:1.5px dashed var(--line);background:#FCFAFD;display:grid;place-items:center;min-height:180px; color:var(--purple);font-weight:600;cursor:pointer;border-radius:4px} .mgnew:hover{border-color:var(--purple);background:#FAF4FD} .drop{border:1.5px dashed var(--line);border-radius:4px;padding:1.2rem;text-align:center;cursor:pointer; background:#FCFAFD;transition:.18s;margin-bottom:1.1rem} .drop:hover{border-color:var(--purple);background:#FAF4FD} .drop .pv{width:110px;aspect-ratio:4/5;border-radius:3px;overflow:hidden;margin:0 auto .7rem;background:#EDE4F3} .drop.wide .pv{width:190px;aspect-ratio:16/9} .drop .pv img,.drop .pv svg{width:100%;height:100%;object-fit:cover;display:block} .drop span{font-size:.85rem;color:var(--muted);display:block} .drop b{color:var(--purple);font-size:.87rem} @media(max-width:760px){.fv{grid-template-columns:1fr}} /* ======================= LOGIN ======================= */ .login{min-height:calc(100svh - var(--bar));background:var(--verlauf-anmeldung); display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;gap:1rem} .urlbar{width:min(430px,100%);background:#241B36;border:1px solid #372A50;border-radius:99px;padding:.5rem .9rem; display:flex;align-items:center;gap:.6rem;color:#B9AACC;font-size:.82rem;font-family:var(--schrift-mono)} .urlbar b{color:var(--auf-dunkel);font-weight:400} .urlbar .lk{color:var(--heath)} .lcard{width:min(430px,100%);background:#fff;border-radius:5px;box-shadow:0 26px 70px rgba(6,3,16,.5);padding:2rem 1.8rem} .lcard .brand{margin-bottom:1.6rem} .lcard .brand span{color:var(--navy)} .lcard h2{font-size:1.35rem;color:var(--navy);margin-bottom:.35rem} .lcard .l{color:var(--muted);font-size:.9rem;margin:0 0 1.5rem} .lcard .f input{padding:.75rem .85rem} .lstep{display:none} .lstep.on{display:block;animation:fade .35s ease} .code{display:flex;gap:.5rem;margin-bottom:1.2rem} .code input{width:100%;text-align:center;font-family:var(--schrift-mono);font-size:1.25rem;padding:.7rem .2rem; border:1.5px solid var(--line);border-radius:3px} .code input:focus{outline:none;border-color:var(--purple)} .lnote{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;line-height:1.5} .lnote b{color:var(--ink);display:block;margin-bottom:.2rem} .lguard{width:min(430px,100%);color:#8C7EA6;font-size:.78rem;text-align:center;line-height:1.6} .side .out{margin-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);padding-top:1rem} .side .out button{color:#8E819F;font-size:.84rem} .admin{display:grid;grid-template-columns:230px 1fr;min-height:calc(100svh - var(--bar));background:var(--bg)} .side{background:var(--navy);color:#C6BAD8;padding:1.3rem 0;position:sticky;top:var(--bar);height:calc(100svh - var(--bar));overflow-y:auto} .side .brand{padding:0 1.2rem 1.4rem} .s-fassung{padding:0 1.2rem 1rem;margin-top:-1rem;font-family:var(--schrift-mono); font-size:.6rem;letter-spacing:.1em;color:#6B6084} .side .grp{padding:1.1rem 1.2rem .35rem;font-family:var(--schrift-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#6B6084} .side button{display:flex;width:100%;gap:.6rem;align-items:center;background:none;border:0;color:#C6BAD8; padding:.55rem 1.2rem;cursor:pointer;text-align:left;font-size:.9rem;border-left:2px solid transparent;transition:.15s} .side button:hover{background:rgba(255,255,255,.05);color:#fff} .side button.on{background:rgba(160,85,184,.18);color:#fff;border-left-color:var(--purple-2)} .side .pill{margin-left:auto;background:var(--red);color:#fff;border-radius:99px;font-size:.66rem;padding:.05rem .42rem;font-family:var(--schrift-mono)} .main{padding:1.6rem clamp(1rem,2.5vw,2rem) 4rem;min-width:0} .ahead{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem} .ahead h2{font-size:1.5rem;color:var(--navy)} .ahead p{color:var(--muted);margin:.25rem 0 0;font-size:.9rem} .apane{display:none} .apane.on{display:block;animation:fade .35s ease} @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.6rem} .kpi{background:#fff;border-radius:4px;padding:1.1rem 1.2rem;box-shadow:0 4px 16px rgba(30,12,50,.06)} .kpi .mono{color:var(--muted)} .kpi b{display:block;font-family:var(--schrift-titel);font-size:1.9rem;color:var(--navy);margin-top:.3rem;line-height:1} .kpi small{color:var(--muted);font-size:.79rem} table.t{width:100%;border-collapse:collapse;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 4px 16px rgba(30,12,50,.06);font-size:.9rem} table.t th{text-align:left;font-family:var(--schrift-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);font-weight:400;padding:.85rem 1rem;background:#FAF6FC;border-bottom:1px solid var(--line)} table.t td{padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle} table.t tr:last-child td{border-bottom:0} table.t tbody tr{cursor:pointer;transition:background .15s} table.t tbody tr:hover{background:#FCF9FD} table.t td small{display:block;color:var(--muted);font-size:.8rem} .st{display:inline-block;font-family:var(--schrift-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase; padding:.24rem .55rem;border-radius:2px;white-space:nowrap} .st.neu{background:#FDE7E9;color:#B3161C} .st.ang{background:#EFE4F5;color:var(--purple)} .st.ver{background:#E4EDF8;color:#2B5A94} .st.ok{background:#E5F1E0;color:#3D6B2E} .st.ab{background:#EFECF2;color:var(--muted)} .empty{background:#fff;border-radius:4px;padding:2.5rem;text-align:center;color:var(--muted);box-shadow:0 4px 16px rgba(30,12,50,.06)} .det{display:grid;grid-template-columns:1fr 300px;gap:1.4rem;align-items:start} .box{background:#fff;border-radius:4px;padding:1.4rem;box-shadow:0 4px 16px rgba(30,12,50,.06)} .box h3{font-size:1.05rem;color:var(--navy);margin-bottom:1rem} .dl{display:grid;grid-template-columns:130px 1fr;gap:.5rem 1rem;font-size:.9rem} .dl dt{color:var(--muted)} .dl dd{margin:0} .tl{list-style:none;padding:0;margin:0;font-size:.85rem} .tl li{padding:.5rem 0 .5rem 1.2rem;border-left:1.5px solid var(--line);position:relative;color:var(--muted)} .tl li::before{content:"";position:absolute;left:-5px;top:.85rem;width:8px;height:8px;border-radius:50%;background:var(--line)} .tl li.done::before{background:var(--heath)} .tl li.done{color:var(--ink)} .tl li b{display:block;font-weight:600} /* Positionseditor */ .pos{width:100%;border-collapse:collapse;font-size:.88rem;margin-bottom:.9rem} .pos th{text-align:left;font-family:var(--schrift-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase; color:var(--muted);font-weight:400;padding-bottom:.5rem} .pos th:nth-child(2),.pos td:nth-child(2){width:92px} .pos th:nth-child(3),.pos td:nth-child(3){width:118px;text-align:right} .pos th:last-child,.pos td:last-child{width:34px} .pos td{padding:.25rem .3rem .25rem 0;vertical-align:top} .pos input{width:100%;padding:.5rem .6rem;border:1.5px solid var(--line);border-radius:3px;font:inherit;font-size:.88rem} .pos input:focus{outline:none;border-color:var(--purple)} .pos input.n{text-align:right;font-family:var(--schrift-mono)} .pos .del{background:none;border:0;color:#C3B8D2;cursor:pointer;font-size:1.15rem;line-height:1;padding:.4rem} .pos .del:hover{color:var(--red)} .tots{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.4rem;font-size:.9rem} .tots div{display:flex;justify-content:space-between;padding:.22rem 0;color:var(--muted)} .tots div b{color:var(--ink);font-family:var(--schrift-mono);font-weight:400} .tots div.big{border-top:2px solid var(--navy);margin-top:.6rem;padding-top:.8rem;color:var(--ink)} .tots div.big b{font-family:var(--schrift-titel);font-size:1.45rem;font-weight:800;color:var(--navy)} .rowbtns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)} .tmpl{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem} .tmpl button{border:1.5px solid var(--line);background:#fff;border-radius:3px;padding:.42rem .8rem;font-size:.82rem;cursor:pointer;color:var(--navy)} .tmpl button:hover{border-color:var(--purple);color:var(--purple)} /* Einstellungen */ .tgl{display:flex;gap:1rem;align-items:flex-start;padding:.95rem 0;border-bottom:1px solid var(--line)} .tgl:last-child{border-bottom:0} .tgl input{margin-top:.3rem;accent-color:var(--purple);width:38px;height:20px;flex:0 0 auto;cursor:pointer} .tgl b{display:block;font-size:.95rem} .tgl small{color:var(--muted);display:block;margin-top:.1rem;font-size:.84rem} .tgl .lock{margin-left:auto;font-family:var(--schrift-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase; color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:.2rem .45rem;white-space:nowrap;align-self:center} /* Dispo */ .dispo{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.5rem} .dcell{background:#fff;border-radius:3px;padding:.65rem .5rem;text-align:center;box-shadow:0 2px 8px rgba(30,12,50,.05);font-size:.8rem} .dcell .dd{font-family:var(--schrift-titel);font-weight:800;font-size:1.1rem;color:var(--navy)} .dcell .dw{font-family:var(--schrift-mono);font-size:.58rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase} .dcell .dj{margin-top:.3rem;font-size:.72rem;border-radius:2px;padding:.15rem .3rem} .dcell .dj.free{color:var(--muted)} .dcell .dj.res{background:#FFF3E0;color:#A35A00} .dcell .dj.book{background:var(--purple);color:#fff} /* Mailvorschau */ .modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:1.2rem; background:rgba(8,5,16,.75);backdrop-filter:blur(4px)} .modal.on{display:flex} .mail{background:#fff;border-radius:5px;max-width:600px;width:100%;max-height:86vh;overflow:auto} .mailhd{background:#F4F0F8;padding:1rem 1.3rem;border-bottom:1px solid var(--line);font-size:.86rem} .mailhd div{display:flex;gap:.7rem;padding:.13rem 0} .mailhd span{color:var(--muted);width:52px;flex:0 0 auto;font-family:var(--schrift-mono);font-size:.62rem; letter-spacing:.1em;text-transform:uppercase;padding-top:.2rem} .mailbd{padding:1.6rem 1.3rem;font-size:.92rem} .mailbd h3{color:var(--navy);margin-bottom:.9rem} .mailbd p{margin:0 0 .9rem;color:#4C4459} .mailbtn{display:inline-block;background:var(--purple);color:#fff;padding:.75rem 1.4rem;border-radius:2px; text-decoration:none;font-weight:600;margin:.4rem 0 1rem} .mailft{border-top:1px solid var(--line);padding:1rem 1.3rem;display:flex;gap:.7rem;justify-content:flex-end;flex-wrap:wrap;background:#FAF6FC} /* Kundenangebot */ .otop{background:var(--verlauf-kopf);color:var(--paper);padding:1.3rem 0 3.2rem} .otop .inner{width:min(820px,100% - 2.2rem);margin:0 auto} .otop .mono{color:#C4B2DA} .otop h1{font-size:clamp(1.6rem,4vw,2.3rem);margin:.5rem 0} .otop p{color:#D5C9E6;margin:0;max-width:48ch} .osheet{width:min(820px,100% - 2.2rem);margin:-1.6rem auto 0;background:#fff;border-radius:4px;position:relative;z-index:2; box-shadow:0 14px 40px rgba(30,12,50,.15);padding:clamp(1.4rem,4vw,2.2rem)} .dl2{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;border-left:3px solid var(--purple);padding-left:1rem;margin-bottom:1.6rem} .dl2 b{font-family:var(--schrift-mono);color:var(--purple)} .dl2 span{color:var(--muted);font-size:.88rem} table.o{width:100%;border-collapse:collapse;font-size:.92rem} table.o th{text-align:left;font-family:var(--schrift-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);font-weight:400;padding-bottom:.6rem;border-bottom:1px solid var(--line)} table.o th:last-child,table.o td:last-child{text-align:right} table.o td{padding:.75rem 0;border-bottom:1px solid var(--line)} table.o td.n{font-family:var(--schrift-mono);white-space:nowrap} table.o tr.s td{border-bottom:0;padding-top:.9rem;color:var(--muted)} table.o tr.b td{border-top:2px solid var(--navy);border-bottom:0;padding-top:.9rem} table.o tr.b td b{font-family:var(--schrift-titel);font-size:1.5rem;color:var(--navy)} .oact{width:min(820px,100% - 2.2rem);margin:1.3rem auto 3rem;background:#fff;border-radius:4px; box-shadow:0 6px 24px rgba(30,12,50,.07);padding:clamp(1.4rem,4vw,2.2rem)} .oact h2{font-size:1.2rem;color:var(--navy);margin-bottom:.5rem} .res{display:none;text-align:center;padding:1rem 0} .res.on{display:block;animation:fade .45s ease} .res .tick{width:60px;height:60px;border-radius:50%;background:var(--heath);color:#fff;display:grid;place-items:center; margin:0 auto 1.2rem;font-size:1.8rem} .res.gr .tick{background:#8E819F} /* PWA-Telefonrahmen */ .phone .admin{grid-template-columns:1fr;max-width:430px;margin:1.5rem auto;border-radius:22px;overflow:hidden; box-shadow:0 30px 70px rgba(20,8,40,.35);min-height:78svh;border:9px solid #14101F;background:#fff} .phone .side{display:none} .phone .main{padding:1.1rem 1rem 5.5rem} .phone .det{grid-template-columns:1fr} .phone .toolbar{display:flex} .phone .g2,.phone .kpis{grid-template-columns:1fr 1fr} .toolbar{display:none;position:sticky;bottom:0;margin:-4.4rem -1rem 0;background:rgba(255,255,255,.94); backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:.5rem .4rem calc(.5rem + env(safe-area-inset-bottom)); justify-content:space-around;z-index:5} .toolbar button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:.15rem; color:var(--muted);cursor:pointer;font-size:.62rem;padding:.3rem .5rem;border-radius:6px;flex:1} .toolbar button.on{color:var(--purple)} .toolbar b{font-size:1.15rem;line-height:1;font-weight:400} .toolbar .dot{position:absolute;transform:translate(11px,-2px);width:7px;height:7px;border-radius:50%;background:var(--red)} @media(max-width:900px){ .admin{grid-template-columns:1fr} .side{display:none} .det{grid-template-columns:1fr} .toolbar{display:flex} .main{padding-bottom:5.5rem} } @media(max-width:600px){.g2{grid-template-columns:1fr}.hnav{display:none}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* Zugaben gegenueber dem Prototyp. Alles darueber ist unveraendert. */ :focus-visible{outline:3px solid var(--heath);outline-offset:2px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important} } .hnav a.on{color:#fff;text-decoration:underline;text-underline-offset:5px} /* Fliesstext der Rechtstexte. Uebernommen aus der Rechtstext-Ansicht des Mockups (.sheet h3, .sheet p, .sheet .hint) - gleiche Werte, nur an die Seitenfassung statt an das Overlay gehaengt. Keine neuen Farben. */ .recht h3{font-size:1.02rem;color:var(--purple);margin:1.7rem 0 .5rem} .recht h3:first-child{margin-top:0} .recht h4{font-size:.94rem;color:var(--ink);margin:1.3rem 0 .4rem} /* Der Widerspruch nach Art. 21 steht im Gesetzestext in Versalien. Gross geschriebener Fliesstext liest sich schlecht - hier stattdessen ein Balken daneben: dieselbe Betonung, ohne dass man buchstabieren muss. */ .recht .versal{border-left:2px solid var(--purple);padding-left:.9rem; background:#F7F2FA;padding-top:.6rem;padding-bottom:.6rem} .recht .quelle{margin-top:1.8rem;padding-top:.9rem;border-top:1px solid var(--line); font-size:.82rem;color:var(--muted)} .recht p{margin:0 0 .8rem;font-size:.94rem;color:#4C4459;max-width:72ch} .recht address{font-style:normal;line-height:1.9;font-size:.94rem;color:#4C4459;margin:0 0 .8rem} .recht .hinweis{background:#F3ECF7;border-left:2px solid var(--purple);padding:.9rem 1.1rem; font-size:.87rem;color:#4C4459;margin:0 0 1.6rem;max-width:none} /* --bar war die Hoehe der Prototyp-Leiste. Die gibt es hier nicht, also soll auch kein Platz dafuer freibleiben. Betrifft .login, .admin, .side. */ :root{--bar:0px} /* Die Seitenleiste des Mitarbeiterbereichs ist im Mockup aus Knoepfen gebaut, weil dort JavaScript umschaltet. Serverseitig sind es Links. Gleiche Deklarationen wie .side button, nur fuer a. */ .side a{display:flex;width:100%;gap:.6rem;align-items:center;background:none;border:0;color:#C6BAD8; padding:.55rem 1.2rem;cursor:pointer;text-align:left;font-size:.9rem;text-decoration:none; border-left:2px solid transparent;transition:.15s} .side a:hover{background:rgba(255,255,255,.05);color:#fff} .side a.on{background:rgba(160,85,184,.18);color:#fff;border-left-color:var(--purple-2)} .side .out a{color:#8E819F;font-size:.84rem} /* Ein abgeschaltetes Modul steht in der Liste weiter drin, nur blass - der Super Admin soll sehen, was es gaebe. */ .addon.aus b,.addon.aus small{opacity:.55} /* ---- Frachtbrief-Leiste und Leistungsband ---------------------------- Werte aus entwuerfe/hanse-heide-hero.html uebernommen. Die Bandkarte heisst dort .card - der Name ist hier schon von der weissen Karte im Formularteil belegt, deshalb .leistung. Sonst identisch. */ /* Der Hero traegt jetzt die Leiste mit. Der Prototyp gab ihm 660 px, als darunter direkt das Formular kam; der Hero-Entwurf mit Leiste nimmt 880. 780 ist der Mittelweg: die Leiste hat Platz, ohne dass man am Schreibtisch scrollen muss, um ueberhaupt etwas anderes zu sehen. */ .hero{min-height:min(88svh,780px)} /* .waybill::before zieht seinen Verlauf mit inset:0 -50vw ueber beide Seiten hinaus, damit er randlos wirkt. Im Hero-Entwurf faengt ein overflow-x:hidden am Body das ab; hier gibt es das nicht, und die Seite liess sich waagerecht scrollen - 1990 statt 1400 Pixel. Der Hero klemmt es jetzt ab. */ .hero{overflow:hidden} /* Der Seitenkopf hatte 1.3rem Innenabstand oben, die Hero-Leiste 1.4rem. Zwei Pixel Versatz - beim Seitenwechsel sieht man sie. */ .phead{padding-top:1.4rem} .waybill{position:relative;z-index:2;width:var(--shell);margin:0 auto;padding:1.1rem 0 1.6rem; display:flex;gap:0;flex-wrap:wrap;border-top:1px solid rgba(251,248,252,.3)} .waybill::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0 -50vw -3rem -50vw; background:linear-gradient(to top, rgba(8,5,18,.92) 0%, rgba(8,5,18,.78) 55%, rgba(8,5,18,0) 100%)} .waybill div{flex:1 1 190px;padding:.9rem 1.2rem .2rem 0;border-right:1px solid rgba(251,248,252,.18)} .waybill div:last-child{border-right:0} .waybill b{display:block;font-family:var(--schrift-titel);font-size:1.05rem;font-weight:600; margin-top:.35rem;color:#fff} .waybill span{color:#CDBFE0} .band{background:var(--paper);color:var(--ink);padding:clamp(3rem,7vw,5rem) 0} .band .inner{width:var(--shell);margin:0 auto} .band h2{font-size:clamp(1.7rem,4vw,2.6rem);max-width:20ch;margin-bottom:.8rem;color:var(--navy)} .band .vor{color:var(--muted);max-width:56ch;margin:0 0 2.6rem;font-size:1rem} .leisten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem} /* Sichtbar ist der Grundzustand. Erst wenn JavaScript laeuft (html.js), starten die Karten unsichtbar und blenden beim Scrollen ein. Andersherum waere der Text weg, sobald das Skript ausfaellt - und der Text ist der Zweck des Bandes, die Animation nur die Zugabe. */ .leistung{border-top:2px solid var(--purple);padding-top:1.1rem} .js .leistung{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .js .leistung.in{opacity:1;transform:none} .leistung .mono{color:var(--purple)} .leistung h3{font-size:1.24rem;margin:.5rem 0;color:var(--navy)} .leistung p{margin:0;color:#4C4459;font-size:.97rem} @media(max-width:720px){.waybill div:nth-child(n+3){border-right:0}} @media(prefers-reduced-motion:reduce){.js .leistung{opacity:1;transform:none}} /* ---- Fuss ------------------------------------------------------------ Statt eines Kartenkastens ein Streckenband: Hamburg links, Heide rechts, ein LKW faehrt dazwischen. Das ist die Bildsprache der Seite, braucht eine Zeile statt eines Blocks und bewegt sich von selbst. Die interaktive Karte von OpenStreetMap klappt erst nach Klick auf - vorher geht nichts an den Anbieter hinaus. */ .foot{padding:clamp(1.8rem,3.5vw,2.6rem) 0 1.4rem} .foot .inner{display:block} /* war eine Flex-Zeile, jetzt Spalten */ .strecke{margin-bottom:2rem} .st-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem; flex-wrap:wrap;margin-bottom:1.1rem} .st-kopf .mono{color:#C99BE0} .st-mehr{background:none;border:0;padding:0;font:inherit;font-size:.82rem; color:#8E819F;cursor:pointer;transition:color .18s ease} .st-mehr::after{content:" \2192";display:inline-block;transition:transform .18s ease} .st-mehr:hover{color:var(--auf-dunkel)} .st-mehr:hover::after{transform:translateX(3px)} .st-band{display:flex;align-items:center;gap:.9rem;height:18px} .st-punkt{width:9px;height:9px;border-radius:50%;flex:0 0 auto;position:relative} .st-punkt::after{content:"";position:absolute;inset:-5px;border-radius:50%; border:1px solid currentColor;opacity:.35;animation:st-puls 2.8s ease-out infinite} .st-punkt.a{background:var(--red);color:var(--red)} .st-punkt.b{background:var(--purple-2);color:var(--purple-2)} .st-punkt.b::after{animation-delay:1.4s} @keyframes st-puls{0%{transform:scale(.6);opacity:.5}70%{transform:scale(1.5);opacity:0}100%{opacity:0}} .st-gleis{position:relative;flex:1;height:2px;border-radius:2px; background:repeating-linear-gradient(90deg,#5B4E71 0 9px,transparent 9px 20px); animation:st-fahrt 1.1s linear infinite} @keyframes st-fahrt{to{background-position:20px 0}} .st-lkw{position:absolute;top:50%;left:0;width:40px;height:17px; color:var(--purple-2);filter:drop-shadow(0 2px 6px rgba(160,85,184,.45)); /* Die Raeder sitzen bei 89 Prozent der Zeichenhoehe - so weit nach oben schieben, damit sie die Linie beruehren statt sie zu durchschneiden. */ transform:translate(-50%,-89%); animation:st-lkw 11s linear infinite} @keyframes st-lkw{ 0%{left:0;opacity:0} 4%{opacity:1} 92%{opacity:1} 100%{left:100%;opacity:0} } .st-orte{display:flex;justify-content:space-between;gap:1rem;margin-top:.7rem; font-family:var(--schrift-mono);font-size:.62rem;letter-spacing:.13em; text-transform:uppercase;color:#8E819F} .st-orte span:first-child{color:#D8CBE8} .st-orte span:last-child{color:#D8CBE8} .st-mitte{color:#6B6084} /* Die gezeichnete Karte samt OpenStreetMap - erst nach Klick sichtbar. */ .fmap{margin-bottom:1.8rem} .map{position:relative;width:100%;max-width:520px;aspect-ratio:620/460;border-radius:4px; overflow:hidden;background:#0F1A2E;box-shadow:0 12px 32px rgba(6,3,16,.4)} .map > svg{display:block;width:100%;height:100%} .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .route{stroke-dasharray:10 12;animation:route 2.6s linear infinite} @keyframes route{to{stroke-dashoffset:-44}} .pin{transform-box:fill-box;transform-origin:bottom center;animation:pin 2.8s ease-in-out infinite} .pin.b{animation-delay:.7s} @keyframes pin{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem} .foot h4{font-family:var(--schrift-titel);font-size:.9rem;font-weight:600; color:#fff;margin:0 0 .6rem} .foot .foot-cols a{display:block;padding:.18rem 0;transition:color .18s ease,transform .18s ease} .foot .foot-cols a:hover{color:#fff;transform:translateX(3px)} .foot address{font-style:normal;line-height:1.65} .foot .brand{margin-bottom:.7rem} .foot .claim{max-width:34ch;color:#8E819F;margin:.7rem 0 0;font-size:.82rem} .legal{margin-top:1.8rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1); display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center} .legal nav{display:flex;gap:1.4rem;flex-wrap:wrap} .legal a:hover{color:#fff} @media(max-width:900px){ .foot-cols{grid-template-columns:1fr 1fr} .fmap{grid-template-columns:1fr 1fr} .mapinfo{grid-column:2 / -1} } @media(max-width:560px){ /* Die Marke braucht die volle Breite, die drei Linklisten passen zu zweit nebeneinander - sonst wird der Fuss auf dem Handy sehr lang. */ .foot-cols{grid-template-columns:1fr 1fr;gap:1.4rem} .foot-cols > div:first-child{grid-column:1 / -1} .fmap{grid-template-columns:1fr} .map{grid-column:1;max-width:280px} .mapinfo{grid-column:1} .legal{flex-direction:column;align-items:flex-start} } @media(prefers-reduced-motion:reduce){.route,.pin{animation:none}} /* ---- Handy ------------------------------------------------------------ Auf dem Hero liegt die Szene als Hintergrund und wird mit preserveAspectRatio="xMidYMax slice" auf Ueberdeckung skaliert. Je hoeher der Hero, desto staerker der Zoom: bei 870 Pixeln Hoehe und 375 Breite sind das 1,67-fach, sichtbar bleiben 19 Prozent der Breite - man sieht einen Ausschnitt aus einem 710 Pixel breiten LKW. Deshalb ist die Szene hier kein Hintergrund mehr, sondern ein Streifen unter dem Text. Bei 170 Pixeln Hoehe faellt der Zoom auf 0,33 und die Szene ist fast vollstaendig zu sehen. */ @media(max-width:720px){ .hero{min-height:auto; background:var(--verlauf-dunkel)} /* Die Navigation war unter 600 Pixeln ausgeblendet, ohne Ersatz - Team und Fuhrpark waren von oben nicht erreichbar. Sie bekommt jetzt eine eigene Zeile unter Marke und Knopf. */ .topbar{order:1;padding:1.1rem 0 .9rem;flex-wrap:wrap;row-gap:.85rem} .phead{padding-top:1.1rem} /* gleicher Abstand wie im Hero */ .topbar .hnav{display:flex;order:3;width:100%;gap:1.3rem;font-size:.88rem; padding-top:.85rem;border-top:1px solid rgba(251,248,252,.16)} /* Der Seitenkopf der Unterseiten hat dieselbe Leiste, aber ein eigenes Raster. Ohne eigene Regel lief die Navigation dort aus dem Bild - die Seite liess sich seitlich scrollen. */ .phead .row{flex-wrap:wrap;row-gap:.85rem} /* order:3 schiebt das Menue unter Marke und Knopf - dieselbe Anordnung wie im Hero, sonst stapelt der Seitenkopf dreizeilig. */ .phead .hnav{display:flex;order:3;width:100%;gap:1.3rem;font-size:.88rem; padding-top:.85rem;border-top:1px solid rgba(251,248,252,.16)} /* Die Ortsreihe im Fuss bricht sonst um. Die Mitte ist die Zugabe. */ .st-mitte{display:none} .st-orte{font-size:.58rem} .hero-copy{order:2;flex:none;padding:.4rem 0 1.2rem} .hero-copy h1{font-size:clamp(1.9rem,8.5vw,2.6rem)} .hero-copy p{margin:.9rem 0 1.4rem} .cta .btn{flex:1 1 auto;text-align:center} .scene{order:3;position:relative;inset:auto;width:100%;height:170px} .waybill{order:4} /* Der Abdunkler hinter der Copy hat den Text von der Szene abgehoben. Ueber dem Verlauf braucht es ihn nicht mehr. */ .hero-copy::before{display:none} .hero-copy h1,.hero-copy p,.hero-copy .eyebrow{text-shadow:none} .waybill{padding:1rem 0 1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem} .waybill::before{display:none} .waybill div{padding:.5rem 0;border-right:0} .waybill b{font-size:.95rem} } /* ---- Reiter in den Einstellungen ------------------------------------ Module, Benutzer und Mailversand liegen unter einem Menuepunkt. Die Leiste zeigt nur, was die Rolle sehen darf - wer kein Recht hat, bekommt den Reiter gar nicht erst. */ /* Weg zurueck zur Uebersicht, darueber die Gruppe. Steht ueber der Leiste und nicht darin: Ein Pfeil, der aussieht wie ein Reiter, wird fuer einen gehalten. */ /* Stand und Knoepfe der Auftragsbestaetigung in der Auftragszeile. */ /* Kleiner Hinweis unter einem Formularfeld, und die Kennzeichnung optionaler Felder in ihrer Beschriftung. */ .f .hinweis{color:var(--muted);font-size:.82rem;line-height:1.5;margin:.35rem 0 0} .f label .opt{color:var(--muted);font-weight:400} .bs-zeile{margin:.5rem 0 0;padding-top:.5rem;border-top:1px solid var(--line)} .bs-zeile small{display:block;color:var(--muted);font-size:.8rem;line-height:1.5} .bs-zeile small.bs-fehlt{color:var(--red)} .bs-knoepfe{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.35rem} .reiter-kopf{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap; margin:0 0 .6rem} .reiter-kopf a{color:var(--muted);text-decoration:none;font-size:.86rem} .reiter-kopf a:hover{color:var(--purple)} .reiter-kopf span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted)} /* Die Kacheln der Uebersicht. Zwei Spalten, wo Platz ist - darunter eine, damit die Erklaerung nicht auf drei Woerter je Zeile zerfaellt. */ .e-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:.6rem} .e-kachel{display:block;padding:.9rem 1.1rem;border-radius:2px;text-decoration:none; box-shadow:inset 0 0 0 1px var(--line);transition:.18s} .e-kachel:hover{box-shadow:inset 0 0 0 1.5px var(--purple);transform:translateY(-1px)} .e-kachel b{display:block;color:var(--ink);font-size:.98rem;margin-bottom:.15rem} .e-kachel small{display:block;color:var(--muted);font-size:.84rem;line-height:1.5} .reiter{display:flex;gap:.2rem;border-bottom:1px solid var(--line); margin:0 0 1.6rem;flex-wrap:wrap} .reiter a{padding:.6rem .9rem;color:var(--muted);text-decoration:none;font-size:.92rem; border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .16s,border-color .16s} .reiter a:hover{color:var(--ink)} .reiter a.on{color:var(--purple);border-bottom-color:var(--purple);font-weight:600} @media(max-width:560px){.reiter a{padding:.55rem .7rem;font-size:.88rem}} /* ---- Wartungsseite --------------------------------------------------- Eigene Seite ohne Kopf und Fuss: Wenn die Website aus ist, soll auch nichts anklickbar sein, was ins Leere fuehrt. */ .wartung{min-height:100svh;display:grid;place-items:center;padding:2rem 1.2rem; background:var(--verlauf-dunkel);color:var(--paper)} .w-inner{width:min(560px,100%);text-align:center} .wartung .brand{justify-content:center;margin-bottom:2.4rem} .wartung .mono{color:#C99BE0;display:block;margin-bottom:.8rem} .wartung h1{font-size:clamp(1.9rem,6vw,2.9rem);color:#fff;margin-bottom:1rem} .wartung p{color:#DAD0EA;margin:0 auto;max-width:44ch} .w-band{display:flex;align-items:center;gap:.9rem;height:18px;margin:2.6rem 0} .w-fuss{font-size:.9rem;color:#B7A9CB;margin-top:2rem} .wartung a{color:#DDB9EC} /* Warnband im Mitarbeiterbereich. Ein abgeschalteter Zustand darf nicht unbemerkt bleiben - beim ersten Versuch hat der Super Admin gar nicht gemerkt, dass der Schalter gewirkt hat. */ .warnband{background:#FDE7E9;border-left:3px solid var(--red);color:#7A1015; padding:.9rem 1.1rem;margin-bottom:1.4rem;font-size:.9rem} .warnband b{display:inline} .warnband a{color:#7A1015;margin-left:.5rem;font-weight:600} /* ======================= UMZUGSRECHNER ======================= Uebernommen aus entwuerfe/umzugsrechner.html. Die Klassennamen haben ein r- davor bekommen: .side, .nav, .step und .extra sind im Mitarbeiterbereich schon belegt, .side ist dort die Seitenleiste. Werte sonst unveraendert. */ /* ---------- Frachtbrief-Stepper ---------- */ .r-steps{display:flex;gap:0;width:var(--shell);margin:-1.5rem auto 0;background:#fff;border-radius:4px; box-shadow:0 16px 44px rgba(30,12,50,.16);overflow:hidden;position:relative;z-index:2} .r-step{flex:1;padding:.95rem 1rem;border-right:1px solid var(--line);color:var(--muted); display:flex;align-items:center;gap:.7rem;cursor:pointer;background:none;border-top:0;border-bottom:0;border-left:0; font:inherit;text-align:left;transition:background .2s ease,color .2s ease} .r-step:last-child{border-right:0} .r-step:hover:not(:disabled){background:#FAF6FC} .r-step:disabled{cursor:default;opacity:.55} .r-step b{font-family:var(--schrift-mono);font-size:.72rem;width:26px;height:26px;border-radius:50%; display:grid;place-items:center;background:var(--line);color:var(--muted);flex:0 0 auto;transition:.2s} .r-step span{font-size:.86rem;font-weight:500} .r-step.on{color:var(--ink);background:#fff} .r-step.on b{background:var(--purple);color:#fff} .r-step.r-done b{background:var(--heath);color:#fff} .r-step.r-done{color:var(--ink)} /* ---------- Layout ---------- */ .r-wrap{width:var(--shell);margin:2.2rem auto 4rem;display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start} .r-panel{background:#fff;border-radius:4px;padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 6px 24px rgba(30,12,50,.07)} .r-pane{display:none;animation:in .45s cubic-bezier(.2,.8,.3,1)} .r-pane.on{display:block} @keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .r-pane > .mono{color:var(--purple)} .r-pane h2{font-size:1.55rem;margin:.45rem 0 .4rem;color:var(--navy)} .r-pane .lede{color:var(--muted);margin:0 0 1.9rem;max-width:52ch;font-size:.96rem} .r-sec{margin-top:2rem} .r-sec h3{font-size:1rem;color:var(--navy);margin-bottom:.9rem} /* ---------- Räume ---------- */ .r-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:.8rem} .r-room{border:1.5px solid var(--line);border-radius:4px;padding:.9rem;display:flex;flex-direction:column;gap:.7rem; transition:border-color .2s ease,background .2s ease} .r-room.has{border-color:var(--purple);background:#FCF8FD} .r-room .r-rn{font-weight:600;font-size:.94rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem} .r-room .r-rv{font-family:var(--schrift-mono);font-size:.7rem;color:var(--muted)} .r-count{display:flex;align-items:center;gap:.6rem} .r-count button{width:32px;height:32px;border:1.5px solid var(--line);background:#fff;border-radius:3px;cursor:pointer; font-size:1.1rem;line-height:1;color:var(--navy);transition:.15s} .r-count button:hover{border-color:var(--purple);color:var(--purple)} .r-count button:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--muted)} .r-count output{flex:1;text-align:center;font-family:var(--schrift-mono);font-weight:700;font-size:1.05rem} /* ---------- Formularteile ---------- */ .r-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .f{margin-bottom:1.1rem} .f label{display:block;color:var(--muted);margin-bottom:.4rem} .f input,.f select{width:100%;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:3px;font:inherit;background:#fff;color:var(--ink)} .f input:focus,.f select:focus{outline:none;border-color:var(--purple)} .r-chips{display:flex;flex-wrap:wrap;gap:.6rem} .r-chip{border:1.5px solid var(--line);border-radius:3px;padding:.6rem .95rem;cursor:pointer;background:#fff;font:inherit; font-size:.9rem;transition:.18s} .r-chip:hover{border-color:var(--purple-2)} .r-chip.on{border-color:var(--purple);background:var(--purple);color:#fff} .r-addr{border-left:2px solid var(--purple);padding-left:1.2rem;margin-bottom:1.8rem} .r-addr h3{margin-bottom:.9rem} /* ---------- Termine ---------- */ .r-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.6rem} .r-day{border:1.5px solid var(--line);border-radius:3px;padding:.7rem .5rem;text-align:center;cursor:pointer;background:#fff;font:inherit;transition:.18s} .r-day:hover:not(:disabled){border-color:var(--purple-2)} .r-day.on{border-color:var(--purple);background:var(--purple);color:#fff} .r-day:disabled{background:#F5F2F8;color:#B5AEC2;cursor:not-allowed} .r-day .r-dw{font-family:var(--schrift-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75} .r-day .r-dd{font-weight:700;font-size:1.15rem;font-family:var(--schrift-titel)} .r-day .r-ds{font-size:.66rem;margin-top:.15rem} .r-day .r-ds.r-few{color:var(--red)} .r-day.on .r-ds.r-few{color:#FFD3D7} .r-legend{display:flex;gap:1.4rem;flex-wrap:wrap;color:var(--muted);font-size:.82rem;margin-top:1rem} /* ---------- Extras ---------- */ .r-extras{display:grid;gap:.7rem} .r-extra{display:flex;gap:.9rem;align-items:flex-start;border:1.5px solid var(--line);border-radius:4px;padding:1rem;cursor:pointer;transition:.18s} .r-extra:hover{border-color:var(--purple-2)} .r-extra.on{border-color:var(--purple);background:#FCF8FD} .r-extra input{margin-top:.25rem;accent-color:var(--purple);width:17px;height:17px;flex:0 0 auto} .r-extra b{display:block;font-size:.96rem} .r-extra small{color:var(--muted);display:block;margin-top:.15rem} .r-extra .r-px{margin-left:auto;font-family:var(--schrift-mono);font-size:.8rem;color:var(--purple);white-space:nowrap;padding-left:.8rem} /* ---------- Zusammenfassung / Sidebar ---------- */ .r-side{position:sticky;top:1.2rem;background:var(--navy);color:var(--paper);border-radius:4px;overflow:hidden; box-shadow:0 16px 44px rgba(20,8,40,.22)} .r-side .pad{padding:1.4rem} .r-truckwrap{background:var(--verlauf-bild);padding:1.3rem 1.4rem .8rem} .r-truckwrap svg{width:100%;display:block} .r-veh{display:flex;justify-content:space-between;align-items:baseline;margin-top:.5rem;font-size:.85rem;color:#D6C9E6} .r-veh b{font-family:var(--schrift-titel);font-size:1rem;color:#fff} .r-fillbar{height:5px;background:rgba(255,255,255,.16);border-radius:3px;overflow:hidden;margin-top:.7rem} .r-fillbar i{display:block;height:100%;background:var(--purple-2);width:0;transition:width .5s cubic-bezier(.2,.8,.3,1)} .r-vol{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.2rem} .r-vol b{font-family:var(--schrift-titel);font-size:2.4rem;line-height:1} .r-vol span{color:#B7A9CB} .r-lines{border-top:1px solid rgba(255,255,255,.14);padding-top:.9rem} .r-line{display:flex;justify-content:space-between;gap:1rem;padding:.32rem 0;font-size:.88rem;color:#CFC3E0} .r-line b{color:#fff;font-weight:500;white-space:nowrap} .r-total{border-top:1px solid rgba(255,255,255,.14);margin-top:.9rem;padding-top:1rem} .r-total .mono{color:#B7A9CB} .r-total .r-amt{font-family:var(--schrift-titel);font-size:1.9rem;font-weight:800;margin:.25rem 0 .3rem;color:#fff} .r-total small{color:#B7A9CB;font-size:.79rem;display:block;line-height:1.45} /* ---------- Buttons ---------- */ .r-nav{display:flex;gap:.8rem;margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--line);flex-wrap:wrap} .btn{padding:.78rem 1.4rem;border-radius:2px;border:0;font:inherit;font-weight:600;cursor:pointer;transition:.18s} .btn:hover{transform:translateY(-2px)} .b-main{background:var(--purple);color:#fff} .b-back{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)} .b-back:hover{color:var(--ink)} .r-hint{background:#F3ECF7;border-left:2px solid var(--purple);padding:.85rem 1.05rem;font-size:.86rem;color:#4C4459;margin-top:1.4rem} .r-done{text-align:center;padding:2rem 0} .r-done .r-tick{width:62px;height:62px;border-radius:50%;background:var(--heath);color:#fff;display:grid;place-items:center; margin:0 auto 1.3rem;font-size:1.9rem} .r-sum{text-align:left;background:#FAF6FC;border-radius:4px;padding:1.3rem;margin-top:1.6rem} .r-sum .r-line{color:var(--muted)} .r-sum .r-line b{color:var(--ink)} @media(max-width:920px){ .r-wrap{grid-template-columns:1fr} .r-side{position:static} .r-steps{overflow-x:auto} .r-step{min-width:150px} } @media(max-width:560px){.r-grid2{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* Die Toolbar der PWA. Im Mockup sind es Knoepfe, hier Links - deshalb dieselben Deklarationen noch einmal fuer a. Sichtbar nur auf schmalen Schirmen; am Schreibtisch gibt es die Seitenleiste. */ .toolbar a{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:.15rem; flex:1;padding:.5rem 0;color:var(--muted);font-size:.62rem;text-decoration:none; position:relative;transition:color .15s} .toolbar a.on{color:var(--purple)} .toolbar b{font-size:1.15rem;line-height:1;font-weight:400} /* Fest am unteren Rand, nicht am Ende des Inhalts. position:sticky wirkt unten nur, solange der Container hoeher ist als das Fenster - bei kurzen Seiten rutscht die Leiste mit nach oben und sitzt mitten im Bild. Deshalb fixed, und .main bekommt unten Platz, damit nichts darunter verschwindet. Sichtbar auf schmalen Schirmen und immer, wenn die Anwendung als installierte App laeuft - dort gibt es keine Adresszeile, und die Leiste ist der einzige Weg. */ @media(max-width:720px), (display-mode:standalone){ .toolbar{display:flex;position:fixed;left:0;right:0;bottom:0;margin:0; background:rgba(255,255,255,.96);backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:.25rem .4rem calc(.25rem + env(safe-area-inset-bottom)); box-shadow:0 -4px 20px rgba(30,12,50,.08); justify-content:space-around;z-index:30} .main{padding-bottom:calc(5.2rem + env(safe-area-inset-bottom))} } @media(max-width:900px){ /* Das Stylesheet blendet die Seitenleiste hier aus, weil im Mockup die Toolbar sie ersetzt. Die hat aber nur fuenf Plaetze - Inhalte und Tarife waeren dann gar nicht erreichbar. Deshalb bleibt sie, als schmale Zeile zum Wischen. */ /* Zwei automatische Zeilen teilen sich die freie Hoehe von min-height zu gleichen Teilen - die Leiste bekam so 287 Pixel ab. Mit "auto 1fr" nimmt sie ihre Inhaltshoehe, der Rest geht an den Inhalt. */ .admin{grid-template-columns:1fr;grid-template-rows:auto 1fr} .side{display:flex;align-items:center;gap:.2rem;position:static;height:auto; padding:.5rem .8rem;overflow-x:auto;white-space:nowrap; -webkit-overflow-scrolling:touch;scrollbar-width:none} .side::-webkit-scrollbar{display:none} .side .grp{display:none} /* In der Wischzeile ist kein Platz dafuer - sie steht dort unter "Mein Zugang". */ .s-fassung{display:none} .side .brand{padding:0 .8rem 0 0;flex:0 0 auto;font-size:.9rem} .side .brand i{height:18px} .side a{display:inline-flex;width:auto;flex:0 0 auto;padding:.4rem .7rem; border-left:0;border-radius:99px;font-size:.82rem} .side a.on{border-left:0;background:rgba(160,85,184,.22)} .side .out{margin:0 0 0 auto;padding:0 0 0 .6rem;border-top:0;border-left:1px solid rgba(255,255,255,.12); flex:0 0 auto} } .toolbar a{white-space:nowrap} /* Beschriftungen bleiben einzeilig */ /* ---- Monatskalender der Dispo -------------------------------------- Sieben Spalten, Montag zuerst. Der Monatsraster hat vorne Leerzellen, damit der Erste auf seinem Wochentag sitzt. */ .monatskopf{display:flex;align-items:center;justify-content:space-between;gap:1rem; margin-bottom:1rem;flex-wrap:wrap} .monatskopf h3{font-size:1.25rem;color:var(--navy);text-align:center;flex:1} .kalender{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin-bottom:1rem} .kal-kopf{font-family:var(--schrift-mono);font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;color:var(--muted);text-align:center;padding:.2rem 0} .kal-leer{min-height:84px} .kal-tag{background:#fff;border-radius:3px;padding:.45rem .5rem;min-height:84px; box-shadow:0 2px 8px rgba(30,12,50,.05);display:flex;flex-direction:column;gap:.2rem} .kal-tag.zu{background:transparent;box-shadow:none} .kal-tag.zu .kal-zahl{color:#C3B8D2} .kal-tag.heute{box-shadow:0 0 0 2px var(--purple)} .kal-zahl{font-family:var(--schrift-titel);font-weight:800;font-size:1rem;color:var(--navy)} .kal-zustand{font-size:.68rem;color:var(--muted)} .kal-tag.voll .kal-zustand{background:var(--purple);color:#fff;border-radius:2px; padding:.05rem .3rem;align-self:flex-start} .kal-tag.eng .kal-zustand{background:#FFF3E0;color:#A35A00;border-radius:2px; padding:.05rem .3rem;align-self:flex-start} .kal-eintrag{font-size:.68rem;line-height:1.25;background:#F3ECF7;border-radius:2px; padding:.2rem .3rem;color:var(--ink);overflow:hidden} .kal-eintrag span{display:block;color:var(--muted);font-size:.62rem} .kal-eintrag.vor{background:#FFF3E0;color:#A35A00} @media(max-width:700px){ .kalender{gap:.25rem} .kal-tag,.kal-leer{min-height:62px} .kal-eintrag{font-size:.6rem} .kal-eintrag span{display:none} .monatskopf h3{order:-1;flex:1 0 100%;text-align:left} } /* Das Uebernahme-Band unterscheidet sich vom Wartungsband, sonst haelt man das eine fuer das andere. */ .warnband.uebernahme{background:#EFE4F5;border-left-color:var(--purple);color:#4A1B57} .warnband.uebernahme a{color:#4A1B57} /* ======================= MEIN ZUGANG ======================= Wie in einer App: ein Kopf mit Zeichen und Namen, darunter Zeilen mit Zustand rechts. Formulare klappen erst beim Antippen auf - eine Seite voller offener Felder sieht aus wie Arbeit, auch wenn nichts zu tun ist. */ .zugang{max-width:640px} .z-kopf{display:flex;align-items:center;gap:1.1rem;background:var(--verlauf-kopf); color:var(--paper);border-radius:6px;padding:1.4rem 1.5rem;margin-bottom:1.6rem; box-shadow:0 14px 34px rgba(20,8,40,.22)} .z-zeichen{width:56px;height:56px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28); font-family:var(--schrift-titel);font-weight:800;font-size:1.25rem;letter-spacing:.02em} .z-kopf h2{font-size:1.3rem;color:#fff;margin:0 0 .15rem} .z-kopf .z-mail{color:#D5C9E6;font-size:.9rem;word-break:break-all} .z-kopf .st{margin-top:.5rem} .z-gruppe{font-family:var(--schrift-mono);font-size:.6rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin:0 0 .6rem .2rem} .z-liste{background:#fff;border-radius:6px;overflow:hidden;margin-bottom:1.6rem; box-shadow:0 4px 16px rgba(30,12,50,.06)} .z-zeile{border-bottom:1px solid var(--line)} .z-zeile:last-child{border-bottom:0} .z-kopfzeile{display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;cursor:pointer; list-style:none;transition:background .15s} .z-kopfzeile::-webkit-details-marker{display:none} .z-kopfzeile:hover{background:#FAF6FC} .z-symbol{width:34px;height:34px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center; background:#F3ECF7;color:var(--purple);font-size:1rem} .z-text{flex:1;min-width:0} .z-text b{display:block;font-weight:600;font-size:.98rem;color:var(--ink)} .z-text small{color:var(--muted);font-size:.84rem} .z-rechts{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;color:var(--muted);font-size:.85rem} .z-pfeil{color:#C3B8D2;transition:transform .18s} details[open] > .z-kopfzeile .z-pfeil{transform:rotate(90deg)} .z-inhalt{padding:0 1.1rem 1.2rem;border-top:1px solid var(--line);background:#FCFAFD} .z-inhalt > :first-child{margin-top:1.1rem} .z-punkt{width:8px;height:8px;border-radius:50%;flex:0 0 auto} .z-punkt.an{background:var(--heath)} .z-punkt.aus{background:#C3B8D2} .z-codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem; font-family:ui-monospace,monospace;font-size:.95rem;margin:1rem 0} .z-codes div{background:#fff;border:1px solid var(--line);border-radius:4px;padding:.55rem .7rem; text-align:center;letter-spacing:.04em} .z-schluessel{font-family:ui-monospace,monospace;font-size:1.05rem;letter-spacing:.08em; background:#fff;border:1px solid var(--line);border-radius:4px;padding:.8rem .9rem; text-align:center;word-break:break-all} @media(max-width:560px){ .z-kopf{padding:1.1rem;gap:.9rem} .z-zeichen{width:46px;height:46px;font-size:1.05rem} .z-kopfzeile{padding:.85rem .9rem} .z-inhalt{padding:0 .9rem 1.1rem} } /* Untertitel einzeilig halten - ungleich hohe Zeilen sehen unruhig aus. Was nicht passt, wird abgeschnitten, nicht umgebrochen. */ .z-text small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Der Fuss der Seitenleiste: eine Zeile statt vier. Das Kuerzel fuehrt zum eigenen Zugang, das Symbol daneben meldet ab. */ .side .out{display:flex;align-items:center;gap:.35rem;padding:.9rem .8rem 0; margin-top:1.2rem;border-top:1px solid rgba(255,255,255,.1)} /* An .side gehaengt, sonst gewinnt .side a{width:100%} - das hat mit 0,1,1 die hoehere Spezifitaet als .s-aus mit 0,1,0. Das Abmeldesymbol wurde dadurch 204 Pixel breit und der Name auf null gedrueckt. */ .side .s-konto{display:flex;align-items:center;gap:.65rem;flex:1 1 auto;min-width:0;width:auto; padding:.5rem .55rem;border-radius:8px;text-decoration:none; border-left:0;transition:background .15s} .side .s-konto:hover{background:rgba(255,255,255,.06)} .s-zeichen{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; background:rgba(160,85,184,.28);border:1px solid rgba(255,255,255,.18);color:#fff; font-family:var(--schrift-titel);font-weight:800;font-size:.78rem} .s-wer{min-width:0;line-height:1.25} .s-wer b{display:block;color:var(--auf-dunkel);font-size:.86rem;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .s-wer small{display:block;color:#8E819F;font-size:.74rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side .s-aus{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:8px; color:#8E819F;text-decoration:none;font-size:1rem;border-left:0;padding:0;transition:.15s} .side .s-aus:hover{background:rgba(225,37,43,.18);color:#FF9AA6} @media(max-width:900px){ /* In der Wischzeile reicht das Kuerzel - der Name steht ohnehin im Kopf von "Mein Zugang". */ .s-wer{display:none} .side .s-konto{flex:0 0 auto;padding:.3rem} /* Am rechten Rand festgeklebt, statt am Ende der Zeile mitzuwandern. Gemessen auf einem 375 Pixel breiten Schirm lag "Mein Zugang" bei x = 655 - also 280 Pixel ausserhalb, in einer Leiste, deren Scrollbalken ausgeblendet ist. Sichtbar war davon nichts, und zu ahnen war es auch nicht: Wer nicht zufaellig quer wischt, kommt an sein Profil nicht heran. position:sticky wirkt hier waagerecht, weil .side selbst der Scrollbereich ist. Der Hintergrund muss mit, sonst laufen die Menuepunkte darunter durch. */ /* Die Zeile bekommt rechts keinen Innenabstand mehr: Mit ihm endet der festgeklebte Block schon vor dem Rand, und dahinter blitzen die weiterlaufenden Menuepunkte durch. Der Abstand sitzt jetzt im Block. */ .side{padding-right:0} .side .out{position:sticky;right:0;margin:0 0 0 auto;flex:0 0 auto; padding:.2rem .7rem .2rem 2rem;border-top:0; /* Der Verlauf ist so breit, dass der Menuetext ausblendet, bevor er das Kuerzel erreicht - eine harte Kante sah nach Fehler aus. */ background:linear-gradient(90deg, rgba(22,36,63,0), var(--navy) 1.9rem); display:flex;align-items:center;gap:.2rem;z-index:1} } /* Die Stifte auf der Karte im Fuss. Farbe ueber Klassen statt fest im SVG, damit eine Marke sie faerben kann. */ /* Der erste Stift traegt nur .pin, der zweite .pin.b - deshalb die Grundregel und eine Ausnahme, nicht zwei Ausnahmen. Vorher hiess die Regel .pin.a und griff nie: Der Stift wurde schwarz, weil ein SVG ohne fill schwarz ist. */ .pin .pin-form{fill:var(--red)} .pin.b .pin-form{fill:var(--purple)} .route{stroke:var(--purple-2)} .pin-kern{fill:var(--paper)} .pin-text{fill:var(--auf-dunkel);font-family:var(--schrift-mono)}