/* de.properties – Stylesheet nach den Brand-Guidelines der de.holdings Gruppe (Stand 24.10.2026):
   Tokens (Farben, Schriftstile, Abstände), Akzentfarbe nur im Umfeld des Logos (Akzentkante 3 px),
   Footer als Gruppen-Lockup der Tochter-Website. */

@font-face { font-family: "Hind"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/hind-400.woff") format("woff"); }
@font-face { font-family: "Hind"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/hind-500.woff") format("woff"); }
@font-face { font-family: "Hind"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/hind-600.woff") format("woff"); }
@font-face { font-family: "Hind"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/hind-700.woff") format("woff"); }

:root {
  /* Farben (helles Thema) */
  --weiss: #ffffff;
  --dunkelblau: #252b3f;
  --schwarz: #000000;
  --orange-solutions: #ee7100;
  --blau-systems: #0085cd;
  --gruen-properties: #94c11c;
  --gruen-properties-text: #5a7a00;
  --grund: #ffffff;
  --grund-abgesetzt: #f4f5f7;
  --text: #252b3f;
  --text-gedaempft: #5a5f70;
  --linie: #dfe1e6;
  /* Abstände (8-px-Raster) */
  --abstand-1: 4px; --abstand-2: 8px; --abstand-3: 16px; --abstand-4: 24px;
  --abstand-5: 32px; --abstand-6: 48px; --abstand-7: 64px; --abstand-8: 96px;
  --font-sans: "Hind", Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 16px/26px var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, ul { margin: 0; }
strong { font-weight: 600; }                                   /* hervorhebung */
a { color: var(--gruen-properties-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1; }
.container { max-width: 60rem; margin: 0 auto; padding: 0 var(--abstand-4); }
@media (min-width: 768px) { .container { padding: 0 var(--abstand-7); } }   /* Seitenränder abstand-7 */
.skip { position: absolute; left: var(--abstand-4); top: -100px; padding: var(--abstand-2) var(--abstand-3); background: var(--dunkelblau); color: var(--weiss); z-index: 100; }
.skip:focus { top: var(--abstand-3); }

/* Schriftstile */
.ueberschrift-1, .intro__title, .legal__title { font-size: 40px; line-height: 48px; font-weight: 700; }
.ueberschrift-2, .imprint__title { font-size: 28px; line-height: 36px; font-weight: 700; }
.ueberschrift-3, .intro__subtitle, .legal__content h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
.fliesstext-klein, .site-footer { font-size: 14px; line-height: 22px; }
.beschriftung, .imprint__label { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-gedaempft); }
@media (max-width: 639px) { .intro__title, .legal__title { font-size: 28px; line-height: 36px; } }

/* Header: Logo mit Akzentkante darüber (Schutzraum = halbe Icon-Höhe) */
.site-header { border-bottom: 1px solid var(--linie); }
.site-header__inner { padding-top: var(--abstand-3); padding-bottom: var(--abstand-4); }
.site-header__brand { display: inline-block; border-top: 3px solid var(--gruen-properties); padding-top: 20px; }
.site-header__brand img { height: 40px; width: auto; }

/* Startseite */
.intro { padding: var(--abstand-7) 0 var(--abstand-8); }
.intro__text { margin-top: var(--abstand-4); max-width: 38rem; }
.intro__subtitle { margin-top: var(--abstand-6); }
.intro__contact { margin-top: var(--abstand-2); }

.imprint { border-top: 1px solid var(--linie); padding: var(--abstand-7) 0 var(--abstand-8); }
.imprint__label { margin-top: var(--abstand-2); letter-spacing: .04em; text-transform: uppercase; }
.imprint__body { margin-top: var(--abstand-4); max-width: 38rem; }
.imprint__body p + p { margin-top: var(--abstand-3); }

/* Rechtstexte, 404 */
.legal { padding: var(--abstand-7) 0 var(--abstand-8); }
.legal__content { margin-top: var(--abstand-5); max-width: 42rem; }
.legal__content h2 { margin: var(--abstand-5) 0 var(--abstand-2); }
.legal__content h2:first-child { margin-top: 0; }
.legal__content p + p { margin-top: var(--abstand-3); }
.legal__content ul { margin-top: var(--abstand-3); padding-left: 1.25rem; }
.legal__content ul + p { margin-top: var(--abstand-3); }
.legal__content li + li { margin-top: var(--abstand-1); }
.legal__content a { text-decoration: underline; }
.legal__back { margin-top: var(--abstand-6); font-weight: 500; }

/* Footer der Tochter-Website: Holding-Logo mit Gruppenzeile links, Tochter-Logos mit Akzentkante rechts */
.site-footer { background: var(--grund-abgesetzt); border-top: 1px solid var(--linie); color: var(--text-gedaempft); }
.site-footer__inner { padding-top: var(--abstand-6); padding-bottom: var(--abstand-5); }
.site-footer__lockup { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--abstand-5) var(--abstand-6); }
.site-footer__holding { display: block; color: var(--text-gedaempft); }
.site-footer__holding img { height: 46px; width: auto; margin-bottom: var(--abstand-3); }
.site-footer__companies { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--abstand-4) var(--abstand-6); }   /* Schutzraum im Layout: abstand-6 */
.site-footer__company { border-top: 3px solid var(--linie); padding-top: var(--abstand-3); }
.site-footer__company a { display: block; }
.site-footer__company img { height: 26px; width: auto; }
.site-footer__company--orange { border-top-color: var(--orange-solutions); }
.site-footer__company--blau { border-top-color: var(--blau-systems); }
.site-footer__company--gruen { border-top-color: var(--gruen-properties); }
.site-footer__company--other { opacity: .4; transition: opacity .15s ease; }
.site-footer__company--other:hover, .site-footer__company--other:focus-within { opacity: 1; }
.site-footer__legal { margin-top: var(--abstand-5); padding-top: var(--abstand-3); border-top: 1px solid var(--linie); }
.site-footer__legal span { margin: 0 var(--abstand-2); }
.site-footer__legal a { color: inherit; text-decoration: underline; }