/* Bausteine, die es nur auf den Unterseiten gibt. Alles andere - Farben, Schriften, Navigation, Karten, Knöpfe - kommt aus vimai.css. Reihenfolge im : erst vimai.css, dann diese Datei. */ /* ---------- Kopf der Unterseite ---------- */ .up-hero{padding:64px 0 52px;border-bottom:1px solid var(--line)} .up-hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:19ch} .up-hero .lede{margin-top:22px;font-size:1.17rem;max-width:58ch} .up-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px} /* Brotkrumen: für Google die Einordnung, für Besucher der Weg zurück. */ .krumen{ font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase; color:var(--mute);margin-bottom:22px; } .krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0} .krumen li+li::before{content:"/";margin-right:8px;color:var(--line-2)} .krumen a{color:var(--mute);text-decoration:none} .krumen a:hover{color:var(--clay)} .krumen [aria-current]{color:var(--ink-2)} /* ---------- Fließtext neben einer stehenbleibenden Spalte ---------- */ .up-body{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:64px;align-items:start;padding:78px 0} .prosa{max-width:68ch} .prosa h2{font-size:clamp(1.55rem,2.6vw,2.1rem);margin:52px 0 18px} .prosa h2:first-child{margin-top:0} .prosa h3{margin:32px 0 10px;font-size:1.1rem} .prosa p{color:var(--slate)} .prosa ul,.prosa ol{color:var(--slate);padding-left:1.15em;margin:0 0 1.2em} .prosa li{margin-bottom:.5em} .prosa li::marker{color:var(--clay)} .prosa strong{color:var(--ink);font-weight:600} .prosa a{color:var(--clay);font-weight:600;text-decoration:underline;text-underline-offset:3px} /* Hervorgehobener Absatz - für den einen Satz, der hängenbleiben soll. */ .merksatz{ border-left:3px solid var(--amber);padding:4px 0 4px 22px;margin:34px 0; font-family:var(--display);font-size:1.28rem;line-height:1.4;color:var(--ink); } /* ---------- Kontaktspalte ---------- */ .up-seite{position:sticky;top:104px;display:flex;flex-direction:column;gap:18px} .up-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px} .up-box h3{margin-bottom:12px} .up-box p{font-size:.95rem;color:var(--slate);margin-bottom:18px} .up-box .btn{width:100%;justify-content:center} .up-preis{ font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:-.02em; margin:0 0 4px;color:var(--ink); } .up-preis-sub{font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)} .up-liste{list-style:none;margin:18px 0 0;padding:0;font-size:.93rem;color:var(--slate)} .up-liste li{padding-left:22px;position:relative;margin-bottom:9px} .up-liste li::before{ content:"";position:absolute;left:0;top:.55em;width:9px;height:9px; background:var(--grad);border-radius:2px; } /* ---------- Häufige Fragen ---------- */ /*
statt eigener Klapp-Logik: funktioniert ohne JavaScript und Google liest den Text trotzdem, auch wenn er zugeklappt ist. */ .faq{border-top:1px solid var(--line);margin-top:16px} .faq details{border-bottom:1px solid var(--line)} .faq summary{ cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative; font-family:var(--display);font-size:1.08rem;font-weight:700;letter-spacing:-.012em; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:10px;top:50%;width:11px;height:11px; border-right:2px solid var(--mute);border-bottom:2px solid var(--mute); transform:translateY(-70%) rotate(45deg);transition:transform .2s ease; } .faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)} .faq details[open] summary{color:var(--clay)} .faq .antwort{padding:0 0 22px;color:var(--slate);max-width:68ch} .faq .antwort p:last-child{margin-bottom:0} /* ---------- Film hinter der hervorgehobenen Karte ---------- Die Karte ist ohnehin dunkel; der Film liegt darunter, ein Schleier darueber. Ohne den Schleier waere die weisse Schrift auf der hellen Aufnahme nicht mehr zu lesen. */ .card-feat,.card-film{position:relative;overflow:hidden;isolation:isolate} /* Eine Karte mit Film muss dunkel sein, sonst steht dunkle Schrift auf bewegtem Bild. Die hervorgehobene Karte ist es ohnehin; .card-film macht aus einer gewoehnlichen Karte dieselbe Behandlung. */ .card-film{background:var(--ink);border-color:transparent;color:var(--paper)} .card-film p{color:#C9C6BE} .card-film .card-ico{background:var(--grad)} /* --amber (#C4810C) ist als Schrift auf hellem Grund gedacht. Auf den dunklen Karten kam die Zeile damit nur auf 3,9:1 - unter den geforderten 4,5:1. Deshalb dort das helle Amber. */ .card-feat .card-mehr, .card-film .card-mehr{color:var(--akzent-hell)} .karte-video{position:absolute;inset:0;z-index:0;background:var(--ink)} .karte-video video{width:100%;height:100%;object-fit:cover;display:block} .karte-schleier{ position:absolute;inset:0; background:linear-gradient(100deg, rgba(23,24,28,.95) 0%, rgba(23,24,28,.92) 40%, rgba(23,24,28,.86) 70%, rgba(23,24,28,.78) 100%); } /* Die schmale Karte hat weniger Flaeche neben dem Text - dort deckt der Schleier gleichmaessiger. */ .card-film .karte-schleier{background:rgba(23,24,28,.88)} /* Die Leiterbahnen-Aufnahme ist selbst schon fast schwarz. Mit .88 lag ihre mittlere Helligkeit bei 0,0116 gegenueber 0,0105 des blanken Kartentons - der Film waere praktisch unsichtbar gewesen. */ .karte-video[data-film="ki"] + .karte-schleier, [data-film="ki"] .karte-schleier{background:rgba(23,24,28,.80)} /* Alles, was auf der Karte steht, gehoert ueber den Film. */ .card-feat > *:not(.karte-video), .card-film > *:not(.karte-video){position:relative;z-index:1} @media (prefers-reduced-motion:reduce){ .karte-video video{display:none} .card-feat .karte-video{background:var(--ink) url("/bilder/leistung-webdesign-poster.jpg") center/cover} .karte-video[data-film="ki"]{background:var(--ink) url("/bilder/leistung-ki-poster.jpg") center/cover} .karte-video[data-film="termine"]{background:var(--ink) url("/bilder/leistung-termine-poster.jpg") center/cover} .karte-video[data-film="texte"]{background:var(--ink) url("/bilder/leistung-texte-poster.jpg") center/cover} } .stufen-fuss{ display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center; margin-top:26px;font-size:.94rem;color:var(--mute); } /* ---------- Verwandte Leistungen ---------- */ .nachbarn{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:8px} .nachbar{ display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:24px;text-decoration:none; transition:transform .18s ease,box-shadow .22s ease,border-color .2s ease; } .nachbar:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)} .nachbar h3{margin-bottom:8px} .nachbar p{font-size:.93rem;color:var(--slate);margin:0} /* ---------- Abschluss ---------- */ .up-cta{background:var(--ink);color:var(--paper);padding:74px 0} .up-cta h2{max-width:17ch} .up-cta p{color:#B9BAC2;max-width:52ch;margin-top:18px} .up-cta .btn-ghost{border-color:rgba(255,255,255,.28);color:var(--paper)} .up-cta .btn-ghost:hover{border-color:var(--amber);color:var(--amber)} .up-cta .up-actions{margin-top:30px} @media (max-width:960px){ .up-body{grid-template-columns:1fr;gap:44px;padding:56px 0} .up-seite{position:static} .up-hero{padding:44px 0 38px} }