/* * Gemeinsames Blatt der öffentlichen Seiten unter soft-aid.de. * * Eine Marke, mehrere Angebote: Das Teal ist überall dasselbe, damit die * Seiten erkennbar zusammengehören. Was sich unterscheidet, ist ein einziger * Signalton je Seite – gesetzt über `data-seite` am -Element, weiter * unten. Er markiert die Stelle, um die es geht, und sonst nichts; wird er * zur Dekoration, verliert er seine Wirkung. * * Ausgeliefert unter /gemeinsam/style.css für alle Seiten (siehe * src/seiten/gemeinsam.js). */ :root { --akzent: #1b6d7a; --akzent-dunkel: #12525c; --akzent-hell: #e8f2f3; /* Standard-Signalton; jede Seite überschreibt ihn unten. */ --signal: #c0392b; --signal-hell: #fdeceb; --text: #17212b; --text-schwach: #5b6b7a; --linie: #e0e6ec; --flaeche: #ffffff; --flaeche-still: #f5f8f9; --tief: #10333a; --breite: 1120px; --rundung: 14px; --schrift: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } [data-seite='notfalltraining'] { --signal: #b8342d; --signal-hell: #fbebea; } [data-seite='sanitaetsdienst'] { --signal: #c2610c; --signal-hell: #fdf0e3; } [data-seite='raummieten'] { --signal: #7a5f1b; --signal-hell: #f7f1de; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; font: 17px/1.65 var(--schrift); color: var(--text); background: var(--flaeche); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -.015em; } h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; } h3 { font-size: 1.15rem; font-weight: 650; } p { margin: 0 0 1em; } a { color: var(--akzent-dunkel); } .breite { width: min(100% - 3rem, var(--breite)); margin-inline: auto; } /* Für Tastatur und Vorlesegeräte: der erste Halt auf der Seite. */ .sprung { position: absolute; left: -9999px; background: var(--akzent); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0; } .sprung:focus { left: 0; top: 0; z-index: 100; } /* --- Kopf ---------------------------------------------------------------- */ .kopf { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--linie); } .kopf-inhalt { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; } .marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; } .marke img { display: block; height: 38px; width: auto; } .marke-zusatz { font-size: .8rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--akzent); padding-left: .7rem; border-left: 1px solid var(--linie); } .kopf-nav { display: flex; gap: 1.6rem; margin-left: auto; } .kopf-nav a { font-size: .95rem; font-weight: 550; color: var(--text-schwach); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; } .kopf-nav a:hover { color: var(--akzent); border-bottom-color: var(--akzent); } .kopf-tel { font-weight: 650; color: var(--akzent-dunkel); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; } /* --- Bühne --------------------------------------------------------------- */ .bühne { background: linear-gradient(170deg, var(--akzent-hell) 0%, #fff 78%); padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--linie); } .bühne-raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .marke-zeile { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); background: var(--signal-hell); padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.1rem; } .führung { font-size: 1.12rem; color: var(--text-schwach); max-width: 46ch; } .knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; } .eckdaten { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .eckdaten li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung); padding: 1rem 1.2rem; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(16, 51, 58, .05); } .eckdaten strong { font-size: 1.15rem; color: var(--akzent-dunkel); } .eckdaten span { font-size: .92rem; color: var(--text-schwach); } /* --- Knöpfe -------------------------------------------------------------- */ .knopf { display: inline-block; border: 1px solid var(--akzent); border-radius: 10px; background: var(--akzent); color: #fff; font: 600 1rem var(--schrift); padding: .8rem 1.5rem; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; } .knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); } .knopf:disabled { opacity: .55; cursor: default; } .knopf-still { background: transparent; color: var(--akzent-dunkel); border-color: var(--linie); } .knopf-still:hover { background: var(--flaeche-still); border-color: var(--akzent); } /* --- Abschnitte ---------------------------------------------------------- */ .abschnitt { padding: clamp(3rem, 7vw, 5rem) 0; } .abschnitt-tief { background: var(--flaeche-still); border-block: 1px solid var(--linie); } .raster-zwei { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); } .karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; } .karten-vier { grid-template-columns: repeat(4, 1fr); } .karten-zwei { grid-template-columns: repeat(2, 1fr); } .karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung); padding: 1.6rem; } .karte h3 { color: var(--akzent-dunkel); } .karte p { margin: 0; color: var(--text-schwach); font-size: .98rem; } .fussnote { margin-top: 1.6rem; font-size: .95rem; color: var(--text-schwach); } .ablauf { list-style: none; counter-reset: schritt; margin: 0; padding: 0; } .ablauf li { counter-increment: schritt; position: relative; padding: 0 0 1.4rem 3.2rem; } .ablauf li::before { content: counter(schritt); position: absolute; left: 0; top: .1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--akzent); color: #fff; display: grid; place-items: center; font-weight: 650; font-size: .95rem; } .ablauf li:not(:last-child)::after { content: ''; position: absolute; left: 1.1rem; top: 2.5rem; bottom: .3rem; width: 1px; background: var(--linie); } .ablauf h3 { margin-bottom: .25em; } .ablauf p { margin: 0; color: var(--text-schwach); font-size: .98rem; } .haken { list-style: none; margin: 1.5rem 0; padding: 0; } .haken li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; color: var(--text-schwach); } .haken li::before { content: '✓'; position: absolute; left: 0; top: -.05rem; color: var(--akzent); font-weight: 700; } /* Eine schlichte Tabelle für Preise und Eckdaten. */ .tafel { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: .98rem; } .tafel th, .tafel td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid var(--linie); } .tafel th { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-schwach); } .tafel td:last-child { text-align: right; font-weight: 650; white-space: nowrap; } /* --- Formular ------------------------------------------------------------ */ .formular { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung); padding: clamp(1.4rem, 3vw, 2rem); } .formular h3 { margin-bottom: 1.2rem; } .formular label { display: block; margin-bottom: 1rem; } .formular label > span { display: block; font-size: .88rem; font-weight: 600; color: var(--text-schwach); margin-bottom: .35rem; } .formular label em { color: var(--signal); font-style: normal; } .formular input, .formular textarea, .formular select { width: 100%; padding: .7rem .85rem; border: 1px solid var(--linie); border-radius: 9px; font: 1rem var(--schrift); color: var(--text); background: var(--flaeche); } .formular select { appearance: none; background-image: none; } .formular input:focus, .formular textarea:focus, .formular select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); } .formular textarea { resize: vertical; } .feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } /* Das Feld für die Maschinen: aus dem Blickfeld, aber nicht display:none – das durchschauen die einfachen Ausfüllprogramme sofort. */ .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .hinweis-klein { font-size: .85rem; color: var(--text-schwach); margin: .2rem 0 1.2rem; } .meldung { margin: 1rem 0 0; font-size: .95rem; font-weight: 550; } .meldung.fehler { color: var(--signal); } .meldung.gut { color: #177245; } /* --- Fuß ----------------------------------------------------------------- */ .fuss { background: var(--tief); color: #c8d8dc; padding: 3rem 0 2.5rem; font-size: .95rem; } .fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } .fuss h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; } .fuss p { margin: 0; line-height: 1.8; } .fuss a { color: #a8ccd2; text-decoration: none; } .fuss a:hover { color: #fff; text-decoration: underline; } .fuss img { display: block; margin-bottom: 1rem; opacity: .9; } /* --- Schmale Bildschirme -------------------------------------------------- */ @media (max-width: 1000px) { .karten-vier { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .bühne-raster, .raster-zwei { grid-template-columns: 1fr; } .karten { grid-template-columns: 1fr; } .karten-vier { grid-template-columns: repeat(2, 1fr); } .kopf-nav { display: none; } .fuss-raster { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { body { font-size: 16px; } .kopf-tel { margin-left: auto; } .feld-paar { grid-template-columns: 1fr; } .karten-vier { grid-template-columns: 1fr; } .fuss-raster { grid-template-columns: 1fr; } .tafel th:nth-child(2), .tafel td:nth-child(2) { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }