/*
Theme Name: SIS Prüfstelle Michendorf
Theme URI: https://www.pruefstelle-michendorf.de
Author: SIS Sachverständige im Straßenverkehrswesen mbH
Description: Individuelles Theme für die SIS Prüfstelle Michendorf — GTÜ-Vertragspartner Berlin/Brandenburg
Version: 1.0.0
Text Domain: sis-theme
*/

/* ═══════════════════════════════════════════
   CSS CUSTOM PROPERTIES
═══════════════════════════════════════════ */
:root {
  --color-primary:        #b40803;
  --color-primary-dark:   #8c0602;
  --color-white:          #ffffff;
  --color-bg:             #f8f9fa;
  --color-gray-light:     #f3f4f5;
  --color-gray-mid:       #edeeef;
  --color-gray-high:      #e7e8e9;
  --color-border:         #e1e3e4;
  --color-text:           #191c1d;
  --color-text-variant:   #454652;
  --color-text-muted:     #475569;
  --color-text-faint:     #64748b;
  --color-dark:           #0f172a;
  --radius:               5px;
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  padding-top: 108px;
}
@media (max-width: 1023px) {
  body { padding-top: 64px; }
}

h1, h2, h3 { font-family: 'Oswald', sans-serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════
   CONTAINER
═══════════════════════════════════════════ */
.sis-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px) {
  .sis-wrap { padding: 0 2rem; }
}

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
.sis-nav {
  position: fixed;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sis-nav__top {
  border-bottom: 1px solid var(--color-border);
  height: 64px;
}

.sis-nav__logos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.sis-nav__logos img { height: 40px; }

.sis-nav__logo-divider {
  width: 1px;
  height: 32px;
  background: var(--color-border);
  flex-shrink: 0;
}

.sis-nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sis-nav__phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-text);
}
.sis-nav__phone .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 20px;
}
.sis-nav__phone span { font-weight: 700; font-size: 0.9375rem; }

.sis-nav__call-btn {
  background: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
  transition: background 0.15s;
}
.sis-nav__call-btn:hover { background: var(--color-primary-dark); }

.sis-nav__burger {
  display: none;
  padding: 0.5rem;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--color-text);
}
@media (max-width: 1023px) {
  .sis-nav__burger { display: block; }
}

.sis-nav__main {
  background: var(--color-primary);
  height: 44px;
  display: flex;
  align-items: center;
}
@media (max-width: 1023px) {
  .sis-nav__main { display: none; }
}

.sis-nav__menu {
  list-style: none;
  display: flex;
  align-items: center;
  height: 44px;
}

.sis-nav__item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.sis-nav__link {
  text-decoration: none;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0 0.75rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: background 0.15s;
  white-space: nowrap;
}
.sis-nav__link:hover,
.sis-nav__link--active {
  background: var(--color-primary-dark);
}

.sis-nav__secondary {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 44px;
}

.sis-nav__secondary-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0 0.75rem;
  height: 100%;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.sis-nav__secondary-link:hover {
  color: #fff;
  background: var(--color-primary-dark);
}

/* Dropdown */
.sis-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 12px 32px rgba(25, 28, 29, 0.10);
  z-index: 100;
  list-style: none;
}
.sis-nav__item:hover .sis-dropdown { display: block; }

.sis-dropdown a {
  display: block;
  padding: 0.65rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-variant);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.sis-dropdown a:hover {
  background: var(--color-gray-light);
  color: var(--color-primary);
}

/* Mobile nav */
.sis-mobile-nav {
  display: none;
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding: 1.5rem;
  position: absolute;
  width: 100%;
  z-index: 99;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.sis-mobile-nav.is-open { display: block; }

.sis-mobile-nav .sis-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-variant);
  text-transform: uppercase;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.sis-mobile-nav .sis-label:first-child { margin-top: 0; }

.sis-mobile-nav a {
  display: block;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.1s;
}
.sis-mobile-nav a:hover { color: var(--color-primary); }

