/* =========================================================================== HausPilot – helle, cleane One-Page-Website Bewusst NICHT das dunkle CherieBar-Design: viel Weiß, Luft, weiche Schatten, freundliche Rosé/Indigo-Akzente. =========================================================================== */ :root{ --bg:#ffffff; --bg-soft:#f7f8fb; /* zarter grau-blauer Abschnitt */ --bg-tint:#fbf7f9; /* zarter rosé Abschnitt */ --ink:#1d2233; /* Haupttext */ --ink-soft:#5b6b80; /* Sekundärtext (5.4:1 auf weiß) */ --ink-muted:#647285; /* leiser Text – noch WCAG AA (4.9:1) */ --ink-faint:#7f8b9c; /* nur für große Schrift (3.5:1) */ --line:#e8ebf2; --primary:#e0507e; /* Rosé-Primär */ --primary-d:#c63c69; --primary-dd:#ad2f57; /* Rosé auf hellrosa Badge (AA) */ --indigo:#5b6cff; /* Akzent (Premium/Kalender) */ --indigo-d:#3f4fe0; --green:#23a06b; --green-d:#15704a; /* Grün auf hellgrünem Badge (AA) */ --amber:#e6a100; --violet:#7c5cff; --radius:18px; --radius-sm:12px; --shadow-sm:0 1px 2px rgba(20,30,60,.05), 0 2px 8px rgba(20,30,60,.05); --shadow:0 10px 30px rgba(30,40,80,.08); --shadow-lg:0 24px 60px rgba(30,40,80,.14); /* Reine System-Fonts – keine externen Webfonts (voll offline/self-contained). */ --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Noto Sans',sans-serif; --serif:Georgia,Cambria,'Times New Roman','Noto Serif',serif; --maxw:1140px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--sans); color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .container{max-width:var(--maxw);margin:0 auto;padding:0 24px} /* ── Barrierefreiheit ─────────────────────────────────────────────────── */ /* Nur für Screenreader sichtbar (Formular-Labels bei Placeholder-Design). */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Sprunglink: unsichtbar bis er den Tastatur-Fokus erhält. */ .skip-link{position:absolute;left:50%;top:-100px;transform:translateX(-50%);z-index:100; background:#fff;color:var(--primary-d);font-weight:700;padding:.7rem 1.2rem;border-radius:0 0 12px 12px; box-shadow:var(--shadow);transition:top .15s ease} .skip-link:focus{top:0} /* Deutlich sichtbarer Fokus-Ring (WCAG 2.4.7) statt dünnem Browser-Default. */ :focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:4px} .btn:focus-visible{outline:3px solid var(--indigo);outline-offset:3px} /* Bewegung reduzieren, wenn das System es verlangt. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} } /* Schutz gegen horizontalen Overflow (z. B. Date-Inputs in Grids auf Mobil): Grid-Items dürfen unter ihre Inhaltsbreite schrumpfen (min-width:0 unten). WICHTIG: `clip` statt `hidden` – `overflow-x:hidden` würde einen Scroll- Container erzeugen und `position:sticky` des Headers unwirksam machen. */ html{overflow-x:clip} body{overflow-x:clip;max-width:100%} .demo-grid>*,.price-grid>*,.custom-grid>*,.testi-grid>*,.feature-grid>*,.benefit-grid>*{min-width:0} /* ── Typo ─────────────────────────────────────────────────────────────── */ h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:#161b29} h1{font-size:clamp(2.2rem,5.2vw,3.6rem)} h2{font-size:clamp(1.7rem,3.6vw,2.5rem)} h3{font-size:1.18rem} .eyebrow{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:var(--primary-dd);background:#fdeef3;padding:.35rem .7rem;border-radius:999px} .grad{background:linear-gradient(100deg,var(--primary),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent} .lead{font-size:1.12rem;color:var(--ink-soft);max-width:54ch} .muted{color:var(--ink-muted)} /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-weight:600;font-size:.95rem;border-radius:999px;padding:.7rem 1.3rem;border:1.5px solid transparent; cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,color .14s;white-space:nowrap} .btn-sm{padding:.5rem 1rem;font-size:.9rem} .btn-lg{padding:.9rem 1.7rem;font-size:1.02rem} .btn-block{display:flex;width:100%} .btn-primary{background:linear-gradient(100deg,var(--primary),var(--primary-d));color:#fff;box-shadow:0 8px 20px rgba(224,80,126,.32)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(224,80,126,.42)} .btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:#cdd4e2;transform:translateY(-1px)} .btn-outline{background:#fff;border-color:var(--primary);color:var(--primary-d)} .btn-outline:hover{background:#fdeef3;transform:translateY(-1px)} /* ── Aktions-Banner ───────────────────────────────────────────────────── */ .promo-bar{background:linear-gradient(100deg,var(--indigo-d),var(--violet));color:#fff} .promo-inner{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;justify-content:center; padding:.6rem 24px;font-size:.92rem;text-align:center} .promo-tag{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.74rem; background:rgba(255,255,255,.2);padding:.25rem .65rem;border-radius:999px} .promo-text{opacity:.96} .promo-end{opacity:.96} .promo-end strong{color:#ffe27a} .promo-cta{font-weight:700;background:#fff;color:var(--indigo-d);padding:.35rem .9rem;border-radius:999px;white-space:nowrap} .promo-cta:hover{transform:translateY(-1px)} /* Honeypot – für Menschen unsichtbar */ .hp-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} /* ── Header ───────────────────────────────────────────────────────────── */ .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:68px} .brand{display:flex;align-items:center;gap:.55rem;font-weight:700} .brand-mark{color:var(--primary);display:grid;place-items:center} .brand-name{font-family:var(--serif);font-size:1.3rem;font-weight:600;color:#161b29} .nav-links{display:flex;align-items:center;gap:1.4rem} .nav-links a:not(.btn){color:var(--ink-soft);font-weight:500;font-size:.96rem} .nav-links a:not(.btn):hover{color:var(--ink)} /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero{position:relative;overflow:hidden; background:radial-gradient(120% 80% at 85% -10%,#fdeef4 0%,rgba(253,238,244,0) 55%), radial-gradient(90% 70% at 5% 0%,#eef0ff 0%,rgba(238,240,255,0) 50%), var(--bg); padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,8vw,7rem)} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center} .hero-copy h1{margin:1rem 0 1.1rem} .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.6rem 0 1.4rem} .hero-trust{list-style:none;display:flex;gap:1.3rem;flex-wrap:wrap;color:var(--ink-soft);font-size:.92rem;font-weight:500} /* Hero-Artwork: schwebende Karten */ .hero-art{position:relative;height:340px} .card-float{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-lg);padding:1rem 1.1rem;width:265px} .card-float-1{top:14px;left:6px;animation:floaty 6s ease-in-out infinite} .card-float-2{bottom:6px;right:0;width:250px;animation:floaty 6s ease-in-out infinite .8s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .cf-head{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.86rem;color:var(--ink-soft);margin-bottom:.7rem} .dot{width:9px;height:9px;border-radius:50%} .dot-green{background:var(--green)}.dot-blue{background:var(--indigo)} .cf-row{display:flex;align-items:center;gap:.6rem;padding:.34rem 0;font-weight:600;font-size:.95rem} .cf-row em{margin-left:auto;font-style:normal;font-weight:500;color:var(--ink-soft);font-size:.84rem} .cf-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:.2rem 0 .6rem} .cf-cal .cell{font-size:.72rem;text-align:center;padding:.4rem 0;border-radius:7px;font-weight:600;color:#fff;background:var(--green)} .cf-cal .busy{background:#f1a0b8}.cf-cal .free{background:#cfeede;color:#1d6b48}.cf-cal .ok{background:var(--indigo)} .cf-foot{font-size:.8rem;color:var(--ink-soft)} .ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff; background:linear-gradient(135deg,hsl(var(--h),70%,62%),hsl(var(--h),74%,48%));font-size:.92rem} /* ── Strip ────────────────────────────────────────────────────────────── */ .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)} .strip-inner{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center; padding:1rem 0;color:var(--ink-soft);font-size:.95rem} .strip-inner span{font-weight:500} .strip-inner strong{font-weight:600;color:var(--ink)} .strip-inner i{color:#c8d0de;font-style:normal} /* ── Sections ─────────────────────────────────────────────────────────── */ .section{padding:clamp(3.5rem,7vw,6rem) 0} .section-tint{background:var(--bg-tint)} .section-head{text-align:center;max-width:64ch;margin:0 auto 2.6rem} .section-head h2{margin:.7rem 0 .6rem} .section-head p{color:var(--ink-soft)} /* ── Funktionen ───────────────────────────────────────────────────────── */ .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem; box-shadow:var(--shadow-sm);transition:transform .16s ease,box-shadow .16s ease} .feature:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .fi{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:.9rem} .fi-rose{background:#fdeef3}.fi-blue{background:#eef0ff}.fi-green{background:#e6f7ef} .fi-amber{background:#fdf3da}.fi-violet{background:#f0ecff} .feature h3{margin-bottom:.4rem} .feature p{color:var(--ink-soft);font-size:.96rem} .tag-prem{display:inline-block;font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.06em; vertical-align:middle;color:var(--indigo-d);background:#eef0ff;padding:.12rem .45rem;border-radius:6px;margin-left:.3rem} /* ── Benefits (Einfach & für alle) ────────────────────────────────────── */ .benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem} .benefit{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.4rem; box-shadow:var(--shadow-sm);text-align:center;transition:transform .16s ease,box-shadow .16s ease} .benefit:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .benefit-ic{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem;margin:0 auto 1.1rem; background:linear-gradient(135deg,#fdeef4,#eef0ff);box-shadow:0 6px 18px rgba(194,24,91,.10)} .benefit h3{font-size:1.12rem;margin-bottom:.5rem} .benefit p{color:var(--ink-soft);font-size:.93rem;line-height:1.55} /* dezent unterschiedliche Icon-Töne je Karte (wie bei den Funktionen) */ .benefit:nth-child(1) .benefit-ic{background:linear-gradient(135deg,#e6f7ef,#eef0ff)} .benefit:nth-child(2) .benefit-ic{background:linear-gradient(135deg,#eef0ff,#f0ecff)} .benefit:nth-child(3) .benefit-ic{background:linear-gradient(135deg,#fdf3da,#fdeef4)} .benefit:nth-child(4) .benefit-ic{background:linear-gradient(135deg,#fdeef4,#e6f7ef)} /* ── Demo ─────────────────────────────────────────────────────────────── */ .demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start} .demo-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow)} .demo-card-prem{border-color:#dfe3ff;box-shadow:0 14px 40px rgba(91,108,255,.12)} .demo-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem} .pill{font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:.28rem .7rem;border-radius:999px} .pill-basis{background:#fdeef3;color:var(--primary-dd)} .pill-prem{background:#eef0ff;color:var(--indigo-d)} /* Damenliste */ .demo-toolbar{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem} .chip{font-size:.82rem;font-weight:600;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--line); background:#fff;color:var(--ink-soft);cursor:pointer;transition:all .14s} .chip:hover{border-color:#cdd4e2} .chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)} .girl-list{list-style:none;display:flex;flex-direction:column;gap:.5rem} .girl{display:flex;align-items:center;gap:.8rem;padding:.7rem;border:1px solid var(--line);border-radius:var(--radius-sm); background:#fff;transition:background .14s} .girl:hover{background:#fbfcfe} .girl-info{display:flex;flex-direction:column;line-height:1.25} .girl-info strong{font-size:.98rem} .girl-info em{font-style:normal;color:var(--ink-soft);font-size:.84rem} .status{margin-left:auto;font-size:.76rem;font-weight:600;padding:.26rem .6rem;border-radius:999px} .status-on{background:#e6f7ef;color:#1d6b48} .status-soon{background:#fff3da;color:#7d5700} .demo-note{margin-top:.9rem;font-size:.83rem;color:var(--ink-muted)} .girl-photo{flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#f0f2f6;box-shadow:inset 0 0 0 2px #fff,0 2px 6px rgba(30,40,80,.12)} .girl-photo img{width:100%;height:100%;object-fit:cover;object-position:center top} /* ── Zusatzfunktionen (Custom) ────────────────────────────────────────── */ .custom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} .custom-card{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow-sm);transition:transform .16s,box-shadow .16s} .custom-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .custom-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem; background:linear-gradient(135deg,#eef0ff,#fdeef4)} .custom-card h3{font-size:1.04rem;margin-bottom:.25rem} .custom-card p{color:var(--ink-soft);font-size:.9rem} .custom-cta{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:1.6rem;background:#fff; border:1px dashed #d6c2cd;border-radius:var(--radius);padding:1.3rem 1.5rem;box-shadow:var(--shadow-sm)} .custom-cta-ic{font-size:1.8rem;flex:none} .custom-cta-txt{display:flex;flex-direction:column;flex:1 1 280px} .custom-cta-txt strong{font-size:1.05rem} .custom-cta-txt span{color:var(--ink-soft);font-size:.92rem} /* Buchungsformular + Kalender */ .booking-form{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:.6rem;align-items:end} .booking-form label{min-width:0;display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;font-weight:600;color:var(--ink-soft)} .booking-form select,.booking-form input{min-width:0;width:100%;font-family:var(--sans);font-size:.92rem;padding:.55rem .6rem; border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)} .booking-form .btn{height:fit-content} .check-result{margin:1rem 0;padding:.8rem 1rem;border-radius:12px;font-weight:600;font-size:.92rem;display:none} .check-result.show{display:block} .check-result.ok{background:#e6f7ef;color:#15623f;border:1px solid #bce8d2} .check-result.bad{background:#fde8ec;color:#a32341;border:1px solid #f6c3cf} .cal-wrap{margin-top:1.1rem} .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;font-size:.85rem} .legend{display:flex;align-items:center;gap:.5rem;color:var(--ink-soft);font-size:.78rem} .legend .lg{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:.15rem;vertical-align:-1px} .lg.free{background:#cfeede}.lg.busy{background:#f1a0b8} .calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .cal-day{aspect-ratio:1;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center; font-size:.74rem;font-weight:600;border:1px solid var(--line);background:#fbfcfe;color:var(--ink-soft);position:relative} .cal-day .d{font-size:.92rem;color:var(--ink)} .cal-day.free{background:#eafaf2;border-color:#bce8d2} .cal-day.busy{background:#fdeef2;border-color:#f6c3cf;color:#a32341} .cal-day.sel{outline:2px solid var(--indigo);outline-offset:1px} /* ── Preise ───────────────────────────────────────────────────────────── */ .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:880px;margin:0 auto} .plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.7rem;box-shadow:var(--shadow-sm)} .plan-featured{border-color:var(--primary);box-shadow:0 18px 50px rgba(224,80,126,.16)} .plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(100deg,var(--primary),var(--primary-d)); color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.05em;padding:.32rem .9rem;border-radius:999px;box-shadow:0 6px 16px rgba(224,80,126,.35)} .plan-name{font-size:1.4rem} .plan-sub{color:var(--ink-soft);font-size:.92rem;margin-bottom:1rem} .offer-flag{display:inline-block;margin:.1rem 0 .6rem;font-size:.74rem;font-weight:700;letter-spacing:.03em; color:var(--green-d);background:#e6f7ef;border:1px solid #bce8d2;padding:.28rem .65rem;border-radius:999px} .plan-price{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap} .plan-price .old-price{font-family:var(--serif);font-size:1.5rem;font-weight:500;color:var(--ink-faint); text-decoration:line-through;text-decoration-color:#e0507e;text-decoration-thickness:2px} .plan-price .amount{font-family:var(--serif);font-size:2.6rem;font-weight:600;color:#161b29} .plan-price .per{color:var(--ink-soft);font-weight:500} .plan-hint{color:var(--ink-muted);font-size:.82rem;margin:.2rem 0 1.2rem} .plan-feats{list-style:none;margin-top:1.3rem;display:flex;flex-direction:column;gap:.55rem} .plan-feats li{display:flex;align-items:flex-start;gap:.55rem;font-size:.93rem;color:var(--ink)} .plan-feats li.no{color:var(--ink-muted)} .plan-feats .ic{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.74rem;font-weight:700;margin-top:1px} .plan-feats li.yes .ic{background:#e6f7ef;color:var(--green-d)} .plan-feats li.no .ic{background:#f0f2f6;color:var(--ink-faint)} .addons{max-width:880px;margin:1.6rem auto 0;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.6rem} .addons h4{font-family:var(--sans);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.7rem} .addons ul{list-style:none;display:flex;flex-direction:column;gap:.5rem} .addons li{display:flex;justify-content:space-between;gap:1rem;font-size:.94rem;padding:.3rem 0;border-bottom:1px dashed var(--line)} .addons li:last-child{border-bottom:0} .addons strong{color:var(--primary-d)} /* ── Updates sind im Preis enthalten ────────────────────────────────────── Steht zwischen Preiskarten und Zusätzen: der Satz gehört zum Preis, nicht zu den Dingen, die extra kosten. Grün getönt wie die Häkchen der Merkmalsliste — dieselbe Aussage („ist enthalten"), dieselbe Farbe. `.un-txt span` statt `span`: das Icon ist ebenfalls ein span und würde sonst auf Fließtextgröße schrumpfen. */ .updates-note{max-width:880px;margin:1.6rem auto 0;display:flex;gap:1rem;align-items:flex-start; background:#e6f7ef;border:1px solid #bfe6d3;border-radius:var(--radius);padding:1.1rem 1.4rem} .updates-note .un-ic{font-size:1.7rem;line-height:1.15;flex:0 0 auto} .updates-note .un-txt{display:flex;flex-direction:column;gap:.3rem} .updates-note strong{font-size:1.02rem;color:var(--green-d)} .updates-note .un-txt span{font-size:.94rem;color:var(--ink-soft);line-height:1.55} @media (max-width:560px){.updates-note{padding:1rem 1.05rem;gap:.75rem}} /* ── CTA / Kontakt ────────────────────────────────────────────────────── */ .section-cta{background: radial-gradient(80% 120% at 100% 0%,#eef0ff 0,rgba(238,240,255,0) 55%), radial-gradient(80% 120% at 0% 100%,#fdeef4 0,rgba(253,238,244,0) 55%),var(--bg)} .cta-box{max-width:680px;margin:0 auto;text-align:center} .cta-box h2{margin-bottom:.5rem} .cta-box>p{color:var(--ink-soft);margin-bottom:1.8rem} .contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem;text-align:left} .contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.7rem} .contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea{width:100%;font-family:var(--sans);font-size:.95rem; padding:.7rem .8rem;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)} .contact-form textarea{margin-bottom:.7rem;resize:vertical} .consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.83rem;color:var(--ink-soft);margin:.2rem 0 1rem} .consent input[type=checkbox]{flex:none;width:18px;height:18px;margin-top:.1rem} .form-status{text-align:center;font-size:.9rem;font-weight:600;color:var(--green);margin-top:.7rem;min-height:1.2em} .cta-alt{margin-top:1.1rem;color:var(--ink-soft);font-size:.92rem} .cta-alt a{color:var(--primary-d);font-weight:600} /* ── Footer ───────────────────────────────────────────────────────────── */ .site-footer{border-top:1px solid var(--line);background:var(--bg-soft);padding:2.4rem 0} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:1.5rem;align-items:start} .brand-foot .brand-name{font-size:1.15rem} .foot-tag{color:var(--ink-soft);font-size:.9rem;margin-top:.5rem} .foot-links{display:flex;flex-direction:column;gap:.4rem} .foot-links a{color:var(--ink-soft);font-size:.92rem} .foot-links a:hover{color:var(--ink)} .foot-legal{display:flex;flex-direction:column;gap:.3rem;font-size:.86rem;color:var(--ink-soft);text-align:right} /* ── Referenz-Strip ───────────────────────────────────────────────────── */ .strip-ref{margin-left:auto;color:var(--ink-soft);font-size:.92rem} .strip-ref a{color:var(--primary-d);font-weight:600} .strip-ref a:hover{text-decoration:underline} /* ── Breite Feature-Kachel (Webhosting-Vorteil) ───────────────────────── */ .feature-wide{grid-column:1/-1;display:flex;gap:1.1rem;align-items:flex-start; background:linear-gradient(100deg,#f3fbf7,#fbf7f9);border-color:#cdeede} .feature-wide .fi{margin-bottom:0} .feature-wide h3{margin-bottom:.3rem} /* ── Designanpassung-Zeile bei den Add-ons ────────────────────────────── */ .addon-design{align-items:flex-start} .addon-design em{display:block;font-style:normal;color:var(--ink-muted);font-size:.8rem;margin-top:.1rem} .cta-scope{font-weight:500;color:var(--ink-soft);font-size:.85em} /* ── Referenz & Kundenstimme ──────────────────────────────────────────── */ .testi-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:1.4rem;align-items:stretch} .testi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow);margin:0;display:flex;flex-direction:column} .testi-stars{display:flex;gap:.15rem;font-size:1.15rem;color:#e2c14d;margin-bottom:.9rem} .testi-stars span{color:#e3e7ef} .testi-stars span.on{color:#96690a} .testi blockquote{font-family:var(--serif);font-size:1.14rem;line-height:1.55;color:#2a3042;margin:0 0 1.2rem} .testi figcaption{display:flex;align-items:center;gap:.8rem;margin-top:auto} .testi-ava{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff; font-size:1.1rem;background:linear-gradient(135deg,var(--primary),var(--violet))} .testi-meta{display:flex;flex-direction:column;line-height:1.3} .testi-meta strong{font-size:1rem} .testi-meta em{font-style:normal;color:var(--ink-soft);font-size:.86rem} .testi-plan{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--indigo-d);background:#eef0ff;padding:.3rem .7rem;border-radius:999px} .ref-badge{display:flex;flex-direction:column;gap:.7rem;justify-content:center;background:var(--bg-soft); border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem} .ref-badge-top{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .ref-card{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;align-items:center;background:#fff; border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.1rem;transition:transform .14s,box-shadow .14s} .ref-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .ref-logo{grid-row:1/3;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:var(--primary);background:#fdeef3} .ref-info{display:flex;flex-direction:column;line-height:1.3} .ref-info strong{font-size:1.05rem;font-family:var(--serif)} .ref-info em{font-style:normal;color:var(--ink-soft);font-size:.84rem} .ref-link{grid-column:2;font-size:.82rem;color:var(--primary-d);font-weight:600} /* ── Hero-Wave (dekorativer Abschluss) ────────────────────────────────── */ .hero-wave{display:none} /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:2.4rem} .hero-art{height:300px;order:-1} .feature-grid{grid-template-columns:1fr 1fr} .benefit-grid{grid-template-columns:1fr 1fr} .custom-grid{grid-template-columns:1fr 1fr} .demo-grid{grid-template-columns:1fr} .price-grid{grid-template-columns:1fr;max-width:460px} .testi-grid{grid-template-columns:1fr} .feature-wide{flex-direction:column;gap:.7rem} .strip-ref{margin-left:0;flex-basis:100%;text-align:center} .footer-grid{grid-template-columns:1fr;text-align:left} .foot-legal{text-align:left} } /* ========================================================== Kopfzeile: die Textlinks weichen, BEVOR sie überlaufen ========================================================== Die Regel unten versteckte sie erst ab 560 px abwärts — die Leiste braucht aber rund 818 px. Dazwischen lief sie über den Rand hinaus, in JEDER Sprache, am schlimmsten im deutschen Original. Gemessen (rechte Kante von nav.nav-links gegen die sichtbare Breite; der übliche Überlauftest ist hier blind, weil `html,body{overflow-x:clip}` den scrollWidth einebnet): 880 px → 0 px 800 px → 18 px 768 px → 50 px 700 px → 118 px 600 px → 218 px 561 px → 257 px 560 px → 0 px (alte Regel greift) Dieselbe Lücke zwischen zwei Haltepunkten wie schon zweimal in der CherieBar-Fassung. Deshalb: die Links weichen ab 880 px, wo der Platz tatsächlich ausgeht. Die Handlungsknöpfe („Demo", „Bestellen") bleiben — sie sind der Zweck der Seite, und die Abschnitte erreicht man weiterhin über die Fußzeile und das Scrollen. ========================================================== */ @media (max-width:880px){ .nav-links a:not(.btn){display:none} } @media (max-width:560px){ .feature-grid{grid-template-columns:1fr} .benefit-grid{grid-template-columns:1fr} .custom-grid{grid-template-columns:1fr} .booking-form{grid-template-columns:1fr 1fr} .booking-form .btn{grid-column:1/-1} .contact-form .row{grid-template-columns:1fr} .hero-trust{gap:.8rem} } /* =========================================================================== Ergänzungen der PHP-Fassung =========================================================================== */ /* ── Einwilligungs-Banner ───────────────────────────────────────────────── ZUSTIMMEN UND ABLEHNEN SIND GLEICHRANGIG. Gleiche Größe, gleiche Schrift, gleiche Polsterung, gleicher Rahmen, beide sichtbar gefärbt. Der einzige Unterschied ist der Farbton — und der macht den Ablehnen-Knopf nicht leiser, sondern nur anders. Warum das kein Geschmacksfrage ist: eine Einwilligung, bei der Ablehnen schwerer ist als Zustimmen, ist nach DSGVO nicht freiwillig und damit unwirksam. Wer hier den Ablehnen-Knopf blass macht, macht damit die ganze Messung rechtswidrig. Das Banner sperrt die Seite NICHT (kein Overlay, kein Modal): wer nicht entscheiden will, darf trotzdem lesen — und wird dann nicht gemessen. */ .cc-bar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff; border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(30,40,80,.10)} .cc-inner{display:flex;gap:1.2rem;align-items:center;justify-content:space-between; flex-wrap:wrap;padding:1rem 24px} .cc-text{flex:1 1 420px;min-width:0} .cc-text strong{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:.2rem} .cc-text p{color:var(--ink-soft);font-size:.88rem;line-height:1.5;margin-bottom:.3rem} .cc-link{font-size:.86rem;font-weight:600;color:var(--indigo-d);text-decoration:underline} .cc-actions{display:flex;gap:.7rem;align-items:center;flex:0 0 auto;flex-wrap:wrap} .cc-btn{min-width:150px;justify-content:center;font-size:.95rem;padding:.7rem 1.3rem; border-width:1.5px;border-style:solid;cursor:pointer} /* Ablehnen: eigener, gut sichtbarer Rahmen in der Textfarbe. */ .cc-actions button[value="nein"]{background:#fff;border-color:var(--ink);color:var(--ink)} .cc-actions button[value="nein"]:hover{background:#f2f4f8;transform:translateY(-1px)} /* Zustimmen: derselbe Zuschnitt, andere Farbe. Kein größerer Knopf, kein Schatten, der ihn hervorhebt. */ .cc-actions button[value="ja"]{background:var(--ink);border-color:var(--ink);color:#fff} .cc-actions button[value="ja"]:hover{background:#000;transform:translateY(-1px)} @media (max-width:560px){ .cc-inner{flex-direction:column;align-items:stretch} .cc-actions{width:100%} .cc-btn{flex:1 1 0;min-width:0} } /* Widerruf auf der Datenschutzseite — dieselben Knöpfe, damit auch der Widerruf nicht schwerer ist als die Zustimmung. */ .consent-box{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius); padding:1.2rem 1.4rem;margin:1.6rem 0} .consent-state{font-weight:600;margin-bottom:.8rem} /* ── Sprachumschalter ──────────────────────────────────────────────────── Echte Links, kein