/* ═══════════════════════════════════════════════════════════════════════════ Grundregeln des Themes „Life Design" Die Stile im Plugin (startseite*.css, grafiken.css, anfrage.css, rahmen.css) wurden unter Zephyr gebaut und verlassen sich auf dessen seitenweite Elementregeln: Schriftgröße 18 px an (1rem = 18 px!), Abstände von p/ul/li/Überschriften, Formularfelder, Tabellen. Damit die Seiten unter dem eigenen Theme genauso aussehen, stehen genau diese Elementregeln hier, mit den Werten der Zephyr-Einstellungen dieser Website (Stand 26.09.2026, us-assets/p-zjmg39.project.space.css). Keine Klassen von Zephyr. Wenn Zephyr weg ist, lassen sich die Regeln hier Schritt für Schritt vereinfachen; bis dahin gilt: eine Änderung hier verändert alle Seiten. ═══════════════════════════════════════════════════════════════════════════ */ :root { --ld-text: #424242; /* Zephyr: Fließtext */ --ld-ueberschrift: #003e5d; /* Zephyr: Überschriften */ --ld-link: #1fb1fb; /* Zephyr: Links */ --ld-linie: #e0e0e0; /* Zephyr: Rahmen */ --ld-primaer: #003e5d; /* Zephyr: Fokus, Primärfarbe */ --ld-grund-alt: #003e5d; --inputs-font-family: inherit; --inputs-font-size: 1rem; --inputs-font-weight: 400; --inputs-letter-spacing: 0em; --inputs-text-transform: none; --inputs-height: 3em; --inputs-padding: 1em; --inputs-checkbox-size: 1.5em; --inputs-border-width: 1px; --inputs-border-radius: .2em; --inputs-background: transparent; --inputs-border-color: #e0e0e0; --inputs-text-color: inherit; --inputs-focus-background: transparent; --inputs-focus-border-color: #003e5d; --inputs-focus-text-color: inherit; --inputs-focus-box-shadow: 0 0 0 1px #003e5d inset; } /* ── Gerüst ─────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-family: "Open Sans", sans-serif; font-weight: 400; font-size: 18px; font-style: normal; line-height: 28px; letter-spacing: 0; } body { margin: 0; overflow-x: hidden; background: #fff; color: var(--ld-text); -webkit-tap-highlight-color: rgba(0, 62, 93, .15); } @media screen and (min-width: 1025px) { body { display: flex; flex-direction: column; min-height: 100vh; } body.admin-bar { min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); } } /* .ld-seite entspricht Zephyrs .l-canvas: Kopf und Inhalt, die Fußzeile steht danach */ .ld-seite { margin: 0 auto; width: 100%; flex-grow: 1; background: #fff; color: var(--ld-text); } @media (max-width: 767px) { .ld-seite { overflow: hidden; } } .ld-inhalt { display: block; } .ld-inhalt:focus { outline: none; } /* ── Elemente (Zephyr-Grundregeln) ──────────────────────────────────────── */ details { display: block; } summary { display: list-item; } progress { vertical-align: baseline; } [hidden], template { display: none; } a { color: var(--ld-link); text-decoration: none; background: none; transition-property: background, box-shadow, border, color, opacity, text-decoration-color, text-underline-offset, transform; transition-duration: .2s; } b, strong { font-weight: 700; } dfn { font-style: italic; } address { font-style: normal; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } img { height: auto; max-width: 100%; } figure { margin: 0; } hr { box-sizing: content-box; height: 0; border-style: solid; border-width: 0 0 1px; border-color: var(--ld-linie); } pre { overflow: auto; white-space: pre-wrap; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1rem; } button, input, optgroup, select, textarea { vertical-align: top; text-transform: none; color: inherit; font: inherit; border: none; margin: 0; } select[multiple] { height: auto; padding: .5rem; } textarea { overflow: auto; resize: vertical; } input:not([type=submit]), select, textarea { outline: none !important; } input[type=tel], input[type=text], input[type=date], input[type=email], input[type=search], input[type=number], input[type=password], textarea { -webkit-appearance: none; } input[type=file]::file-selector-button { color: inherit; } button, [type=button], [type=reset], [type=submit] { overflow: visible; -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; opacity: .5; } label, [type=checkbox], [type=radio] { cursor: pointer; } ::-moz-focus-inner { border: 0; } legend { border: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } th { text-align: left; } td, th { vertical-align: top; padding: .6rem 1rem; border-bottom: 1px solid; border-color: var(--ld-linie); outline: none !important; } dl, ul, ol { list-style: none; margin: 0; padding: 0; } fieldset { border: 0; margin: 0; padding: 0; } audio, video, iframe, object, embed { max-width: 100%; border: none; } ::-moz-placeholder { opacity: .5; color: inherit; } ::-webkit-input-placeholder { color: inherit; opacity: .5; } h1, h2, h3, h4, h5, h6 { margin: 0; padding-top: 1.5rem; color: var(--ld-ueberschrift); } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 { padding-top: 0; } p, ul, ol, dl, address, pre, table, blockquote, fieldset { margin: 0 0 1.5rem; } p:empty { display: none; } ul { list-style-type: disc; margin-left: 2.5rem; } ol { list-style-type: decimal; margin-left: 2.5rem; } li { margin: 0 0 .5rem; } li > ul, li > ol { margin-bottom: .5rem; margin-top: .5rem; } blockquote { position: relative; padding: 0 3rem; font-size: 1.3em; line-height: 1.7; } blockquote::before { content: "\201C"; display: block; font-size: 6rem; line-height: .8; font-family: Georgia, serif; position: absolute; left: 0; opacity: .5; } blockquote p, blockquote ul, blockquote ol { margin-bottom: .5em; } blockquote cite { display: block; font-size: 1rem; font-style: normal; margin-top: .5rem; } pre { display: block; font-family: Consolas, "Lucida Console", monospace; font-size: .9rem; line-height: 1.65; padding: .8em 1em; width: 100%; overflow: auto; background: var(--ld-grund-alt); color: var(--ld-text); } code { display: inline-block; vertical-align: top; font-family: Consolas, "Lucida Console", monospace; padding: 0 .4rem; background: var(--ld-grund-alt); color: var(--ld-text); } pre code { display: block; padding: 0; overflow-wrap: normal; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, li:last-child, pre:last-child, table:last-child, address:last-child, fieldset:last-child, blockquote:last-child { margin-bottom: 0; } /* Überschriften: Comfortaa wie bisher (Zephyr-Einstellung); die eigenen Seiten setzen Manrope */ h1, h2, h3, h4, h5, h6 { font-family: Comfortaa, cursive; font-style: normal; text-transform: none; letter-spacing: 0; line-height: 1.2; margin-bottom: 1.5rem; } h1 { font-size: 66px; font-weight: 300; } h2 { font-size: 46px; font-weight: 400; } h3 { font-size: 36px; font-weight: 400; } h4 { font-size: 32px; font-weight: 400; } h5 { font-size: 24px; font-weight: 400; } h6 { font-size: 18px; font-weight: 400; } h1 > strong, h2 > strong, h3 > strong, h4 > strong, h5 > strong, h6 > strong { font-weight: 500; } @media (max-width: 600px) { h1 { font-size: 30px; } h2 { font-size: 26px; } h3 { font-size: 24px; } h4 { font-size: 22px; } h5 { font-size: 20px; } p { margin-bottom: 1rem; } h1, h2, h3, h4, h5, h6 { padding-top: 1rem; } } /* Formularfelder */ input:not([type=submit]), textarea, select { font-family: var(--inputs-font-family, inherit); font-size: var(--inputs-font-size, inherit); font-weight: var(--inputs-font-weight, inherit); letter-spacing: var(--inputs-letter-spacing, inherit); text-transform: var(--inputs-text-transform, inherit); border-radius: var(--inputs-border-radius, 0); background: var(--inputs-background, transparent); border-color: var(--inputs-border-color, currentColor); color: var(--inputs-text-color, inherit); box-shadow: var(--inputs-box-shadow, none); border-width: var(--inputs-border-width, 1px); border-style: solid; width: 100%; transition: all .2s; } input[type=date], input[type=datetime-local], input[type=email], input[type=file], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select { min-height: var(--inputs-height, 2em); line-height: var(--inputs-height, 2em); padding: 0 var(--inputs-padding, .6em); } select { height: calc(var(--inputs-height, 2em) + var(--inputs-border-width, 1px) * 2); } textarea { min-height: var(--inputs-height, 2em); height: calc(var(--inputs-height, 2em) * 3); padding: calc(var(--inputs-height, 2em) / 2 + var(--inputs-border-width, 1px) - .7em) var(--inputs-padding, .6em); } input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; vertical-align: top; flex-shrink: 0; text-align: center; margin-right: .5em; letter-spacing: 0; text-transform: none; line-height: var(--inputs-checkbox-size, 1.5em); height: var(--inputs-checkbox-size, 1.5em); width: var(--inputs-checkbox-size, 1.5em); padding: 0; box-sizing: content-box; } /* Zephyr zeichnete den Haken mit der Symbolschrift „Material Icons"; hier als Maske, ohne Schriftdatei */ input[type=checkbox]::before { content: ""; display: block; width: 100%; height: 100%; visibility: hidden; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 80% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 80% no-repeat; } input[type=radio] { border-radius: 50% !important; } input[type=radio]::before { visibility: hidden; content: ""; display: block; height: 36%; width: 36%; margin: 32%; border-radius: inherit; background: currentColor; } input:checked::before { visibility: visible; } input[type=range] { box-shadow: none !important; } input:not([type=submit]):focus, select:focus, textarea:focus { background: var(--inputs-focus-background, transparent); border-color: var(--inputs-focus-border-color, currentColor); color: var(--inputs-focus-text-color, inherit); box-shadow: var(--inputs-focus-box-shadow, none); } button[type=submit], input[type=submit] { display: inline-block; vertical-align: top; text-align: center; line-height: 1.2; position: relative; transition-property: background, border, box-shadow, color, opacity, transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } input[type=submit] { border-style: solid; } button::-moz-focus-inner { padding: 0; border: 0; } /* Fokus */ :focus-visible { outline: 2px solid var(--ld-primaer); outline-offset: 2px; } a:not(:focus-visible), button:not(:focus-visible), input[type=submit]:not(:focus-visible) { outline: none; } /* WordPress */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .alignleft { float: left; margin: 0 1.5rem 1rem 0; } .alignright { float: right; margin: 0 0 1rem 1.5rem; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { max-width: 100%; } .wp-caption-text { font-size: .85em; opacity: .75; } @media print { *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; animation: none !important; } .ld-kopf, .ld-nach-oben, .ld-sprung { display: none !important; } }