/* ═══════════════════════════════════════════
   WP NAV MENU — PRIMARY
═══════════════════════════════════════════ */
.sis-primary-menu {
  list-style: none;
  display: flex;
  align-items: center;
  height: 44px;
  margin: 0;
  padding: 0;
}
.sis-primary-menu > li {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.sis-primary-menu > li > a {
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0 0.75rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: background 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.sis-primary-menu > li > a:hover,
.sis-primary-menu > li.current-menu-item > a,
.sis-primary-menu > li.current-menu-ancestor > a,
.sis-primary-menu > li.current-page-ancestor > a {
  background: var(--color-primary-dark);
}
.sis-primary-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 12px 32px rgba(25,28,29,0.10);
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sis-primary-menu > li.menu-item-has-children:hover > .sub-menu {
  display: block;
}
.sis-primary-menu .sub-menu li a {
  display: block;
  padding: 0.65rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-variant);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.sis-primary-menu .sub-menu li a:hover {
  background: var(--color-gray-light);
  color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   WP NAV MENU — SECONDARY
═══════════════════════════════════════════ */
.sis-secondary-menu {
  list-style: none;
  display: flex;
  align-items: center;
  height: 44px;
  margin: 0;
  padding: 0;
}
.sis-secondary-menu > li > a {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0 0.75rem;
  height: 100%;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.sis-secondary-menu > li > a:hover,
.sis-secondary-menu > li.current-menu-item > a {
  color: #fff;
  background: var(--color-primary-dark);
}

/* ═══════════════════════════════════════════
   WP NAV MENU — MOBILE
═══════════════════════════════════════════ */
.sis-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sis-mobile-nav__list > li > a {
  display: block;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.1s;
}
.sis-mobile-nav__list > li > a:hover { color: var(--color-primary); }
.sis-mobile-nav__list .sub-menu {
  list-style: none;
  padding-left: 1rem;
  margin: 0.25rem 0 0.5rem;
}
.sis-mobile-nav__list .sub-menu li a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-variant);
  text-decoration: none;
  transition: color 0.1s;
}
.sis-mobile-nav__list .sub-menu li a:hover { color: var(--color-primary); }

.sis-mobile-nav__secondary {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.sis-mobile-nav__secondary > li > a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-variant);
  text-decoration: none;
  display: block;
  padding: 0.3rem 0;
}
.sis-mobile-nav__secondary > li > a:hover { color: var(--color-primary); }

/* ═══════════════════════════════════════════
   PAGE HEADER (dark banner)
═══════════════════════════════════════════ */
.sis-page-header {
  background: var(--color-dark);
  color: #fff;
  padding: 6rem 0 4rem;
}

.sis-accent-bar {
  display: block;
  width: 32px;
  height: 4px;
  background: var(--color-primary);
  margin-bottom: 1rem;
}

.sis-page-header h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
  line-height: 1.05;
}
@media (min-width: 768px) {
  .sis-page-header h1 { font-size: 4.5rem; }
}

