/* ===================================================================== site.css - Aussehen der Website von skramkoob. Aus dem VERTRAG der Centric-Familie hervorgegangen: er legt fest, wie Kopfzeile, Fusszeile, Sprachwahl, Farbmodus und Hilfe-Panel in JEDER App der Familie gebaut sind - an der Kopf- und Fusszeile wird NICHT gerueckt (Reihenfolge, 64px Hoehe, ein-zeiliger Fuss ohne Satz ueber den Betreiber). Nach demselben Vertrag gebaut: /_mallorca-spielt-golf/css/site.css /_recibo/css/site.css /_schwunganalyse/css/site.css /_mytripwallet/css/site.css /_testr/css/site.css Eingebunden von index.asp (Startseite) und von den Rechtstexten. NICHT von index.html - das ist die App, die hat core.css und app.css. NICHT von den Hilfeseiten - die haben hilfe.css, weil sie im iframe laufen und von App UND Website geoeffnet werden. DREI KLEIDER, wie in der App: Hell, Dunkel, Retro. Hell und Dunkel folgen der Apple-Linie (weiche Materialien, Unschaerfe, gerundete Flaechen, zurueckhaltende Bewegung mit starken eigenen Kurven). RETRO SCHALTET DIESE LINIE VOLLSTAENDIG AB - siehe Abschnitt 5. Aufbau: 1. Farbwerte, Masse, Kurven 2. Gemeinsam Grundgeruest, Kopf, Knoepfe, Fuss, Hilfe-Panel 3. Nur Startseite .page-home 4. Nur Rechtstexte .page-legal 5. Retro-Kleid body.theme-retro ===================================================================== */ /* ===================================================================== 1. Farbwerte Vier Bloecke wie ueberall in der Familie: :root (hell), prefers-color-scheme (dunkel), body.theme-dark, body.theme-light - dazu als fuenfter body.theme-retro in Abschnitt 5. Der Knopf in der Kopfzeile wechselt System -> Hell -> Dunkel -> Retro und merkt sich die Wahl unter "user-theme" - demselben Schluessel wie die App. .theme-forced am schaltet die Media-Query ab, damit "hell" auch auf einem dunkel eingestellten Geraet hell bleibt. HIER FAERBT EINE NEUE APP UM - und nur hier. ===================================================================== */ :root{ --bg:#f2f2f7; --bg-deep:#e8e8ed; --surface:#ffffff; --surface-2:#f7f7fa; --ink:#000000; --ink-soft:#6e6e73; --ink-faint:#8e8e93; --accent:#E65802; --accent-soft:#fdece1; --accent-red:#d92626; --border:#d8d8de; --border-soft:rgba(0,0,0,.06); --btn-secondary-bg:#e5e5ea; --header-bg:rgba(255,255,255,.72); --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05); --card-shadow:rgba(0,0,0,.05); --lift-shadow:0 1px 1px rgba(0,0,0,.04),0 12px 32px -8px rgba(0,0,0,.14); --num:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; /* Der Punkt der Wortmarke ("skramkoob."): dasselbe Rostbraun wie in der App (--brand-dot in css/app.css) und in der Hilfe (css/hilfe.css). Er folgt NICHT dem Akzent - er ist die Marke, nicht die Bedienung. */ --brand-dot:#E65802; /* Eigene Kurven statt der eingebauten - die eingebauten sind zu weich. ease-out fuer alles, was auftaucht (fuehlt sich sofort an), ease-in-out fuer alles, was sich auf dem Schirm bewegt. */ --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); } @media (prefers-color-scheme:dark){ :root:not(.theme-forced){ --bg:#000000; --bg-deep:#0b0b0d; --surface:#1c1c1e; --surface-2:#161618; --ink:#ffffff; --ink-soft:#a1a1a6; --ink-faint:#98989d; --accent:#ff7a2e; --accent-soft:#3a1c0a; --accent-red:#ff5a52; --border:#38383a; --border-soft:rgba(255,255,255,.08); --btn-secondary-bg:#2c2c2e; --header-bg:rgba(28,28,30,.72); --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --card-shadow:rgba(0,0,0,.3); --lift-shadow:0 1px 1px rgba(0,0,0,.5),0 12px 32px -8px rgba(0,0,0,.6); /* Aufgehellt - auf schwarzem Grund verschwindet #E65802 sonst. */ --brand-dot:#c2665a; } } body.theme-dark{ --bg:#000000; --bg-deep:#0b0b0d; --surface:#1c1c1e; --surface-2:#161618; --ink:#ffffff; --ink-soft:#a1a1a6; --ink-faint:#98989d; --accent:#ff7a2e; --accent-soft:#3a1c0a; --accent-red:#ff5a52; --border:#38383a; --border-soft:rgba(255,255,255,.08); --btn-secondary-bg:#2c2c2e; --header-bg:rgba(28,28,30,.72); --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --card-shadow:rgba(0,0,0,.3); --lift-shadow:0 1px 1px rgba(0,0,0,.5),0 12px 32px -8px rgba(0,0,0,.6); --brand-dot:#c2665a; } body.theme-light{ --bg:#f2f2f7; --bg-deep:#e8e8ed; --surface:#ffffff; --surface-2:#f7f7fa; --ink:#000000; --ink-soft:#6e6e73; --ink-faint:#8e8e93; --accent:#E65802; --accent-soft:#fdece1; --accent-red:#d92626; --border:#d8d8de; --border-soft:rgba(0,0,0,.06); --btn-secondary-bg:#e5e5ea; --header-bg:rgba(255,255,255,.72); --shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(0,0,0,.05); --card-shadow:rgba(0,0,0,.05); --lift-shadow:0 1px 1px rgba(0,0,0,.04),0 12px 32px -8px rgba(0,0,0,.14); --brand-dot:#E65802; } /* ===================================================================== 2. Gemeinsam - Startseite und Rechtstexte ===================================================================== */ *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif; font-size:17px;line-height:1.5;-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-optical-sizing:auto; padding-top:64px} a{color:var(--accent)} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px} .wrap{max-width:1080px;margin:0 auto;padding:0 22px} @media (max-width:640px){ .wrap{padding:0 18px} } /* --------------------------------------------------------------------- EINHEITLICHE MASSE - in ALLEN Apps der Familie dieselben Zahlen. Wer eine davon aendert, aendert sie ueberall. Kopfzeile 64px hoch, 12px Abstand zwischen den Teilen Inhalt beginnt 64px unter dem Seitenrand (body padding-top) Sprungziele 76px (scroll-margin-top) Klappmenue oeffnet bei 64px Fuss 1px durchgezogener Strich, 28px oben / 40px unten REIHENFOLGE IN DER LEISTE - ebenfalls ueberall gleich: Wortmarke - Navigationspunkte - Farbmodus - Sprachwahl - Knopf - Menue Die Navigationspunkte stehen ZENTRIERT zwischen der Wortmarke und dem rechten Teil: .navlinks traegt margin-inline:auto, damit teilt sich der freie Platz gleichmaessig auf beide Seiten. Die Wortmarke darf deshalb KEIN margin-right:auto haben und es darf kein im Kopf stehen - beides schoebe alles nach rechts und die Navigation klebte am Logo. MATERIAL statt Balken: die Leiste ist eine durchscheinende Schicht, der Inhalt laeuft darunter durch. Der Trennstrich erscheint erst, wenn wirklich etwas darunter liegt - .navbar.scrolled setzt js/site.js. --------------------------------------------------------------------- */ .navbar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--header-bg); backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease-out),background-color .3s var(--ease-out)} .navbar.scrolled{border-bottom-color:var(--border-soft)} .nav{display:flex;align-items:center;gap:12px;height:64px} .brand{font-weight:700;letter-spacing:-.022em;text-decoration:none;color:var(--ink); font-size:17px;white-space:nowrap} /* Der Punkt gehoert ANS Wort - kein Abstand, keine eigene Laufweite. */ .brand .dot{color:var(--brand-dot)} .navlinks{display:flex;align-items:center;gap:2px;margin-inline:auto} .navlinks a{text-decoration:none;color:var(--ink-soft);font-size:15px;padding:12px; border-radius:10px;min-height:48px;display:flex;align-items:center; transition:color .18s var(--ease-out),background-color .18s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .navlinks a:hover{color:var(--ink);background:var(--btn-secondary-bg)} } /* Knopf. Sekundaer mit Rahmen, der Handlungsknopf gefuellt. :active mit scale(.97) - die Rueckmeldung kommt beim DRUECKEN, nicht erst beim Loslassen. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:12px 20px;border-radius:12px;font:inherit;font-weight:590; font-size:15px;letter-spacing:-.01em;text-decoration:none;cursor:pointer; background:var(--surface);color:var(--ink);border:1px solid var(--border); transition:transform .16s var(--ease-out),border-color .18s var(--ease-out), background-color .18s var(--ease-out),box-shadow .18s var(--ease-out)} .btn:active{transform:scale(.97)} @media (hover:hover) and (pointer:fine){ .btn:hover{border-color:var(--accent);color:var(--accent)} } .btn-primary{background:var(--accent);color:#fff;border-color:transparent; box-shadow:0 1px 2px rgba(0,0,0,.08)} @media (hover:hover) and (pointer:fine){ .btn-primary:hover{filter:brightness(1.07);color:#fff;border-color:transparent; box-shadow:0 2px 10px -2px rgba(0,0,0,.25)} } .btn-lg{min-height:54px;padding:15px 26px;font-size:16.5px;border-radius:14px} /* Runder Icon-Knopf - traegt den Farbmodus und den Menueknopf. */ .iconbtn{width:40px;height:40px;flex:0 0 auto;border-radius:50%;border:1px solid var(--border); background:var(--surface);color:var(--ink);font:inherit;font-size:15px;cursor:pointer; display:grid;place-content:center; transition:border-color .18s var(--ease-out),color .18s var(--ease-out),transform .16s var(--ease-out)} .iconbtn:active{transform:scale(.94)} @media (hover:hover) and (pointer:fine){ .iconbtn:hover{border-color:var(--accent);color:var(--accent)} } .burger{display:none} /* Sprachwahl. NUR auf den Startseiten, dort zweimal im Markup: einmal in der Leiste (auf Telefonen ausgeblendet) und einmal in der Klappliste. In den Rechtstexten gibt es sie nicht. */ .lang-switch{display:flex;align-items:center;gap:8px;font-family:var(--num); font-size:13px;letter-spacing:.06em} .lang-switch a{color:var(--ink-soft);text-decoration:none;padding:4px 2px; border-bottom:1px solid transparent;transition:color .18s var(--ease-out)} .lang-switch a:hover{color:var(--accent)} .lang-switch a.active{color:var(--accent);border-bottom-color:var(--accent)} .lang-switch .sep{color:var(--border)} @media (max-width:860px){ .burger{display:grid} .navlinks{position:absolute;top:64px;left:0;right:0;display:none;flex-direction:column; align-items:stretch;gap:2px;padding:10px 18px 16px;background:var(--surface); border-bottom:1px solid var(--border);box-shadow:0 6px 16px var(--card-shadow)} .navlinks.open{display:flex} /* Die Wortmarke schiebt den rechten Teil ans Ende der Leiste: solange die Navigationspunkte im Klappmenue liegen, gibt es keinen zentrierten Mittelteil mehr, der den Platz von selbst verteilt. */ .nav > .brand{margin-right:auto} /* Auf dem Telefon zeigt die Leiste nur noch Wortmarke, Farbmodus und Menueknopf. Der Handlungsknopf aus der Leiste weicht; im Klappmenue steht dafuer seine Zwillingsfassung (.cta-menu) als letzter Eintrag ueber die volle Breite. */ .nav > .btn{display:none} .navlinks a.cta-menu{display:flex;justify-content:center;width:100%;margin-top:12px} .nav > .lang-switch{display:none} .navlinks .lang-switch{padding:13px 4px;border-top:1px solid var(--border);margin-top:8px} } @media (min-width:861px){ .navlinks .lang-switch{display:none} .navlinks a.cta-menu{display:none} } /* --------------------------------------------------------------------- FUSSZEILE - auf jeder Website-Seite identisch aufgebaut: links die Wortmarke (Verweis auf die Startseite der eigenen Sprache), rechts die vier Rechtstexte, ganz aussen die Hilfe. KEIN "Startseite", KEIN "Kontakt", KEINE Sprachwahl im Fuss. KEIN SATZ UEBER DEN BETREIBER - kein Firmenname, keine Copyright-Zeile. --------------------------------------------------------------------- */ footer{border-top:1px solid var(--border);padding:28px 0 40px; color:var(--ink-soft);font-size:14.5px} footer .fl{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap} footer .grow{flex:1 1 auto} /* Die Wortmarke und die einzelnen Verweise brechen nie in sich um - sonst steht die halbe Rechtstextliste unter dem Namen. Umbrochen wird, wenn ueberhaupt, zwischen den Verweisen. */ footer .fl > a{white-space:nowrap} footer .brand-sm{white-space:nowrap;flex:0 0 auto;font-size:15px} /* --- Fuss auf dem Telefon: Wortmarke oben, Rechtstexte fest darunter --- Unter 640px bekommt die Wortmarke eine ganze Zeile fuer sich, damit die Verweise IMMER in der zweiten Zeile beginnen und nicht je nach Laenge des Namens mal neben und mal unter ihm stehen. Der Platzhalter .grow entfaellt dabei - sonst schoebe er die Verweise weiterhin nach rechts. */ @media (max-width:640px){ footer .fl{justify-content:center;text-align:center;row-gap:12px;column-gap:16px} footer .grow{display:none} footer .brand-sm,footer .logo{flex:0 0 100%;justify-content:center} } footer a{color:var(--ink-soft);text-decoration:none; transition:color .18s var(--ease-out)} footer a:hover{color:var(--ink)} /* --------------------------------------------------------------------- HILFE - Panel von rechts, hilfe_.html im iframe. Ausgeloest ausschliesslich vom Verweis im Fuss (class="help-trigger"), nie aus dem Kopf. Der iframe wird erst beim ersten Oeffnen geladen; die Hilfe bringt ihr Aussehen selbst mit (css/hilfe.css), weil ein iframe nichts erbt. Steuerung: js/site.js. Es faehrt von rechts ein UND nach rechts wieder aus - derselbe Weg hin wie zurueck, sonst wirkt es wie zwei verschiedene Dinge. --------------------------------------------------------------------- */ .help-overlay{position:fixed;inset:0;z-index:1090;background:rgba(0,0,0,.45); display:none;opacity:0;transition:opacity .3s var(--ease-out); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} .help-overlay.open{display:block;opacity:1} .help-panel{position:fixed;top:0;right:0;height:100%;width:40%;max-width:520px;min-width:320px; background:var(--surface);border-left:1px solid var(--border); box-shadow:-30px 0 60px -20px rgba(0,0,0,.35);z-index:1100; display:flex;flex-direction:column;transform:translateX(100%); transition:transform .42s var(--ease-out)} .help-panel.open{transform:translateX(0)} @media (max-width:800px){ .help-panel{width:100%;max-width:none;min-width:0} } .help-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0} .help-panel-header h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink)} .help-panel iframe{flex:1;width:100%;border:0;background:var(--surface)} .help-close{width:40px;height:40px;flex:0 0 auto;border-radius:50%; border:1px solid var(--border);background:var(--surface);color:var(--ink); font:inherit;font-size:22px;line-height:1;cursor:pointer;display:grid;place-content:center; transition:border-color .18s var(--ease-out),color .18s var(--ease-out),transform .16s var(--ease-out)} .help-close:active{transform:scale(.94)} .help-close:hover{border-color:var(--accent);color:var(--accent)} /* ===================================================================== 3. Nur die Startseite (index.asp) Typografie nach Apple-Art: die Laufweite haengt an der GROESSE, nicht an einem festen Wert - grosse Zeilen laufen enger (-.035em), Fliesstext bleibt bei ~0. Der Zeilenabstand geht umgekehrt: eng bei grossem Text, weiter bei kleinem. ===================================================================== */ .page-home section{padding:88px 0} .page-home section[id]{scroll-margin-top:76px} .page-home section + section{border-top:1px solid var(--border-soft)} .page-home h1{font-size:clamp(38px,6.4vw,68px);line-height:1.03;font-weight:700; letter-spacing:-.035em;margin:0 0 18px;max-width:16ch} .page-home h2{font-size:clamp(27px,3.4vw,40px);line-height:1.1;font-weight:700; letter-spacing:-.028em;margin:0 0 10px} .page-home h3{font-size:19px;line-height:1.3;font-weight:640;letter-spacing:-.015em;margin:0 0 8px} .page-home .section-title{font-size:12.5px;text-transform:uppercase;letter-spacing:.09em; color:var(--accent);font-weight:640;margin:0 0 10px} .page-home .lead{color:var(--ink-soft);max-width:60ch;font-size:19px;line-height:1.55; letter-spacing:-.008em;margin:0 0 40px} /* ACHTUNG, KURZFORM: .hero traegt im Markup zugleich .wrap. Eine padding-Kurzform hier wuerde die seitliche Polsterung von .wrap mitloeschen - deshalb nur Longhand. Derselbe Fehler ist in zwei Apps der Familie schon zweimal passiert. */ .page-home .hero{padding-top:clamp(64px,11vw,124px);padding-bottom:clamp(56px,9vw,96px); position:relative} .page-home .hero p.sub{max-width:52ch;color:var(--ink-soft);font-size:clamp(18px,2.1vw,21px); line-height:1.5;letter-spacing:-.01em;margin:0 0 32px} .page-home .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .page-home .hero-note{margin:20px 0 0;font-size:14px;color:var(--ink-faint);letter-spacing:-.005em} /* Der weiche Schein hinter dem Kopf der Seite. Rein dekorativ, liegt HINTER dem Text (z-index:-1) und faengt keine Klicks ab. */ .page-home .hero::before{content:"";position:absolute;z-index:-1; top:-140px;left:50%;width:min(760px,120%);height:520px;transform:translateX(-50%); background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent); filter:blur(18px);pointer-events:none} /* --- Karten --------------------------------------------------------- Ein Raster, keine gestapelten Bloecke. Die Karte hebt sich beim Ueberfahren minimal an; auf Beruehrungsgeraeten gibt es das nicht, dort zaehlt der Druck (:active). */ .page-home .grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .page-home .grid-2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .page-home .card{background:var(--surface);border:1px solid var(--border-soft); border-radius:18px;padding:24px;box-shadow:0 1px 2px var(--card-shadow); transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out)} @media (hover:hover) and (pointer:fine){ .page-home .card:hover{transform:translateY(-3px);box-shadow:var(--lift-shadow)} } .page-home .card p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.55} .page-home .card .ico{width:38px;height:38px;border-radius:11px;display:grid;place-content:center; font-size:19px;margin:0 0 16px;background:var(--accent-soft);color:var(--accent)} /* --- Preiskarten ---------------------------------------------------- */ .page-home .price{display:flex;flex-direction:column;gap:14px} .page-home .price .tag{font-size:12.5px;font-weight:640;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-faint)} .page-home .price .amount{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1} .page-home .price .amount small{font-size:15px;font-weight:500;letter-spacing:-.01em; color:var(--ink-faint);margin-left:6px} .page-home .price ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .page-home .price li{color:var(--ink-soft);font-size:16px;padding-left:24px;position:relative} .page-home .price li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700} .page-home .price.featured{border-color:color-mix(in srgb,var(--accent) 40%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),var(--lift-shadow)} /* --- Abschluss (Laden) ---------------------------------------------- */ .page-home .closing{text-align:center} .page-home .closing h2{margin-inline:auto} .page-home .closing .lead{margin-inline:auto;margin-bottom:30px} .page-home .closing .hero-cta{justify-content:center} /* --- Auftritt beim Scrollen ----------------------------------------- js/site.js haengt .reveal an die Bloecke und nimmt es wieder ab, sobald der Block im Bild ist. Ohne JavaScript bleibt alles sichtbar - die Klasse kommt erst von dort. Gestaffelt in kleinen Schritten (60ms), so dass es als eine Bewegung gelesen wird und nicht als Warteschlange. */ .page-home .reveal{opacity:0;transform:translateY(14px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)} .page-home .reveal.in{opacity:1;transform:none} /* ===================================================================== 4. Nur die Rechtstexte (.page-legal) ===================================================================== */ .page-legal main{padding:64px 0 72px} .page-legal .legal{max-width:74ch} .page-legal .legal h1{font-size:clamp(32px,4.6vw,44px);font-weight:700;line-height:1.1; letter-spacing:-.03em;margin:0 0 10px} .page-legal .legal .stand{color:var(--ink-faint);font-size:14.5px;margin:0 0 38px} .page-legal .legal h2{font-size:23px;font-weight:680;letter-spacing:-.02em;margin:44px 0 12px; padding-top:28px;border-top:1px solid var(--border-soft)} .page-legal .legal h2:first-of-type{border-top:none;padding-top:0} .page-legal .legal h3{font-size:17.5px;font-weight:640;letter-spacing:-.012em;margin:26px 0 8px} .page-legal .legal p,.page-legal .legal ul,.page-legal .legal ol{ color:var(--ink-soft);font-size:16.5px;line-height:1.68;margin:0 0 14px} .page-legal .legal ul,.page-legal .legal ol{padding-left:22px} .page-legal .legal li{margin-bottom:7px} .page-legal .legal strong{color:var(--ink);font-weight:640} .page-legal .legal code{font-family:var(--num);font-size:.92em;background:var(--accent-soft); padding:2px 6px;border-radius:5px} .page-legal .legal .box{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px; box-shadow:0 1px 2px var(--card-shadow);padding:22px 26px;margin:0 0 20px} .page-legal .toc{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px; box-shadow:0 1px 2px var(--card-shadow);padding:20px 26px;margin:0 0 40px} .page-legal .toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:15px;line-height:1.75} @media (max-width:640px){ .page-legal .toc ol{columns:1} } .page-legal .toc a{text-decoration:none} .page-legal .toc a:hover{text-decoration:underline} .page-legal h2[id],.page-legal section[id]{scroll-margin-top:76px} /* ===================================================================== 5. RETRO - das dritte Kleid Gegenstueck zu body.theme-retro in css/app.css: dieselbe Palette (Rostbraun #E65802, Oliv, Gold #b8860b), dieselbe Haltung. Auf der Website hat es eine zweite Aufgabe: es SCHALTET DIE APPLE-LINIE VOLLSTAENDIG AB. Das Kleid ist nicht "hell mit anderen Farben" - Unschaerfe, Rundungen, Schatten, Farbverlaeufe, Bewegung und die Systemschrift fallen alle weg. Was bleibt, ist eine Seite, wie sie 1999 aussah, als skramkoob unter diesem Namen lief. Reihenfolge im Umschalter: System -> Hell -> Dunkel -> Retro. Alle Farbwerte hier sind FESTGENAGELT und haengen nicht an prefers-color-scheme - wer Retro waehlt, bekommt Retro, egal wie das Geraet eingestellt ist. ===================================================================== */ body.theme-retro{ --bg:#ccccaa; --bg-deep:#ccccaa; --surface:#e6e6cc; --surface-2:#ddddbb; --ink:#000000; --ink-soft:#4d4d2f; --ink-faint:#4d4d2f; --accent:#0000cc; --accent-soft:#ddddbb; --accent-red:#990000; --border:#999966; --border-soft:#999966; --btn-secondary-bg:#ddddbb; --header-bg:#E65802; --shadow:none; --card-shadow:transparent; --lift-shadow:none; --brand-dot:#b8860b; --num:"Courier New",Courier,monospace; font-family:"Times New Roman",Georgia,serif; } /* --- Die Apple-Linie abschalten ------------------------------------- Ein Block, der alles zurueckdreht, was hell und dunkel ausmacht: keine Unschaerfe, keine gerundeten Ecken, keine Schatten, keine Bewegung, keine Farbverlaeufe. Danach kommt nur noch das, was Retro POSITIV ausmacht. */ body.theme-retro *, body.theme-retro *::before, body.theme-retro *::after{ border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; filter:none !important; transition:none !important; animation:none !important; transform:none !important; text-shadow:none !important; } body.theme-retro{background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45} /* Der Schein hinter dem Kopf der Seite und der Auftritt beim Scrollen fallen ersatzlos weg - beides ist genau das, was es 1999 nicht gab. .reveal muss dabei ausdruecklich sichtbar bleiben, sonst bliebe die halbe Seite leer, solange js/site.js sie noch nicht freigegeben hat. */ body.theme-retro .page-home .hero::before{display:none} body.theme-retro .page-home .reveal{opacity:1} /* --- Kopfzeile: der Balken von damals ------------------------------- */ body.theme-retro .navbar{background:#E65802;border-bottom:4px solid #cc6600} body.theme-retro .brand{color:#ffffff;font-family:Arial,Helvetica,sans-serif; font-weight:700;letter-spacing:1px;text-transform:uppercase} body.theme-retro .navlinks a{color:#ffddaa;font-family:Arial,Helvetica,sans-serif; font-size:14px;text-decoration:underline} body.theme-retro .navlinks a:hover{color:#ffffff;background:#7a2828} body.theme-retro .iconbtn{background:#ddddbb;border:2px outset #e6e6cc;color:#000000} @media (max-width:860px){ body.theme-retro .navlinks{background:#e6e6cc;border-bottom:4px solid #cc6600} body.theme-retro .navlinks a{color:#0000cc} } /* --- Knoepfe: erhaben, wie ein Fensterknopf von damals -------------- */ body.theme-retro .btn{background:#ddddbb;color:#000000;border:2px outset #e6e6cc; font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:14px;letter-spacing:0} body.theme-retro .btn:active{border-style:inset} body.theme-retro .btn-primary{background:#E65802;color:#ffffff;border:2px outset #b35c5c} body.theme-retro .btn:hover{color:#000000} body.theme-retro .btn-primary:hover{color:#ffffff} /* --- Verweise: blau und unterstrichen, besuchte violett ------------- */ body.theme-retro a{color:#0000cc;text-decoration:underline} body.theme-retro a:visited{color:#663399} body.theme-retro footer a{color:#0000cc;text-decoration:underline} /* --- Schrift: Serifen im Fliesstext, Arial in den Ueberschriften ---- */ body.theme-retro .page-home h1, body.theme-retro .page-home h2, body.theme-retro .page-home h3, body.theme-retro .page-legal .legal h1, body.theme-retro .page-legal .legal h2, body.theme-retro .page-legal .legal h3{ font-family:Arial,Helvetica,sans-serif;letter-spacing:0;color:#E65802;font-weight:700} body.theme-retro .page-home h1{font-size:34px;line-height:1.2} body.theme-retro .page-home h2{font-size:24px;line-height:1.25} body.theme-retro .page-home .section-title{color:#cc6600;letter-spacing:.12em} body.theme-retro .page-home .lead, body.theme-retro .page-home .hero p.sub{font-size:16px;letter-spacing:0;color:#4d4d2f} /* --- Flaechen: Kasten mit Rahmen, kein Material --------------------- */ body.theme-retro .page-home section{padding:34px 0} body.theme-retro .page-home section + section{border-top:2px solid #E65802} body.theme-retro .page-home .card, body.theme-retro .page-legal .legal .box, body.theme-retro .page-legal .toc{background:#e6e6cc;border:1px solid #999966;padding:16px} body.theme-retro .page-home .card .ico{background:#E65802;color:#ffffff; width:32px;height:32px;font-size:16px} body.theme-retro .page-home .price .amount{font-family:Arial,Helvetica,sans-serif; color:#E65802;font-size:30px;letter-spacing:0} body.theme-retro .page-home .price li::before{content:"»";color:#cc6600} body.theme-retro .page-home .price.featured{border:2px solid #E65802} /* --- Fuss ----------------------------------------------------------- */ body.theme-retro footer{border-top:4px solid #E65802;background:#ddddbb; font-family:Arial,Helvetica,sans-serif;font-size:13px} body.theme-retro footer .brand-sm{color:#E65802} /* --- Hilfe-Panel ---------------------------------------------------- */ body.theme-retro .help-panel{background:#e6e6cc;border-left:4px solid #E65802} body.theme-retro .help-panel-header{background:#E65802;border-bottom:2px solid #cc6600} body.theme-retro .help-panel-header h3{color:#ffffff;font-family:Arial,Helvetica,sans-serif} body.theme-retro .help-close{background:#ddddbb;border:2px outset #e6e6cc;color:#000000} body.theme-retro .help-overlay{background:rgba(0,0,0,.6)} /* Das Panel faehrt in Retro nicht ein - es ist einfach da oder nicht. Der Umschalter oben nimmt jedem Element sein transform, deshalb muss der geschlossene Zustand hier ueber die Sichtbarkeit geregelt werden. */ body.theme-retro .help-panel{visibility:hidden} body.theme-retro .help-panel.open{visibility:visible} /* ===================================================================== 6. Zugaenglichkeit Weniger Bewegung heisst nicht KEINE Rueckmeldung, sondern eine sanftere: Auf- und Zublenden bleibt, Verschieben und Anheben faellt weg. Weniger Transparenz macht die Kopfleiste deckend. ===================================================================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important} .page-home .reveal{opacity:1;transform:none} .help-panel{transition:opacity .2s ease;transform:none} .help-panel:not(.open){opacity:0;pointer-events:none;visibility:hidden} .page-home .card:hover{transform:none} } @media (prefers-reduced-transparency:reduce){ .navbar{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom-color:var(--border)} .help-overlay{backdrop-filter:none;-webkit-backdrop-filter:none} } @media (prefers-contrast:more){ .page-home .card,.page-legal .legal .box,.page-legal .toc{border-color:var(--border)} .navbar{border-bottom-color:var(--border)} }