/* ========================================================================== medicware – Content-Styles (seitenübergreifend wiederverwendbar) Datei: assets/css/content.css - Gilt ausschliesslich fuer den Inhaltsbereich innerhalb von
. - Header, Menue, Footer und das Template-CSS bleiben unberuehrt. - Alle Klassen tragen das Praefix .mw- (keine Kollision mit Bootstrap / dem bestehenden Template). - Einbindung pro Seite im : Farbvarianten (zusaetzliche Klasse an
): (ohne) Kachelkopf tuerkis, Titel gemischt, Icon rechts .mw-content--solutions Kachelkopf dunkelblau, Titel in Versalien .mw-content--icon-left Icon oben links statt oben rechts ========================================================================== */ /* -------------------------------------------------------------------------- 0. Globale Farbpalette Zentrale Stelle fuer alle Farben der Seite. Hier anpassen – die Aenderung wirkt ueberall, auch in .mw-hero / .mw-band / .mw-cta-band / .mw-actionbar, die ausserhalb von .mw-content liegen und deshalb eigene Variablen im :root brauchen statt in .mw-content. Die Blautoene entsprechen der offiziellen medicware-Farbwelt (Styleguide "Farbwelt"): Primaerfarbe = Navy-Skala, Akzentfarbe = Tuerkis-Skala, je in 10%-Schritten aus dem CMYK-Farbfaecher errechnet. Erst die Rohpalette unten aendern, die semantischen Tokens (--mw-navy, --mw-tint, usw.) ziehen die Werte automatisch nach. Hinweis zu den *-rgb-Variablen: Sie enthalten denselben Farbton wie ihr Pendant, nur als "r, g, b"-Tripel (fuer rgba()-Schatten/Verlaeufe mit Transparenz). Wird z. B. --mw-navy-100 geaendert, bitte --mw-navy-rgb von Hand nachziehen, damit Schatten & Co. weiter dazu passen. -------------------------------------------------------------------------- */ :root { /* Primaerfarbe – Navy (aus dem Styleguide, 100% -> 10%) */ --mw-navy-100: #002c73; --mw-navy-90: #0d3980; --mw-navy-80: #1c488e; --mw-navy-70: #2f599d; --mw-navy-60: #446bab; --mw-navy-50: #5c80b9; --mw-navy-40: #7795c6; --mw-navy-30: #95add5; --mw-navy-20: #b6c7e3; --mw-navy-10: #d9e2f1; /* Akzentfarbe – Tuerkis (aus dem Styleguide, 100% -> 10%) */ --mw-teal-100: #0077a6; --mw-teal-90: #1a85af; --mw-teal-80: #3392b8; --mw-teal-70: #4da0c1; --mw-teal-60: #66adca; --mw-teal-50: #80bbd2; --mw-teal-40: #99c9db; --mw-teal-30: #b3d6e4; --mw-teal-20: #cce4ed; --mw-teal-10: #e6f1f6; /* Semantische Tokens – werden im Rest der Datei verwendet */ --mw-navy: var(--mw-navy-100); /* Hausfarbe dunkelblau */ --mw-navy-dark: #001d4d; /* dunklerer Verlaufspunkt, gleicher Farbton wie --mw-navy */ --mw-navy-rgb: 0, 44, 115; /* = --mw-navy, als RGB-Tripel */ --mw-teal: var(--mw-teal-100); /* Hausfarbe tuerkis (= Akzent der Icons) */ --mw-teal-dark: #005f86; /* dunklerer Verlaufspunkt, gleicher Farbton wie --mw-teal */ --mw-teal-rgb: 0, 119, 166; /* = --mw-teal, als RGB-Tripel */ --mw-blue: #0067ca; /* Verweise auf dunkelblauen Seiten (nicht Teil der Styleguide-Tabelle) */ --mw-tint: var(--mw-teal-10); /* zarte Flaeche, Kontaktkachel */ --mw-accent-tint: var(--mw-teal-20); /* Flaeche Feature-Box & Abschluss-Band */ --mw-hero-bg: var(--mw-navy-10); /* Hintergrund Bildkopf Startseite */ --mw-band-bg: var(--mw-teal-40); /* Hintergrund Kennzahlband */ --mw-stat-bg: var(--mw-teal-10); /* Hintergrund Kennzahl-Kachel */ --mw-line: var(--mw-navy-10); /* Rahmen, Trenner */ --mw-ink: #12212f; /* Fliesstext */ --mw-ink-soft: #4a5768; /* Sekundaertext */ --mw-surface: #ffffff; /* Kachel-/Formularflaechen */ --mw-white: #ffffff; /* Schrift auf farbigem Untergrund */ --mw-white-rgb: 255, 255, 255; /* = --mw-white, als RGB-Tripel */ } /* -------------------------------------------------------------------------- 1. Design-Tokens Steuergroessen des Kachelsystems. Farben kommen aus :root (oben) und werden hier nur referenziert bzw. fuer die Kopf-Varianten umgeschaltet. -------------------------------------------------------------------------- */ .mw-content { /* Steuergroessen – werden von den Varianten unten ueberschrieben */ --mw-head-bg: var(--mw-teal); --mw-head-bg2: var(--mw-teal-dark); --mw-accent: var(--mw-teal); --mw-title-tt: uppercase; /* text-transform des Kacheltitels */ --mw-title-ls: .04em; /* letter-spacing des Kacheltitels */ --mw-title-fs: .8rem; /* Schriftgroesse des Kacheltitels */ --mw-gap: 2rem; /* Abstand im Kachelraster */ --mw-radius: 3px; --mw-head-h: 6.5rem; /* FIXE Kopfhoehe – bei allen Kacheln gleich */ color: var(--mw-ink); font-size: 1rem; line-height: 1.5; } /* -------------------------------------------------------------------------- Template-Reset: Die Vorlage (style.css) setzt auf JEDES
ein "padding: 80px 0" und "overflow: hidden". Fuer unsere Inhaltsbereiche uebernehmen die inneren Bausteine (.mw-section, .mw-hero__inner, .mw-band__inner, .mw-cta-band__inner) die Abstaende selbst – daher hier zuruecksetzen, damit sich die Werte nicht addieren. -------------------------------------------------------------------------- */ section.mw-content { padding: 0; overflow: visible; } /* Variante „Unsere Loesungen“ */ .mw-content.mw-content--solutions { --mw-head-bg: var(--mw-navy); --mw-head-bg2: var(--mw-navy-dark); --mw-accent: var(--mw-navy); } /* -------------------------------------------------------------------------- 2. Sektion / Grundabstaende -------------------------------------------------------------------------- */ .mw-content .mw-section { padding: 0 0 4rem; } .mw-content .mw-section + .mw-section { padding-top: 3rem; } /* -------------------------------------------------------------------------- 3. Seitenkopf: Titel, Claim, optionale Einleitungsbox -------------------------------------------------------------------------- */ .mw-content .mw-intro { display: grid; gap: 1.9rem var(--mw-gap); /* Zeilenabstand: Titel zur Zeile darunter */ grid-template-columns: minmax(0, 1fr); margin-bottom: 4rem; /* Weissraum zwischen Kopfbereich und Kacheln */ } /* Gleiche Spaltenzahl wie das Kachelraster – Kopfbereich springt identisch um */ @media (min-width: 480px) { .mw-content .mw-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .mw-content .mw-intro { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .mw-content .mw-intro { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .mw-content .mw-intro { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Standard: Kopfbereich ueber die volle Breite */ .mw-content .mw-intro__main, .mw-content .mw-intro__note { grid-column: 1 / -1; } /* Der Seitentitel steht immer allein in der ersten Rasterzeile. Dadurch beginnen Einstiegstext und Infobox darunter auf gleicher Hoehe. */ .mw-content .mw-intro > .mw-intro__title { grid-column: 1 / -1; margin-bottom: 4rem; } /* Variante mit Einleitungskasten: 2 Spalten Text + 3 Spalten Kasten */ @media (min-width: 992px) { .mw-content .mw-intro--split .mw-intro__main { grid-column: span 2; } .mw-content .mw-intro--split .mw-intro__note { grid-column: span 2; } } @media (min-width: 1200px) { .mw-content .mw-intro--split .mw-intro__main { grid-column: span 3; } .mw-content .mw-intro--split .mw-intro__note { grid-column: span 2; } } .mw-content .mw-intro__title { margin: 0 0 1.35rem; color: var(--mw-navy); font-size: clamp(1.7rem, 1.15rem + 1.9vw, 2.55rem); font-weight: 300; letter-spacing: .05em; line-height: 1.15; text-transform: uppercase; } .mw-content .mw-intro__claim { margin: 0; color: var(--mw-navy); font-size: clamp(1rem, .93rem + .35vw, 1.3rem); font-weight: 400; line-height: 1.45; } .mw-content .mw-intro__claim strong, .mw-content .mw-intro__claim b { display: block; font-weight: 700; } .mw-content .mw-intro__note { align-self: start; margin: 0; padding: 1.1rem 1.25rem; box-shadow: 0px 0px 19px 6px rgba(0,0,0,0.10); border-radius: var(--mw-radius); color: var(--mw-ink); font-size: .8rem; line-height: 1.55; } /* -------------------------------------------------------------------------- 4. Kachelraster Standard: 1 -> 2 -> 3 -> 4 -> 5 Spalten. Modifier .mw-grid--3 / --4 fuer Seiten mit weniger Kacheln. -------------------------------------------------------------------------- */ .mw-content .mw-grid { display: grid; gap: var(--mw-gap); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; margin-top: 7rem; } @media (min-width: 480px) { .mw-content .mw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .mw-content .mw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .mw-content .mw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .mw-content .mw-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 992px) { .mw-content .mw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mw-content .mw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .mw-content .mw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mw-content .mw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 5. Kachel -------------------------------------------------------------------------- */ .mw-content .mw-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--mw-head-bg); border-bottom: 4px solid var(--mw-head-bg); border-radius: var(--mw-radius); background: var(--mw-surface); box-shadow: 0 1px 2px rgba(var(--mw-navy-rgb), .05); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .mw-content .mw-card:hover { box-shadow: 0 .75rem 1.75rem rgba(var(--mw-navy-rgb), .16); transform: translateY(-3px); } /* --- Kachelkopf: feste Hoehe, Titel unten, Icon oben rechts --- */ .mw-content .mw-card__head { position: relative; display: flex; align-items: flex-end; height: var(--mw-head-h); padding: .75rem .95rem .7rem; background: var(--mw-head-bg); background-image: linear-gradient(135deg, var(--mw-head-bg) 0%, var(--mw-head-bg2) 100%); overflow: hidden; } .mw-content .mw-card__icon { position: absolute; top: .1rem; right: .0rem; width: auto; height: calc(var(--mw-head-h) - .1rem); opacity: .95; pointer-events: none; transition: transform .25s ease; } .mw-content--icon-left .mw-card__icon { right: auto; left: .5rem; } .mw-content .mw-card:hover .mw-card__icon { transform: translateY(-2px); } .mw-content .mw-card__title { position: relative; z-index: 1; max-width: 85%; margin: 0; color: var(--mw-white); font-size: var(--mw-title-fs); font-weight: 700; letter-spacing: var(--mw-title-ls); line-height: 1.2; text-transform: var(--mw-title-tt); text-wrap: balance; hyphens: none; -webkit-hyphens: none; overflow-wrap: break-word; /* Notbremse: Titel wird nie abgeschnitten */ } /* Variante mit breiter Kopfgrafik (180 x 64): Grafik liegt oben ueber die Kachelbreite, der Titel steht darunter. */ .mw-content--icon-wide .mw-card__icon { top: .55rem; right: auto; left: .0rem; width: 11rem; max-width: calc(100% - 1.9rem); height: auto; } .mw-content--icon-wide .mw-card__title { max-width: 100%; } /* --- Kachelinhalt --- */ .mw-content .mw-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: .95rem; text-align: left; /* kein Blocksatz – normale Wortabstaende */ overflow-wrap: break-word; /* Notbremse, damit nichts aus der Kachel laeuft */ } /* -------------------------------------------------------------------------- 5a. Eintrag aus Kennung + Beschreibung („Medizinische Fachbereiche“) -------------------------------------------------------------------------- */ .mw-content .mw-entry + .mw-entry { padding-top: .8rem; } .mw-content .mw-entry__code { display: inline-block; margin-bottom: .22rem; color: var(--mw-teal); font-size: .85rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } .mw-content .mw-entry__text { margin: 0; color: var(--mw-ink); font-size: .8rem; line-height: 1.5; } /* -------------------------------------------------------------------------- 5b. Bloecke aus Label + Aufzaehlung („Unsere Loesungen“) -------------------------------------------------------------------------- */ .mw-content .mw-block + .mw-block { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--mw-line); } .mw-content .mw-block__label { margin: 0 0 .35rem; color: var(--mw-navy); font-size: .9rem; font-weight: 700; line-height: 1.3; } .mw-content .mw-block__label .mw-sep { padding: 0 .35em; color: var(--mw-ink-soft); font-weight: 400; } .mw-content .mw-block__label sup { top: -.55em; font-size: .6em; } .mw-content .mw-codes { margin: 0 0 .55rem; color: var(--mw-teal); font-size: .85rem; font-weight: 600; line-height: 1.5; } .mw-content .mw-codes .mw-sep { color: var(--mw-ink-soft); } .mw-content .mw-codes span:not(.mw-sep) { white-space: nowrap; } /* Hervorgehobener Einstieg im Kachelinhalt (kein Verweis) */ .mw-content .mw-link { color: var(--mw-teal); font-weight: 600; } .mw-content .mw-list { margin: 0; padding: 0; list-style: none; font-size: .8rem; line-height: 1.45; } .mw-content .mw-list li { position: relative; padding-left: .85rem; } .mw-content .mw-list li + li { margin-top: .4rem; } .mw-content .mw-list li::before { content: ""; position: absolute; top: .5em; left: 0; width: .3rem; height: .3rem; border-radius: 50%; background: var(--mw-accent); } .mw-content .mw-facts { margin: .9rem 0 0; padding: 0; list-style: none; font-size: .8rem; line-height: 1.45; } .mw-content .mw-facts li { position: relative; padding-left: 1.15rem; } .mw-content .mw-facts li + li { margin-top: .3rem; } .mw-content .mw-facts li::before { content: "\2192"; position: absolute; left: 0; color: var(--mw-accent); font-weight: 700; } /* -------------------------------------------------------------------------- 6. Kontaktkachel -------------------------------------------------------------------------- */ .mw-content .mw-card--contact { background: var(--mw-tint); } .mw-content .mw-card--contact .mw-card__body { gap: .7rem; color: var(--mw-teal); font-size: .84rem; line-height: 1.5; } .mw-content .mw-card--contact p { margin: 0; } .mw-content .mw-card--contact .mw-card__cta { color: var(--mw-navy); font-size: .95rem; font-weight: 700; } .mw-content .mw-card--contact a { color: var(--mw-teal); text-decoration: underline; text-underline-offset: .15em; } .mw-content .mw-card--contact a:hover { color: var(--mw-navy); } /* -------------------------------------------------------------------------- 7. Fussnote unter dem Raster -------------------------------------------------------------------------- */ .mw-content .mw-footnote { margin: 2rem 0 0; color: var(--mw-ink-soft); font-size: .85rem; line-height: 1.55; } .mw-content .mw-footnote a { color: var(--mw-teal); text-decoration: underline; text-underline-offset: .15em; } .mw-content .mw-footnote a:hover { color: var(--mw-navy); } /* -------------------------------------------------------------------------- 8. Barrierefreiheit / Grundqualitaet -------------------------------------------------------------------------- */ .mw-content a:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .mw-content .mw-card, .mw-content .mw-card__icon { transition: none; } .mw-content .mw-card:hover, .mw-content .mw-card:hover .mw-card__icon { transform: none; } } /* -------------------------------------------------------------------------- 9. Druckausgabe -------------------------------------------------------------------------- */ @media print { .mw-content .mw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mw-content .mw-card { break-inside: avoid; box-shadow: none; transform: none; } .mw-content .mw-card__head { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* -------------------------------------------------------------------------- 10. Freie Rasterinhalte (Grafiken, Textspalten, Hinweisboxen) Nutzt dieselben Spalten wie das Kachelraster. -------------------------------------------------------------------------- */ .mw-content .mw-col--1, .mw-content .mw-col--2, .mw-content .mw-col--3 { grid-column: 1 / -1; min-width: 0; } /* Einzelspaltige Elemente duerfen schon ab zwei Spalten nebeneinander stehen */ @media (min-width: 480px) { .mw-content .mw-col--1 { grid-column: span 1; } } @media (min-width: 992px) { .mw-content .mw-col--1 { grid-column: span 1; } .mw-content .mw-col--2 { grid-column: span 2; } .mw-content .mw-col--3 { grid-column: span 2; } } @media (min-width: 1200px) { .mw-content .mw-col--1 { grid-column: span 1; } .mw-content .mw-col--2 { grid-column: span 2; } .mw-content .mw-col--3 { grid-column: span 3; } } /* Grafikflaeche: SVG skaliert verlustfrei auf die Spaltenbreite */ .mw-content .mw-figure { margin: 0; align-self: start; } .mw-content .mw-figure img { display: block; width: 100%; height: auto; } /* Kontaktzeile oben rechts */ .mw-content .mw-topcontact { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin: 0 0 1.5rem; color: var(--mw-navy); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .mw-content .mw-topcontact img { display: block; width: auto; height: 1.75rem; } /* Zwischenueberschrift ueber einer Grafikreihe */ .mw-content .mw-lead__title { margin: 0 0 .2rem; color: var(--mw-navy); font-size: 1.05rem; font-weight: 400; } .mw-content .mw-lead__sub { margin: 0 0 .8rem; color: var(--mw-teal); font-size: .8rem; } .mw-content .mw-lead__text { margin: 0; color: var(--mw-ink); font-size: .78rem; } /* Textspalte */ .mw-content .mw-prose { font-size: .8rem; line-height: 1.55; } .mw-content .mw-prose__title { margin: 0 0 .8rem; color: var(--mw-teal); font-size: 1rem; font-weight: 400; line-height: 1.3; } .mw-content .mw-prose p { margin: 0 0 .7rem; } .mw-content .mw-prose ul { margin: 0 0 .7rem; padding: 0; list-style: none; } .mw-content .mw-prose li { position: relative; padding-left: .85rem; } .mw-content .mw-prose li + li { margin-top: .2rem; } .mw-content .mw-prose li::before { content: "\00b7"; position: absolute; left: .15rem; color: var(--mw-navy); font-weight: 700; } .mw-content .mw-prose__note { margin: 0; color: var(--mw-navy); font-weight: 700; } /* Hinweisbox mit Handlungsaufforderung */ .mw-content .mw-callout { display: flex; flex-direction: column; gap: .8rem; align-self: stretch; padding: 1.1rem 1.25rem; border: 1px solid var(--mw-accent); border-radius: var(--mw-radius); color: var(--mw-navy); font-size: .85rem; line-height: 1.55; } .mw-content .mw-callout p { margin: 0; } .mw-content .mw-callout__cta { margin-top: auto; align-self: flex-end; } .mw-content .mw-callout__cta img { display: block; width: 13rem; max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- 11. Merkmalsliste mit Quadrat-Aufzaehlung und Textlink mit Icon -------------------------------------------------------------------------- */ .mw-content .mw-checklist { margin: 0; padding: 0; list-style: none; color: var(--mw-navy); font-size: .85rem; line-height: 1.5; } .mw-content .mw-checklist li { position: relative; padding-left: 1.4rem; } .mw-content .mw-checklist li + li { margin-top: .5rem; } .mw-content .mw-checklist li::before { content: ""; position: absolute; top: .45em; left: 0; width: .5rem; height: .5rem; background: var(--mw-navy); } .mw-content .mw-cta { display: inline-flex; align-items: center; align-self: flex-start; gap: .7rem; color: var(--mw-navy); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; } .mw-content .mw-cta:hover { color: var(--mw-teal); } .mw-content .mw-cta img { display: block; width: auto; height: 1.6rem; } /* -------------------------------------------------------------------------- 12. Kontaktangaben und Formular Die Formularklassen (.php-email-form, .form-group, .validate, .loading, .error-message, .sent-message) bleiben unveraendert, damit validate.js des Templates weiterhin greift. Hier wird nur die Optik angepasst. -------------------------------------------------------------------------- */ .mw-content .mw-contacts { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; } .mw-content .mw-contact { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border: 1px solid var(--mw-line); border-left: 3px solid var(--mw-accent); border-radius: var(--mw-radius); background: var(--mw-surface); } .mw-content .mw-contact img { display: block; flex: 0 0 auto; width: auto; height: 1.9rem; } .mw-content .mw-contact__label { display: block; color: var(--mw-ink-soft); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .mw-content .mw-contact__value { color: var(--mw-navy); font-size: .95rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .mw-content .mw-contact__value:hover { color: var(--mw-teal); } /* --- Formular --- */ .mw-content .mw-form { padding: 1.25rem; border: 1px solid var(--mw-accent); border-radius: var(--mw-radius); } .mw-content .mw-form .form-group { margin-bottom: .8rem; } .mw-content .mw-form__row { display: grid; gap: 0 .8rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 576px) { .mw-content .mw-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .mw-content .mw-form .form-control { display: block; width: 100%; padding: .6rem .75rem; border: 1px solid var(--mw-line); border-radius: var(--mw-radius); background: var(--mw-surface); box-shadow: none; color: var(--mw-ink); font-family: inherit; font-size: .88rem; line-height: 1.4; } .mw-content .mw-form .form-control::placeholder { color: var(--mw-ink-soft); opacity: 1; } .mw-content .mw-form .form-control:focus { border-color: var(--mw-accent); outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(var(--mw-teal-rgb), .15); } .mw-content .mw-form textarea.form-control { min-height: 8rem; resize: vertical; } .mw-content .mw-form__consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; color: var(--mw-ink); font-size: .78rem; line-height: 1.45; } .mw-content .mw-form__consent input { width: 1rem; height: 1rem; margin: .15rem 0 0; accent-color: var(--mw-accent); } .mw-content .mw-form__consent label { margin: 0; font-weight: 400; } .mw-content .mw-form button[type="submit"] { padding: .7rem 1.6rem; border: 0; border-radius: var(--mw-radius); background: var(--mw-accent); color: var(--mw-white); font-family: inherit; font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background-color .18s ease; } .mw-content .mw-form button[type="submit"]:hover { background: var(--mw-navy); } .mw-content .mw-form .loading, .mw-content .mw-form .error-message, .mw-content .mw-form .sent-message { font-size: .85rem; display: none; } /* Kopfgrafik „Ihr direkter Kontakt zu uns“ */ .mw-content .mw-intro__graphic { display: block; width: 16rem; max-width: 100%; height: auto; margin-top: 1.25rem; } /* -------------------------------------------------------------------------- 13. Textabsatz unter dem Claim und Grafik neben einer Liste -------------------------------------------------------------------------- */ .mw-content .mw-intro__lead { margin: 2.75rem 0 1rem; color: var(--mw-navy); font-size: 1.1rem; line-height: 1.5; } .mw-content .mw-intro__lead p { margin: 0 0 .8rem; } .mw-content .mw-media { display: grid; gap: 1.25rem 1.75rem; grid-template-columns: minmax(0, 1fr); align-items: center; } .mw-content .mw-media { grid-template-columns: 7.5rem minmax(0, 1fr); } .mw-content .mw-media__img { align-self: flex-start; margin-top: 0; } /* Unterhalb von 992px steht die Infobox ueber die volle Breite. Die Grafik hat als SVG keine feste Eigenbreite und laeuft dadurch aus ihrer 7.5rem breiten Rasterspalte heraus – sie legt sich dann ueber die Liste. Deshalb hier eine harte Breite fuer die Icon-Spalte und das Bild selbst; ab 992px bleibt alles unveraendert. */ @media (max-width: 991.98px) { .mw-content .mw-media { gap: 1rem 1.25rem; grid-template-columns: 5rem minmax(0, 1fr); } .mw-content .mw-media__img { display: block; width: 5rem; max-width: 100%; height: auto; } } /* -------------------------------------------------------------------------- 14. Startseite: Bildkopf ueber die volle Breite, Leistungstafeln, Kennzahlband Bildkopf und Band liegen bewusst ausserhalb von .container und laufen dadurch ohne 100vw-Trick randlos ueber die gesamte Breite. -------------------------------------------------------------------------- */ .mw-hero { background-color: var(--mw-hero-bg); background-image: linear-gradient(100deg, rgba(var(--mw-white-rgb), .55) 0%, rgba(var(--mw-white-rgb), .35) 32%, rgba(var(--mw-white-rgb), .08) 55%, rgba(var(--mw-white-rgb), 0) 72%), url("../img/bilder/Imagebild_Portfolio_hell.jpg"); background-position: center, 68% center; background-repeat: no-repeat; background-size: cover, cover; } .mw-hero__inner { display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(45rem, 32vw, 30rem); padding: calc(20vh + 1.5rem) 0 10px; } .mw-hero__title { max-width: 34rem; margin: 0 0 .9rem; color: var(--mw-navy); font-size: clamp(1.5rem, 1rem + 2.1vw, 2.5rem); font-weight: 300; line-height: 1.2; } .mw-hero__sub { max-width: 34rem; margin: 0; color: var(--mw-navy); font-size: clamp(.85rem, .78rem + .35vw, .98rem); font-weight: 700; line-height: 1.4; } @media (max-width: 767px) { .mw-hero { background-image: linear-gradient(180deg, rgba(var(--mw-white-rgb), .92) 0%, rgba(var(--mw-white-rgb), .8) 45%, rgba(var(--mw-white-rgb), .35) 100%), url("../img/bilder/Imagebild_Portfolio_hell.jpg"); background-position: center, 72% center; } } /* --- Leistungstafel (Startseite) --- */ .mw-content .mw-panel { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--mw-head-bg); border-bottom: 4px solid var(--mw-head-bg); border-radius: var(--mw-radius); background: var(--mw-surface); overflow: hidden; } .mw-content .mw-panel__head { position: relative; display: flex; align-items: flex-end; height: 6.5rem; padding: .7rem .9rem .6rem; background: var(--mw-head-bg); background-image: linear-gradient(135deg, var(--mw-head-bg) 0%, var(--mw-head-bg2) 100%); overflow: hidden; } .mw-content .mw-panel__icon { position: absolute; top: .35rem; right: .35rem; width: auto; height: 4.6rem; } .mw-content .mw-panel__kicker { position: relative; z-index: 1; margin: 0; color: var(--mw-white); font-size: .8rem; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; } .mw-content .mw-panel__body { flex: 1 1 auto; padding: .9rem; } .mw-content .mw-panel__claim { margin: 0; color: var(--mw-navy); font-size: .84rem; line-height: 1.45; } /* -------------------------------------------------------------------------- Wechselseitige Textbloecke mit Erlaeuterungskasten (Startseite) -------------------------------------------------------------------------- */ .mw-content .mw-feature { align-items: center; margin-top: 7rem; } .mw-content .mw-feature__text { color: var(--mw-navy); } @media (min-width: 992px) { .mw-content .mw-feature__text { text-align: right; } .mw-content .mw-feature--mirror .mw-feature__text { text-align: left; } .mw-content .mw-feature--mirror .mw-feature__box { order: -1; } } .mw-content .mw-feature__kicker { margin: 0 0 .5rem; color: var(--mw-navy); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight: 300; line-height: 1.2; } .mw-content .mw-feature__claim { margin: 0; font-size: clamp(.95rem, .88rem + .35vw, 1.15rem); font-weight: 400; line-height: 1.45; } .mw-content .mw-feature__claim strong { font-weight: 700; } .mw-content .mw-feature__box { padding: 1.1rem 1.25rem; /*border: 1px solid var(--mw-navy);*/ border-radius: var(--mw-radius); background: var(--mw-teal-10); color: var(--mw-ink); font-size: .8rem; line-height: 1.55; } .mw-content .mw-feature__box p { margin: 0; } .mw-content .mw-feature__box p + p { margin-top: .5rem; } /* --- Kennzahlband --- */ .mw-band { background: var(--mw-band-bg); } .mw-band__inner { padding: 2.5rem 0; } .mw-content .mw-stat { display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: 1.1rem 1rem; border-radius: var(--mw-radius); background: var(--mw-stat-bg); text-align: center; } .mw-content .mw-stat__value { margin: 0; color: var(--mw-navy); font-size: clamp(1.5rem, 1.25rem + .9vw, 2.1rem); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .mw-content .mw-stat__label { margin: 0; color: var(--mw-navy); font-size: .8rem; font-weight: 700; line-height: 1.3; } /* -------------------------------------------------------------------------- 15. Ergaenzungen Kopfbereich, Infobox, Merkmalsliste, Grafikreihen -------------------------------------------------------------------------- */ /* Kleingedruckter Zusatz unter dem Einstiegstext */ .mw-content .mw-intro__fine { margin: 1.1rem 0 0; color: var(--mw-ink); font-size: 0.9rem; line-height: 1.5; } /* Hervorgehobener Absatz in der Infobox */ .mw-content .mw-note__accent { margin: .9rem 0 0; color: var(--mw-teal); } .mw-content .mw-intro__note p { margin: 0; } /* Merkmalsliste ohne Aufzaehlungszeichen, durch Haarlinien getrennt */ .mw-content .mw-checklist--plain li { padding-left: 0; } .mw-content .mw-checklist--plain li::before { content: none; } .mw-content .mw-checklist--plain li + li { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--mw-line); } /* Kontaktzeile innerhalb einer Kachel: Symbol neben dem Text */ .mw-content .mw-inlinecontact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; } .mw-content .mw-inlinecontact img { display: block; width: auto; height: 1.5rem; } /* -------------------------------------------------------------------------- Grafikreihe: zwei Grafiken nebeneinander mit exakt gleicher Hoehe. Die fr-Werte entsprechen den viewBox-Breiten der beiden SVG. Da beide Grafiken einer Reihe gleich hoch angelegt sind, ergeben proportionale Spaltenbreiten automatisch gleiche Darstellungshoehen – auf jeder Bildschirmbreite, nicht nur im 5-Spalten-Raster. -------------------------------------------------------------------------- */ .mw-content .mw-figrow { display: grid; gap: var(--mw-gap); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--mw-gap); } /* Erst ab 992px nebeneinander: darunter wuerde die in den Grafiken fest angelegte Schrift zu klein und damit unlesbar. */ @media (min-width: 992px) { .mw-content .mw-figrow--wide-narrow { grid-template-columns: 1029.23fr 682.73fr; } .mw-content .mw-figrow--narrow-wide { grid-template-columns: 682.73fr 1029.23fr; } } /* Eingerueckte Zusatzzeile innerhalb einer Aufzaehlung (z. B. Schnittstellen) */ .mw-content .mw-list__sub { position: relative; display: block; margin-top: .25rem; padding-left: 1rem; color: var(--mw-ink-soft); } .mw-content .mw-list__sub::before { content: "\2192"; position: absolute; left: 0; color: var(--mw-accent); font-weight: 700; } /* Zusaetzlicher Abstand ueber einem Raster, das auf Grafiken folgt */ .mw-content .mw-grid--gap-top { margin-top: 2.5rem; } /* Die letzte Grafikreihe braucht keinen zusaetzlichen Abstand nach unten */ .mw-content .mw-figrow:last-of-type { margin-bottom: 0; } /* Verweis im hervorgehobenen Absatz der Infobox */ .mw-content .mw-note__accent a { color: inherit; text-decoration: underline; text-underline-offset: .15em; } .mw-content .mw-note__accent a:hover, .mw-content .mw-note__accent a:focus-visible { color: var(--mw-navy); } /* Kennzahlband: Spaltenaufteilung 1 | 3 | 1 nur im vollen Raster. Darunter gleich breit bzw. gestapelt, damit keine Kachel allein ueber die ganze Breite steht. */ @media (min-width: 768px) and (max-width: 991.98px) { .mw-content.mw-band .mw-col--3 { grid-column: span 1; } } @media (max-width: 767.98px) { .mw-content.mw-band .mw-col--1, .mw-content.mw-band .mw-col--3 { grid-column: 1 / -1; } } /* Quellenangabe unter Grafiken oder Tabellen */ .mw-content .mw-source { margin: .9rem 0 0; color: var(--mw-ink-soft); font-size: .68rem; font-style: italic; line-height: 1.45; } /* Verweis in der Kontaktkachel */ .mw-content .mw-inlinecontact a { color: inherit; text-decoration: underline; text-underline-offset: .15em; } .mw-content .mw-inlinecontact a:hover, .mw-content .mw-inlinecontact a:focus-visible { color: var(--mw-navy); } /* ========================================================================== 16. Aktionsleiste rechts (Telefon, E-Mail, Seitenanfang) Ersetzt die alten Template-Buttons .back-to-top und .kontakt. Bleibt beim Scrollen auf einer festen Bildschirmposition stehen; die Starthoehe entspricht der H1 des Inhaltsgesetzt). ========================================================================== */ .back-to-top, a.kontakt { display: none !important; /* alte Template-Buttons ausblenden */ } .mw-actionbar { position: fixed; top: 63vh; right: clamp(.75rem, 2vw, 2.5rem); z-index: 1000; display: flex; flex-direction: row; /* immer horizontal nebeneinander */ flex-wrap: nowrap; /* nie umbrechen, auch auf schmalen Screens */ gap: .6rem; } .mw-actionbar__btn { display: block; width: 3rem; height: 3rem; border-radius: var(--mw-radius, 3px); box-shadow: 0 .25rem .75rem rgba(var(--mw-navy-rgb), .25); transition: transform .18s ease, box-shadow .18s ease; } .mw-actionbar__btn img { display: block; width: 100%; height: 100%; } .mw-actionbar__btn:hover, .mw-actionbar__btn:focus-visible { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(var(--mw-navy-rgb), .35); outline: none; } /* Seitenanfang-Pfeil blendet erst nach etwas Scrollen ein */ .mw-actionbar__btn--top { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease, transform .18s ease; } .mw-actionbar.is-scrolled .mw-actionbar__btn--top { opacity: 1; visibility: visible; } @media (max-width: 575.98px) { .mw-actionbar__btn { width: 2.6rem; height: 2.6rem; } } /* -------------------------------------------------------------------------- 17. Abschluss-Band ueber die volle Seitenbreite (vor dem Footer) -------------------------------------------------------------------------- */ .mw-cta-band { width: 100%; background: #e6f1f6; } .mw-cta-band__inner { padding: 2.75rem 0; } .mw-cta-band__title { margin: 0 0 .75rem; color: var(--mw-navy); font-size: clamp(0.5rem, .3rem + .5vw, 1.3rem); font-weight: 700; letter-spacing: .02em; line-height: 1.3; text-transform: uppercase; } .mw-cta-band__text { max-width: 60rem; margin: 0 0 .6rem; color: var(--mw-navy); font-size: .95rem; line-height: 1.55; } .mw-cta-band__text:last-of-type { margin-bottom: 1.25rem; } .mw-cta-band__link { display: inline-flex; align-items: center; gap: .55rem; color: var(--mw-navy); font-size: .95rem; font-weight: 700; text-decoration: none; } .mw-cta-band__link::before { content: "\2192"; font-weight: 700; } .mw-cta-band__link span { text-decoration: underline; text-underline-offset: .15em; } .mw-cta-band__link:hover, .mw-cta-band__link:focus-visible { color: var(--mw-navy); } /* -------------------------------------------------------------------------- 18. Nur fuer Screenreader sichtbare Ueberschriften (SEO/Barrierefreiheit) Strukturiert die Seite semantisch, ohne das Layout zu veraendern. -------------------------------------------------------------------------- */ .mw-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Kongress-Teaser im Bildkopf der Startseite */ .mw-content .mw-hero__teaser { display: block; margin: 1rem 0 0; /* Mindestabstand nach oben; nach unten via .mw-hero__inner */ max-width: 30rem; width: 100%; } .mw-content .mw-hero__teaser img { display: block; width: 90%; height: auto; } /* -------------------------------------------------------------------------- 19. Kontaktseite: Rufnummern in der Infobox + Formular ueber die volle Breite Ergaenzt Abschnitt 12/13. Rein additiv – bestehende Regeln bleiben unveraendert. Die alten Klassen .mw-contacts / .mw-contact und .mw-intro__graphic werden auf kontakt.php nicht mehr gebraucht, bleiben aber fuer andere Seiten erhalten. -------------------------------------------------------------------------- */ /* Grafik + Rufnummern in der Infobox: exakt derselbe Baustein wie auf controlling.php. Die Icon-Spalte wird hier bewusst NICHT veraendert – Groesse und Abstand kommen allein aus .mw-media / .mw-media__img (Abschnitt 13), damit Icon_KH_vernetzt_* auf jeder Seite gleich gross erscheint. Reicht der Platz neben dem Icon fuer Bezeichnung + Nummer nicht aus, rutscht die Nummer in die zweite Zeile (siehe flex-wrap unten) – die Grafik bleibt davon unberuehrt. */ /*
im Kopfbereich: keine Kursivstellung, kein Eigenabstand */ .mw-content .mw-intro__note address { margin: 0; font-style: normal; } /* Waehlbare Rufnummern: Bezeichnung und Nummer in einer Zeile, Basis ist .mw-checklist--plain (Haarlinien zwischen den Eintraegen). */ .mw-content .mw-checklist--contact li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; } .mw-content .mw-checklist--contact .mw-checklist__label { color: var(--mw-navy); font-weight: 400; } .mw-content .mw-checklist--contact .mw-checklist__value { color: var(--mw-navy); font-weight: 700; text-decoration: none; white-space: nowrap; } .mw-content .mw-checklist--contact .mw-checklist__value:hover, .mw-content .mw-checklist--contact .mw-checklist__value:focus-visible { color: var(--mw-teal); text-decoration: underline; text-underline-offset: .15em; } /* Formular steht jetzt ohne Raster direkt in der Sektion und laeuft ueber die volle Inhaltsbreite – ab 992px etwas grosszuegigeres Innenmass. */ @media (min-width: 992px) { .mw-content .mw-form { padding: 2rem 2.25rem; } } /* Optional: Formular schmaler halten, falls die Felder zu breit wirken. .mw-content .mw-form { max-width: 60rem; } */