/* ========================================================================== wefa Webdesign – site.css Alle Farben über var(--…) aus landing_color.css. Kein #hex, rgb(), hsl(). Schriften, Skala, Typo: @font-face und var(--fs-*) etc. aus den CI-Dateien. Test: tests/test_site_colors.py ========================================================================== */ /* ── Reset ─────────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{ scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-kerning:normal; text-rendering:optimizeLegibility;hyphenate-limit-chars:7 3 3; font-family:var(--font-body);font-size:100%; overflow-x:clip; } body{ margin:0;background:var(--bg);color:var(--text); font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400; overflow-x:clip; } img,svg{max-width:100%;height:auto} iframe{display:block} /* ── Typografie ────────────────────────────────────────────────────────────── */ h1,h2,h3,h4{font-family:var(--font-heading);color:var(--text);hyphens:manual;text-wrap:balance;margin:0} h1{font-weight:700;font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);max-width:20ch} h2{font-weight:700;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);max-width:26ch} h3{font-weight:600;font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);max-width:32ch} h4{font-weight:600;font-size:var(--fs-h4);line-height:var(--lh-h4)} p,li,dd{hyphens:auto;text-wrap:pretty;overflow-wrap:break-word;margin:0 0 .75rem} p,li,dd{max-width:var(--measure)} p:last-child,li:last-child{margin-bottom:0} strong,b{font-weight:600} em,i,cite{font-style:italic;font-weight:400} th{font-weight:600;font-size:var(--fs-small);text-align:left;color:var(--muted)} a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:.08em} a:hover{color:var(--accent-h)} ::placeholder{color:var(--muted);opacity:1} input,select,textarea{font-family:var(--font-body);font-weight:400;font-size:1rem} label{font-family:var(--font-body);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label)} small,.small,.meta{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted)} /* ── Fokus ──────────────────────────────────────────────────────────────────── */ :focus-visible{outline:var(--focus-width) solid var(--accent);outline-offset:var(--focus-offset);border-radius:var(--radius-sm)} .skip{position:absolute;left:-999px;top:0;background:var(--surface);color:var(--text);padding:.6rem 1rem;z-index:200} .skip:focus{left:.5rem;top:.5rem} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ── Header / Navigation ───────────────────────────────────────────────────── */ .site-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border)} .header-inner{max-width:var(--w-header);margin:0 auto;padding:.75rem var(--gutter);display:flex;align-items:center;gap:1rem;min-height:64px} .logo{display:flex;align-items:center;text-decoration:none;color:var(--text)} .logo img{height:32px;width:auto} .logo-img{height:32px;width:auto;display:block} .logo-box{aspect-ratio:4/3;height:40px;display:grid;place-items:center;background:var(--accent-pale); border:1px dashed var(--muted);border-radius:var(--radius);font-size:.62rem;color:var(--muted); letter-spacing:.06em;text-transform:uppercase} .nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--text); border-radius:var(--radius);padding:.45rem .7rem;font-family:var(--font-heading);font-weight:600;cursor:pointer} #site-nav{display:flex;align-items:center;gap:.25rem;margin-left:auto;position:relative} .nav-list{list-style:none;margin:0;padding:0;display:contents} .nav-item{position:relative;display:contents} .nav-link,.nav-parent{ display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .8rem;border-radius:var(--radius); color:var(--text);text-decoration:none;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-nav); background:transparent;border:0;cursor:pointer;transition:background var(--dur-fast) var(--ease-out) } .nav-link:hover,.nav-parent:hover,.nav-item.is-open>.nav-parent{background:var(--accent-pale)} .nav-link[aria-current="page"],.nav-item.is-current>.nav-parent{background:var(--accent-pale);box-shadow:inset 0 -2px 0 var(--accent)} .caret{width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-normal) var(--ease-out)} .nav-item.is-open>.nav-parent .caret{transform:rotate(-135deg) translateY(-1px)} .dropdown{ list-style:none;margin:0;padding:.4rem;position:absolute;left:0;top:calc(100% + .35rem);min-width:18rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md); opacity:0;transform:translateY(-4px);display:none;transition:opacity var(--dur-normal) var(--ease-out),transform var(--dur-normal) var(--ease-out) } .nav-item.is-open>.dropdown{display:block;opacity:1;transform:none} .dropdown a{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border-radius:var(--radius-sm);text-decoration:none;font-weight:600;color:var(--text)} .dropdown a:hover{background:var(--accent-pale)} /* Buttons */ .btn-cta{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem; background:var(--accent-warm);color:var(--text);font-family:var(--font-heading);font-weight:600; font-size:var(--fs-button);letter-spacing:.005em;text-decoration:none; border-radius:var(--radius);padding:.6rem 1.25rem;border:0;cursor:pointer; transition:background var(--dur-normal) var(--ease-out),translate var(--dur-normal) var(--ease-out),box-shadow var(--dur-normal) var(--ease-out) } .btn-cta:hover{background:color-mix(in srgb,var(--accent-warm) 85%,var(--bg));translate:0 var(--lift-sm);box-shadow:var(--shadow-sm)} .btn-cta:active{translate:0 1px;filter:brightness(.96)} .btn-cta:disabled{background:var(--border);color:var(--muted);cursor:not-allowed;translate:0;box-shadow:none} .nav-cta{margin-left:.5rem} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.25rem; border-radius:var(--radius);border:1.5px solid var(--accent);background:transparent;color:var(--accent); text-decoration:none;font-family:var(--font-heading);font-weight:600;font-size:var(--fs-button);cursor:pointer; transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out) } .btn:hover{background:var(--accent-pale)} .btn:disabled{border-color:var(--border);color:var(--muted);cursor:not-allowed} .btn-add{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.25rem; border-radius:var(--radius);border:1.5px dashed var(--border);background:var(--surface);color:var(--muted); text-decoration:none;font-family:var(--font-heading);font-weight:600;cursor:pointer } .btn-add:hover{border-color:var(--accent);color:var(--accent)} .del-btn{background:none;border:none;color:var(--error-text);cursor:pointer;font:inherit;font-size:.85rem} /* ── Layout & Container ────────────────────────────────────────────────────── */ .container{max-width:var(--w-content);margin:0 auto;padding-inline:var(--gutter)} .container.narrow{max-width:var(--w-text)} .section{padding:var(--space-8) 0} .section--tight-top{padding-top:0} .section-alt{background:var(--surface);border-block:1px solid var(--border)} .page-head{padding:clamp(2rem,5vw,3.5rem) 0 1rem} /* Typografie-Helfer */ .eyebrow{ font-family:var(--font-heading);font-weight:600;font-size:var(--fs-eyebrow); line-height:var(--lh-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase; color:var(--accent);margin-bottom:.5rem;display:block } .lead{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:var(--measure-lead);font-weight:400;color:var(--muted)} h2 + .lead,h1 + .lead,h3 + .lead{margin-top:var(--space-6)} .page-head-desc{max-width:var(--measure-lead);color:var(--text);margin-top:.9rem;line-height:1.6} .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem} /* ── Ablauf-Flussdiagramm (vertikal, CSS-only) ───────────────────────────────── */ .flow{list-style:none;margin:var(--space-6) 0 0;padding:0;position:relative;max-width:40rem} .flow__step{display:flex;gap:1.1rem;position:relative;padding-bottom:var(--space-6)} .flow__step:last-child{padding-bottom:0} .flow__node{ flex:none;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--accent);color:var(--on-dark); display:grid;place-items:center;font-family:var(--font-heading);font-weight:700;font-size:var(--fs-small); position:relative;z-index:1 } .flow__step:not(:last-child)::before{ content:"";position:absolute;top:2.5rem;left:1.25rem;transform:translateX(-50%); width:2px;bottom:0;background:var(--border) } .flow__content{display:flex;flex-direction:column;gap:.25rem;padding-top:.4rem} .flow__content strong{font-family:var(--font-heading);font-weight:600;font-size:var(--fs-h4)} .flow__content span{color:var(--muted)} .prose h2{margin:2rem 0 .75rem} .prose h3{margin:1.5rem 0 .5rem} .checklist{list-style:none;padding:0;display:grid;gap:.5rem;margin:0} .checklist li::before{content:"✓ ";color:var(--accent);font-weight:700} /* ── Hero ──────────────────────────────────────────────────────────────────── */ .hero{background:var(--dark);color:var(--on-dark);padding:var(--space-9) 0} .hero .lead,.hero .eyebrow{color:var(--on-dark-muted)} .hero .eyebrow{color:var(--accent-on-dark)} .hero h1 em{font-style:normal;color:var(--accent-on-dark)} .hero h1{color:var(--on-dark)} .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center} @media(max-width:768px){.hero-grid{grid-template-columns:1fr}} .hero .btn-cta{margin-right:.75rem} .hero-secondary{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem; border-radius:var(--radius);border:1.5px solid var(--dark-border-3);color:var(--on-dark); text-decoration:none;font-family:var(--font-heading);font-weight:600;transition:background var(--dur-fast) var(--ease-out)} .hero-secondary:hover{background:var(--dark2);color:var(--on-dark)} /* ── Bilderwand (wall) ─────────────────────────────────────────────────────── */ .wall{ --frame-w-desktop:230px;--frame-w-tablet:170px;--frame-w-mobile:132px; --tilt-max:6deg;--overlap:-34px;--gap:20px;--lift:-10px;--amp:5px;--dur:7s; display:flex;justify-content:center;align-items:center;flex-wrap:wrap; gap:var(--gap);padding:var(--space-6) 0 } .wall__frame{ position:relative;width:var(--frame-w-desktop);display:flex;flex-direction:column; background:var(--dark-surface-1);border:1px solid var(--dark-border-2); border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden; transform:rotate(var(--r,0deg)); transition:transform var(--dur-slow) var(--ease-spring),box-shadow var(--dur-normal) var(--ease-out),translate var(--dur-slow) var(--ease-spring); animation:wall-float var(--dur) ease-in-out infinite;animation-delay:var(--fd,0s) } .wall__frame:not(:first-child){margin-left:var(--overlap)} /* Bilderwand Variante C: gestaffelte Tiefe, durch alle Demos navigierbar */ .wall-carousel{position:relative} .wall--variant-c{ position:relative;display:block;height:340px; } .wall--variant-c .wall__frame{ position:absolute;top:0;left:0;margin-left:0!important;--r:0deg!important;animation:none; width:58%;box-shadow:var(--shadow-md); transition:transform var(--dur-slow) var(--ease-spring),opacity var(--dur-normal) var(--ease-out); opacity:0;pointer-events:none; } .wall--variant-c .wall__frame[data-pos="0"]{transform:translate(0,0);z-index:3;opacity:1;pointer-events:auto} .wall--variant-c .wall__frame[data-pos="1"]{transform:translate(17%,45px);z-index:2;opacity:1;pointer-events:none} .wall--variant-c .wall__frame[data-pos="2"]{transform:translate(34%,90px);z-index:1;opacity:1;pointer-events:none} .wall--variant-c .wall__frame:hover,.wall--variant-c .wall__frame:focus-visible{z-index:5!important} .wall--variant-c .wall__frame[data-pos="0"]:hover,.wall--variant-c .wall__frame[data-pos="0"]:focus-visible{transform:translate(0,-6px)} .wall-carousel__nav{display:flex;gap:.5rem;margin-top:1rem;justify-content:flex-end;width:100%;padding-right:22.5%;box-sizing:border-box} .wall-carousel__btn{ width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid var(--dark-border-3); background:transparent;color:var(--on-dark);font-size:1.2rem;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background var(--dur-fast) var(--ease-out) } .wall-carousel__btn:hover,.wall-carousel__btn:focus-visible{background:var(--dark2)} .wall__frame:nth-child(odd){--r:calc(-1 * var(--tilt-max));--fd:0s} .wall__frame:nth-child(even){--r:var(--tilt-max);--fd:.8s} .wall__frame:nth-child(3n){--r:calc(-0.4 * var(--tilt-max));--fd:1.6s} @keyframes wall-float{0%,100%{translate:0 0}50%{translate:0 calc(-1 * var(--amp))}} .wall__frame:hover,.wall__frame:focus-visible{z-index:5;--r:0deg;translate:0 var(--lift);box-shadow:var(--shadow-md);animation-play-state:paused} .wall__bar{height:22px;flex:none;background:var(--dark-surface-2);display:flex;align-items:center;gap:5px;padding:0 8px} .wall__dot{width:6px;height:6px;border-radius:50%;background:var(--dark-text-8)} .wall__dot:first-child{background:var(--accent-warm)} .wall__body{aspect-ratio:1.6} .wall__body img,.wall__body iframe{width:100%;height:100%;object-fit:cover;display:block} .wall__label{ position:absolute;left:var(--space-2);bottom:var(--space-2); font-size:var(--fs-small);color:var(--on-dark); background:var(--wall-label-bg); padding:3px 10px;border-radius:var(--radius-pill); opacity:0;transform:translateY(4px); transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out) } .wall__frame:hover .wall__label,.wall__frame:focus-visible .wall__label{opacity:1;transform:translateY(0)} @media(max-width:64rem){.wall__frame{width:var(--frame-w-tablet)}} @media(max-width:48rem){ .wall{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x proximity;padding-inline:var(--gutter);gap:var(--space-3)} .wall__frame{width:var(--frame-w-mobile);flex:none;scroll-snap-align:start;animation:none;transform:none!important} .wall__frame:not(:first-child){margin-left:0} .wall__frame:hover,.wall__frame:focus-visible{translate:none} .hero{min-height:50vh;display:flex;align-items:center;padding:var(--space-6) 0} .wall-carousel{display:none} } @media(prefers-reduced-motion:reduce){.wall__frame{animation:none;transition:none}} /* ── Karten & Raster ───────────────────────────────────────────────────────── */ .grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:1.75rem} /* ── Kontaktseite ─────────────────────────────────────────────────────────── */ .contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem;align-items:start} @media(max-width:640px){.contact-grid{grid-template-columns:1fr}} .contact-side{display:flex;flex-direction:column;gap:1rem;padding-top:1.4rem} .contact-list{display:flex;flex-direction:column;gap:.6rem} .contact-item{ display:flex;align-items:center;gap:.75rem;padding:.85rem 1.1rem; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); color:var(--text);text-decoration:none;font-weight:600;box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-normal) var(--ease-out),translate var(--dur-normal) var(--ease-out) } .contact-item:hover{box-shadow:var(--shadow-md);translate:0 -2px} .contact-item .ico,.contact-item .ico-brand-wa{flex:none;width:1.3rem;height:1.3rem;color:var(--accent)} .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); padding:1.4rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.5rem; text-decoration:none;color:inherit;min-width:0; transition:box-shadow var(--dur-normal) var(--ease-out),translate var(--dur-normal) var(--ease-out) } .card h3{overflow-wrap:break-word;hyphens:auto} a.card:hover{box-shadow:var(--shadow-md);translate:0 -2px} .card p{color:var(--muted);margin:0} .card .more{margin-top:auto;font-weight:600;color:var(--text)} /* ── Icons (SVG-Sprite) ────────────────────────────────────────────────────── */ .ico{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .ico-fill{fill:currentColor;stroke:none} .ico-brand-wa{width:1.15rem;height:1.15rem;flex:none} .card-icon{ width:2.75rem;height:2.75rem;border-radius:var(--radius);background:var(--accent-pale); display:grid;place-items:center;color:var(--accent);margin-bottom:.25rem } .card-icon .ico{width:1.4rem;height:1.4rem} /* ── Kontaktmenü im Header ─────────────────────────────────────────────────── */ .dropdown a{display:flex;align-items:center;gap:.65rem} .dropdown-right{left:auto;right:0;min-width:14rem} .contact-toggle .contact-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .contact-toggle{padding:.55rem .6rem} @media(max-width:900px){ .contact-toggle .contact-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;margin-right:auto} .contact-toggle{padding:.8rem .6rem} .dropdown-right{right:auto} } /* ── Hinweisbox (note) ─────────────────────────────────────────────────────── */ /* ── Leistungsliste ("Was ist enthalten?") ──────────────────────────────────── Wird laut Absprache spaeter neu gebaut; hier nur ein solides Grund-Styling, damit die Accordion-Module nicht mehr komplett roh aussehen. */ .legal h2 .ico,h2 > .ico:first-child{width:1.4rem;height:1.4rem;vertical-align:-0.3rem;margin-right:.5rem;color:var(--accent)} .module-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:.6rem;margin-top:1rem;align-items:start} .module{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); overflow:hidden;box-shadow:var(--shadow-sm) } .module summary{ display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;cursor:pointer; list-style:none;font-weight:600;color:var(--text) } .module summary::-webkit-details-marker{display:none} .module summary::after{ content:"";width:.6rem;height:.6rem;margin-left:auto;flex:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(45deg);transition:transform var(--dur-normal) var(--ease-out) } .module[open] summary::after{transform:rotate(-135deg)} .module summary .card-icon{margin-bottom:0;flex:none} .module summary small{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-small)} .module-body{padding:0 1.1rem 1.1rem 3.65rem;color:var(--muted)} .note{ border-radius:var(--radius-lg);padding:.9rem 1.1rem;margin-top:var(--space-6); background:var(--info-bg);color:var(--info-text); border:1px solid var(--info-border);border-left:3px solid var(--info-border) } .note.warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-border);border-left-color:var(--warn-border)} .note.ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border);border-left-color:var(--ok-border)} .note.error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-border);border-left-color:var(--error-border)} /* ── Blog ──────────────────────────────────────────────────────────────────── */ .blog-meta{display:flex;flex-wrap:wrap;gap:.5rem .75rem;font-size:var(--fs-small);color:var(--muted);margin-bottom:1.25rem} .blog-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin-top:2rem} .blog-card picture,.blog-card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:block;margin:0} .blog-card{border-radius:var(--radius-lg)} .blog-card-body{padding:1.1rem 1.25rem 1.25rem} /* ── Beispiele / Demo-Vorschau ─────────────────────────────────────────────── */ .example-card{padding:0} .example-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;border-bottom:2px solid var(--border)} .example-card .body{padding:.6rem 1.1rem 15px;display:flex;flex-direction:column;gap:.25rem;flex:1} .example-card h3{font-size:var(--fs-h4)} .example-card p{color:var(--muted)} .example-card .more{margin-top:.5rem;font-weight:600} .demo-preview-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.25rem;margin-top:.5rem} .demo-frame{border:2px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-md)} .demo-frame--compact{flex:0 0 auto;max-width:100%} .demo-frame__body{position:relative} .demo-frame iframe{display:block;width:100%;height:100%;border:0} .demo-frame__zoom{ position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:3; display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border); background:var(--surface);color:var(--text);font-size:var(--fs-small);font-weight:600; padding:.5rem 1rem;border-radius:var(--radius-pill);cursor:pointer;box-shadow:var(--shadow-md) } .demo-frame__zoom:hover{background:var(--accent-pale)} .demo-frame__zoom .ico{width:1rem;height:1rem} .demo-bar{display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;background:var(--accent-pale);border-bottom:2px solid var(--border);font-size:var(--fs-small);color:var(--muted)} .demo-bar .dots{display:flex;gap:.35rem;flex:none} .demo-bar .dots i{width:.65rem;height:.65rem;border-radius:50%;background:var(--muted);opacity:.45} .demo-bar .demo-title{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .demo-bar .demo-hint{margin-left:auto;white-space:nowrap} .demo-expand,.demo-close{ display:inline-flex;align-items:center;gap:.4rem;border:0;background:none;cursor:pointer; color:var(--muted);font-size:var(--fs-small);font-weight:600;padding:.25rem .4rem;border-radius:var(--radius);flex:none } .demo-expand:hover,.demo-close:hover{color:var(--text);background:rgba(0,0,0,.05)} .demo-expand .ico,.demo-close .ico{width:1rem;height:1rem} .demo-close span{display:none} .demo-caption{margin-top:.9rem} /* Kompakter Zustand (Standard): "Vergrößern" sichtbar, Hint/Schließen versteckt. Das iframe steckt in einem Handy-Mockup - schmal und hochkant, damit man sieht, wie die Demo auf dem Handy aussieht, statt eines schmalen Ausschnitts vom Desktop-Layout. Im Gegensatz zu einer frueheren Version blockiert kein Vollflaechen-Button mehr das iframe: man kann direkt in der kleinen Vorschau scrollen, ein schwebender Button unten öffnet zusätzlich die große Ansicht. */ .demo-frame--compact .demo-bar .demo-hint, .demo-frame--compact .demo-close{display:none} .demo-frame--compact .demo-frame__body{ padding:1.25rem;display:flex;justify-content:center;background:var(--bg) } .demo-phone{ position:relative;width:340px;max-width:100%;aspect-ratio:390/844;border-radius:2.4rem;overflow:hidden; background:#111;padding:.75rem;box-shadow:0 12px 28px rgba(0,0,0,.22) } .demo-phone__notch{ position:absolute;top:.75rem;left:50%;transform:translateX(-50%);width:5.5rem;height:1.1rem; background:#111;border-radius:0 0 .9rem .9rem;z-index:2 } /* Geometrie: Gehäuse-Radius 2.4rem, Rahmen .75rem -> Display-Radius 1.65rem (konzentrisch). Wichtig: die Ecken des Display-Rechtecks liegen dadurch INNERHALB der Gehäuse-Rundung. Bei .5rem Rahmen lagen sie knapp außerhalb, und Chromium liess dort beim gerundeten Clipping eines iframes einen eckigen Zipfel durchscheinen (gemessen). Die Maske ist die bekannte Absicherung, damit auch Safari das iframe sauber rund beschneidet. */ .demo-phone__screen{width:100%;height:100%;border-radius:1.65rem;overflow:hidden;background:#fff} .demo-phone iframe{display:block;width:100%;height:100%;border:0;-webkit-mask-image:-webkit-radial-gradient(white,black)} .demo-frame--expanded .demo-phone iframe{-webkit-mask-image:none} /* Display-Rahmen: ein transparentes, abgerundetes Rechteck exakt über dem Screen, dessen box-shadow (Spread groesser als die Ecken-Luecke) alles AUSSERHALB der Rundung in Gehäusefarbe füllt. Egal ob der Browser das iframe an den Ecken sauber clippt oder nicht (Safari/Chromium verhalten sich da unterschiedlich) - eckige iframe-Ecken werden so immer überdeckt, ohne Inhalt zu verdecken. Liegt unter Notch (z 2) und Zoom-Button (z 3), klickdurchlässig. */ .demo-phone__bezel{ position:absolute;inset:.75rem;border-radius:1.65rem;z-index:1;pointer-events:none; box-shadow:0 0 0 1rem #111 } .demo-frame--expanded .demo-phone__bezel{display:none} /* Vergrößerter Zustand: dasselbe Frame-Element wird per position:fixed über den ganzen Bildschirm gelegt. Das iframe bewegt sich dabei NICHT im DOM (kein appendChild/insertBefore) - nur Größe/Position ändern sich per Klasse, sonst würde der Browser das iframe neu laden und die Scroll-Position ginge verloren. Kein Handy-Mockup hier - das Phone-Gehäuse wird per CSS "aufgeloest", das iframe bekommt wieder die volle Breite/Höhe des Panels. */ .demo-frame--expanded{ position:fixed;inset:2.5vh 3vw;z-index:200;max-width:none;width:auto; display:flex;flex-direction:column } .demo-frame--expanded .demo-frame__body{flex:1;height:auto;padding:0;display:block;background:none} .demo-frame--expanded .demo-phone{ width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:none;padding:0;box-shadow:none } .demo-frame--expanded .demo-phone__notch{display:none} .demo-frame--expanded .demo-phone__screen{border-radius:0} .demo-frame--expanded .demo-expand{display:none} .demo-frame--expanded .demo-close{display:inline-flex} .demo-frame--expanded .demo-bar .demo-hint{display:inline} .demo-frame--expanded .demo-frame__zoom{display:none} .demo-lightbox-backdrop{ position:fixed;inset:0;z-index:190;background:rgba(10,20,18,.72); opacity:0;pointer-events:none;transition:opacity var(--dur-normal) var(--ease-out) } body.demo-lightbox-open .demo-lightbox-backdrop{opacity:1;pointer-events:auto} body.demo-lightbox-open{overflow:hidden} @media(max-width:700px){ .demo-preview-row{flex-direction:column} .demo-frame--compact{width:100%} .demo-frame--compact .demo-frame__body{padding:1.5rem 1.25rem} .demo-frame--expanded{inset:0} } .price-inline{ margin-top:1.5rem;padding:1.1rem 1.3rem;border-radius:var(--radius-lg);border:1px solid var(--border); background:var(--surface);display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.3rem } .price-inline--stacked{ flex:1 1 280px;margin-top:0;flex-direction:column;align-items:flex-start;gap:.6rem;align-self:stretch;justify-content:center } .price-inline__amount{font-size:var(--fs-h4);font-weight:800;white-space:nowrap} .price-inline__amount .unit{font-size:var(--fs-small);font-weight:500;color:var(--muted)} .price-inline__body{flex:1;min-width:220px} .price-inline__body p{margin:0} .price-inline__body p+p{margin-top:.5rem} .price-inline .btn{white-space:nowrap} .price-reasons{list-style:none;padding:0;margin:.4rem 0 .6rem;display:grid;gap:.35rem} .price-reasons li{padding-left:1.1rem;position:relative} .price-reasons li::before{content:"+";position:absolute;left:0;color:var(--accent);font-weight:700} .price-reasons strong{display:block;font-size:var(--fs-small);font-weight:600;color:var(--text)} .price-reasons span{display:block;font-size:var(--fs-small);color:var(--muted)} /* ── Testumgebung ──────────────────────────────────────────────────────────── */ .test-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;max-width:96rem;margin:0 auto;padding:.7rem var(--gutter)} .test-badge{background:var(--accent-pale);border-radius:var(--radius-pill);padding:.15rem .7rem;font-size:var(--fs-small);font-weight:700} .test-note{margin-left:auto;color:var(--muted);font-size:var(--fs-small)} .test-split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:96rem;margin:0 auto;padding:0 var(--gutter) 2rem;height:calc(100vh - 64px - 3.6rem);min-height:520px} .test-pane{display:flex;flex-direction:column;min-height:0;border:2px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-md)} .test-pane iframe{flex:1;width:100%;border:0;min-height:0} .mobile-overlay{display:none} .overlay,.mobile-overlay{position:fixed;inset:0;z-index:300;background:var(--scrim);place-items:center;padding:1.25rem} .overlay{display:grid} .overlay.hidden{display:none} .overlay-card{background:var(--surface);border-radius:var(--radius-lg);padding:1.75rem;max-width:30rem;box-shadow:var(--shadow-md)} .overlay-card h2{font-size:var(--fs-h3)} .overlay-card p{color:var(--muted)} .overlay-card .actions{margin-top:1rem} @media(max-width:900px){ .mobile-overlay{display:grid} body.mobile-dismissed .mobile-overlay{display:none} .test-split{grid-template-columns:1fr;height:auto} .test-pane{height:75vh} .test-note{margin-left:0} } /* ── Footer ────────────────────────────────────────────────────────────────── */ .site-footer{background:var(--dark);color:var(--on-dark-muted);padding:2.5rem 0 2rem;font-size:var(--fs-small)} .footer-grid{display:grid;gap:1.5rem 2rem;grid-template-columns:1.5fr 1fr 1fr 1fr} .site-footer h3{font-family:var(--font-heading);font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--on-dark)} .site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem} .site-footer li{margin:0} .site-footer a{color:var(--on-dark-muted);text-decoration:none} .site-footer a:hover{color:var(--on-dark);text-decoration:underline} .footer-bottom{margin-top:1.75rem;padding-top:1rem;border-top:1px solid var(--dark-border-1);font-size:var(--fs-small)} @media(max-width:820px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.footer-grid{grid-template-columns:minmax(0,1fr)}} /* ── Leerzustände & Fehlerseiten ───────────────────────────────────────────── */ .empty-state{text-align:center;padding:var(--space-8) var(--gutter);max-width:32rem;margin-inline:auto} .empty-state svg{width:120px;height:auto;opacity:.55;margin-bottom:var(--space-5)} .empty-state h2{font-size:var(--fs-h3)} .empty-state p{color:var(--muted)} /* ── Rechtsseiten ──────────────────────────────────────────────────────────── */ .legal-pdf-btn{margin-top:1.25rem} .legal h2{font-size:var(--fs-h3);margin:2rem 0 .75rem} .legal p,.legal li{max-width:none} .legal a{color:var(--text);text-decoration-color:var(--accent);text-underline-offset:3px} .legal img{max-width:100%;height:auto} .page-head .filter.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 -.5rem} .filter-chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem} .filter-chip{ padding:.45rem 1rem;border-radius:var(--radius-pill);border:1.5px solid var(--border); background:var(--surface);color:var(--muted);text-decoration:none;font-weight:600; font-size:var(--fs-small);display:inline-flex;align-items:center;gap:.4rem; transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out) } .filter-chip:hover{border-color:var(--accent)} .filter-chip[aria-current="true"]{background:var(--accent);color:var(--on-dark);border-color:var(--accent)} .filter-chip .ico{width:1rem;height:1rem} .badge{ display:inline-flex;align-items:center;gap:.35rem;align-self:flex-start;margin-top:auto; padding:.3rem .7rem;border-radius:var(--radius-pill);background:var(--accent-pale); color:var(--accent);font-size:var(--fs-small);font-weight:600 } .badge .ico{width:.95rem;height:.95rem} .badge-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto} .badge-row .badge{margin-top:0} .badge-price{background:var(--dark);color:var(--on-dark)} .legal{overflow-wrap:anywhere} .legal table{display:block;overflow-x:auto;max-width:100%} .legal pre,.legal code{white-space:pre-wrap;overflow-wrap:anywhere} /* ── Tabellen ──────────────────────────────────────────────────────────────── */ table{border-collapse:collapse;width:100%} th,td{padding:.6rem .75rem;border-bottom:1px solid var(--border)} th{color:var(--muted)} tr:hover td{background:var(--accent-pale)} /* ── CTA-Band ──────────────────────────────────────────────────────────────── */ .cta-band{background:var(--dark);color:var(--on-dark);text-align:center;padding:var(--space-8) 0;margin-top:var(--space-7)} .cta-band h2{color:var(--on-dark);max-width:none} .cta-band p{color:var(--on-dark-muted);max-width:52ch;margin-inline:auto} /* ── Mobil-Navigation ──────────────────────────────────────────────────────── */ @media(max-width:900px){ .nav-toggle{display:flex} #site-nav{position:fixed;top:64px;left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;overflow-x:hidden; background:var(--surface);border-top:1px solid var(--border);overflow-y:auto;padding:.75rem 1rem 2rem; transform:translateX(100%);transition:transform var(--dur-normal) var(--ease-out)} #site-nav.is-open,.site-header.is-open #site-nav{transform:none} .nav-list{flex-direction:column;align-items:stretch;width:100%;gap:0} .nav-link,.nav-parent{justify-content:space-between;padding:.8rem .6rem;border-radius:var(--radius)} .dropdown{position:static;box-shadow:none;border:none;border-radius:0;opacity:1;transform:none; padding:.25rem 0 .25rem 1rem;background:transparent} .nav-cta{margin:1rem 0 0} .nav-cta .btn-cta{width:100%;justify-content:center} } /* ── Lexikon "Siehe auch"-Tags ──────────────────────────────────────────────── Eigene Klassen statt der frueheren .chips/.chip, damit die Modul-Stichpunkt- Listen auf der Startseite (nutzen dieselben generischen Namen) unangetastet bleiben und einfache Bullet-Listen bleiben. */ .lexikon-verwandt{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0} .lexikon-tag{ display:inline-block;padding:.35rem .85rem;border-radius:var(--radius-pill); background:var(--accent-pale);color:var(--accent);font-size:var(--fs-small);font-weight:600; text-decoration:none;transition:background var(--dur-fast) var(--ease-out) } .lexikon-tag:hover{background:var(--accent);color:var(--on-dark)} /* ── Kleines Lexikon ────────────────────────────────────────────────────────── .meta: "Auch bekannt als"-Zeile auf der Eintragsseite. .lexikon-register: A-Z-Sprungmarken auf der Übersicht, gleiche Chip-Optik wie die Branchen-Filter auf /beispiele. .lexikon-gruppe/-buchstabe/-liste/-item: Card-Darstellung der Einträge pro Buchstaben-Gruppe, statt der vorherigen nackten