/* ═══ DEMIUS — der komplette Stil ═══ Farben und Maße stammen aus 01_MARKE/farben/marke.json. Ändern: dort, dann marke.py laufen lassen, dann hier neu einsetzen. */ /* ═══ DEMIUS — Marken-Variablen ═══ ERZEUGT aus 01_MARKE/farben/marke.json — NICHT von Hand ändern! Ändern: marke.json bearbeiten, dann marke.py laufen lassen. Stand: 08.09.2026 */ :root{ /* Farben */ --gruen: #185126; /* Hauptfarbe — die Wortmarke DEMIUS */ --gruen-tief: #133C1E; /* tiefste Fläche — Mähne, Fußzeile */ --gruen-hell: #2F8232; /* lebendiges Grün — Linien, Haken */ --gold: #DDA60B; /* Akzent — Unterzeile, Knöpfe */ --gold-text: #8D6A07; /* Gold als TEXTFARBE auf hellem Grund. Das Marken-Gold hat auf Papier nur 2,09:1 — die Vorschrift verlangt 4,5:1. Dieser Ton erreicht 4,75:1. Auf dunkelgrünem Grund weiter --gold/--gelb. */ --gelb: #F1D11E; /* Signal — Löwengesicht, Hervorhebung */ --papier: #FAF9F5; /* heller Grund */ --tinte: #1A1F1B; /* Fließtext auf Hell */ --grau: #6B7268; /* Nebentext, Linien */ --papier-matt: #C9D2C6; /* Fließtext auf Dunkelgrün */ --linie-hell: #DDD9D0; /* Trennlinie auf Papier */ --linie-dunkel: #2A5433; /* Trennlinie auf Dunkelgrün, nur für Flächen */ /* ── Zwei Töne für dunkle Flächen ────────────────────────────────── Gemessen am 17.09.2026: Auf Dunkelgrün lag zwischen unsichtbar (linie-dunkel, 1,4:1) und schreiend (salbei, 9:1) nichts. Der Rahmen eines Eingabefelds braucht aber 3:1 — die Barrierefreiheits- regel verlangt das ausdrücklich für alles, woran man erkennt, dass ein Bedienelement da ist. Beide Töne halten auf BEIDEN dunklen Gründen, nicht nur auf einem: rand-hell auf gruen-tief 4,4:1 · auf gruen 3,3:1 auf-dunkel auf gruen-tief 6,5:1 · auf gruen 4,9:1 Sie liegen bewusst über dem Minimum. Auf dem Handy frisst Streulicht den Kontrast, und dünne Ränder bekommen auf AMOLED-Bildschirmen Farbsäume — kleine Elemente gehören angehoben, nicht ans Limit. */ --rand-hell: #6BA877; /* Rahmen und Linien auf Dunkelgrün */ --auf-dunkel: #AAC2AD; /* Platzhalter und Nebentext auf Dunkelgrün */ --tinte-matt: #4A504A; /* Nebentext auf Papier */ --papier-gruen: #EEF2EC; /* leicht grüne Fläche, Chips */ /* Abstände — 8-Punkt-Raster */ --raum-xs: 8px; --raum-s: 16px; --raum-m: 24px; --raum-l: 40px; --raum-xl: 64px; --raum-xxl: 96px; /* Schriften */ --schrift-titel: 'Bebas Neue', Impact, sans-serif; --schrift-text: 'DM Sans', sans-serif; --schrift-stark: 'DM Sans', sans-serif; --textbreite: 70ch; } /* Grundhaltung — mobil zuerst · Grundton: hell */ *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--papier);color:var(--tinte); font-family:var(--schrift-text);line-height:1.6; -webkit-font-smoothing:antialiased} h1,h2,h3{color:var(--gruen)} h1,h2,h3{font-family:var(--schrift-titel);line-height:1; letter-spacing:.01em;margin:0;text-transform:uppercase} p{max-width:var(--textbreite)} a{color:inherit} img{max-width:100%;height:auto;display:block} ::selection{background:var(--gelb);color:var(--gruen-tief)} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} } @font-face{font-family:'Bebas Neue';src:url('/schriften/bebasneue-400-latin.woff2') format('woff2'); font-weight:400;font-display:swap} @font-face{font-family:'DM Sans';src:url('/schriften/dmsans-500-latin.woff2') format('woff2'); font-weight:500;font-display:swap} @font-face{font-family:'DM Sans';src:url('/schriften/dmsans-700-latin.woff2') format('woff2'); font-weight:700;font-display:swap} /* ───────── Grundlagen ───────── */ html{scroll-behavior:smooth} /* Trennung NUR an den Stellen, die typo.php setzt (Wortfugen, ­) — so bricht jedes Handy gleich. Automatische Silbentrennung war unzuverlässig: Erhans Handy trennte gar nicht, der Testbrowser 555-mal (04.10.2026). */ body{font-size:16px;hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty} .nohy{hyphens:none;-webkit-hyphens:none} .mitte{width:min(100% - 40px, 1100px);margin-inline:auto} section{padding:var(--raum-xl) 0} h2{font-size:clamp(30px,7vw,46px);margin-bottom:var(--raum-s); hyphens:manual;-webkit-hyphens:manual;text-wrap:balance} h3{hyphens:manual;-webkit-hyphens:manual;text-wrap:balance} h3{font-size:clamp(20px,4.4vw,25px)} .vor{font-family:var(--schrift-text);font-weight:700;font-size:13px; letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text); margin-bottom:var(--raum-xs);display:block;hyphens:none} .fuehrung{font-size:clamp(17px,2.4vw,20px);line-height:1.6;color:var(--tinte); max-width:60ch;margin-bottom:var(--raum-m)} /* ───────── Kopf ───────── */ /* ══ KOPF UND NAVIGATION ══════════════════════════════════════ Entschieden 10.09.2026: sichtbare Leiste + Mega-Menü am Rechner, Vollbild-Akkordeon am Handy. Alle Links stehen im HTML. Das Mega-Menü öffnet ohne JavaScript — über :hover und :focus-within. */ .sprung{position:absolute;left:-9999px;top:0;z-index:200; background:var(--gruen);color:var(--papier);padding:12px 16px; font-weight:700;text-decoration:none} .sprung:focus{left:0} .kopf{position:sticky;top:0;z-index:50;background:rgba(250,249,245,.94); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--linie-hell)} .kopf .mitte{display:flex;align-items:center;gap:var(--raum-m); min-height:66px;justify-content:space-between} .marke{display:block;text-decoration:none;flex:none;line-height:0} .marke img{height:42px;width:auto} @media(min-width:620px){.marke img{height:48px}} /* sichtbarer Fokusrahmen — Pflicht nach WCAG 2.1 AA */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,textarea:focus-visible{ outline:3px solid var(--gold);outline-offset:2px;border-radius:var(--kante-s)} .hauptnav{display:none;align-items:center;gap:var(--raum-m); font-size:16px;font-weight:700} .hauptnav > a,.navknopf{text-decoration:none;color:var(--tinte); padding:8px 0;border-bottom:2px solid transparent; font:inherit;background:none;border-top:0;border-left:0;border-right:0; cursor:pointer;display:inline-flex;align-items:center;gap:8px} .hauptnav > a:hover,.navknopf:hover{border-bottom-color:var(--gold);color:var(--gruen)} .pfeil{width:8px;height:8px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s} /* ── Das Mega-Menü ── */ .navpunkt{position:static} .mega{position:absolute;left:0;right:0;top:100%; background:var(--papier);border-bottom:1px solid var(--linie-hell); box-shadow:0 18px 40px rgba(26,31,27,.13); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .18s,transform .18s,visibility .18s} .navpunkt:hover .mega, .navpunkt:focus-within .mega{opacity:1;visibility:visible;transform:none} .navpunkt:hover .pfeil, .navpunkt:focus-within .pfeil{transform:rotate(-135deg) translate(-3px,-3px)} .mega-innen{max-width:var(--breite);margin:0 auto;padding:32px var(--raum-m) 24px; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--raum-l)} .mega-titel{font-family:var(--schrift-text);font-size:16px;letter-spacing:.14em; text-transform:uppercase;color:var(--gold-text);margin:0 0 12px; padding-bottom:8px;border-bottom:1px solid var(--linie-hell);font-weight:400} .mega-gruppe ul{list-style:none;margin:0;padding:0} .mega-gruppe li{margin:0} .mega-gruppe a{display:block;padding:8px 0;text-decoration:none; color:var(--tinte);font-weight:500;font-size:16px; border-bottom:1px solid transparent} .mega-gruppe a:hover{color:var(--gruen);border-bottom-color:var(--gold)} .mega-gruppe a[aria-current]{color:var(--gruen);border-bottom-color:var(--gruen)} .mega-fuss{grid-column:1/-1;border-top:1px solid var(--linie-hell); padding-top:16px;margin-top:4px} .mega-fuss a{color:var(--gruen);font-weight:700;text-decoration:none;font-size:16px} .mega-fuss a:hover{text-decoration:underline} /* ── Der Hamburger ── */ .hamburger{display:flex;flex-direction:column;justify-content:center;gap:4px; width:46px;height:46px;padding:12px;background:none;border:0; cursor:pointer;flex:none;margin-right:-8px} .hamburger span{display:block;height:2px;background:var(--tinte); transition:transform .2s,opacity .2s} .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ── Das Handy-Menü ── */ .handymenue{position:fixed;inset:66px 0 0;z-index:49;background:var(--papier); overflow-y:auto;-webkit-overflow-scrolling:touch} .handymenue-innen{padding:var(--raum-m) var(--raum-m) 96px} .handymenue details{border-bottom:1px solid var(--linie-hell)} .handymenue summary{font-family:var(--schrift-text);font-size:25px; padding:16px 0;cursor:pointer;list-style:none; display:flex;justify-content:space-between;align-items:center; color:var(--gruen);min-height:48px} .handymenue summary::-webkit-details-marker{display:none} .handymenue summary::after{content:"";width:9px;height:9px;flex:none; border-right:2px solid var(--gold);border-bottom:2px solid var(--gold); transform:rotate(45deg) translateY(-3px);transition:transform .18s} .handymenue details[open] summary::after{transform:rotate(-135deg) translateY(-1px)} .handymenue details ul{list-style:none;margin:0 0 12px;padding:0} .handymenue details a{display:block;padding:12px 0 12px 16px;min-height:48px; text-decoration:none;color:var(--tinte);font-weight:500; border-left:2px solid var(--linie-hell)} .handymenue details a:hover,.handymenue details a[aria-current]{ border-left-color:var(--gold);color:var(--gruen)} .handy-einzeln{display:flex;flex-direction:column;margin-top:24px} .handy-einzeln a{padding:16px 0;min-height:48px;text-decoration:none; color:var(--tinte);font-weight:700; border-bottom:1px solid var(--linie-hell)} .handy-einzeln a:last-child{color:var(--gruen)} body.menue-offen{overflow:hidden} .knopf{display:inline-block;background:var(--gruen);color:var(--papier); text-decoration:none;font-weight:700;border:2px solid var(--gruen); padding:12px 24px;border-radius:var(--kante-m);transition:background .18s,border-color .18s; text-align:center;line-height:1.2} .knopf:hover{background:var(--gruen-tief);border-color:var(--gruen-tief)} .knopf.klein{padding:8px 16px;font-size:16px;white-space:nowrap} .weit{display:none} @media(min-width:420px){.weit{display:inline}} .knopf.hell{background:transparent;color:var(--gruen)} .knopf.hell:hover{background:var(--gruen);color:var(--papier)} .knopf.gold{background:var(--gold);border-color:var(--gold);color:var(--gruen-tief)} .knopf.gold:hover{background:var(--gelb);border-color:var(--gelb)} .weit-nur{display:none} @media(min-width:900px){ .hauptnav{display:flex} .hamburger{display:none} .handymenue{display:none} .weit-nur{display:inline-block} } @media(prefers-reduced-motion:reduce){ .mega,.pfeil,.hamburger span,.handymenue summary::after{transition:none} } /* ───────── Hero ───────── */ .hero{padding:var(--raum-xl) 0 0;border-bottom:1px solid var(--linie-hell)} /* ── Der Seitenkopf atmet falsch herum ─────────────────────────────── Gemessen auf dem Handy: 40 Pixel über der Brotkrume, 1 Pixel unter den Knöpfen. Also viel Luft dort, wo eine kleine graue Zeile steht, und keine dort, wo ein bildschirmbreites Foto anschließt. Der Grund: Die Brotkrume ist ein Nebensatz, kein Auftakt — sie darf näher an den Kopf. Das Foto dagegen ist ein eigener Block und braucht eine Kante, sonst klebt es an der Schaltfläche darüber und sieht aus wie ein Fehler. Beide Werte bleiben auf dem Achterraster. */ .hero.seitenkopf{padding-top:var(--raum-m);padding-bottom:var(--raum-l)} @media(min-width:700px){ .hero.seitenkopf{padding-top:var(--raum-l);padding-bottom:var(--raum-xl)} } @media (max-width:560px){ .hero{padding-top:var(--raum-l)} } .hero .mitte{display:grid;gap:var(--raum-l);align-items:start} .hero h1{font-size:clamp(38px,8.4vw,72px);line-height:1;margin-bottom:var(--raum-s)} .hero h1 span{color:var(--gold-text)} .hero .fuehrung{font-size:clamp(19px,2.9vw,25px);max-width:26ch;line-height:1.4} /* Unterseiten: dort ist der Führungstext länger und braucht mehr Breite */ .hero.seitenkopf .fuehrung{max-width:52ch;font-size:clamp(18px,2.4vw,22px);line-height:1.5} .hero .beisatz{margin-top:var(--raum-s);font-size:16px;color:var(--grau); max-width:38ch;line-height:1.5} .tasten{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--raum-m)} @media (max-width:560px){ .tasten{flex-direction:column;align-items:stretch} .tasten .knopf{width:100%;padding-block:15px;font-size:17px} } /* ══ DER AUFTAKT ═════════════════════════════════════════════════════ Das erste Bild der Startseite. Keine Schaltflächen, kein Foto, kein Angebot — nur der Satz, für den die Firma steht, und das Zeichen dahinter. Wer weiterwill, scrollt; Kevin sitzt ohnehin unten rechts. Der Löwe liegt als ruhige Fläche hinter der Schrift. Er ist zu erkennen, ohne mit ihr um Aufmerksamkeit zu streiten — deshalb so blass. Wird er kräftiger, kämpfen zwei Dinge um denselben Blick, und keins gewinnt. */ .auftakt{position:relative;overflow:hidden; min-height:calc(100svh - 74px); display:flex;flex-direction:column;justify-content:flex-start; padding:clamp(24px,5vh,48px) 0 72px; border-bottom:1px solid var(--linie-hell)} .auftakt::before{ content:"";position:absolute;pointer-events:none; right:-14%;bottom:-4%; width:min(88vw,540px);aspect-ratio:973/1040; background:url('/bilder/loewe-gross.webp') center/contain no-repeat; opacity:.10} .auftakt > *{position:relative} .auftakt-vor{font-family:var(--schrift-text);font-weight:700; font-size:clamp(11px,3vw,13px);letter-spacing:.24em; text-transform:uppercase;color:var(--gold-text); margin:0 0 clamp(14px,3vw,20px)} .auftakt h1{font-size:clamp(42px,13vw,92px);line-height:.94;margin:0} .auftakt h1 span{display:block;color:var(--gold-text)} .auftakt-satz{margin:clamp(20px,5vw,28px) 0 0; font-size:clamp(17px,4.6vw,22px);line-height:1.4; font-weight:500;color:var(--tinte);max-width:24ch} .auftakt-klein{margin:12px 0 0;font-size:15px;line-height:1.5; color:var(--grau);max-width:34ch} /* Das Zeichen, dass es weitergeht. Kein Pfeil, der hüpft — ein Wort und ein Strich, die man wahrnimmt, ohne bedrängt zu werden. */ .auftakt-weiter{position:absolute;bottom:20px;left:0;right:0; margin-inline:auto;width:max-content; font-size:12px;letter-spacing:.2em;text-transform:uppercase; color:var(--grau);text-decoration:none} .auftakt-weiter::after{content:"";display:block;width:1px;height:22px; margin:8px auto 0; background:linear-gradient(var(--grau),transparent)} .auftakt-weiter:hover{color:var(--gruen)} @media (min-width:860px){ /* Am Rechner ist Platz: der Löwe steht ganz im Bild und darf kräftiger sein, der Satz bekommt die linke Hälfte. */ .auftakt{min-height:calc(100svh - 84px); padding:48px 0 72px;justify-content:center} .auftakt::before{right:2%;width:min(46vw,600px);opacity:.16} .auftakt h1{max-width:15ch} .auftakt-satz{max-width:26ch} .auftakt-klein{max-width:34ch} /* bündig zur Textkante, nicht am Fensterrand */ .auftakt-weiter{left:0;right:0;margin-inline:auto; width:min(100% - 40px,1100px);text-align:left} .auftakt-weiter::after{margin-inline:0} } /* Wer Bewegung abgestellt hat oder eine sehr kurze Anzeige benutzt, bekommt keinen Bildschirm voller Luft: dann reicht der Inhalt. */ @media (max-height:520px){ .auftakt{min-height:0;padding:40px 0 48px} } /* ── Der Kevin-Abschnitt ──────────────────────────────────────────── Seit der Auftakt darübersteht, hat Kevin einen eigenen Abschnitt. Am Rechner erklärt der Text links, warum der Kasten rechts da ist — ein Chatfenster ohne Anlass wirkt wie Zierrat. Am Handy rutscht der Chat unter den Text. */ .kevin-block{padding:var(--raum-xl) 0} .kevin-gitter{display:grid;gap:var(--raum-l);align-items:center} .kevin-wort h2{margin-bottom:var(--raum-s)} .kevin-wort p{font-size:17px;line-height:1.6;color:var(--grau);max-width:38ch} @media (min-width:860px){ .kevin-gitter{grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:var(--raum-xl)} } /* ── Kevin im Hero ───────────────────────────────────────── Entschieden 10.09.2026: sichtbar als Gespräch, nicht als Kasten. Sprechblasen · Vorschläge als Chips · Eingabezeile als Einladung. Die KI-Kennzeichnung steht dauerhaft im Kopf (EU-Verordnung Art. 50). */ /* Die Zeile über dem Chat. Sie führt hin, deshalb steht sie eng am Kasten und trägt kein eigenes Gewicht — der Chat ist der Blickfang, nicht sie. */ /* Überzeile und Chat sind ein Block — am Rechner die rechte Spalte. */ .hero-kevin{display:flex;flex-direction:column;min-width:0} .kevin-vor{font-size:clamp(17px,4vw,20px);line-height:1.35; margin:0 0 12px;color:var(--grau);max-width:34ch} .kevin-vor strong{display:block;color:var(--gruen);font-weight:700} .kevin{background:#FFF;color:var(--tinte);border-radius:var(--kante-l); box-shadow:0 16px 40px rgba(19,60,30,.24); display:flex;flex-direction:column;overflow:hidden} /* Kopfzeile */ .kevin-kopf{display:flex;align-items:center;gap:12px; padding:12px 16px;background:var(--gruen-tief);color:var(--papier)} /* Kevin steht in seinem Kreis und wächst oben heraus. Der Kopf über der Kante ist der ganze Trick: ein Bild im Rahmen ist ein Bild, ein Kopf über dem Rahmen ist jemand, der herschaut. Kreis und Goldring stecken im Bild selbst (freigestelltes PNG), deshalb hier kein Rahmen mehr. */ .kevin-bild{flex:none;position:relative;line-height:0;width:64px} .kevin-bild img{width:100%;height:auto;display:block} /* Der Lebenspunkt sitzt am Portrait, unten rechts — das Muster, das jeder aus Messengern kennt: da ist jemand. Der Rand in der Farbe der Kopfzeile schneidet ihn sauber aus dem Bild. */ /* Nur für Vorleseprogramme: Das Feld zeigt „KI", aber wer die Seite hört, braucht den ganzen Satz. Art. 50 der KI-Verordnung verlangt, dass die Kennzeichnung ankommt — auch bei blinden Besuchern. */ .nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} /* Der Lebenspunkt sitzt auf dem Kreisrand, unten rechts auf 45 Grad — dort, wo ihn jeder aus dem Messenger sucht. Weißer Saum, weil er auf dem hellen Kreis liegt und nicht auf dem dunklen Grund. */ .kevin-punkt{position:absolute;right:3%;bottom:3%; width:11px;height:11px;border-radius:50%; background:var(--gruen-hell); box-shadow:0 0 0 2px #FCFCFC} .kevin-wer{display:flex;flex-direction:column;min-width:0;flex:1} /* Der Name steht in der Textschrift, nicht in Bebas Neue: Bebas kennt nur Versalien, und „KEVIN" schreit wie ein Firmenschild. Ein Vorname tut das nicht — er stellt sich vor. */ .kevin-wer strong{font-family:var(--schrift-stark);font-weight:700;font-size:18px; letter-spacing:.01em;line-height:1.1;color:var(--gelb)} .kevin-lage{font-size:13px;color:var(--papier-matt);margin-top:4px} .kevin-marke{flex:none;font-size:11px;font-weight:700;letter-spacing:.14em; padding:4px 8px;border:1px solid var(--rand-hell); border-radius:var(--kante-m);color:var(--papier-matt)} /* Die Sprechblasen */ .kevin-lauf{padding:16px 16px 8px;display:flex;flex-direction:column;gap:8px} .blase{background:var(--salbei);border-radius:var(--chat-blase); border-top-left-radius:var(--chat-zipfel); padding:12px;margin:0;font-size:16px;line-height:1.45;max-width:100%} .blase b{color:var(--gruen);font-weight:700} /* ══ DIE VORSCHAU SPIELT ══════════════════════════════════════════════ Ohne Skript steht hier ein ruhiger Chat mit zwei Sätzen — und genau den liest auch Google. Mit Skript wird derselbe Kasten zur Bühne: sechs Gespräche, zufällig gewählt, eines nach dem anderen. Kein Karussell mit Punkten darunter, keine Pfeile. Es läuft, wie ein Gespräch läuft — und hält an, sobald jemand mit der Maus hineingeht. Der Kasten behält dabei seine Höhe. Nichts springt, nichts schiebt die Seite weg: der Lauf ist so hoch wie er ist, neue Nachrichten wachsen von unten herein, alte lösen sich oben auf. */ .kevin[data-spielt] .kevin-lauf{ height:214px;overflow:hidden;justify-content:flex-end;gap:10px; -webkit-mask:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 22px,#000 58px); mask:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 22px,#000 58px)} @media (min-width:900px){ .kevin[data-spielt] .kevin-lauf{height:252px} } /* Jede Blase kommt mit derselben Feder wie die Blase unten rechts — eine Handschrift, nicht zwei. */ .kevin[data-spielt] .blase, .kevin[data-spielt] .tippt{ animation:blaseauf .5s var(--feder-weich) both;transform-origin:0 100%} /* Der Kunde sitzt rechts, dunkel — das Muster kennt jeder aus seinem eigenen Messenger, es muss nicht erklärt werden. */ .blase.ich{align-self:flex-end;background:var(--gruen-tief);color:var(--papier); border-top-left-radius:var(--chat-blase); border-bottom-right-radius:var(--chat-zipfel); transform-origin:100% 100%;max-width:82%} /* Das Foto bleibt klein. Es ist der Beleg, nicht der Beitrag — und ein großes Bild schiebt die halbe Unterhaltung aus dem Kasten. */ .blase.foto{padding:4px;max-width:52%;background:var(--gruen-tief)} .blase.foto img{display:block;width:100%;height:auto;aspect-ratio:4/3; object-fit:cover;border-radius:10px} @keyframes blaseauf{ from{opacity:0;transform:translateY(16px) scale(.9)} to {opacity:1;transform:none} } /* Beim Szenenwechsel gleitet alles nach oben davon, statt zu blinken. */ .kevin-lauf[data-raeumt] .blase, .kevin-lauf[data-raeumt] .tippt{ animation:blaseweg .46s ease-in both} @keyframes blaseweg{to{opacity:0;transform:translateY(-20px) scale(.97)}} /* Die drei Punkte. Sie stehen für die Sekunde, in der jemand überlegt — deshalb sind sie kurz und nicht endlos. */ .tippt{display:flex;align-items:center;gap:5px;align-self:flex-start; padding:15px 14px;background:var(--salbei); border-radius:var(--chat-blase);border-top-left-radius:var(--chat-zipfel)} .tippt.ich{align-self:flex-end;background:var(--gruen-tief); border-top-left-radius:var(--chat-blase); border-bottom-right-radius:var(--chat-zipfel);transform-origin:100% 100%} .tippt i{width:7px;height:7px;border-radius:50%;background:var(--gruen); animation:tippen 1.15s infinite} .tippt.ich i{background:var(--papier-matt)} .tippt i:nth-child(2){animation-delay:.16s} .tippt i:nth-child(3){animation-delay:.32s} @keyframes tippen{0%,62%,100%{opacity:.26;transform:translateY(0)} 31%{opacity:1;transform:translateY(-3px)}} /* Die Zeile unter dem Namen sagt, was gerade passiert: die Uhrzeit des Gesprächs, "tippt …", wieder zurück. Sie wechselt mit einem Hauch Verzögerung, damit man den Wechsel nicht als Zucken wahrnimmt. */ .kevin-lage{transition:opacity .28s ease} .kevin-lage[data-wechselt]{opacity:0} /* Der stärkste Moment: man sieht den Satz im Eingabefeld entstehen, bevor er als Blase nach oben fliegt. Das sieht man sonst nirgends — und es sagt ohne ein Wort, dass hier wirklich jemand schreibt. */ .kevin[data-spielt] .kevin-eingabe{transition:border-color .3s,background .3s} .kevin-eingabe.schreibt{border-color:var(--gruen);background:#FFF} .kevin-eingabe.schreibt > span:first-child{color:var(--tinte)} .kevin-eingabe .strich{display:inline-block;width:1.5px;height:1.05em; margin-left:1px;vertical-align:-.18em;background:var(--gruen); animation:strich 1s steps(1) infinite} @keyframes strich{0%,50%{opacity:1}51%,100%{opacity:0}} .kevin-eingabe.schreibt .kevin-senden{background:var(--gelb); transform:scale(1.08);transition:transform .3s var(--feder-knapp)} /* Wer Bewegung abgestellt hat, bekommt den ruhigen Chat von oben — das Skript schaltet die Bühne dann gar nicht erst ein. */ /* Vorschläge */ .kevin-chips{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px 16px} /* 8 Pixel Abstand bei 31 Pixel Höhe: Wer die Chips mit dem Daumen trifft, trifft leicht den Nachbarn mit. Zwei Pixel mehr Polsterung oben und unten bringen sie auf 36 — ohne dass die Reihe umbricht. */ .kevin-chips a{font-size:13px;font-weight:700;text-decoration:none; color:var(--gruen);border:1px solid var(--gruen); border-radius:999px;padding:10px 16px;line-height:1.15; transition:background .18s,color .18s} .kevin-chips a:hover{background:var(--gruen);color:var(--papier)} /* Eingabezeile — sieht aus wie ein Feld, führt zum Formular */ .kevin-eingabe{display:flex;align-items:center;justify-content:space-between; gap:12px;margin:0 16px 16px;padding:12px; background:var(--papier); border:1px solid var(--linie-hell);border-radius:999px; color:var(--grau);text-decoration:none;font-size:15px; transition:border-color .18s,background .18s} .kevin-eingabe:hover{border-color:var(--gruen);background:#FFF} .kevin-senden{flex:none;width:32px;height:32px;border-radius:999px; background:var(--gold);color:var(--gruen-tief); display:grid;place-items:center} /* ── Das Hero-Bild. Ein Bild pro Seite mit fetchpriority — Regel 2 der Bildtafel ── */ .hero-bild{margin:var(--raum-l) 0 0;position:relative} .hero-bild picture{display:block} .hero-bild img{display:block;width:100%; height:clamp(280px,54vh,540px); object-fit:cover;object-position:center 62%} .hero-bild figcaption{max-width:var(--breite);margin:0 auto; padding:8px var(--raum-m) 0;font-size:13px;color:var(--grau)} @media(min-width:860px){ .hero .mitte{grid-template-columns:minmax(0,1.618fr) minmax(0,1fr); gap:var(--raum-xl);align-items:center} .kevin{padding:24px 24px 16px} .hero-bild img{height:clamp(300px,52vh,540px)} } /* ───────── Zahlenband ───────── */ .band{background:var(--gruen-tief);color:var(--papier);padding:var(--raum-l) 0} .band .gitter{display:grid;gap:var(--raum-m); grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .band b{font-family:var(--schrift-titel);font-size:clamp(32px,6vw,44px); color:var(--gelb);display:block;line-height:1;letter-spacing:.02em} .band span{font-size:13px;color:var(--papier-matt);display:block;margin-top:4px} /* ───────── Leistungen ───────── */ .saeulen{display:grid;gap:var(--raum-m);margin-top:var(--raum-l); grid-template-columns:repeat(auto-fit,minmax(290px,1fr))} .saeule{border:1px solid var(--linie-hell);border-radius:var(--kante-l);padding:var(--raum-m); background:#fff;transition:border-color .18s,transform .18s} .saeule:hover{border-color:var(--gruen-hell);transform:translateY(-3px)} .saeule h3{color:var(--gruen);margin-bottom:8px} .saeule p{font-size:16px;color:var(--tinte-matt);margin-bottom:12px} .saeule ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px} /* Dieselbe Rechnung wie bei den Chips: 29 Pixel hoch mit 8 Pixeln Abstand ist für einen Daumen zu dicht. 8 statt 4 Pixel Polsterung ergeben 36 — und die Kacheln wachsen dadurch nur um eine Zeile. */ .saeule li a{display:inline-block;font-size:13px;font-weight:700; text-decoration:none;color:var(--gruen);background:var(--papier-gruen); padding:10px 12px;border-radius:var(--kante-s);hyphens:none; line-height:1.2} .saeule li a:hover{background:var(--gruen);color:var(--papier)} /* ───────── Das grüne Argument ───────── */ .gruen-block{background:var(--gruen-tief);color:var(--papier)} .gruen-block h2{color:var(--papier)} .gruen-block .vor{color:var(--gelb)} .gruen-block .fuehrung{color:var(--papier-matt)} /* Sprungziele dürfen nicht unter dem Kopf verschwinden. Wer auf „Wovon der Preis abhängt" tippt, soll die Überschrift sehen, nicht den Absatz darunter. */ :target,h2[id],h3[id],section[id]{scroll-margin-top:calc(var(--kopf-hoehe,74px) + 14px)} .rechnung{display:grid;gap:var(--raum-m);margin-top:var(--raum-l); grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .posten{border-top:3px solid var(--gelb);padding-top:var(--raum-s)} .posten h3{color:var(--gelb);margin-bottom:8px;font-size:20px} .posten p{color:var(--papier-matt);font-size:16px;margin:0} /* ───────── Ablauf ───────── */ .schritte{counter-reset:s;display:grid;gap:var(--raum-m);margin-top:var(--raum-l); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .schritt{counter-increment:s;position:relative;padding-top:var(--raum-m); border-top:1px solid var(--linie-hell)} .schritt::before{content:counter(s,decimal-leading-zero); font-family:var(--schrift-titel);font-size:39px;color:var(--gold-text); line-height:.9;display:block;margin-bottom:8px} .schritt h3{color:var(--gruen);margin-bottom:8px;font-size:20px} .schritt p{font-size:16px;color:var(--tinte-matt);margin:0} /* ───────── Der Mann ───────── */ .mann{background:var(--papier-gruen)} .mann .mitte{display:grid;gap:var(--raum-l);align-items:center} /* ── Der Grundsatz ────────────────────────────────────────────────── Hier stand bis zum 17.09.2026 ein Zitat mit Erhans Namen darunter — auf 22 Seiten, und keinen dieser Sätze hatte er je gesagt. Sie waren beim Bau entstanden. Der Wortlaut ist geblieben, die Zuschreibung nicht. Aus der Rede einer Person wurde der Grundsatz eines Betriebs: keine Anführungszeichen mehr (es ist keine Rede), kein Name (es ist keine Person), dafür die Überschrift „So arbeiten wir". Gestalterisch bleibt das Gewicht erhalten — die Aussage soll so stark stehen wie vorher, nur eben als das, was sie ist. */ .grundsatz{font-family:var(--schrift-titel);font-size:clamp(26px,5.4vw,40px); line-height:1.06;letter-spacing:.01em;color:var(--gruen); margin:0;hyphens:manual} .grundsatz-quelle{font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--gold-text); margin-top:var(--raum-s)} .gruen-block .grundsatz{color:var(--papier)} .gruen-block .grundsatz-quelle{color:var(--gelb)} .zitat{font-family:var(--schrift-titel);font-size:clamp(26px,5.4vw,40px); line-height:1.1;color:var(--gruen);hyphens:none} .zitat + p{font-size:13px;color:var(--tinte-matt);margin-top:var(--raum-s)} @media(min-width:820px){.mann .mitte{grid-template-columns:1fr 1fr}} /* ───────── Fragen ───────── */ .frage{border-bottom:1px solid var(--linie-hell)} .frage summary{cursor:pointer;padding:var(--raum-s) 0;font-weight:700;font-size:16px; color:var(--gruen);list-style:none;display:flex;gap:12px; align-items:flex-start} .frage summary::-webkit-details-marker{display:none} .frage summary::before{content:"+";font-family:var(--schrift-titel);font-size:25px; color:var(--gold-text);line-height:.9;flex:none} .frage[open] summary::before{content:"–"} .frage p{padding:0 0 var(--raum-s) 32px;margin:0;font-size:16px;color:var(--tinte-matt)} .ortsliste{list-style:none;padding:0;margin:0 0 var(--raum-m);max-width:60ch} .ortsliste li{padding:12px 0 12px 16px;border-bottom:1px solid var(--linie-hell); font-size:16px;position:relative} .ortsliste li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:3px; background:var(--gold)} .ortsliste b{color:var(--gruen)} /* Auf dunklem Grund war das Grün auf Grün — praktisch unlesbar (11.09.2026). */ .gruen-block .ortsliste b{color:var(--gold)} .gruen-block .ortsliste li{border-bottom-color:var(--linie-dunkel)} /* Weitere Farben, die auf dunklem Grund untergingen (geprüft 11.09.2026): Quellenzeile unter Zitaten 2,50:1 und Links, die sich gar nicht vom Fließtext abhoben. Beides jetzt über 4,5:1. */ .gruen-block .einschub span{color:var(--papier-matt)} /* Drei Stellen fielen auf dem dunklen Grün durch: Der Text im Einschub stand in Tinte auf Dunkelgrün — 1,35 zu 1, praktisch unsichtbar. Die Schrittbeschreibung und die Nummer in der Bildabfolge ebenso. An die kleine Namenszeile darunter hatte jemand gedacht, an den Haupttext darüber nicht. Gefunden am 13.09.2026, nötig sind 4,5 zu 1. */ .gruen-block .einschub{color:var(--papier)} .gruen-block .schritt p{color:var(--papier-matt)} .gruen-block p a,.gruen-block li a{color:var(--gelb); text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(241,209,30,.45)} .gruen-block p a:hover,.gruen-block li a:hover{text-decoration-color:var(--gelb)} #gebiet h3{margin-top:var(--raum-l);margin-bottom:var(--raum-xs)} /* ───────── Formular ───────── */ .anfrage{background:var(--gruen-tief);color:var(--papier)} .anfrage h1,.anfrage h2{color:var(--papier)} .anfrage h1{font-size:clamp(34px,8vw,54px);margin-bottom:var(--raum-s)} .anfrage .mitte.schmal form{max-width:none} .anfrage input,.anfrage select,.anfrage textarea{max-width:100%} .anfrage .vor{color:var(--gelb)} .anfrage .fuehrung{color:var(--papier-matt)} form{display:grid;gap:var(--raum-s);margin-top:var(--raum-m);max-width:660px; grid-template-columns:minmax(0,1fr)} /* minmax(0,…) statt 1fr: sonst schrumpft die Spalte nicht unter die intrinsische Breite von textarea/input (≈400 px) */ .feldpaar{display:grid;gap:var(--raum-s);grid-template-columns:minmax(0,1fr)} label{display:block;font-size:13px;font-weight:700;margin-bottom:4px; color:var(--papier);hyphens:none} input,select,textarea{width:100%;min-width:0;padding:12px 16px;border-radius:var(--kante-m); border:1px solid var(--rand-hell);background:rgba(250,249,245,.07); color:var(--papier);font:inherit;font-size:16px} /* Der Platzhalter ist Text und braucht 4,5:1 — das Grau, das Browser voreingestellt liefern, kommt auf 2,7 und ist damit zu blass. */ input::placeholder,textarea::placeholder{color:var(--auf-dunkel);opacity:1} input:focus,select:focus,textarea:focus{outline:2px solid var(--gelb); outline-offset:1px;border-color:var(--gelb)} select option{background:var(--gruen-tief);color:var(--papier)} .hinweis{font-size:13px;color:var(--papier-matt);margin:0} @media(min-width:620px){.feldpaar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} /* ── Das kurze Formular auf der Startseite ─────────────────────────── Drei Felder, und alle drei passen mit Knopf auf einen Handybildschirm. Wer scrollen muss, um den Absenden-Knopf zu finden, hört vorher auf. Die Zeilen sitzen enger als auf der eigenen Anfrageseite: Dort hat der Besucher sich bereits entschieden und nimmt sich Zeit. Hier ist er noch am Lesen, und das Formular muss ihn in einem Blick überzeugen. */ .kurzform{gap:12px;margin-top:20px} .kurzform label{font-size:12.5px;letter-spacing:.02em;margin-bottom:3px} .kurzform textarea{min-height:88px;line-height:1.45;resize:vertical} .kurzform input,.kurzform textarea{padding:13px 15px} .kurzform .feldpaar{gap:12px} .kurzform .knopf{width:100%;margin-top:2px;padding-block:16px;font-size:17px} .kurzform .hinweis{margin-top:2px;line-height:1.5} .kurzform .hinweis a{color:var(--gelb);text-decoration:underline; text-underline-offset:2px} /* Nebeneinander schon ab 420 px: Name und Telefon sind beide kurz, und zwei Zeilen weniger sind auf einem Handy zwei Zeilen weniger. */ @media(min-width:420px){ .kurzform .feldpaar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } /* Auf sehr kleinen Geräten Luft sparen, ohne dass es gedrängt wirkt. */ @media(max-width:380px){ .kurzform{gap:10px} .kurzform textarea{min-height:76px} } /* ───────── Fuß ───────── */ .fuss{background:var(--gruen);color:var(--papier);padding:var(--raum-l) 0 var(--raum-m)} .fuss .gitter{display:grid;gap:var(--raum-l); grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .fuss h2{font-family:var(--schrift-titel);font-size:20px;letter-spacing:.05em; color:var(--gelb);margin:0 0 12px} /* Die Fußzeile ist die längste Linkliste der Seite, und auf dem Handy standen die Zeilen 34 Pixel hoch dicht untereinander — schmal genug, dass der Daumen den Nachbarn erwischt. Mit 12 Pixeln oben und unten wird jede Zeile 44 hoch, das empfohlene Maß für Fingerziele. */ .fuss a{color:var(--papier-matt);text-decoration:none;font-size:16px; display:block;padding:12px 0;line-height:1.25} .fuss a:hover{color:var(--gelb)} /* Bezirke: elf Ziele. Spalten so breit, dass „Charlottenburg & Wilmersdorf" nicht umbricht — auf dem Handy eine Spalte, Fingerziele 44 hoch. */ .fuss-bezirke{border-top:1px solid var(--linie-dunkel);margin-top:var(--raum-l); padding-top:var(--raum-m)} .fuss-bezirke div{display:grid;column-gap:var(--raum-m); grid-template-columns:repeat(auto-fill,minmax(250px,1fr))} .fuss-bezirke a{font-size:15px;hyphens:none} .fuss img{height:74px;width:auto;margin-bottom:8px} .fussmarke{font-family:var(--schrift-titel);font-size:31px;letter-spacing:.05em; color:var(--papier);margin:0 0 12px;line-height:1;hyphens:none} .fussmarke span{display:block;font-family:var(--schrift-text);font-size:11px; font-weight:700;letter-spacing:.16em;color:var(--gelb); text-transform:uppercase;margin-top:4px} .fuss .schluss{border-top:1px solid var(--linie-dunkel);margin-top:var(--raum-l); padding-top:var(--raum-s);font-size:13px;color:var(--papier-matt); display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between} .luecke{background:var(--gelb);color:var(--gruen-tief);font-weight:700; padding:1px 8px;border-radius:var(--kante-s);font-size:13px;hyphens:none} /* ───────── Rechtsseiten (Impressum, Datenschutz) ───────── */ .recht{padding:var(--raum-xl) 0} .mitte.schmal{width:min(100% - 40px, 720px)} .recht h1{font-size:clamp(34px,8vw,54px);margin-bottom:var(--raum-m)} .recht h2{font-size:clamp(21px,4vw,27px);margin:var(--raum-l) 0 var(--raum-xs); padding-top:var(--raum-s);border-top:1px solid var(--linie-hell)} .recht p{font-size:16px;line-height:1.6;margin:0 0 var(--raum-s);max-width:66ch} .recht .fuehrung{background:var(--papier-gruen);padding:var(--raum-s) var(--raum-m); border-left:4px solid var(--gruen-hell);border-radius:0 var(--kante-m) var(--kante-m) 0; font-size:16px;max-width:none} .recht a{color:var(--gruen);text-decoration:underline;text-underline-offset:3px} .recht a:hover{color:var(--gruen-hell)} .anschrift{background:#fff;border:1px solid var(--linie-hell);border-radius:var(--kante-l); padding:var(--raum-s) var(--raum-m);line-height:1.6;display:inline-block} .paar{display:grid;grid-template-columns:auto 1fr;gap:8px var(--raum-m);margin:0 0 var(--raum-s)} .paar dt{font-weight:700;color:var(--gruen)} .paar dd{margin:0} .luecke{background:var(--gelb);color:var(--gruen-tief);padding:12px 16px; border-radius:var(--kante-m);font-size:16px;line-height:1.6;font-weight:500} .luecke em{display:inline-block;margin-top:4px;font-weight:700;font-style:normal} .stand{margin-top:var(--raum-l);padding-top:var(--raum-s); border-top:1px solid var(--linie-hell);font-size:13px;color:var(--grau)} /* ───────── Formularseite ───────── */ .schritte-anzeige{display:flex;gap:4px;margin-bottom:var(--raum-m); list-style:none;padding:0;font-size:13px;font-weight:700} .schritte-anzeige li{flex:1;padding:8px 4px;text-align:center;border-radius:var(--kante-m); background:rgba(250,249,245,.10);color:var(--papier-matt); border:1px solid var(--rand-hell)} .schritte-anzeige li[aria-current]{background:var(--gelb);color:var(--gruen-tief); border-color:var(--gelb)} .hilfe{font-size:13px;color:var(--papier-matt);margin:4px 0 0} .bildwahl{border:2px dashed var(--rand-hell);border-radius:var(--kante-l); padding:var(--raum-m);text-align:center;background:rgba(250,249,245,.05)} .bildwahl input[type=file]{width:auto;border:0;background:none;padding:0} /* Versteckte Dateiauswahl bleibt versteckt — sonst schob sie die Seite auf dem Handy 99 px seitlich (gemessen 04.10.2026). */ .bildwahl input.nur-lesegeraet{width:1px;height:1px} .vorschau{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px;margin-top:var(--raum-s)} .vorschau figure{position:relative;margin:0} .vorschau img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--kante-m)} .vorschau button{position:absolute;top:-7px;right:-7px;width:26px;height:26px; border-radius:50%;border:0;background:var(--gruen-tief); color:var(--papier);font-size:16px;cursor:pointer;line-height:1} .fehlerliste{background:var(--gelb);color:var(--gruen-tief);padding:12px 16px; border-radius:var(--kante-m);margin-bottom:var(--raum-s);font-weight:500} .fehlerliste ul{margin:4px 0 0;padding-left:16px} .fehlerliste a{color:var(--gruen-tief);font-weight:700} .geschafft{background:var(--papier-gruen);border-left:4px solid var(--gruen-hell); padding:var(--raum-m);border-radius:0 var(--kante-m) var(--kante-m) 0} .geschafft h2{color:var(--gruen);margin-top:0} .honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ───────── Unterseiten ───────── */ .seitenkopf{padding-top:var(--raum-l)} /* Unterseiten haben kein Hero-Bild — das zweispaltige Raster der Startseite darf hier nicht greifen, sonst rutscht die Überschrift nach rechts. */ .hero.seitenkopf .mitte{display:block} .brotkrume{font-size:13px;color:var(--grau);margin-bottom:var(--raum-s);hyphens:none} .brotkrume a{color:var(--gruen);text-decoration:none} .brotkrume a:hover{text-decoration:underline} .brotkrume span{margin:0 4px} .seitenkopf h1{font-size:clamp(36px,9vw,64px);line-height:1;margin-bottom:var(--raum-s)} .seitenkopf h1 span{color:var(--gold-text)} h3{margin-top:var(--raum-m);margin-bottom:var(--raum-xs);color:var(--gruen)} .gruen-block h3{color:var(--gelb)} section .mitte.schmal h2{margin-top:0} .verwandt{background:var(--papier-gruen);padding:var(--raum-l) 0} .verwandt h2{font-size:clamp(24px,5vw,32px);margin-bottom:0} .verwandt .saeule{background:var(--papier)} .verwandt .saeule h3{margin-top:0;font-size:20px} .verwandt .saeule h3 a{color:var(--gruen);text-decoration:none} .verwandt .saeule h3 a:hover{text-decoration:underline} .verwandt .saeule p{margin-bottom:0} .einschub{border-left:3px solid var(--gold);padding:4px 0 4px var(--raum-s); font-size:16px;line-height:1.5;color:var(--tinte);margin:var(--raum-m) 0} /* Die Zeile steht jetzt ÜBER dem Satz und nennt keine Person mehr, sondern sagt, was für ein Satz folgt. */ .einschub span{display:block;font-size:11px;font-weight:700; letter-spacing:.16em;text-transform:uppercase; color:var(--gold-text);margin:0 0 8px} .gruen-block .einschub span{color:var(--gelb)} /* ───────── Fotos ───────── */ figure{margin:var(--raum-m) 0} figure img{width:100%;border-radius:var(--kante-l);display:block} .hero-bild img{border-radius:0} figcaption{font-size:13px;color:var(--grau);margin-top:8px;line-height:1.5} .gruen-block figcaption{color:var(--papier-matt)} .bildpaar{display:grid;gap:var(--raum-s);grid-template-columns:minmax(0,1fr); margin:var(--raum-m) 0} @media(min-width:700px){.bildpaar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .bildpaar figure{margin:0} .bildband{display:grid;gap:var(--raum-s);margin-top:var(--raum-m); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .bildband figure{margin:0} .bildband img{aspect-ratio:4/3;object-fit:cover} .breitbild{margin:var(--raum-l) 0} .breitbild img{max-height:520px;object-fit:cover;object-position:center} .belege{background:var(--papier-gruen);padding:var(--raum-xl) 0} .belege .fuehrung{margin-bottom:0} /* ── Vorher/Nachher ── */ .vergleich{margin-top:var(--raum-xl)} .vergleich h3{font-size:clamp(22px,3.4vw,30px);margin-bottom:var(--raum-m)} .vergleich-paar{display:grid;gap:var(--raum-m); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .vergleich-paar figure{margin:0} .vergleich-paar img{width:100%;height:auto;display:block;border-radius:var(--kante-l)} .vergleich-paar figcaption{margin-top:8px;font-size:13px;color:var(--grau)} .vergleich-paar figcaption b{color:var(--gruen);font-family:var(--schrift-titel); font-size:20px;letter-spacing:.04em;margin-right:4px} /* ══ BILDER AUF LEISTUNGSSEITEN ═══════════════════════════════ Eingebaut 10.09.2026 mit Erhans eigenen Projektfotos. Regeltafel: ein Hero je Seite, alles andere lazy, immer width/height. */ .seitenbild{margin:0;background:var(--gruen-tief)} .seitenbild picture{display:block} .seitenbild img{display:block;width:100%; height:clamp(260px,52vh,520px); /* feste Höhe: sonst greift object-fit bei hochkanten Bildern nicht */ object-fit:cover;object-position:center 45%} .seitenbild figcaption{max-width:var(--breite);margin:0 auto; padding:12px var(--raum-m) 12px; font-size:13px;color:var(--papier-matt)} .textbild{margin:var(--raum-l) 0} .textbild picture{display:block} .textbild img{width:100%;height:auto;display:block;border-radius:var(--kante-l)} .textbild figcaption{margin-top:8px;font-size:13px;color:var(--grau);line-height:1.5} .gruen-block .textbild figcaption{color:var(--papier-matt)} .bildpaar{display:grid;gap:var(--raum-m);margin:var(--raum-l) 0; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .bildpaar figure{margin:0} .bildpaar img{width:100%;height:auto;display:block;border-radius:var(--kante-l)} .bildpaar figcaption{margin-top:8px;font-size:13px;color:var(--grau);line-height:1.45} .bildpaar figcaption b{color:var(--gruen);font-family:var(--schrift-titel); font-size:16px;letter-spacing:.05em;margin-right:8px} .gruen-block .bildpaar figcaption{color:var(--papier-matt)} .gruen-block .bildpaar figcaption b{color:var(--gelb)} /* Abfolge: mehrere Bilder als Schritt-für-Schritt-Kette */ .abfolge{display:grid;gap:12px;margin:var(--raum-l) 0; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .abfolge figure{margin:0;position:relative} .abfolge img{width:100%;height:auto;display:block;border-radius:var(--kante-l); aspect-ratio:3/4;object-fit:cover} .abfolge figcaption{margin-top:8px;font-size:13px;color:var(--grau);line-height:1.45} .abfolge .schrittnr{position:absolute;top:9px;left:9px; background:var(--gold);color:var(--gruen-tief); font-family:var(--schrift-titel);font-size:16px; width:30px;height:30px;display:grid;place-items:center; border-radius:50%;line-height:1} .gruen-block .abfolge figcaption{color:var(--papier-matt)} /* Auf dunklem Grund bleibt das Marken-Gold: dort trägt es 8,2:1. */ .dunkel .vor,.gruen-block .vor,.band .vor,.anfrage .vor, .gruen-block .schritt::before,.gruen-block .frage summary::before{color:var(--gelb)} .hero h1 span,.seitenkopf h1 span{color:var(--gold-text)} /* Datei-Auswahl: der native Knopf sagt „Choose Files" auf Englisch. Deshalb versteckt (aber für Tastatur und Screenreader erreichbar) und ein eigenes Label als Auslöser. Gefunden 10.09.2026. */ .nur-lesegeraet{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .bildwahl-titel{display:block;font-weight:700;margin-bottom:8px} .knopf.dateiwahl{display:inline-block;cursor:pointer;margin-top:4px; background:transparent;color:var(--gelb);border-color:var(--gelb)} .knopf.dateiwahl:hover{background:var(--gelb);color:var(--gruen-tief); border-color:var(--gelb)} .nur-lesegeraet:focus-visible + .dateiwahl{outline:3px solid var(--gold);outline-offset:2px} /* ── Kanten ────────────────────────────────────────────────────── Bis zum 10.09.2026 saß überall dieselbe harte Kante von 3 px. Das las sich als Formular, nicht als Website. Jetzt drei Stufen, und darüber die Superellipse, wo der Browser sie zeichnen kann. */ :root{ --salbei: #D5E0D3; /* Kevins Sprechblasen — helles Marken-Grün. Weiße Blasen auf hellem Grund lagen bei 1,05:1, also praktisch unsichtbar. Salbei steht bei 1,36:1 gegen Weiß und trägt Text mit 12,29:1. */ --kante-s: 8px; /* Etiketten, kleine Marken */ --kante-m: 12px; /* Knöpfe, Felder, Karten */ --kante-l: 20px; /* Bilder, große Flächen */ } :root{ --chat-fenster: 24px; /* Fensterkante und Kopfzeile */ --chat-blase: 20px; /* Sprechblasen */ --chat-feld: 999px; /* Eingabefeld, Knöpfe */ --chat-zipfel: 6px; /* die Ecke, die zum Sprecher zeigt */ } /* Chromium zeichnet seit Version 139 eine echte Superellipse statt eines Kreisbogens. Wo das geht, wirkt dieselbe Rundung weicher; wo nicht, bleibt es ein normaler Radius. Kein Bruch, nur ein Aufschlag. */ @supports (corner-shape: squircle){ .knopf,.saeule,.kevin,figure img,.textbild img,.bildpaar img,.abfolge img, .vergleich-paar img,.anschrift,.bildwahl,input,select,textarea, #kevinchat,.chat-lauf .von-kevin,.chat-lauf .von-mir,.chat-fuss textarea, .chat-senden,.chat-chips button,.chat-tippt{corner-shape:squircle} } /* Die Nummer im Fußbereich. Sie steht auf jeder Seite — das ist die Stelle, an der Google, Verzeichnisse und Besucher dieselbe Angabe finden müssen. Am Handy ist sie ein Anruf, am Rechner nur Text. */ .fuss-tel{display:inline-block;margin-top:6px;color:var(--gelb); font-weight:700;text-decoration:none; font-variant-numeric:tabular-nums;letter-spacing:.01em} .fuss-tel:hover,.fuss-tel:focus-visible{text-decoration:underline} /* ══ KEVIN — Blase und Vollbild-Chat ══════════════════════════════════ Am Handy soll es ein Chat sein, kein Kasten auf einer Webseite. Deshalb Vollbild: Kopfzeile, Verlauf, Eingabe über der Tastatur. Die Seite dahinter bleibt stehen und wartet an derselben Stelle. */ /* ── die Blase, unten rechts auf jeder Seite ──────────────────────── Zwei Federn, aus der Physik gerechnet statt nach Gefühl geraten: ein gedämpfter Schwinger (Masse 1, Steifigkeit 180), abgetastet in 24 Stützstellen und dem Browser als linear() übergeben. Das ist der Unterschied zwischen "etwas bewegt sich" und "etwas hat Gewicht". */ :root{ --feder-weich:linear(0, .0826, .2754, .5082, .7305, .9122, 1.0403, 1.115, 1.1446, 1.141, 1.1172, 1.0841, 1.0504, 1.0214, .9998, .9862, .9797, .9787, .9814, .9859, .9909, .9955, .9991, 1.0015, 1.0027); --feder-knapp:linear(0, .0397, .1364, .2625, .3982, .53, .6495, .7524, .8368, .9032, .9531, .9886, 1.0123, 1.0266, 1.0339, 1.036, 1.0347, 1.0313, 1.0268, 1.0219, 1.0172, 1.0128, 1.0091, 1.006, 1.0036); } /* Ein Winkel, den der Browser wirklich interpolieren kann. Ohne diese Zeile steht jeder conic-gradient still, egal was die Animation sagt. */ @property --saum{syntax:"";inherits:false;initial-value:0deg} .kevin-blase{position:fixed;right:16px;bottom:16px;z-index:60; width:60px;height:60px;padding:0;border:0;cursor:pointer; border-radius:50%;background:var(--gruen-tief); box-shadow:0 6px 18px rgba(19,60,30,.30); display:grid;place-items:center; opacity:0;transform:translateY(14px) scale(.82); transition:opacity .3s ease, transform .56s var(--feder-weich), box-shadow .3s ease} /* ── Kevin lebt ────────────────────────────────────────────────────── Zwei Dinge unterscheiden etwas Lebendiges von einem Aufkleber: Es atmet, und es hat Gewicht. Beides sitzt in einer einzigen Größe, die das Skript fortschreibt — Atem und Nachschwingen addieren sich darin, statt sich gegenseitig zu überschreiben. Der Atem ist knapp über der Wahrnehmungsschwelle (gut ein Pixel in fünfeinhalb Sekunden). Man sieht ihn nicht, man merkt nur, dass da jemand ist. Das Nachschwingen kommt nur beim Scrollen: Die Blase bleibt einen Lidschlag zurück und holt auf — dasselbe, was ein Anhänger hinter einem Wagen tut. Im Stillstand ist alles ruhig. */ .kevin-blase[data-da="ja"]{ opacity:1; transform:translate3d(0, calc(var(--atem,0px) + var(--schwung,0px)), 0) rotate(var(--neigung,0deg))} .kevin-blase{transform-origin:50% -18px} /* der Haken sitzt über ihm */ .kevin-blase img{width:60px;height:60px;display:block;border-radius:50%; object-fit:cover;object-position:50% 18%} /* ── Der Punkt: ein Zustand, keine Werbung ─────────────────────────── Ein blinkender Punkt bittet um Aufmerksamkeit. Ein leuchtender sagt nur: ich bin da. Deshalb blinkt hier nichts — der Punkt bekommt stattdessen Tiefe: heller Kern oben links, satterer Rand unten, ein feiner Lichtpunkt darauf. Er sieht aus wie eine Leuchtdiode hinter Glas, und genau das ist der Unterschied zwischen einem Aufkleber und etwas, das an ist. */ .kevin-blase .kevin-punkt{ background:radial-gradient(circle at 34% 30%, #7CE08F 0%, var(--gruen-hell,#3E9B4F) 52%, #1F7A32 100%); /* Kein harter Ring. Der Punkt setzt sich durch sein eigenes Licht ab, nicht durch einen gezogenen Rand — genau das trennt edel von aufgeklebt. Der Schein ist grün und weich, er umreißt nichts. */ box-shadow:0 0 8px 2px rgba(62,155,79,.60), 0 1px 3px rgba(12,40,20,.30)} .kevin-blase .kevin-punkt::after{ content:"";position:absolute;left:24%;top:20%;width:30%;height:26%; border-radius:50%;background:rgba(255,255,255,.72); filter:blur(.4px);z-index:2} /* ── Der Puls ──────────────────────────────────────────────────────── Eine Welle läuft aus dem Punkt heraus und verweht — wie ein Funkfeuer, nicht wie ein Blinker. Der Unterschied liegt in der Kurve: Sie geht weich los, wird nach außen hin schnell und verschwindet, statt hart an- und auszugehen. Und sie kommt nur alle viereinhalb Sekunden, mit einer langen Ruhe dazwischen. */ .kevin-blase .kevin-punkt::before{ content:"";position:absolute;inset:0;border-radius:50%; background:var(--gruen-hell,#3E9B4F); animation:kevinfunk 4.5s cubic-bezier(.22,.61,.36,1) infinite} @keyframes kevinfunk{ 0% {transform:scale(1); opacity:.85} 60%,100% {transform:scale(2.7); opacity:0} } .kevin-blase .kevin-punkt{right:2px;bottom:2px;width:13px;height:13px} /* ── der Lichtsaum ────────────────────────────────────────────────── Ein Lichtpunkt läuft einmal um Kevin herum und ist wieder weg. Nichts wächst, nichts wackelt, nichts wiederholt sich im Takt. Man nimmt es aus dem Augenwinkel wahr und wird trotzdem in Ruhe gelassen — genau das kann der alte Puls-Ring nicht, der drei Mal gegen die Aufmerksamkeit des Lesers anklopft. */ .kevin-blase::after{ content:"";position:absolute;inset:-7px;border-radius:50%; pointer-events:none;opacity:0; background:conic-gradient(from var(--saum), transparent 0deg 250deg, rgba(221,166,11,.35) 300deg, var(--gold) 336deg, #FFFBEA 353deg, var(--gelb) 358deg, transparent 360deg); -webkit-mask:radial-gradient(closest-side,transparent 82%,#000 89%); mask:radial-gradient(closest-side,transparent 82%,#000 89%); filter:drop-shadow(0 0 5px rgba(241,209,30,.75))} .kevin-blase[data-saum="ja"]::after{animation:kevinsaum 1.15s ease-out} /* ── Der Schimmer ──────────────────────────────────────────────────── Nicht ein Ring, der um die Blase kreist — das zählt man mit, und alles, was man mitzählen kann, wird nach der dritten Runde lästig. Stattdessen Licht, das über die Kante wandert: weich, unscharf, ohne harte Spitze. Zwei Schichten laufen gegeneinander, die eine in 19, die andere in 27 Sekunden. Weil sich die beiden Zeiten nicht teilen, ergibt sich nie dasselbe Bild zweimal — es gibt keinen Takt, den das Auge greifen kann. Genau daran erkennt man den Unterschied zwischen einem Effekt und einer Oberfläche, die lebt. */ @property --welle{syntax:"";inherits:false;initial-value:0deg} @property --gegen{syntax:"";inherits:false;initial-value:0deg} .kevin-blase::before{ content:"";position:absolute;inset:-8px;border-radius:50%; pointer-events:none;z-index:-1; /* Gold in Apples Lesart: Champagner (#F9E5C9), nicht Messing. Der Lichtkern ist fast weiß und nur warm getönt — echtes Licht ist nie satt in der Mitte, nur an den Rändern. Von dort läuft es über #EFD08A in unser #DDA60B aus. Eine Familie, drei Helligkeiten, kein zweiter Farbton, der dagegenhält. */ background: conic-gradient(from var(--welle), transparent 0deg, rgba(221,166,11,.00) 46deg, rgba(221,166,11,.34) 104deg, rgba(249,229,201,.62) 134deg, rgba(255,248,231,.80) 148deg, rgba(239,208,138,.44) 168deg, rgba(221,166,11,.18) 196deg, transparent 252deg, transparent 360deg), conic-gradient(from var(--gegen), transparent 0deg, rgba(239,208,138,.00) 64deg, rgba(239,208,138,.30) 132deg, rgba(255,244,214,.46) 160deg, rgba(221,166,11,.20) 198deg, transparent 266deg, transparent 360deg); filter:blur(7px); opacity:.9; animation:kevinwelle 19s linear infinite, kevingegen 27s linear infinite} @keyframes kevinwelle{from{--welle:0deg} to{--welle:360deg}} @keyframes kevingegen{from{--gegen:360deg} to{--gegen:0deg}} @keyframes kevinsaum{ from{--saum:0deg; opacity:0} 14% {opacity:1} 86% {opacity:1} to {--saum:360deg;opacity:0} } /* Anfassen: einmal kurz anheben, mit der knappen Feder. */ @media (hover:hover){ .kevin-blase:hover{transform:translate3d(0,-3px,0) scale(1.06); transition:transform .4s var(--feder-knapp), box-shadow .25s ease; box-shadow:0 12px 28px rgba(19,60,30,.38)} } .kevin-blase:active{transform:translate3d(0,0,0) scale(.93); transition:transform .09s ease} /* Wer Bewegung abgeschaltet hat, bekommt einen ruhenden Kevin. */ @media (prefers-reduced-motion:reduce){ .kevin-blase[data-da="ja"]{transform:none} .kevin-blase::before{animation:none;opacity:.5} .kevin-blase .kevin-punkt::before{animation:none;opacity:0} } .kevin-blase:focus-visible{outline:3px solid var(--gold);outline-offset:3px} /* ── Kevins Gesicht wandert ───────────────────────────────────────── Beim Öffnen springt kein Fenster auf. Dasselbe Gesicht, das eben noch unten rechts saß, gleitet in die Kopfzeile des Chats hinüber — der Browser rechnet den Weg selbst aus, weil beide Bilder kurz denselben Namen tragen. Der Name wird im Skript umgehängt, nie doppelt vergeben. Wer das nicht kann, sieht schlicht das Fenster: kein Bruch, nur weniger Zauber. */ ::view-transition-group(kevingesicht){ animation-duration:.44s;animation-timing-function:var(--feder-knapp)} ::view-transition-old(kevingesicht), ::view-transition-new(kevingesicht){ height:100%;object-fit:cover;border-radius:50%} /* ── das Vollbild ── */ #kevinchat{width:100%;max-width:none;height:100dvh;max-height:none; margin:0;padding:0;border:0;background:#FFF; color:var(--tinte);overflow:hidden} #kevinchat::backdrop{background:rgba(19,60,30,.5)} .chat-innen{display:flex;flex-direction:column;height:100%} .chat-kopf{flex:none;display:flex;align-items:center;gap:12px; padding:8px 12px;background:var(--gruen-tief);color:var(--papier); padding-top:max(8px,env(safe-area-inset-top,0px))} .chat-zurueck{flex:none;width:40px;height:40px;border:0;padding:0;cursor:pointer; background:none;color:var(--papier);border-radius:var(--kante-m); display:grid;place-items:center} .chat-zurueck:hover{background:rgba(250,249,245,.12)} .chat-kopf .kevin-bild{width:44px} .chat-kopf .kevin-punkt{width:10px;height:10px} .chat-wer{display:flex;flex-direction:column;flex:1;min-width:0} .chat-wer strong{font-family:var(--schrift-stark);font-weight:700;font-size:17px; line-height:1.1;color:var(--gelb)} .chat-wer span{font-size:12px;color:var(--papier-matt);margin-top:2px} /* ── der Verlauf ── */ .chat-lauf{flex:1;overflow-y:auto;overscroll-behavior:contain; padding:16px 16px 8px;display:flex;flex-direction:column;gap:8px; background:#FFF} /* Nachrichten kleben unten am Eingabefeld, wie in jedem Messenger. Über margin-top:auto statt justify-content, sonst schneidet der Browser bei langen Gesprächen oben ab. */ .chat-lauf > *:first-child{margin-top:auto} .chat-lauf:focus{outline:none} .chat-lauf .von-kevin,.chat-lauf .von-mir{max-width:82%;padding:12px; font-size:16px;line-height:1.45;border-radius:var(--chat-blase)} .chat-lauf .von-kevin{align-self:flex-start;background:var(--salbei); border-top-left-radius:var(--chat-zipfel)} .chat-lauf .von-mir{align-self:flex-end;background:var(--gruen);color:var(--papier); border-top-right-radius:var(--chat-zipfel)} .chat-lauf b{color:var(--gruen)} .chat-lauf .von-mir b{color:var(--gelb)} .chat-tag{align-self:center;font-size:12px;color:var(--grau); padding:4px 0 8px} /* Kevin denkt nach — drei Punkte, damit die Pause erklärt ist */ .chat-tippt{align-self:flex-start;display:flex;gap:4px;padding:12px; background:var(--salbei);border-radius:var(--chat-blase); border-top-left-radius:var(--chat-zipfel)} .chat-tippt i{width:7px;height:7px;border-radius:50%;background:var(--gruen); animation:kevintippt 1.2s infinite} .chat-tippt i:nth-child(2){animation-delay:.15s} .chat-tippt i:nth-child(3){animation-delay:.3s} @keyframes kevintippt{0%,60%,100%{opacity:.28}30%{opacity:1}} /* ── die Vorschläge ── */ .chat-chips{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px} .chat-chips{background:#FFF} .chat-chips button{font-family:var(--schrift-text);font-size:14px;font-weight:700; cursor:pointer;color:var(--gruen);background:#FFF; border:1px solid var(--gruen);border-radius:999px;padding:8px 16px} .chat-chips button:hover{background:var(--gruen);color:var(--papier)} /* ── die Eingabe ── */ .chat-fuss{flex:none;display:flex;gap:8px;align-items:flex-end; padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px)); background:#FFF;border-top:1px solid var(--linie-hell)} .chat-fuss textarea{flex:1;font-family:var(--schrift-text);font-size:16px; line-height:1.4;padding:12px;max-height:120px;resize:none; color:var(--tinte);background:var(--papier); border:1px solid var(--linie-hell);border-radius:var(--chat-feld)} .chat-fuss textarea:focus{outline:2px solid var(--gruen);outline-offset:1px} .chat-senden{flex:none;width:44px;height:44px;border:0;cursor:pointer; border-radius:var(--chat-feld);background:var(--gold);color:var(--gruen-tief); display:grid;place-items:center} .chat-senden:hover{background:var(--gelb)} .chat-senden:disabled{opacity:.45;cursor:default} /* Solange der Chat offen ist, hat die Blase nichts zu suchen — sonst lugt sie am Rechner hinter dem Fenster hervor. */ body:has(#kevinchat[open]) .kevin-blase{opacity:0;pointer-events:none} /* Der Pfeil zurück gehört aufs Handy. Am Rechner ist es ein Fenster, das man schließt — dort steht ein Kreuz. */ .chat-zurueck .fuer-rechner{display:none} /* Auf dem Rechner ist Vollbild zu viel — dort ein Fenster in der Ecke. */ @media (min-width:900px){ .chat-zurueck .fuer-handy{display:none} .chat-zurueck .fuer-rechner{display:block} /* Am Rechner darf man weiterlesen, während Kevin offen ist — deshalb nur ein Hauch Abdunklung statt einer Wand. */ #kevinchat::backdrop{background:rgba(19,60,30,.14)} #kevinchat{width:400px;height:min(640px,86dvh); margin:0 24px 24px auto;border-radius:var(--chat-fenster); box-shadow:0 24px 60px rgba(19,60,30,.32); position:fixed;right:0;bottom:0;top:auto;left:auto} } /* Wer Bewegung abgestellt hat, bekommt keine. Kevin ist trotzdem da, der Saum steht dann als ruhiger Goldrand still. */ @media (prefers-reduced-motion:reduce){ .kevin-blase{transition:opacity .2s ease;transform:none} .kevin-blase[data-saum="ja"]::after{animation:none;opacity:.9;--saum:340deg} .kevin-blase:hover,.kevin-blase:active{transform:none} ::view-transition-group(kevingesicht){animation-duration:.01s} .chat-tippt i{animation:none;opacity:.6} } /* ══ Anhänge, Blatt und Bedienungsanleitung ═══════════════════════════ Nach dem Vorbild der Messenger: ein Pluszeichen links, ein Blatt mit vier Wegen, ein Fragezeichen oben rechts. Farben nach der Regel vom 10.09.2026 — weißer Grund, Salbei für Kevin, Grün für den Besucher, Gold nur am Senden-Knopf. Die Kacheln bleiben deshalb einfarbig grün. */ .chat-innen{position:relative} /* Eigene display-Regeln schlagen das eingebaute [hidden] des Browsers. Ohne diese Zeile stünden Blatt und Hilfe von Anfang an offen. */ .chat-blatt[hidden],.chat-hilfe[hidden]{display:none} /* ── das Pluszeichen ── */ .chat-klammer{flex:none;width:44px;height:44px;border:0;padding:0;cursor:pointer; border-radius:999px;background:var(--salbei);color:var(--gruen); display:grid;place-items:center; transition:transform .2s ease, background .18s} .chat-klammer:hover{background:#C8D6C6} .chat-klammer.offen{transform:rotate(45deg);background:var(--gruen);color:var(--papier)} /* ── das Blatt ── */ .chat-blatt{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px; padding:12px 12px 4px;background:#FFF; border-top:1px solid var(--linie-hell)} .chat-blatt button{display:flex;flex-direction:column;align-items:center;gap:8px; border:0;background:none;cursor:pointer;padding:8px 2px; font-family:var(--schrift-text);font-size:12px;font-weight:700; color:var(--tinte);border-radius:var(--kante-m)} .chat-blatt button:hover{background:var(--papier-gruen)} .blatt-icon{width:52px;height:52px;border-radius:999px;display:grid;place-items:center; background:var(--gruen);color:var(--papier)} /* ── was angehängt wurde ── */ .chat-lauf .anhang{padding:4px;max-width:64%;position:relative;line-height:0} .chat-lauf .anhang img,.chat-lauf .anhang video{width:100%;height:auto;display:block; border-radius:calc(var(--chat-blase) - 4px);max-height:260px;object-fit:cover} .anhang-spiel{position:absolute;inset:0;margin:auto;width:44px;height:44px; border-radius:999px;background:rgba(19,60,30,.66); display:grid;place-items:center} .anhang-spiel::before{content:"";width:0;height:0;margin-left:4px; border-left:14px solid var(--papier); border-top:9px solid transparent;border-bottom:9px solid transparent} .anhang-datei{display:flex;align-items:center;gap:8px;padding:8px;line-height:1.3} .anhang-datei b{font-size:14px;font-weight:700;word-break:break-word} .anhang-datei i{font-size:12px;font-style:normal;opacity:.8;white-space:nowrap} /* Der Weg der Datei zum Server, sichtbar gemacht: ein Balken, während sie unterwegs ist, danach ein Häkchen oder ein Ausrufezeichen. Ohne dieses Zeichen weiß niemand, ob das Foto angekommen ist. */ .anhang-balken{position:absolute;left:6px;right:6px;bottom:6px;height:4px; border-radius:99px;background:rgba(250,249,245,.35);overflow:hidden} .anhang-balken i{display:block;height:100%;width:4%;border-radius:99px; background:var(--gold);transition:width .25s ease} .anhang-zeichen{position:absolute;right:8px;bottom:8px;width:24px;height:24px; border-radius:50%;display:grid;place-items:center;color:var(--papier); box-shadow:0 1px 4px rgba(0,0,0,.3)} .anhang-zeichen.gut{background:var(--gruen)} .anhang-zeichen.schlecht{background:#C2410C} .anhang-datei + .anhang-zeichen, .anhang-datei ~ .anhang-balken{right:10px;bottom:10px} @media (prefers-reduced-motion:reduce){.anhang-balken i{transition:none}} /* Ein Fehlschlag endet nie in einer Sackgasse — hier steht der zweite Weg. */ .chat-nochmal{display:inline-block;margin:2px 0;padding:6px 12px;font:inherit; font-size:14px;font-weight:700;color:var(--gruen);background:var(--papier); border:1.5px solid var(--gruen);border-radius:99px;cursor:pointer} .chat-nochmal:hover{background:var(--papier-gruen)} .chat-nochmal:disabled{opacity:.5;cursor:default} /* ── das Fragezeichen ── */ .chat-frage{flex:none;width:36px;height:36px;border:0;padding:0;cursor:pointer; background:none;color:var(--papier-matt);border-radius:999px; display:grid;place-items:center} .chat-frage:hover{background:rgba(250,249,245,.14);color:var(--papier)} /* ── die Bedienungsanleitung ── Sie legt sich über das Gespräch, statt daneben aufzugehen: wer Hilfe sucht, soll nichts anderes mehr sehen müssen. */ .chat-hilfe{position:absolute;inset:0;z-index:3;background:#FFF;padding:0; display:flex;flex-direction:column} .hilfe-kopf{flex:none;display:flex;align-items:center;gap:8px; padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top,0px)); background:var(--gruen-tief);color:var(--papier)} .hilfe-kopf strong{font-family:var(--schrift-stark);font-weight:700;font-size:17px} .hilfe-lauf{flex:1;overflow-y:auto;overscroll-behavior:contain; padding:24px 16px max(16px,env(safe-area-inset-bottom,0px))} .hilfe-lauf h3{font-family:var(--schrift-titel);font-size:22px;color:var(--gruen); margin:24px 0 8px;line-height:1.1} .hilfe-lauf h3:first-child{margin-top:0} .hilfe-lauf p,.hilfe-lauf li{font-size:16px;line-height:1.55;color:var(--tinte)} .hilfe-lauf p{margin:0 0 12px} .hilfe-lauf ul{margin:0 0 12px;padding-left:24px} .hilfe-lauf li{margin-bottom:8px} .hilfe-lauf b{color:var(--gruen)} @media (min-width:900px){ .hilfe-kopf{padding-top:8px} } @media (prefers-reduced-motion:reduce){ .chat-klammer{transition:none} } /* ══ WISCH-STRECKE ════════════════════════════════════════════ Waagerechte Bildfolge, mit dem Finger zu schieben. Eingebaut 11.09.2026. Das Schieben macht der Browser über scroll-snap — ohne Javascript funktioniert alles außer den beiden Pfeilen. Nichts bewegt sich von allein: ein Karussell, das von selbst weiterspringt, überfährt jeden, der langsam liest. */ .strecke-block{padding:var(--raum-xl) 0} .strecke-kopf{display:flex;flex-wrap:wrap;align-items:flex-end; justify-content:space-between;gap:var(--raum-s); margin-bottom:var(--raum-m)} .strecke-kopf h2{margin-bottom:0} .streifen{display:flex;gap:16px;margin:0;list-style:none; padding:4px var(--raum-m) 18px; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding-left:var(--raum-m); scrollbar-width:thin;scrollbar-color:var(--linie-hell) transparent} .streifen::-webkit-scrollbar{height:6px} .streifen::-webkit-scrollbar-thumb{background:var(--linie-hell);border-radius:999px} .kachel{flex:0 0 78vw;max-width:340px;scroll-snap-align:start} .kachel figure{margin:0} .kachel-rahmen{position:relative;border-radius:var(--kante-l);overflow:hidden; background:var(--papier-gruen);aspect-ratio:4/3} .kachel-rahmen img{width:100%;height:100%;object-fit:cover;display:block} .kachel-marke{position:absolute;left:12px;top:12px; font-family:var(--schrift-titel);font-size:19px;letter-spacing:.06em; background:var(--gold);color:var(--gruen-tief); padding:2px 12px 0;border-radius:999px} .kachel figcaption{margin-top:8px;font-size:15px;color:var(--grau);line-height:1.5} .strecke-steuer{display:flex;gap:8px} .strecke-pfeil{width:44px;height:44px;flex:none;border-radius:999px;cursor:pointer; border:1px solid var(--linie-hell);background:#FFF;color:var(--gruen); font-size:20px;line-height:1;display:grid;place-items:center; font-family:var(--schrift-text)} .strecke-pfeil:hover{border-color:var(--gold);color:var(--gold-text)} .strecke-pfeil[disabled]{opacity:.35;cursor:default} .strecke-punkte{display:flex;gap:8px} .strecke-punkt{width:7px;height:7px;border-radius:999px;background:var(--linie-hell); transition:width .25s,background .25s} .strecke-punkt[data-an="1"]{background:var(--gold);width:20px} .gruen-block .streifen::-webkit-scrollbar-thumb, .gruen-block .strecke-punkt{background:var(--rand-hell)} .gruen-block .strecke-pfeil{background:transparent;border-color:var(--rand-hell); color:var(--papier)} .gruen-block .kachel figcaption{color:var(--papier-matt)} @media (min-width:700px){ .kachel{flex-basis:320px} } @media (prefers-reduced-motion:reduce){ .streifen{scroll-behavior:auto} .strecke-punkt{transition:none} } /* ── Das Kontaktfeld im Chatfenster ────────────────────────────────── Name und Telefonnummer werden hier eingetragen, nicht in den Chat getippt. Sie gehen direkt in die Ablage und nie an die KI. */ .chat-kontakt{background:var(--papier-gruen);border:1px solid var(--linie-hell); border-radius:var(--kante-l);padding:16px;margin:12px 0; display:flex;flex-direction:column;gap:8px} .chat-kontakt-grund{margin:0 0 8px;font-size:15px;color:var(--tinte);line-height:1.45} .chat-kontakt label{font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--gold-text)} .chat-kontakt input{font:inherit;font-size:16px; /* 16px: sonst zoomt iOS beim Tippen */ padding:12px;border:1px solid var(--linie-hell); border-radius:var(--kante-m);background:#FFF;color:var(--tinte)} .chat-kontakt input:focus{outline:2px solid var(--gruen);outline-offset:1px; border-color:var(--gruen)} .chat-kontakt button{margin-top:8px;font:inherit;font-weight:700;font-size:16px; padding:12px 16px;border:0;border-radius:var(--kante-m); background:var(--gruen);color:var(--papier);cursor:pointer; min-height:44px} .chat-kontakt button:hover{background:var(--gruen-hell)} .chat-kontakt button[disabled]{opacity:.6;cursor:default} .chat-kontakt-fein{margin:2px 0 0;font-size:12px;color:var(--grau)}