/* =========================================================================== UNTERSEITEN — Messgenauigkeit, 3D-Modelle, Dokumentation Diese drei Seiten sind laenger und textlastiger als die Startseite. Sie richten sich an Besucher, die es genau wissen wollen, und benutzen deshalb ein eigenes, ruhigeres Satzbild: kleiner oranger Kicker, grosse weisse Ueberschrift, linksbuendig. Das ist Absicht und soll so bleiben. Was sich die Unterseiten MIT der Startseite teilen: - die Hausfarbe #ff6600 (aus css/grundlagen.css, dort --orange) - die Schriftart Roboto - Kopfleiste und Fusszeile Reihenfolge im jeder Unterseite - sie ist wichtig: 1. Roboto von Google Fonts 2. css/grundlagen.css Farbwerte, Schrift, Fusszeile 3. css/subpages.css diese Datei grundlagen.css MUSS vorher stehen: die Variablen (--orange, --karte, --rahmen ...) werden hier weiterverwendet. HINWEIS ZUR HERKUNFT Diese Seiten liefen frueher als "Custom HTML"-Bloecke in WordPress. Dafuer standen hier rund hundert Zeilen Notregeln mit !important gegen die Theme-Vorgaben (.wp-block-html, .entry-content, .wp-site-blocks). Die Seite ist inzwischen statisch - saemtliche dieser Regeln sind am 12.08.2026 entfernt worden. Wer hier wieder ein !important einfuegen will, sollte zweimal hinsehen: es gibt kein fremdes Stylesheet mehr, gegen das man sich wehren muesste. =========================================================================== */ /* --------------------------------------------------------------------------- 1. FARBEN UND MASSE DIESER SEITEN Die drei Grundwerte (--orange, --dunkel, --karte) kommen aus grundlagen.css und werden hier nur unter den Namen weitergereicht, die das Markup dieser Seiten benutzt. So gibt es die Hausfarbe weiterhin an genau EINER Stelle im Projekt. Die drei Akzentfarben Cyan, Gruen und Gelb gibt es nur hier. Sie tragen die technischen Diagramme: in einer Zeichnung muessen sich Messstrahl, Messpunkt und Stoerquelle voneinander unterscheiden lassen, und Orange allein reicht dafuer nicht. Im Fliesstext und in Schaltflaechen kommen sie bewusst nicht vor. --------------------------------------------------------------------------- */ .scan-page { --bg: #10141c; /* Seitenhintergrund dieser Unterseiten */ --bg-2: #151b25; /* etwas hellere Baender */ --ink: #f7f8fb; /* Ueberschriften und starker Text */ --muted: #c9d1df; /* Fliesstext */ --line: rgba(255, 255, 255, 0.14); /* Rahmenlinien */ --orange: #ff6600; /* Hausfarbe, identisch mit der Startseite */ --orange-15: rgba(255, 102, 0, 0.15); /* Flaeche hinter Symbolen */ --orange-22: rgba(255, 102, 0, 0.22); /* Schein unter Schaltflaechen */ --cyan: #37d6ff; /* Diagramme: Messstrahlen */ --green: #48e0a4; /* Diagramme: dichte Messpunkte */ --yellow: #ffd166; /* Diagramme: Stoerstellen, grobe Punkte */ --radius: 8px; /* Eckenrundung aller Kaesten dieser Seiten */ --max: 1180px; /* groesste Textbreite */ color-scheme: dark; } /* box-sizing steht bereits in grundlagen.css fuer die ganze Seite. Diese Zeile ist die Rueckversicherung fuer den Fall, dass eine Unterseite einmal ohne grundlagen.css ausgeliefert wird. */ .scan-page, .scan-page * { box-sizing: border-box; } .scan-page { margin: 0; background: var(--bg); color: var(--ink); /* Roboto kommt aus dem . Die Ersatzschriften greifen nur, solange die Datei laedt oder wenn Google Fonts blockiert ist. */ font-family: 'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif; line-height: 1.55; overflow-x: hidden; } /* Verweise INNERHALB des Inhalts erben ihre Farbe vom Text. Ohne diese Regel wuerde die Grundfarbe aus grundlagen.css greifen und jeder Link in einer Kachel orange leuchten - hier sind die Verweise aber ganze Schaltflaechen und Kacheln, die ihre Farbe selbst mitbringen. */ .scan-page a { color: inherit; text-decoration: none; } /* Gemeinsame Textspalte. Alle Abschnitte benutzen sie. */ .scan-page .wrap { width: calc(100% - 40px); max-width: var(--max); margin: 0 auto; } /* --------------------------------------------------------------------------- 2. KOPFLEISTE (12.08.2026 ergaenzt) Bis dahin begannen die Unterseiten ohne jeden Kopf: kein Logo, kein Weg zurueck. Wer ueber eine Suchmaschine hier ankam, sah nicht, auf wessen Seite er war. Die Leiste ist bewusst schlicht - sie soll den grossen Kopfbereich der Startseite nicht nachbauen, sondern nur einordnen und zurueckfuehren. Sie scrollt mit (kein position:fixed), damit sie den langen Lesetexten keinen Platz wegnimmt. --------------------------------------------------------------------------- */ .kopfleiste { background: var(--dunkel); border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .kopfleiste__inhalt { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1380px; margin: 0 auto; padding: 20px 30px; } .kopfleiste__logo { display: block; } .kopfleiste__logo img { display: block; width: 200px; height: auto; } .kopfleiste__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; } .kopfleiste__nav a { font-size: 16px; line-height: 20px; font-weight: 500; color: var(--text-blass); transition: color 0.2s; } .kopfleiste__nav a:hover { color: var(--orange); } /* Die letzte Schaltflaeche der Leiste ist gefuellt - sie fuehrt zum Preisrechner, dem eigentlichen Ziel dieser Seiten. */ .kopfleiste__nav .kopfleiste__knopf { padding: 11px 20px; border-radius: 10px; background: var(--orange); color: #fff; font-weight: 700; } .kopfleiste__nav .kopfleiste__knopf:hover { background: var(--orange-tief); color: #fff; } @media (max-width: 700px) { .kopfleiste__inhalt { flex-wrap: wrap; padding: 16px 20px; gap: 14px; } .kopfleiste__logo img { width: 160px; } .kopfleiste__nav { gap: 10px 18px; } .kopfleiste__nav a { font-size: 15px; } } /* --------------------------------------------------------------------------- 3. KOPFBEREICH DER SEITE (hero) Drei uebereinanderliegende Hintergruende, von oben nach unten gelesen: 1. schwacher Cyan-Schein rechts oben 2. schwacher Orange-Schein links unten 3. der eigentliche Farbverlauf Darueber legt ::before ein feines Raster (54px), das nach unten hin ausblendet, und ::after einen Verlauf, der den Kopfbereich weich in den Seitenhintergrund uebergehen laesst. --------------------------------------------------------------------------- */ .scan-page .hero { min-height: 88vh; display: grid; align-items: center; padding: clamp(60px, 8vw, 110px) 0 clamp(54px, 7vw, 90px); position: relative; isolation: isolate; background: radial-gradient(circle at 74% 32%, rgba(55, 214, 255, 0.20), transparent 28%), radial-gradient(circle at 22% 78%, rgba(255, 102, 0, 0.16), transparent 30%), linear-gradient(135deg, #0d1118 0%, #151b25 58%, #10141c 100%); } .scan-page .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 88%); z-index: -2; } .scan-page .hero::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; background: linear-gradient(to bottom, transparent, var(--bg)); z-index: -1; } /* Text links, Bild oder Zeichnung rechts. */ .scan-page .hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr); gap: clamp(34px, 5vw, 70px); align-items: center; } /* min-width: 0 an allen Rasterkindern. Ohne das weigern sich Rasterspalten, schmaler als ihr laengstes Wort zu werden - lange Woerter wie "Punktwolken-Software" sprengen dann die Spalte. */ .scan-page .hero-grid > *, .scan-page .split > *, .scan-page .deliverables > * { min-width: 0; } /* Kleine Pille ueber der Hauptueberschrift, mit orangem Punkt davor. */ .scan-page .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 11px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: var(--muted); border-radius: 999px; font-size: 13px; letter-spacing: 0.02em; margin: 0 0 22px; } .scan-page .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 22px rgba(255, 102, 0, 0.8); } /* Alle Ueberschriften und Absaetze ohne Vorgabe-Aussenabstand - die Abstaende setzen die Abschnitte selbst. */ .scan-page h1, .scan-page h2, .scan-page h3, .scan-page p { margin: 0; } .scan-page h1 { font-size: clamp(43px, 6.8vw, 86px); line-height: 0.95; max-width: 820px; text-wrap: balance; } .scan-page .lead { color: var(--muted); font-size: clamp(18px, 2vw, 22px); max-width: min(720px, 100%); margin-top: 24px; text-wrap: pretty; } .scan-page .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } /* --------------------------------------------------------------------------- 4. SCHALTFLAECHEN --------------------------------------------------------------------------- */ .scan-page .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; border-radius: 4px; font-weight: 800; border: 1px solid transparent; background: var(--orange); color: #fff; box-shadow: 0 18px 40px var(--orange-22); transition: background 0.2s, box-shadow 0.2s; } .scan-page .button:hover { background: var(--orange-tief); color: #fff; } .scan-page .button.secondary { background: rgba(255, 255, 255, 0.04); color: var(--ink); border-color: rgba(255, 255, 255, 0.18); box-shadow: none; } .scan-page .button.secondary:hover { border-color: var(--orange); color: var(--orange); background: rgba(255, 255, 255, 0.04); } /* --------------------------------------------------------------------------- 5. KENNZAHLENREIHE unter dem Kopftext (proof) --------------------------------------------------------------------------- */ .scan-page .proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; max-width: 760px; } .scan-page .proof { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 13px; color: var(--muted); font-size: 14px; } .scan-page .proof strong { display: block; color: var(--ink); font-size: 20px; margin-bottom: 2px; } /* --------------------------------------------------------------------------- 6. BILD- UND ZEICHNUNGSFLAECHE im Kopfbereich (visual) --------------------------------------------------------------------------- */ .scan-page .visual { min-height: 520px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)); border-radius: var(--radius); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38); position: relative; overflow: hidden; } .scan-page .visual svg { width: 100%; height: 100%; min-height: 520px; display: block; } /* Fassung mit Foto statt Zeichnung. */ .scan-page .visual--foto { padding: 0; background: #0a0d14; border-color: rgba(255, 255, 255, 0.12); } .scan-page .visual--foto img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; } /* --------------------------------------------------------------------------- 7. INHALTSBAENDER .band normaler Abschnitt auf Seitenhintergrund .band.light Abschnitt mit leicht aufgehelltem Verlauf. Der Name ist historisch - es ist KEIN heller Abschnitt, sondern ein zweiter, minimal hellerer Dunkelton. Umbenennen wuerde bedeuten, ihn in allen drei Seiten anzufassen. --------------------------------------------------------------------------- */ .scan-page .band { padding: clamp(70px, 9vw, 120px) 0; background: var(--bg); } .scan-page .band.light { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%); } /* Text links, Kachelblock rechts. */ .scan-page .split { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 70px); align-items: start; } /* Kleiner oranger Vorspann ueber jeder Abschnittsueberschrift. */ .scan-page .section-kicker { color: var(--orange); font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: 0.12em; margin-bottom: 12px; } .scan-page h2 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1; max-width: 780px; text-wrap: pretty; } .scan-page .section-copy { color: var(--muted); font-size: 18px; margin-top: 18px; max-width: min(760px, 100%); text-wrap: pretty; } /* --------------------------------------------------------------------------- 8. KACHELN Vier Bauformen mit demselben Grundaussehen. Sie unterscheiden sich nur im Zusammenhang, in dem sie stehen: .card Dreierraster unter einer Ueberschrift .feature Zweierraster neben einem Textblock .spec technische Angaben .timeline Ablaufpunkte --------------------------------------------------------------------------- */ .scan-page .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 38px; } .scan-page .card, .scan-page .feature, .scan-page .spec, .scan-page .timeline { border: 1px solid var(--line); background: rgba(255, 255, 255, 0.045); border-radius: var(--radius); padding: 24px; } .scan-page .card b, .scan-page .feature b, .scan-page .spec b, .scan-page .timeline b { display: block; font-size: 20px; margin-bottom: 8px; } .scan-page .card p, .scan-page .feature p, .scan-page .spec p, .scan-page .timeline p { color: var(--muted); } /* Kleines Symbolfeld am Kopf einer Kachel. Das Zeichen darin ist ein Inline-SVG im HTML und erbt seine Farbe ueber currentColor. */ .scan-page .mini { width: 42px; height: 42px; border-radius: 7px; display: grid; place-items: center; margin-bottom: 18px; background: var(--orange-15); color: var(--orange); } .scan-page .feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .scan-page .feature { min-height: 160px; } /* --------------------------------------------------------------------------- 9. HERVORGEHOBENER KASTEN (callout) --------------------------------------------------------------------------- */ .scan-page .callout { margin-top: 36px; padding: clamp(26px, 4vw, 42px); border-radius: var(--radius); background: linear-gradient(135deg, rgba(255, 102, 0, 0.95), rgba(255, 128, 43, 0.82)), linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .scan-page .callout p { max-width: 780px; font-size: 18px; color: rgba(255, 255, 255, 0.88); margin-top: 10px; } /* --------------------------------------------------------------------------- 10. ABLAUF IN SCHRITTEN (flow) --------------------------------------------------------------------------- */ .scan-page .flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 42px; } .scan-page .step { border: 1px solid var(--line); padding: 22px 18px; min-height: 190px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); position: relative; } .scan-page .step span { display: block; color: var(--orange); font-weight: 900; font-size: 13px; } .scan-page .step b { display: block; font-size: 19px; margin: 13px 0 8px; } .scan-page .step p { color: var(--muted); font-size: 15px; } /* Auf den Seiten 3D-Modelle und Dokumentation stehen die Schrittnummern gross im Kopf der Kachel. Das stand bis 12.08.2026 als eigener