.sis-page-header__subtitle {
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 300;
  max-width: 42rem;
  font-size: 1.125rem;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   SECTIONS
═══════════════════════════════════════════ */
.sis-section { padding: 5rem 0; }
.sis-section--white { background: #fff; }
.sis-section--light { background: var(--color-gray-light); }
.sis-section--gray  { background: var(--color-gray-mid); }
.sis-section--dark  { background: var(--color-dark); color: #fff; }
.sis-section--primary { background: var(--color-primary); color: #fff; }

/* ═══════════════════════════════════════════
   SECTION HEADINGS
═══════════════════════════════════════════ */
.sis-section-title {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
}
.sis-section-title--large { font-size: 3rem; }
.sis-section-title--xl    { font-size: 3.5rem; }
@media (min-width: 768px) {
  .sis-section-title--xl { font-size: 4.5rem; }
}
.sis-section-title--light { color: #fff; }

.sis-section-subtitle {
  color: var(--color-text-faint);
  max-width: 42rem;
  line-height: 1.7;
  margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════
   LABEL
═══════════════════════════════════════════ */
.sis-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   SERVICE CARDS GRID
═══════════════════════════════════════════ */
.sis-card-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .sis-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .sis-card-grid { grid-template-columns: repeat(4, 1fr); }
}
.sis-card-grid--3 { }
@media (min-width: 1024px) {
  .sis-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.sis-card {
  background: #fff;
  padding: 2.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background 0.2s, color 0.2s;
}
.sis-card:hover {
  background: var(--color-primary);
  color: #fff;
}

.sis-card__icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  display: block;
  margin-bottom: 2rem;
}
.sis-card:hover .sis-card__icon { color: #fff; }

.sis-card__title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  margin: 0 0 0.75rem 0;
}

.sis-card__body {
  font-size: 0.9375rem;
  opacity: 0.7;
  line-height: 1.7;
  margin: 0 0 2rem 0;
}

.sis-card__link {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.sis-card:hover .sis-card__link { color: #fff; }

/* ═══════════════════════════════════════════
   CONTENT + SIDEBAR LAYOUT
═══════════════════════════════════════════ */
.sis-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .sis-layout { grid-template-columns: 2fr 1fr; }
}
.sis-layout__main { min-width: 0; }
.sis-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ═══════════════════════════════════════════
   CONTENT BLOCKS
═══════════════════════════════════════════ */
.sis-content-block { margin-bottom: 2.5rem; }
.sis-content-block p {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.sis-content-block h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--color-text);
  margin: 0 0 1rem 0;
}
.sis-content-block--gray {
  background: var(--color-gray-light);
  padding: 2rem;
}

/* ═══════════════════════════════════════════
   NUMBERED STEPS
═══════════════════════════════════════════ */
.sis-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.sis-step { display: flex; gap: 1rem; }
.sis-step__num {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-primary);
  flex-shrink: 0;
  width: 2rem;
}
.sis-step__title {
  font-weight: 700;
  color: var(--color-text);
  display: block;
  margin-bottom: 0.25rem;
}
.sis-step__body {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   FEATURE GRID
═══════════════════════════════════════════ */
.sis-feature-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) {
  .sis-feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.sis-feature-card {
  background: #fff;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
}
.sis-feature-card .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.75rem;
}
.sis-feature-card__title {
  font-size: 0.875rem;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.sis-feature-card__body {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   INFO BOX
═══════════════════════════════════════════ */
.sis-info-box {
  display: flex;
  gap: 1rem;
  background: var(--color-gray-mid);
  padding: 1.25rem;
}
.sis-info-box .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.sis-info-box p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ═══════════════════════════════════════════
   IMAGE + TEXT BOX (HU Plakette)
═══════════════════════════════════════════ */
.sis-image-text {
  background: var(--color-gray-light);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 640px) {
  .sis-image-text { flex-direction: row; }
}
.sis-image-text img {
  width: 8rem;
  height: auto;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   SIDEBAR WIDGETS
═══════════════════════════════════════════ */
.sis-contact-box {
  background: var(--color-primary);
  color: #fff;
  padding: 2rem;
  border-radius: var(--radius);
}
.sis-contact-box h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  margin: 0 0 1rem 0;
}
.sis-contact-box p {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.sis-contact-box__phone {
  display: block;
  font-weight: 900;
  font-size: 1.125rem;
  color: #fff;
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.sis-contact-box .sis-btn {
  background: #fff;
  color: var(--color-primary);
  font-size: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-block;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.sis-contact-box .sis-btn:hover { background: var(--color-gray-light); }

.sis-sidebar-links {
  background: var(--color-gray-light);
  padding: 1.5rem;
}
.sis-sidebar-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sis-sidebar-links li a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-variant);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  transition: color 0.1s;
}
.sis-sidebar-links li a:hover { color: var(--color-primary); }
.sis-sidebar-links .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 1rem;
}

.sis-sidebar-note {
  border: 1px solid var(--color-border);
  padding: 1.5rem;
}
.sis-sidebar-note p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.sis-sidebar-note__hours { margin-top: 1rem; }
.sis-sidebar-note__hours p { font-size: 0.75rem; color: var(--color-text-faint); }
.sis-sidebar-note__hours strong { color: var(--color-text); font-weight: 700; }

.sis-sidebar-back a {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════
   CTA BAND
═══════════════════════════════════════════ */
.sis-cta {
  background: var(--color-primary);
  color: #fff;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.sis-cta--dark { background: var(--color-dark); }

.sis-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .sis-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.sis-cta__title {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 0.5rem 0;
  color: #fff;
}
.sis-cta__subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.6;
}

.sis-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .sis-cta__actions {
    flex-direction: row;
    align-items: center;
  }
}

.sis-cta__phone-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-bottom: 0.25rem;
}
.sis-cta__phone-number {
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.sis-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.sis-btn--primary { background: var(--color-primary); color: #fff; }
.sis-btn--primary:hover { background: var(--color-primary-dark); }
.sis-btn--white { background: #fff; color: var(--color-primary); }
.sis-btn--white:hover { background: var(--color-gray-light); }
.sis-btn--dark { background: var(--color-dark); color: #fff; border-radius: 0; }
.sis-btn--dark:hover { background: #1e293b; }
.sis-btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.sis-btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); }
.sis-btn--outline-dark {
  background: transparent;
  color: #94a3b8;
  border: 1px solid #334155;
}
.sis-btn--outline-dark:hover { border-color: #64748b; color: #fff; }

/* ═══════════════════════════════════════════
   HOMEPAGE — HERO
═══════════════════════════════════════════ */
.sis-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.sis-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sis-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sis-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.7), rgba(0,0,0,0.25));
}
.sis-hero__content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 6rem 0;
}
.sis-hero__accent {
  width: 48px;
  height: 4px;
  background: var(--color-primary);
  margin-bottom: 1.5rem;
  display: block;
}
.sis-hero__title {
  font-family: 'Oswald', sans-serif;
  font-size: 4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.05;
  margin: 0 0 1.5rem 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  max-width: 56rem;
}
@media (min-width: 768px) {
  .sis-hero__title { font-size: 5.5rem; }
}
.sis-hero__subtitle {
  font-size: 1.125rem;
  color: #cbd5e1;
  font-weight: 300;
  max-width: 42rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.sis-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ═══════════════════════════════════════════
   HOMEPAGE — SERVICES SECTION
═══════════════════════════════════════════ */
.sis-services {
  padding: 6rem 0;
  background: var(--color-bg);
}
.sis-services__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) {
  .sis-services__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.sis-services__lead {
  font-size: 0.9375rem;
  color: var(--color-text-faint);
  max-width: 20rem;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   HOMEPAGE — ABOUT SPLIT
═══════════════════════════════════════════ */
.sis-about {
  background: var(--color-gray-light);
  overflow: hidden;
}
.sis-about__inner {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .sis-about__inner { flex-direction: row; }
}
.sis-about__text {
  padding: 3rem;
  flex: 1;
}
@media (min-width: 1024px) {
  .sis-about__text { padding: 6rem; }
}
.sis-about__title {
  font-family: 'Oswald', sans-serif;
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-text);
  margin: 0 0 2rem 0;
}
.sis-about__body {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 2.5rem;
  font-weight: 300;
}
.sis-about__checklist {
  list-style: none;
  margin: 0 0 2.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sis-about__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.sis-about__item .material-symbols-outlined {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1.25rem;
}
.sis-about__item-title {
  font-weight: 700;
  font-size: 0.9375rem;
  display: block;
  margin-bottom: 0.25rem;
}
.sis-about__item-text {
  font-size: 0.9375rem;
  color: var(--color-text-faint);
}
.sis-about__footer {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.sis-about__image {
  width: 50%;
  position: relative;
  min-height: 480px;
}
@media (max-width: 1023px) {
  .sis-about__image {
    width: 100%;
    min-height: 300px;
  }
}
.sis-about__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ═══════════════════════════════════════════
   HOMEPAGE — LOCATIONS
═══════════════════════════════════════════ */
.sis-locations {
  padding: 6rem 0;
  background: var(--color-bg);
}
.sis-locations__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 1024px) {
  .sis-locations__grid { grid-template-columns: 1fr 1fr; }
}
.sis-locations__map {
  background: var(--color-gray-high);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.sis-locations__map img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}
.sis-locations__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sis-location-card {
  padding: 2rem;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.sis-location-card:nth-child(even) { border-right: none; }
.sis-location-card h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.0625rem;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.sis-location-card__addr,
.sis-location-card__hours {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.sis-location-card__phone {
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.9375rem;
}

/* ═══════════════════════════════════════════
   HOMEPAGE — PARTNERS
═══════════════════════════════════════════ */
.sis-partners {
  padding: 3.5rem 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.sis-partners__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem 5rem;
  filter: grayscale(1);
  opacity: 0.4;
  transition: opacity 0.5s, filter 0.5s;
}
.sis-partners__logos:hover {
  opacity: 0.75;
  filter: grayscale(0);
}
.sis-partners__logos img {
  height: 36px;
  object-fit: contain;
}

/* ═══════════════════════════════════════════
   STANDORTE DETAIL PAGE
═══════════════════════════════════════════ */
.sis-location-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .sis-location-detail-grid { grid-template-columns: 1fr 1fr; }
}
.sis-location-detail-card {
  background: #fff;
  padding: 2rem;
  border: 1px solid var(--color-border);
}
.sis-location-detail-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.sis-location-detail-card__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.sis-location-detail-card__badge--default { color: var(--color-text-variant); }
.sis-location-detail-card__icon {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.sis-location-detail-card__icon--gray { background: var(--color-gray-mid); color: var(--color-text-variant); }
.sis-location-detail-card__rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sis-location-detail-card__row { display: flex; gap: 0.75rem; }
.sis-location-detail-card__row .material-symbols-outlined {
  color: var(--color-text-variant);
  flex-shrink: 0;
  margin-top: 0.1rem;
  font-size: 1.125rem;
}
.sis-location-detail-card__row-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
}
.sis-location-detail-card__row-text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   KONTAKT PAGE
═══════════════════════════════════════════ */
.sis-contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem 4rem;
}
@media (min-width: 1024px) {
  .sis-contact-layout { grid-template-columns: 3fr 2fr; }
}

.sis-form { display: flex; flex-direction: column; gap: 1.5rem; }
.sis-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .sis-form-row { grid-template-columns: 1fr 1fr; }
}
.sis-form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.sis-form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-variant);
  text-transform: uppercase;
}
.sis-form-field {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  font-size: 0.9375rem;
  font-family: inherit;
  border-radius: var(--radius);
  color: var(--color-text);
  background: #fff;
  transition: border-color 0.15s;
  appearance: none;
}
.sis-form-field:focus {
  outline: none;
  border-color: var(--color-primary);
}
.sis-form-field--select { cursor: pointer; }
.sis-form-field--textarea {
  resize: vertical;
  min-height: 140px;
}
.sis-form-checkbox { display: flex; gap: 0.75rem; align-items: flex-start; }
.sis-form-checkbox input {
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}
.sis-form-checkbox label {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  line-height: 1.6;
  cursor: pointer;
}
.sis-form-submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sis-form-required { font-size: 0.75rem; color: #94a3b8; }

.sis-contact-info {
  background: #fff;
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.sis-contact-info__row {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.sis-contact-info__row:last-child { border-bottom: none; }
.sis-contact-info__icon {
  width: 32px;
  height: 32px;
  background: var(--color-gray-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sis-contact-info__icon .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 1.125rem;
}
.sis-contact-info__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  display: block;
  margin-bottom: 0.25rem;
}
.sis-contact-info__text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.sis-contact-hint {
  background: rgba(180, 8, 3, 0.05);
  border-left: 4px solid var(--color-primary);
  padding: 1.25rem;
  margin-top: 1.5rem;
}
.sis-contact-hint p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   UNTERNEHMEN / TEAM
═══════════════════════════════════════════ */
.sis-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.sis-stat {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  text-align: center;
}
.sis-stat__number {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-primary);
  display: block;
  margin-bottom: 0.25rem;
}
.sis-stat__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  text-transform: uppercase;
}

.sis-team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .sis-team-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .sis-team-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.sis-team-card {
  background: #fff;
  padding: 2rem;
  border: 1px solid var(--color-gray-mid);
}
.sis-team-card__avatar {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--radius);
}
.sis-team-card__avatar--dark { background: #334155; }
.sis-team-card__name {
  font-weight: 900;
  color: var(--color-text);
  font-size: 0.9375rem;
  display: block;
  margin-bottom: 0.25rem;
}
.sis-team-card__role {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}
.sis-team-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--color-gray-mid);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-variant);
}
.sis-team-card__phone {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: 0.5rem;
}

.sis-partners-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .sis-partners-grid { grid-template-columns: repeat(3, 1fr); }
}
.sis-partner-card {
  background: #fff;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-gray-mid);
}
.sis-partner-card img {
  height: 48px;
  object-fit: contain;
  margin-bottom: 1.5rem;
}
.sis-partner-card__name {
  font-weight: 900;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.sis-partner-card__text {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   SPLIT SECTION (Standorte Karte)
═══════════════════════════════════════════ */
.sis-split {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .sis-split { flex-direction: row; }
}
.sis-split__col { flex: 1; }
.sis-split__map {
  background: var(--color-gray-high);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.sis-split__map img {
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
}
.sis-split__text p {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.sis-split__note {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 1.5rem;
}
.sis-split__note p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   GTÜ PARTNER BAND
═══════════════════════════════════════════ */
.sis-gtue-band {
  background: var(--color-gray-light);
  padding: 4rem 0;
}
.sis-gtue-band__inner {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .sis-gtue-band__inner { flex-direction: row; }
}
.sis-gtue-band img {
  height: 56px;
  opacity: 0.8;
  flex-shrink: 0;
}
.sis-gtue-badge {
  background: rgba(180, 8, 3, 0.1);
  border-left: 4px solid var(--color-primary);
  padding: 1rem 1.5rem;
  max-width: 20rem;
}
.sis-gtue-badge p {
  font-weight: 900;
  color: var(--color-text);
  font-size: 0.875rem;
}

/* ═══════════════════════════════════════════
   INTRO BAND (rote Leiste)
═══════════════════════════════════════════ */
.sis-intro-band {
  background: var(--color-primary);
  color: #fff;
  padding: 2.5rem 0;
}
.sis-intro-band__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .sis-intro-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.sis-intro-band__text {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.sis-intro-band__text .material-symbols-outlined {
  font-size: 2.5rem;
  opacity: 0.75;
}
.sis-intro-band__text p {
  font-weight: 300;
  line-height: 1.7;
  max-width: 42rem;
}

/* ═══════════════════════════════════════════
   PROSE (Impressum / Datenschutz)
═══════════════════════════════════════════ */
.sis-prose {
  max-width: 48rem;
  margin: 0 auto;
}
.sis-prose h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-text);
  margin: 2rem 0 0.75rem 0;
}
.sis-prose p {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.sis-prose hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}
.sis-prose a { color: var(--color-primary); }
.sis-prose a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   STANDORTE CTA BAND
═══════════════════════════════════════════ */
.sis-locations-cta {
  background: var(--color-dark);
  color: #fff;
  padding: 4rem 0;
}
.sis-locations-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .sis-locations-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ═══════════════════════════════════════════
   STANDORTE BAND (Kontakt Seite)
═══════════════════════════════════════════ */
.sis-standorte-band {
  padding: 3.5rem 0;
  background: var(--color-gray-light);
  border-top: 1px solid var(--color-border);
}
.sis-standorte-band__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
@media (min-width: 640px) {
  .sis-standorte-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.sis-standorte-band p {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════
   ARROW LINK
═══════════════════════════════════════════ */
.sis-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  text-decoration: none;
  transition: gap 0.15s;
}
.sis-arrow-link:hover { gap: 0.75rem; }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.sis-footer {
  background: var(--color-dark);
  color: #94a3b8;
}
.sis-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
@media (min-width: 768px) {
  .sis-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .sis-footer__grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.sis-footer__logo img {
  height: 36px;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  margin-bottom: 1.25rem;
  display: block;
}
.sis-footer__tagline {
  font-size: 0.875rem;
  line-height: 1.6;
}
.sis-footer__col h4 {
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  margin: 0 0 1.25rem 0;
  font-family: 'Inter', sans-serif;
}
.sis-footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.sis-footer__col ul a {
  font-size: 0.875rem;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s;
}
.sis-footer__col ul a:hover { color: #fff; }
.sis-footer__col p {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.6;
}
.sis-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 768px) {
  .sis-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}
.sis-footer__copyright { font-size: 0.875rem; }
.sis-footer__bottom-links {
  display: flex;
  gap: 1.5rem;
}
.sis-footer__bottom-links a {
  font-size: 0.875rem;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.15s;
}
.sis-footer__bottom-links a:hover { color: #fff; }

/* ═══════════════════════════════════════════
   PROSE — Impressum, Datenschutz
═══════════════════════════════════════════ */
.sis-prose {
  max-width: 48rem;
  padding: 4rem 1.5rem;
}
.sis-prose h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-text);
  margin: 2.5rem 0 0.75rem;
}
.sis-prose h2:first-child { margin-top: 0; }
.sis-prose p {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}
.sis-prose a { color: var(--color-primary); }
.sis-prose a:hover { text-decoration: underline; }
.sis-prose hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* ═══════════════════════════════════════════
   SIDEBAR BACK LINK
═══════════════════════════════════════════ */
.sis-sidebar-back {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.04em;
  transition: gap 0.15s;
}
.sis-sidebar-back:hover { gap: 0.75rem; }

/* ═══════════════════════════════════════════
   GENERIC CONTENT STYLING (fallback)
   For converted page content without sis-* classes
═══════════════════════════════════════════ */
main > .sis-section h2,
.sis-layout__main h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--color-text);
  margin: 2rem 0 1rem;
}
main > .sis-section h3,
.sis-layout__main h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-text);
  margin: 1.5rem 0 0.75rem;
}
main > .sis-section p,
.sis-layout__main p {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}
main > .sis-section ul,
.sis-layout__main ul {
  padding-left: 1.5rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}
main > .sis-section strong,
.sis-layout__main strong {
  color: var(--color-text);
  font-weight: 700;
}