:root {
    --blue: #1a3fa6;
    --blue-dark: #0f2570;
    --blue-section: #2d4faa;
    --blue-pale: #f0f4fc;
    --white: #ffffff;
    --bg: #f5f6f8;
    --gray: #5f6673;
    --gray-mid: #9ca3af;
    --border: #e2e6f0;
    --text: #1a1f2e;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--white);
    color: var(--text);
    overflow-x: hidden;
    font-weight: 300;
  }

  /* NAV */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: 0 40px;
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }

  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    border: none;
    background: none;
    z-index: 1;
  }

  .hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--text);
    transition: all 0.3s;
  }

  .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* LOGO centered in nav */
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
  }

  /* POINT 10: Minimal SVG logo mark */
  .logo-mark {
    display: flex;
    align-items: center;
  }

  .logo-mark svg {
    width: 32px;
    height: 32px;
  }

  .logo-text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--blue-dark);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
  }

  .logo-text span {
    color: var(--blue);
    font-weight: 300;
  }

  /* empty right side of nav to balance */
  .nav-right { width: 80px; }

  /* SLIDE MENU */
  .slide-menu {
    position: fixed;
    top: 0; left: 0;
    width: 320px;
    height: 100vh;
    background: var(--white);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 80px 0 40px;
  }

  .slide-menu.open { transform: translateX(0); }

  .menu-close {
    position: absolute;
    top: 20px; right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--gray);
    line-height: 1;
  }

  .menu-logo {
    padding: 16px 32px 28px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
  }

  .menu-logo svg { width: auto; height: auto; }

  .menu-logo-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--blue-dark);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .menu-logo-text span { color: var(--blue); font-weight: 300; }

  .menu-section-label {
    padding: 22px 32px 8px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray);
  }

  .menu-links { list-style: none; flex: 1; }

  .menu-links li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 32px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--text);
    transition: all 0.2s;
    border-left: 2px solid transparent;
    cursor: pointer;
  }

  .menu-links li a:hover {
    color: var(--blue);
    background: var(--blue-pale);
    border-left-color: var(--blue);
  }

  .menu-links li a svg {
    width: 15px; height: 15px;
    stroke: var(--gray-mid);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  .menu-links li a:hover svg { stroke: var(--blue); }

  .menu-divider { margin: 6px 32px; border: none; border-top: 1px solid var(--border); }

  .menu-footer { padding: 18px 32px 0; font-size: 0.72rem; color: var(--gray); font-weight: 300; }

  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 250;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }

  .overlay.open { opacity: 1; pointer-events: all; }

  /* HERO - diagonal split like reference */
  .hero {
    padding-top: 64px;
    min-height: 72vh;
    max-height: 78vh;
    position: relative;
    overflow: hidden;
  }

  /* Two full background images side by side */
  .hero-bg {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-bg-left {
    background: url('img/hero.webp') center/cover no-repeat;
    position: relative;
    grid-column: 1 / -1;
  }

  .hero-bg-right { display: none; }

  /* Dark overlay */
  .hero-bg-left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8,16,42,0.38);
  }

  .hero-diagonal { display: none; }

  /* Content centered over both */
  .hero-content {
    position: relative;
    z-index: 3;
    min-height: unset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 52px 40px;
  }

  .hero-title {
    font-size: 3.8rem;
    font-weight: 300;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  }

  .hero-title em {
    font-style: italic;
    color: rgba(180,210,255,0.95);
    font-weight: 300;
  }

  .hero-subtitle {
    color: rgba(255,255,255,1);
    font-size: 1rem;
    line-height: 1.75;
    max-width: 520px;
    font-weight: 300;
    margin-bottom: 48px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
  }

  /* Stats row below title */
  .hero-stats {
    display: flex;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    overflow: hidden;
    backdrop-filter: blur(8px);
  }

  .stat-card {
    padding: 20px 32px;
    background: rgba(255,255,255,0.08);
    border-right: 1px solid rgba(255,255,255,0.15);
    animation: fadeUp 0.5s ease forwards;
    opacity: 0;
    text-align: center;
    min-width: 120px;
  }

  .stat-card:last-child { border-right: none; }

  .stat-card:nth-child(1) { animation-delay: 0.1s; }
  .stat-card:nth-child(2) { animation-delay: 0.2s; }
  .stat-card:nth-child(3) { animation-delay: 0.3s; }
  .stat-card:nth-child(4) { animation-delay: 0.4s; }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .stat-number {
    font-size: 1.7rem;
    font-weight: 300;
    color: var(--white);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
  }

  .stat-number span { color: rgba(180,210,255,0.9); }
  .stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.55); line-height: 1.4; }

  /* SECTION TAGS */
  .section-tag {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .section-tag::before, .section-tag::after {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--blue);
    opacity: 0.35;
  }

  .section-tag-left {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .section-tag-left::after {
    content: '';
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,0.3);
  }

  .section-title {
    font-size: 2rem;
    font-weight: 300;
    color: var(--blue-dark);
    letter-spacing: -0.025em;
    margin-bottom: 10px;
  }

  .section-title-white {
    font-size: 2rem;
    font-weight: 300;
    color: var(--white);
    letter-spacing: -0.025em;
    margin-bottom: 10px;
  }

  .section-subtitle {
    color: var(--gray);
    font-size: 0.9rem;
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.7;
  }

  /* LEISTUNGEN */
  .leistungen { padding: 80px 56px; background: var(--bg); }
  .leistungen-inner { max-width: 1120px; margin: 0 auto; }
  .section-header { text-align: center; margin-bottom: 48px; }

  .leistungen-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .leistung-card {
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    -webkit-tap-highlight-color: transparent;
  }

  .leistung-card:hover,
  .leistung-card:active,
  .leistung-card:focus {
    border-color: var(--border);
    outline: none;
    box-shadow: none;
    transform: none;
  }

  .icon-wrap { margin-bottom: 8px; }

  .icon-wrap svg {
    width: 22px; height: 22px;
    stroke: var(--blue);
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .leistung-title { font-weight: 500; font-size: 0.92rem; color: var(--text); margin-bottom: 7px; }
  .leistung-text { color: var(--gray); font-size: 0.83rem; line-height: 1.65; }

  /* WARUM */
  .warum { background: var(--blue-section); padding: 80px 56px; }

  .warum-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
  }

  .warum-text { color: rgba(255,255,255,0.85); font-size: 0.92rem; line-height: 1.8; margin-bottom: 28px; }
  .warum-list { display: flex; flex-direction: column; gap: 11px; }

  .warum-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.82);
    font-size: 0.88rem;
  }

  .warum-check {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .warum-check svg {
    width: 9px; height: 9px;
    stroke: var(--white);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .warum-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
  }
  @media (max-width: 400px) { .warum-card { padding: 20px 14px; } .warum-card-num { font-size: 1.6rem; } }

  .warum-card {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 24px 20px;
  }

  .warum-card-num { font-size: 1.8rem; font-weight: 300; color: rgba(255,255,255,0.88); margin-bottom: 5px; letter-spacing: -0.02em; }
  .warum-card-label { color: rgba(255,255,255,0.42); font-size: 0.77rem; line-height: 1.5; }

  /* TEAM SECTION - new centered circle style */
  .team { padding: 80px 56px; background: var(--white); }
  .team-inner { max-width: 1120px; margin: 0 auto; }

  .team-card-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 48px;
    gap: 28px;
  }

  .team-circle-wrap {
    position: relative;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
  }

  .team-circle-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    display: block;
    border: 3px solid var(--border);
  }

  .team-online-badge {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 5px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .team-card-info {
    text-align: center;
    max-width: 480px;
  }

  .team-card-name {
    font-size: 1.7rem;
    font-weight: 300;
    color: var(--blue-dark);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }

  .team-contact-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 16px 0 28px;
    flex-wrap: wrap;
  }

  .team-contact-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.78rem;
    color: var(--gray);
    font-weight: 400;
  }

  .team-role {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .team-stats {
    display: flex;
    gap: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    justify-content: center;
  }

  .team-stat-num { font-size: 1.5rem; font-weight: 300; color: var(--blue-dark); letter-spacing: -0.02em; }
  .team-stat-num span { color: var(--blue); }
  .team-stat-label { font-size: 0.72rem; color: var(--gray); }

  .team-photo-badge-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
  }

  .team-photo-badge-text { font-size: 0.72rem; font-weight: 400; color: var(--text); }
  .section-tag-left-centered {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.8);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .section-tag-left-centered::before,
  .section-tag-left-centered::after {
    content: '';
    width: 20px;
    height: 1px;
    background: rgba(255,255,255,0.3);
  }

  /* ABLAUF */
  .ablauf { padding: 80px 56px; background: var(--bg); }
  .ablauf-inner { max-width: 1120px; margin: 0 auto; }

  .ablauf-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
    position: relative;
  }

  .ablauf-steps::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 12.5%; right: 12.5%;
    height: 1px;
    background: var(--border);
  }

  .step { text-align: center; }

  .step-num {
    width: 52px; height: 52px;
    background: transparent;
    border: 1.2px solid var(--blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 1rem;
    font-weight: 300;
    color: var(--blue);
    position: relative;
    z-index: 1;
  }

  .step-title { font-weight: 500; color: var(--text); margin-bottom: 5px; font-size: 0.87rem; }
  .step-text { color: var(--gray); font-size: 0.8rem; line-height: 1.6; }

  .whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: var(--white);
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 28px;
    transition: all 0.2s;
    width: 100%;
    justify-content: center;
  }

  .whatsapp-btn:hover {
    background: #1ebe5d;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,211,102,0.3);
  }

  .kontakt-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: var(--gray);
    font-size: 0.8rem;
  }

  .kontakt-divider::before,
  .kontakt-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  /* KONTAKT */
  .kontakt { padding: 80px 56px; background: var(--white); }
  .kontakt-inner { max-width: 600px; margin: 0 auto; text-align: center; }
  .kontakt-text { color: var(--gray); font-size: 0.9rem; line-height: 1.7; margin-bottom: 36px; }
  .kontakt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; text-align: left; }

  .form-group { display: flex; flex-direction: column; gap: 5px; }
  .form-group.full { grid-column: 1 / -1; }

  .form-group label { font-size: 0.75rem; font-weight: 500; color: var(--text); }

  .form-group input, .form-group textarea {
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 300;
    color: var(--text);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
  }

  .form-group input:focus, .form-group textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26,63,166,0.07);
  }

  .form-group textarea { height: 100px; resize: vertical; }

  .form-submit {
    grid-column: 1 / -1;
    background: var(--blue);
    color: var(--white);
    border: none;
    padding: 13px 32px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  .form-submit:hover { background: var(--blue-dark); transform: translateY(-1px); }

  /* INNER PAGES */
  .inner-page { display: none; min-height: 100vh; padding: 88px 24px 80px; background: #ffffff; }
  .inner-page.active { display: block; }
  .inner-page-inner { max-width: 800px; margin: 0 auto; }

  .inner-page h1 {
    font-size: 2rem;
    font-weight: 300;
    color: var(--blue-dark);
    letter-spacing: -0.025em;
    margin-bottom: 32px;
    padding-bottom: 0;
    border-bottom: none;
  }

  .inner-page h2 { font-size: 1.05rem; font-weight: 500; color: var(--text); margin: 24px 0 8px; }

  .inner-page p { font-size: 0.9rem; line-height: 1.75; color: var(--gray); margin-bottom: 12px; font-weight: 300; }

  .inner-page ul { list-style: none; margin-bottom: 12px; }

  .inner-page ul li {
    font-size: 0.9rem;
    color: var(--gray);
    padding: 5px 0 5px 16px;
    position: relative;
    font-weight: 300;
  }

  .inner-page ul li::before { content: ''; position: absolute; left: 0; color: var(--blue); }

  .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue);
    font-size: 0.82rem;
    cursor: pointer;
    margin-bottom: 32px;
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 400;
  }

  .faq-item { border-bottom: 1px solid var(--border); padding: 16px 0; }
  .faq-q { font-size: 0.92rem; font-weight: 500; color: var(--text); margin-bottom: 7px; }
  .faq-a { font-size: 0.87rem; color: var(--gray); line-height: 1.7; font-weight: 300; }

  .ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
  .ref-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 18px; }
  .ref-card-title { font-size: 0.88rem; font-weight: 500; color: var(--text); margin-bottom: 4px; }
  .ref-card-text { font-size: 0.78rem; color: var(--gray); line-height: 1.5; }

  /* FOOTER */
  footer {
    background: var(--blue-dark);
    padding: 32px 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  .footer-logo {
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.02em;
  }

  .footer-logo span { color: #93b4ff; font-weight: 300; }

  .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; list-style: none; }
  .footer-links a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.78rem; transition: color 0.2s; cursor: pointer; }
  .footer-links a:hover { color: var(--white); }
  .footer-copy { color: rgba(255,255,255,0.6); font-size: 0.75rem; }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    nav { padding: 0 20px; }
    .hero { min-height: 68vh; max-height: 74vh; }
    .hero-bg { grid-template-columns: 1fr; }
    .hero-bg-right { display: none; }
    .hero-bg-left { position: absolute; inset: 0; grid-column: 1; }
    .hero-diagonal { display: none; }
    .hero-content { padding: 40px 24px; }
    .hero-title { font-size: 2.4rem; }
    .hero-stats { flex-wrap: wrap; border-radius: 8px; }
    .stat-card { min-width: calc(50% - 1px); border-bottom: 1px solid rgba(255,255,255,0.15); }
    .leistungen, .warum, .ablauf, .kontakt, .team { padding: 60px 24px; }
    .leistungen-grid { grid-template-columns: 1fr; }
    .warum-inner { grid-template-columns: 1fr; gap: 36px; }
    .team-grid { grid-template-columns: 1fr; gap: 32px; }
    .team-photo { max-width: 280px; margin: 0 auto; }
    .ablauf-steps { grid-template-columns: 1fr 1fr; }
    .ablauf-steps::before { display: none; }
    .kontakt-form { grid-template-columns: 1fr; }
    footer { padding: 24px 24px; flex-direction: column; text-align: center; }
    .inner-page { padding: 100px 24px 60px; }
    .ref-grid { grid-template-columns: 1fr; }
    .team-stats { flex-wrap: wrap; gap: 20px; }
  }

  .accordion { margin-top: 8px; }
  .acc-item { border-bottom: 1px solid var(--border); }
  .acc-q {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 0;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .acc-q svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--blue); transition: transform 0.3s; }
  .acc-q.open svg { transform: rotate(180deg); }
  .acc-a {
    font-size: 0.88rem;
    color: var(--gray);
    line-height: 1.75;
    font-weight: 300;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0;
  }
  .acc-a.open { max-height: 200px; padding-bottom: 16px; }

  /* --- Ergänzungen Mehrseiten-Struktur --- */
  .inner-page.static { display:block; }
  a.back-btn { text-decoration:none; display:inline-block; }
  .inner-page-inner a { color: var(--blue); }
  .page-cta { margin-top:40px; padding:28px; border:1px solid var(--border); border-radius:12px; background:var(--blue-pale); }
  .page-cta p { margin-bottom:16px; color:#4b5563; }
  .btn-primary { display:inline-block; background:var(--blue); color:#fff !important; text-decoration:none; padding:12px 26px; border-radius:6px; font-size:0.95rem; }
  .btn-primary:hover { background:var(--blue-dark); }
  .breadcrumb { font-size:0.8rem; color:var(--gray); margin-bottom:18px; }
  .breadcrumb a { color:var(--gray); text-decoration:none; }
  .breadcrumb a:hover { color:var(--blue); }
  .faq-home { padding: 80px 24px; background:#fff; }
  .faq-home-inner { max-width: 800px; margin:0 auto; }
  .article-meta { font-size:0.85rem; color:var(--gray); margin-bottom:24px; }
  .inner-page-inner .ratgeber-list { list-style:none; padding:0; margin:24px 0 16px; display:grid; gap:16px; }
  .inner-page .ratgeber-list li { margin:0; padding:0; font-size:inherit; }
  .inner-page .ratgeber-list li::before { content:none; }
  .inner-page-inner a.ratgeber-card { display:flex; flex-direction:column; gap:8px; padding:22px 24px; background:var(--bg); border:1px solid var(--border); border-left:4px solid var(--blue); border-radius:12px; text-decoration:none; color:var(--text); transition:box-shadow .2s, border-color .2s, transform .2s; }
  .inner-page-inner a.ratgeber-card:hover, .inner-page-inner a.ratgeber-card:focus-visible { border-color:var(--blue); box-shadow:0 6px 20px rgba(26,63,166,.12); transform:translateY(-2px); }
  .inner-page-inner a.ratgeber-card:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
  .ratgeber-card-title { font-size:1.15rem; font-weight:600; color:var(--blue); line-height:1.35; }
  .ratgeber-card-meta { font-size:0.8rem; color:var(--gray); }
  .ratgeber-card-text { font-size:0.95rem; color:var(--gray); line-height:1.6; }
  .ratgeber-card-btn { align-self:flex-start; margin-top:6px; background:var(--blue); color:#fff; padding:10px 20px; border-radius:6px; font-size:0.95rem; font-weight:500; }
  .inner-page-inner a.ratgeber-card:hover .ratgeber-card-btn { background:var(--blue-dark); }
  @media (max-width: 600px) { .inner-page-inner a.ratgeber-card { padding:18px; } .ratgeber-card-btn { align-self:stretch; text-align:center; } }
  .inner-page-inner ul, .inner-page-inner ol { margin: 0 0 16px 22px; line-height:1.8; color: var(--gray); }

  /* Bild auf Unterseiten (Stadtteilseiten) */
  .page-img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px; margin:8px 0 28px; }

  /* Kontaktformular mit Versand über anfrage.php (10.10.2026, Antwort_2026-10-10_6_FORMULAR.md) */
  .form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .kontakt-form { position: relative; }
  .form-hinweis { grid-column: 1 / -1; font-size: 0.75rem; color: var(--text-light, #5a6473); margin: 2px 0 0; line-height: 1.5; }
  .form-hinweis a { color: inherit; text-decoration: underline; }
  .form-status { grid-column: 1 / -1; margin: 0; padding: 11px 14px; border-radius: 8px; font-size: 0.875rem; line-height: 1.5; }
  .form-status.ok { background: #e8f5ec; color: #1d5e33; border: 1px solid #b9dfc5; }
  .form-status.fehler { background: #fdecec; color: #8a1f1f; border: 1px solid #f3c2c2; }
  .form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"] { border-color: #c0392b; }
  .form-submit[disabled] { opacity: .7; cursor: wait; }
  #kontaktaufnahme { scroll-margin-top: 90px; }

  /* LOGO V2 (Antwort_2026-10-11_2): Computer 46 px, Handy 38 px hoch; Schrift als Formen */
  .nav-logo svg.logo-svg { display: block; height: 46px; width: auto; }
  .menu-logo svg.logo-svg { display: block; width: 220px; height: auto; }
  @media (max-width: 600px) { .nav-logo svg.logo-svg { height: 38px; } }

  /* Paket 11 (24.10.2026): Startseite „ganz Essen“, Ratgeber-Block, Knopf oben, Fußzeile Stadtteile */
  .hero-cta { margin-top: -24px; }
  .essen-gebiet { padding: 80px 56px; background: var(--bg); }
  .essen-gebiet-inner { max-width: 800px; margin: 0 auto; }
  .essen-gebiet-inner p { color: var(--text); font-size: 1rem; line-height: 1.75; font-weight: 300; margin: 0 0 16px; }
  .ratgeber-home { padding: 80px 56px; background: var(--bg); }
  .ratgeber-home-inner { max-width: 800px; margin: 0 auto; }
  .ratgeber-home .ratgeber-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
  .ratgeber-home a.ratgeber-card { display: block; padding: 16px 20px; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 12px; text-decoration: none; transition: box-shadow .2s, border-color .2s; }
  .ratgeber-home a.ratgeber-card:hover, .ratgeber-home a.ratgeber-card:focus-visible { border-color: var(--blue); box-shadow: 0 6px 20px rgba(26,63,166,.12); }
  .ratgeber-home a.ratgeber-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .ratgeber-home .ratgeber-card-title { font-size: 1.05rem; }
  .ratgeber-home-alle { text-align: center; }
  .footer-stadtteile { align-items: baseline; }
  .footer-stadtteile .footer-label { color: rgba(255,255,255,0.75); font-size: 0.78rem; }
  h2[id] { scroll-margin-top: 90px; }
  @media (max-width: 900px) { .essen-gebiet, .ratgeber-home { padding: 60px 24px; } .hero-cta { margin-top: -28px; } }
  /* Fehler 59 (27.10.2026): Slide-Menue scrollbar, kein seitliches Scrollen bei 320 px */
  .slide-menu { height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  @media (max-width: 900px) { .warum-inner { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 360px) { .section-title, .section-title-white { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } }
  .ratgeber-card-title { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }

/* ==========================================================================
   Gemeinsame Seiten-Stile (29.10.2026, Entwickler) – vorher als <style> in einzelnen
   Seiten. Regel Siw 28.10.2026: alle Seiten sehen gleich aus, keine seiten-eigenen Stile.
   ========================================================================== */
.inner-page h3{font-size:0.98rem;font-weight:500;color:var(--text);margin:20px 0 6px;}
.inner-page article ul li{padding:3px 0;}
.inner-page-inner article ul{list-style:disc;}
.inner-page-inner article ol{list-style:decimal;}
.inner-page-inner article ol li{font-size:0.9rem;font-weight:300;padding:3px 0;}
.table-wrap{overflow-x:auto;margin:8px 0 12px;}
.kosten-tabelle{border-collapse:collapse;width:100%;table-layout:fixed;font-size:0.86rem;hyphens:auto;-webkit-hyphens:auto;color:var(--gray);}
.kosten-tabelle th,.kosten-tabelle td{border:1px solid var(--border);padding:9px 10px;text-align:left;vertical-align:top;font-weight:300;}
.kosten-tabelle thead th{background:var(--blue-pale);color:var(--text);font-weight:500;}
.kosten-tabelle tbody th{font-weight:500;color:var(--text);}
.inner-page p.quelle{font-size:0.8rem;}
@media (max-width:600px){.kosten-tabelle{font-size:0.78rem;}.kosten-tabelle th,.kosten-tabelle td{padding:7px 6px;}}
.check-liste{list-style:none!important;padding-left:0;}
.check-liste li{position:relative;padding-left:26px!important;}
.check-liste li::before{content:'';position:absolute;left:2px;top:9px;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);}
.vergleich-tabelle th:first-child,.vergleich-tabelle td:first-child{hyphens:manual;-webkit-hyphens:manual;}
.warum-inner > .preis-karte{align-self:center;}
.preis-karte{background:#fff;border-radius:16px;border-top:5px solid #8aa2f0;padding:30px 28px 24px;box-shadow:0 18px 40px rgba(10,25,80,.25);color:var(--text);}
.preis-karte-tag{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;}
.preis-karte-preis{font-size:2.6rem;font-weight:600;color:var(--blue-dark);line-height:1.1;letter-spacing:-.02em;}
.preis-karte-einheit{font-size:1rem;color:var(--text);margin-top:6px;}
.preis-karte-zusatz{font-size:.9rem;font-weight:500;color:var(--gray);margin-top:2px;}
.preis-karte-sub{font-size:.85rem;font-weight:600;color:var(--text);margin:22px 0 8px;}
.preis-karte-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--border);}
.preis-karte-liste li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);font-size:.92rem;line-height:1.45;color:var(--text);}
.preis-karte-liste svg{width:14px;height:14px;flex-shrink:0;margin-top:3px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.preis-karte-btn{display:block;margin-top:22px;background:var(--blue);color:#fff;text-align:center;text-decoration:none;padding:14px 18px;border-radius:8px;font-size:1rem;font-weight:500;transition:background .2s;}
.preis-karte-btn:hover,.preis-karte-btn:focus-visible{background:var(--blue-dark);}
.preis-karte-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.inner-page p.preis-karte-hinweis,.preis-karte-hinweis{font-size:.8rem;color:var(--gray);text-align:center;margin:10px 0 0;line-height:1.5;}
@media (max-width:600px){.preis-karte{padding:24px 20px 20px;}.preis-karte-preis{font-size:2.3rem;}}
h3.leistung-title{margin:0;}
.ablauf-steps{grid-template-columns:repeat(3,1fr);}
.ablauf-steps::before{left:16.67%;right:16.67%;}
@media (max-width:900px){.ablauf-steps{grid-template-columns:1fr;}}
.faq-home{padding-bottom:40px;}
.faq-home + .kontakt{padding-top:40px;}
.faq-more{text-align:center;margin-top:24px;font-size:0.9rem;color:var(--gray);}
.faq-more a{color:var(--blue);}
@media (max-width:900px){.hero-bg-left{background-image:url('img/hero-mobil.webp');}.faq-home{padding-top:60px;padding-bottom:30px;}.faq-home + .kontakt{padding-top:30px;}}
.kontakt-intro{min-height:0;padding-bottom:0;}
.kontakt-intro h1{margin-bottom:8px;}
.kontakt-intro .kontakt-lead{font-size:1rem;margin-bottom:0;}
.kontakt-intro + .kontakt{padding-top:24px;padding-bottom:56px;}
.kontakt-schlicht .kontakt-inner{max-width:800px;text-align:left;}
.kontakt-schlicht .kontakt-form{margin-bottom:0;}
.kontakt-oder{text-align:center;color:var(--gray);font-size:.9rem;margin:28px 0 12px;}
.kontakt-wa{text-align:center;}
.kontakt-wa .whatsapp-btn{margin:0 auto;width:auto;min-width:340px;}
.kontakt-daten{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);text-align:center;color:var(--gray);font-size:.92rem;line-height:1.8;}
.kontakt-daten p{margin:0;}
.kontakt-daten a{color:var(--blue);text-decoration:none;}
.kontakt-daten a:hover{text-decoration:underline;}
.kontakt-daten .kontakt-sep{display:inline-block;width:20px;}
.kontakt-daten .kontakt-notfall{font-size:.82rem;margin-top:6px;}
@media (max-width:600px){.kontakt-daten .kontakt-sep{display:block;width:auto;height:0;}.kontakt-wa .whatsapp-btn{display:flex;justify-content:center;width:100%;min-width:0;box-sizing:border-box;}}
.kurz-box{margin:18px 0 22px;padding:18px 20px;border-left:4px solid var(--blue, #1a3fa6);background:var(--blue-pale);border-radius:8px;}
.kurz-box p{margin:0;}
.anfrage-kasten{margin:22px 0 26px;padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--blue-pale);}
.anfrage-kasten p{margin-bottom:14px;}
.anfrage-kasten .knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;}
.anfrage-kasten .whatsapp-btn{width:auto;margin-bottom:0;padding:12px 22px;color:#fff;text-decoration:none;}
.anfrage-kasten .btn-primary{color:#fff;text-decoration:none;}
.anfrage-kasten p.antwort{margin:0;font-size:0.85rem;}
.kaestchen-liste{list-style:none!important;padding-left:0;}
.kaestchen-liste li{position:relative;padding-left:28px!important;}
.kaestchen-liste li::before{content:'';position:absolute;left:2px;top:7px;width:13px;height:13px;border:2px solid var(--blue);border-radius:3px;box-sizing:border-box;}
.kurz-box h2{margin-top:0;}
.kurz-box ul{margin-bottom:0;}
.fristen-tabelle tbody th{hyphens:manual;-webkit-hyphens:manual;}
.kontakt-zeile a{white-space:nowrap;}
/* Tabellen-Spaltenbreiten (vorher style="width:…" an <col>) */
col.sp-22{width:22%;} col.sp-26{width:26%;} col.sp-28{width:28%;} col.sp-37{width:37%;} col.sp-38{width:38%;} col.sp-44{width:44%;} col.sp-45{width:45%;} col.sp-52{width:52%;} col.sp-55{width:55%;} col.sp-62{width:62%;}
/* Startseite: Knopf-Zeile unter den Leistungen + Personen-Symbol (vorher style="…") */
.knopf-mitte{text-align:center;margin-top:36px;}
.team-circle-img.team-symbol{display:flex;align-items:center;justify-content:center;background:var(--blue-pale);color:var(--blue);font-size:3.2rem;font-weight:300;letter-spacing:0.02em;}

/* Paket 16 (Paket 31.10.2026): Haekchen-Zeile Startseite (Antwort_2026-10-26_2), Telefon-Zeile Fusszeile (Antwort_2026-10-27_1) */
.hero-haken { margin: 18px 0 0; color: var(--white); font-size: 0.9rem; font-weight: 400; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,0.5); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.hero-haken span { white-space: nowrap; background: rgba(8,16,42,0.5); border-radius: 999px; padding: 3px 12px; }
.footer-kontakt { color: rgba(255,255,255,0.75); font-size: 0.78rem; margin: 0; }
.footer-kontakt a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; white-space: nowrap; }
.footer-kontakt a:hover, .footer-kontakt a:focus-visible { color: var(--white); text-decoration: underline; }
/* Fehler 67 (30.10.2026): Titelbild schnitt auf kleinen/quer gehaltenen Handys den Knopf ab (max-height + overflow:hidden) - Hoehe waechst jetzt mit dem Inhalt */
.hero { max-height: none; }
/* Fehler 71 (31.10.2026): FAQ-Antworten nicht abschneiden – Reserve statt 200px, Animation bleibt */
.acc-a.open{max-height:800px;}