/* Aussehen der Produktseite — geteilt von der deutschen und der englischen Fassung. Bis zur englischen Fassung stand das hier eingebettet im , mit der Begründung „es gibt nur diese eine Seite". Es gibt jetzt zwei, und zwei Kopien von siebenhundert Zeilen CSS driften auseinander — nicht sofort, aber sicher. Der zusätzliche Abruf ist der kleinere Preis. */ /* ══ Schrift ══════════════════════════════════════════════════════════════ Selbst gehostet, nicht vom Google-CDN: Diese Seite verspricht im Text, dass nichts nach außen geht — dann darf sie nicht beim ersten Aufruf die IP des Besuchers nach Kalifornien schicken. Nunito ist variabel, eine Datei je Zeichensatz deckt alle Schnitte ab. */ @font-face{ font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap; src:url(schriften/nunito-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap; src:url(schriften/nunito-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ══ Farbwelt „Wald" — dieselben Werte wie in der App ═════════════════════ */ :root{ color-scheme:light dark; --tinte:#142A16; --tinte2:#4A6249; --tinte3:#7B8F7A; --gruen:#2E7D1E; --gruen-tief:#1B4D10; --limette:#8FD14F; --sonne:#F2C14E; --papier:#E4EFD6; --glas:rgba(255,255,255,.62); --glas-kante:rgba(255,255,255,.7); --schatten:0 10px 30px -12px rgba(20,42,22,.28); --schatten-tief:0 34px 64px -28px rgba(20,42,22,.55); --rahmen:#10210F; --ui:"Nunito",ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --hof:1120px; /* Die vier Farbflecken der Tapete. Als eigene Werte, weil sie im Dunkeln nicht dieselbe Farbe schwächer sein dürfen, sondern eine andere: Ein mit Schwarz gemischtes Limette ergibt Schlamm, kein Licht. */ --fleck-a:rgba(143,209,79,.55); --fleck-b:rgba(242,193,78,.45); --fleck-c:rgba(46,125,30,.26); --fleck-d:rgba(143,209,79,.34); } @media (prefers-color-scheme:dark){ :root{ --tinte:#EAF2E4; --tinte2:#A9BEA3; --tinte3:#84987F; --gruen:#63B846; --gruen-tief:#173F0F; --papier:#0F1C0D; --glas:rgba(255,255,255,.07); --glas-kante:rgba(255,255,255,.13); --schatten:0 10px 30px -12px rgba(0,0,0,.6); --schatten-tief:0 34px 64px -28px rgba(0,0,0,.85); --rahmen:#05100A; --fleck-a:rgba(143,209,79,.16); --fleck-b:rgba(242,193,78,.11); --fleck-c:rgba(46,125,30,.34); --fleck-d:rgba(96,184,70,.13); } } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--ui);color:var(--tinte);font-size:17px;line-height:1.6; font-variant-numeric:tabular-nums;background:var(--papier);overflow-x:hidden; } /* Die Tapete: dieselben weichen Farbverläufe wie hinter der App. */ .tapete{ background: radial-gradient(55% 38% at 10% 2%, var(--fleck-a) 0%, transparent 62%), radial-gradient(50% 32% at 94% 10%, var(--fleck-b) 0%, transparent 60%), radial-gradient(62% 42% at 84% 76%, var(--fleck-c) 0%, transparent 64%), radial-gradient(70% 40% at 6% 96%, var(--fleck-d) 0%, transparent 62%), var(--papier); background-attachment:fixed; } .hof{max-width:var(--hof);margin:0 auto;padding:0 24px} section{padding:84px 0} @media (max-width:700px){ section{padding:60px 0} } h2{font-size:clamp(28px,4.6vw,42px);font-weight:900;letter-spacing:-.028em;line-height:1.08} h3{font-size:19px;font-weight:900;letter-spacing:-.02em} .vorzeile{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--gruen);margin-bottom:10px} p.lauf{color:var(--tinte2);font-weight:600;max-width:58ch} .mitte{text-align:center} .mitte p.lauf{margin-inline:auto} /* ══ Kopfzeile ════════════════════════════════════════════════════════════ */ .leiste{position:sticky;top:0;z-index:50;backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px); background:color-mix(in srgb,var(--papier) 72%,transparent); border-bottom:1px solid transparent;transition:border-color .2s} .leiste.geklebt{border-bottom-color:color-mix(in srgb,var(--tinte) 12%,transparent)} .leiste .hof{display:flex;align-items:center;justify-content:space-between;padding:14px 24px} .marke{display:flex;align-items:center;gap:11px;font-weight:900;font-size:19px; letter-spacing:-.02em;color:var(--tinte);text-decoration:none} .marke svg{width:34px;height:34px;flex:0 0 auto} .leiste .laden{font-size:14.5px;padding:11px 20px} /* Nicht `display:none`: Das nimmt die Beschriftung auch aus dem Baum für Barrierefreiheit, und dann heißt der Knopf für Screenreader und KI-Agenten gar nichts mehr — es bleibt ein Link mit einem Apfel drin. Also unsichtbar machen, nicht entfernen. */ @media (max-width:520px){ .leiste .laden span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .leiste .laden{padding:11px 15px;position:relative} } /* Die Texte-Liste auf der Startseite. Bewusst nur Links untereinander, keine Karten: Es sind vier Titel, und ein Titel ist die beste Vorschau auf einen Text. */ .texteliste{list-style:none;padding:0;margin:1.4rem 0 0;max-width:52ch} .texteliste li{margin-bottom:.7rem;font-weight:800;line-height:1.42} .texteliste a{color:var(--tinte);text-decoration:none; border-bottom:2px solid color-mix(in srgb,var(--gruen) 35%,transparent)} .texteliste a:hover{color:var(--gruen);border-bottom-color:var(--gruen)} /* ══ Knöpfe ═══════════════════════════════════════════════════════════════ */ .laden{display:inline-flex;align-items:center;gap:9px;background:var(--tinte);color:var(--papier); border:none;border-radius:999px;padding:16px 28px;font:800 17px/1 var(--ui);cursor:pointer; text-decoration:none;box-shadow:0 10px 24px -10px rgba(20,42,22,.5); transition:transform .14s cubic-bezier(.2,.9,.3,1),box-shadow .14s} .laden:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(20,42,22,.55)} .laden:active{transform:translateY(0)} .laden svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto} .laden:focus-visible{outline:3px solid var(--gruen);outline-offset:3px} .preiszeile{font-size:14px;font-weight:700;color:var(--tinte2);margin-top:14px} /* ══ Telefonrahmen ════════════════════════════════════════════════════════ Der Rahmen ist bewusst schlicht: Die Aufnahmen bringen ihre eigene Statuszeile mit, also braucht es nur Kante, Radius und Schatten. */ /* Kein aspect-ratio und kein object-fit: Die Aufnahme bestimmt die Höhe selbst, sonst schneidet der Rahmen oben und unten je einen Streifen ab. */ .geraet{width:100%;max-width:var(--breit,300px);line-height:0; background:var(--rahmen);border-radius:15%/6.9%;padding:1%; box-shadow:var(--schatten-tief),0 0 0 1px rgba(255,255,255,.1) inset; position:relative;flex:0 0 auto} .geraet img{width:100%;height:auto;display:block; border-radius:14%/6.4%;background:var(--papier)} .geraet::after{ /* Dynamic Island */ content:"";position:absolute;top:2.2%;left:50%;transform:translateX(-50%); width:29%;height:3.3%;background:#000;border-radius:999px} @media (prefers-color-scheme:dark){ /* Auf dunklem Grund braucht die helle Aufnahme eine Kante, sonst schwebt sie als leuchtendes Rechteck im Nichts. */ .geraet{box-shadow:var(--schatten-tief),0 0 0 1px rgba(255,255,255,.16) inset, 0 0 0 1px rgba(143,209,79,.18)} } /* ══ Held ═════════════════════════════════════════════════════════════════ */ .held{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;padding:56px 0 92px} .held h1{font-size:clamp(35px,5.9vw,60px);font-weight:900;letter-spacing:-.035em;line-height:1.04} .held .unter{font-size:19px;color:var(--tinte2);font-weight:600;margin:20px 0 28px;max-width:46ch} .held .unter b{color:var(--tinte)} .held .bild{display:flex;justify-content:center} .held .geraet{--breit:320px} @media (max-width:900px){ .held{grid-template-columns:1fr;gap:44px;padding:34px 0 64px;text-align:center} .held .unter{margin-inline:auto} .held .geraet{--breit:270px} } /* ══ Was nicht drin ist ═══════════════════════════════════════════════════ */ .filter{background:linear-gradient(150deg,var(--gruen),var(--gruen-tief));color:#fff; border-radius:36px;padding:60px 28px;text-align:center;position:relative;overflow:hidden} .filter::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 52%)} .filter h2{color:#fff;position:relative} .nixe{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:28px 0 24px;position:relative} .nix{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);border-radius:999px; padding:10px 20px;font-size:16px;font-weight:800;color:#DCEFC9} .nix s{text-decoration-color:var(--sonne);text-decoration-thickness:2.5px} .filter .fazit{font-size:23px;font-weight:900;color:var(--limette);position:relative} .filter .warum{color:#CFEFA8;font-weight:600;max-width:54ch;margin:15px auto 0;font-size:15.5px;position:relative} /* ══ Drei Momente ═════════════════════════════════════════════════════════ */ .momente{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:48px} .moment{display:flex;flex-direction:column;align-items:center;text-align:center} .moment .geraet{--breit:266px} .moment .schritt{font-size:12px;font-weight:800;letter-spacing:.07em;color:var(--gruen); text-transform:uppercase;margin:24px 0 8px} .moment p{font-size:15px;color:var(--tinte2);font-weight:600;max-width:32ch;margin-top:7px} @media (max-width:900px){ .momente{grid-template-columns:1fr;gap:52px} } /* ══ Wechselnde Bild-Text-Blöcke ══════════════════════════════════════════ */ .paar{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .paar .bild{display:flex;justify-content:center;gap:22px} .paar .geraet{--breit:262px} .paar .geraet.zweit{--breit:224px;align-self:flex-end;margin-bottom:26px} .paar.gedreht .text{order:2} @media (max-width:900px){ .paar{grid-template-columns:1fr;gap:40px} .paar.gedreht .text{order:0} .paar .geraet{--breit:230px} .paar .geraet.zweit{--breit:198px;margin-bottom:18px} } @media (max-width:560px){ .paar .geraet.zweit{display:none} .paar .geraet{--breit:262px} } /* ══ Merkmalzeilen ════════════════════════════════════════════════════════ */ .merkmale{display:grid;gap:20px;margin-top:26px;max-width:52ch} .merkmal{display:flex;gap:14px;align-items:flex-start} .merkmal .hak{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--gruen); display:grid;place-items:center;margin-top:2px} .merkmal .hak svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:3; stroke-linecap:round;stroke-linejoin:round} .merkmal b{display:block;font-weight:900;letter-spacing:-.01em} .merkmal span{color:var(--tinte2);font-weight:600;font-size:15px} /* ══ Uhr ══════════════════════════════════════════════════════════════════ */ /* Das Gehäuse ist am echten Gerät ein schmaler Steg, kein Passepartout — deshalb nur wenige Pixel Rand und der Radius knapp über dem des Bildes. */ .uhr-rahmen{width:var(--breit,206px);line-height:0;padding:3px;border-radius:25%; background:linear-gradient(155deg,#4A524A,#20261F 55%,#3A423A); box-shadow:var(--schatten-tief);position:relative;flex:0 0 auto} .uhr-rahmen img{width:100%;height:auto;display:block;border-radius:23.5%;background:#000} .uhr-rahmen .krone{position:absolute;right:-5px;top:31%;width:7px;height:14%;border-radius:4px; background:linear-gradient(90deg,#8A9585,#C9D2C2,#8A9585)} .uhr-rahmen.zweit{--breit:168px;align-self:flex-end;margin-bottom:32px} .uhr-satz{display:flex;justify-content:center;align-items:center;gap:22px} @media (max-width:560px){ .uhr-rahmen.zweit{display:none} } /* ══ Vertrauenskarten ═════════════════════════════════════════════════════ */ .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px} @media (max-width:860px){ .drei{grid-template-columns:1fr} } .karte{background:var(--glas);border:1px solid var(--glas-kante);border-radius:26px; padding:26px 24px;box-shadow:var(--schatten);backdrop-filter:blur(6px)} .karte h3{margin-bottom:8px} .karte p{font-size:15px;color:var(--tinte2);font-weight:600;line-height:1.55} /* ══ Abschluss ════════════════════════════════════════════════════════════ */ .finale{text-align:center;padding:96px 0 104px} .finale .treppe{width:190px;height:110px;margin:0 auto 26px;display:block;overflow:visible} .finale .preis{font-size:clamp(42px,7.4vw,68px);font-weight:900;letter-spacing:-.04em;line-height:1} .finale .dazu{color:var(--tinte2);font-weight:700;margin:14px 0 30px} /* ══ Fußzeile ═════════════════════════════════════════════════════════════ */ footer{border-top:1px solid color-mix(in srgb,var(--tinte) 12%,transparent);padding:30px 0 44px} footer .hof{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between; font-size:13.5px;font-weight:600;color:var(--tinte3)} footer a{color:var(--tinte2);text-decoration:none;font-weight:700} footer a:hover{color:var(--tinte);text-decoration:underline} /* ══ Bewegung ═════════════════════════════════════════════════════════════ */ .zeigt{opacity:0;transform:translateY(18px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1)} .zeigt.da{opacity:1;transform:none} #hop{transform-box:fill-box;transform-origin:center} #squash{transform-box:fill-box;transform-origin:50% 100%} #augen{transform-box:fill-box;transform-origin:center} @media (prefers-reduced-motion:reduce){ .zeigt{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .laden:hover{transform:none} } /* ══ Sprachumschalter ═════════════════════════════════════════════════════ Bewusst „English" und nicht „EN" oder eine Flagge: Eine Flagge steht für ein Land, nicht für eine Sprache, und wer Englisch sucht, sucht nicht die USA. Steht neben dem Store-Knopf, weil dort ohnehin die Augen sind. */ .sprache{display:inline-flex;align-items:center;gap:7px;margin-right:16px; font-size:14.5px;font-weight:800;color:var(--tinte2);text-decoration:none; padding:8px 13px;border-radius:999px;border:1.5px solid transparent} .sprache:hover{color:var(--tinte);border-color:color-mix(in srgb,var(--tinte) 14%,transparent)} .sprache svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2} @media (max-width:560px){ .sprache span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* siehe oben */ .sprache{margin-right:8px;padding:8px;position:relative} }