/* ========================================================================== Gemeinsames Blatt für die Unterseiten: schulen, lehrer, schueler, therapeuten und loi. Die Startseite (index.html) trägt ihr Blatt weiter im Kopf, weil dort Szenen, Bühne und Animationen daranhängen. Alles, was hier steht, ist die Signatur davon: weißer Grund, blaues Kopfband mit schräger Kante, Wellenkanten zwischen den Bändern, Kästen ohne Rahmen auf weichem Schatten, Space Grotesk. Wer eine Farbe ändert, ändert sie in index.html mit. ACHTUNG Cache: Caddy liefert alles unter /assets/ ein Jahr lang mit `immutable` aus. Wer diese Datei ändert, MUSS in allen Seiten, die sie laden, `?v=` hochzählen, sonst sieht ein wiederkehrender Besucher monatelang die alte Fassung. ========================================================================== */ @font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; } :root { --bg: #ffffff; --card: #eef0f4; --boxbg: #ffffff; --ink: #050506; --ink-inv: #eef0f5; --muted: #4b5061; --faint: #83889a; --line: #d3d5dc; --schatten: 0 1px 2px rgba(5, 5, 6, .04), 0 8px 18px rgba(5, 5, 6, .06), 0 24px 48px rgba(5, 5, 6, .08); --schatten-nacht: 0 2px 6px rgba(0, 0, 0, .25), 0 12px 28px rgba(0, 0, 0, .32), 0 34px 64px rgba(0, 0, 0, .42); --blue: #0071e3; --blue-ink: #0071e3; --blue-bright: #63b3ff; --blue-dark: #002a55; --rot: #c9331e; --schraege: 16px; --weich: cubic-bezier(.2, .7, .3, 1); --welle-h: 16px; --welle: url("data:image/svg+xml,"); --mono: ui-monospace, "SF Mono", Menlo, monospace; } * { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; } body { font-family: "Space Grotesk", -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } svg { flex-shrink: 0; } img { max-width: 100%; display: block; } ::selection { background: #a8b6d6; } a { color: inherit; } button, input, select, textarea { font-family: inherit; } /* Eine Breite für alles: Kopf, Hero und Abschnitte stehen auf derselben Kante. Nichts wird zentriert, sonst bricht die Linie. */ .wrap { max-width: 1300px; margin: 0 auto; padding: 0 clamp(24px, 5.5vw, 84px); } .schmal { max-width: 860px; } /* Feines Korn über allem, nimmt dem Digitalen die Glätte */ body::after { content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ---------------- Knöpfe ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 30px; border-radius: 999px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; background: var(--blue); color: #fff; border: 1px solid var(--blue); transition: background .18s ease, border-color .18s ease, transform .18s ease; } .btn:hover { background: #005cba; border-color: #005cba; transform: translateY(-2px); } .btn.ink { background: #050506; border-color: #050506; color: #eef0f5; } .btn.ink:hover { background: #23252c; border-color: #23252c; } .btn.hell { background: #fff; border-color: #fff; color: var(--blue-ink); } .btn.hell:hover { background: #dfe7f5; border-color: #dfe7f5; } .btn:disabled { opacity: .5; cursor: default; transform: none; } .btn .arr { transition: transform .2s ease; } .btn:hover .arr { transform: translateX(5px); } /* ---------------- Kopf: blaues Band, schräg abgeschnitten ---------------- */ header { padding: 15px 0 27px; position: sticky; top: 0; z-index: 50; color: #fff; } header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%); } header .row { display: flex; align-items: center; gap: 26px; } .wordmark { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; text-decoration: none; color: #fff; -webkit-text-stroke: .6px currentColor; } /* Der Punkt der Wortmarke ist eckig, wie im Logo. Der Glyph bleibt im Markup stehen (fürs Vorlesen), das Quadrat malt der Kasten. */ .wordmark b { display: inline-block; width: .2em; height: .2em; background: #050506; color: transparent; overflow: hidden; margin-left: .04em; } header nav { margin-left: auto; display: flex; gap: 26px; align-items: center; } header nav a { font-size: 15px; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: -0.01em; -webkit-text-stroke: .35px currentColor; } header nav a:not(.btn):hover { color: #050506; } header nav a.hier { color: #050506; } header .btn { padding: 8px 20px; font-size: 13.5px; } /* Burger: unter 860px klappt die Leiste als Blatt unter dem Band auf */ .burger { display: none; width: 44px; height: 34px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; position: relative; } .burger i { position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: #fff; transition: transform .25s ease, opacity .2s ease; } .burger i:nth-child(1) { top: 7px; } .burger i:nth-child(2) { top: 15.5px; } .burger i:nth-child(3) { top: 24px; } header.open .burger i:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } header.open .burger i:nth-child(2) { opacity: 0; } header.open .burger i:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } @media (max-width: 860px) { header { padding: 20px 0 20px; } .wordmark { font-size: 29px; -webkit-text-stroke-width: .4px; } .burger { display: block; width: 38px; height: 26px; } .burger i { left: 4px; right: 4px; height: 2.5px; } .burger i:nth-child(1) { top: 4px; } .burger i:nth-child(2) { top: 11.75px; } .burger i:nth-child(3) { top: 19.5px; } header.open .burger i:nth-child(1) { transform: translateY(7.75px) rotate(45deg); } header.open .burger i:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); } header .btn { padding: 10px 22px; font-size: 14px; } /* Das Blatt fährt unter dem Band hervor. `visibility` nimmt es zugleich aus der Tabreihenfolge, was `opacity: 0` allein nicht täte. */ header nav { position: absolute; left: 0; right: 0; top: 100%; margin: calc(-1 * var(--schraege)) 0 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--blue); padding: 20px 28px 30px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%); display: flex; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-14px); transition: opacity .22s ease, transform .34s var(--weich), visibility 0s .34s; } header.open nav { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; } header nav a { padding: 13px 0; font-size: 17px; } header nav .btn { margin-top: 14px; align-self: flex-start; } } /* ---------------- Bänder und Kästen ---------------- */ .band { position: relative; background: var(--card); } .band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: var(--welle-h); z-index: 3; background: var(--welle) repeat-x 0 0 / 720px var(--welle-h); pointer-events: none; } .band::before { top: 0; } .band::after { bottom: 0; transform: scaleY(-1); } /* Letztes Band vor dem Fuß: die weiße Wellenkante hätte nichts mehr, wohin sie überleitet, sie stünde als heller Streifen auf dem Nachtblau. */ .band.ende::after { display: none; } /* Auch im Nachtteil bleibt der Kasten hell. Darum stellt er die Schriftfarben ausdrücklich zurück, statt sie zu erben. */ .box { background: var(--boxbg); border-radius: 14px; box-shadow: var(--schatten); color: #050506; --ink: #050506; --muted: #4b5061; --faint: #83889a; --line: #d3d5dc; } /* ---------------- Schrift ---------------- */ h1 { font-size: clamp(38px, 5.6vw, 76px); font-weight: 700; letter-spacing: -0.038em; line-height: 1.03; -webkit-text-stroke: 0.015em currentColor; } h2 { font-size: clamp(30px, 4.1vw, 54px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; -webkit-text-stroke: 0.015em currentColor; } h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } h1 b, h2 b { color: var(--blue); } .lead { font-weight: 500; font-size: 19px; color: var(--muted); line-height: 1.6; max-width: 640px; margin-top: 22px; letter-spacing: -0.015em; } .sub { font-size: 17px; color: var(--muted); line-height: 1.7; } /* Ein Streifen wie mit dem Marker gezogen, er endet vor den Unterlängen */ .sub em, .lead em { font-style: normal; color: var(--ink); font-weight: 600; background: linear-gradient(rgba(0, 113, 227, 0) 46%, rgba(0, 113, 227, .28) 46%, rgba(0, 113, 227, .28) 91%, rgba(0, 113, 227, 0) 91%); padding: 0 .16em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.vis { opacity: 1; transform: none; } /* ---------------- Hero und Abschnitte ---------------- */ .hero { padding: 74px 0 66px; } .hero h1 { max-width: 16ch; animation: fadeUp .7s .05s ease both; } .hero .lead { animation: fadeUp .7s .18s ease both; } .hero .knopfzeile { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; animation: fadeUp .7s .28s ease both; } @media (max-width: 640px) { .hero { padding: 46px 0 44px; } } section.weiss { padding: 84px 0; } section.band { padding: 84px 0; } @media (max-width: 640px) { section.weiss, section.band { padding: 56px 0; } } .kopfzeile { max-width: 640px; } .kopfzeile .sub { margin-top: 20px; } /* Punkte mit Haken: die einzige Listenform auf den Unterseiten */ .punkte { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 20px; max-width: 760px; } .punkte li { display: flex; gap: 16px; align-items: flex-start; font-size: 17px; line-height: 1.6; color: var(--muted); } .punkte b { color: var(--ink); font-weight: 700; } .punkte .haken { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); flex: none; margin-top: 3px; position: relative; } .punkte .haken::after { content: ""; position: absolute; left: 6px; top: 6px; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } /* Drei Schritte, nummeriert */ .schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; } @media (max-width: 860px) { .schritte { grid-template-columns: 1fr; } } .schritt { padding: 30px 28px; } .schritt .nr { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--blue-ink); } .schritt h3 { margin: 12px 0 10px; } .schritt p { font-size: 15.5px; color: var(--muted); line-height: 1.65; } /* Eine große Zahl, wenn sie etwas trägt */ .zahl { font-size: clamp(64px, 9vw, 128px); font-weight: 700; letter-spacing: -0.05em; line-height: .9; color: var(--blue); } /* ---------------- Nachtteil und Fuß ---------------- */ section.night { --muted: #a8b2ce; --faint: #7f8aa8; color: var(--ink-inv); background-color: var(--blue-dark); padding: 104px 0 90px; margin-top: -1px; clip-path: polygon(0 var(--schraege), 100% 0, 100% 100%, 0 100%); } section.night h2 b { color: var(--blue-bright); } section.night .box { box-shadow: var(--schatten-nacht); } section.night .kopfzeile .sub { color: #a8b2ce; } @media (max-width: 640px) { section.night { padding: 74px 0 66px; } } footer { --muted: #a8b2ce; --faint: #7f8aa8; color: var(--ink-inv); background-color: var(--blue-dark); padding: 36px 0 0; border-top: 1px solid rgba(255, 255, 255, .12); overflow: hidden; } /* Steht kein Nachtteil davor, schneidet der Fuß selbst schräg an. Sonst endet die Seite mit der einzigen geraden Kante, die es hier gibt. */ /* Der negative Abstand ist genau die Schrägenhöhe: sonst zeigt das Dreieck über der Schräge den weißen Seitengrund statt des Bandes darüber. */ footer.schraeg { clip-path: polygon(0 var(--schraege), 100% 0, 100% 100%, 0 100%); margin-top: calc(-1 * var(--schraege)); padding-top: 64px; border-top: 0; } .foot-row { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); position: relative; z-index: 1; } .foot-row a { text-decoration: none; } .foot-row a:hover { color: var(--ink-inv); } .foot-row .spacer { flex: 1; } .giant { font-size: clamp(140px, 26vw, 380px); font-weight: 700; letter-spacing: -0.05em; line-height: .78; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22); user-select: none; margin-top: 30px; white-space: nowrap; pointer-events: none; } .giant b { -webkit-text-stroke: 1.5px var(--blue-bright); color: transparent; } @media (max-width: 640px) { .wrap { padding-left: 22px; padding-right: 22px; } }