/* ── Self-hosted Source Sans 3 (kein Google-Server-Kontakt) ─── */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/source-sans-3-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/source-sans-3-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
}

/* ============================================================
   style.css — Hausverwaltung Zinkl & Partner
   ============================================================ */

:root {
    --navy:        #1a2b4a;
    --navy-light:  #243558;
    --accent:      #4FB7FF;
    --accent-dim:  #b8dff7;
    --accent-dark: #0077cc;
    --white:       #ffffff;
    --off-white:   #f7f9fc;
    --light-bg:    #eef5fb;
    --text:        #1e2a3a;
    --text-light:  #5a6880;
    --border:      #dde6f0;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'Source Sans 3', Arial, sans-serif;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
  }

  /* ─── NAV ─── */
  nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(26,43,74,0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(79,183,255,0.18);
  }
  .nav-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 0 2rem;
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
  }
  .nav-logo {
    display: flex; align-items: center; gap: 11px;
    text-decoration: none; cursor: pointer;
  }
  .nav-logo img { height: 40px; width: auto; }
  .logo-text-wrap { display: flex; flex-direction: column; line-height: 1.2; }
  .logo-name {
    font-family: Arial, sans-serif; font-weight: 700;
    font-size: 0.98rem; color: #fff; letter-spacing: 0.01em;
  }
  .logo-name span { color: var(--accent); }
  .logo-tag {
    font-family: Arial, sans-serif; font-size: 0.6rem;
    color: var(--accent); letter-spacing: 0.16em;
    text-transform: uppercase; font-weight: 400;
  }
  .nav-links { display: flex; gap: 0; list-style: none; }
  .nav-links a {
    display: block; padding: 0.45rem 1rem;
    color: rgba(255,255,255,0.75); text-decoration: none;
    font-size: 0.8rem; font-weight: 500;
    letter-spacing: 0.07em; text-transform: uppercase;
    transition: color 0.2s; position: relative;
  }
  .nav-links a::after {
    content: ''; position: absolute;
    bottom: -2px; left: 50%; right: 50%;
    height: 1px; background: var(--accent);
    transition: all 0.3s;
  }
  .nav-links a:hover { color: var(--accent); }
  .nav-links a:hover::after { left: 10%; right: 10%; }
  .nav-admin-btn {
    background: transparent; border: 1px solid var(--accent);
    color: var(--accent); padding: 0.42rem 1rem;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: all 0.22s;
    font-family: Arial, sans-serif;
  }
  .nav-admin-btn:hover { background: var(--accent); color: var(--navy); }

  .nav-vdiv { cursor: default; }
  .nav-vdiv-badge {
    display: flex; align-items: center; gap: 14px;
  }
  .nav-vdiv-logo {
    height: 34px; width: auto; display: block;
    filter: brightness(0) invert(1);
  }
  .nav-vdiv-text { display: flex; align-items: center; }
  .nav-vdiv-claim {
    font-size: 0.78rem; color: rgba(255,255,255,0.6);
    letter-spacing: 0.01em; line-height: 1.45;
  }
  @media (max-width: 640px) {
    .nav-vdiv-claim { display: none; }
  }

  /* ─── HERO ─── */
  #hero {
    min-height: 100vh;
    position: relative;
    display: flex; align-items: center;
    overflow: hidden;
    background: var(--navy);
  }
  /* Curved decorative lines background */
  .hero-curves {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden;
  }
  .hero-curves svg { width: 100%; height: 100%; }
  .hero-content {
    position: relative; z-index: 2;
    max-width: 1200px; margin: 0 auto;
    padding: 8rem 2rem 4rem;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--accent); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    margin-bottom: 1.4rem;
    opacity: 0; animation: fadeUp 0.7s 0.2s forwards;
  }
  .hero-eyebrow::before {
    content: ''; display: block; width: 28px; height: 1px; background: var(--accent);
  }
  .hero-title {
    font-family: Arial, sans-serif; font-weight: 700;
    font-size: clamp(2.6rem, 5.5vw, 4.4rem);
    color: #fff; line-height: 1.1; max-width: 620px;
    margin-bottom: 1.4rem;
    opacity: 0; animation: fadeUp 0.7s 0.35s forwards;
  }
  .hero-title span { color: var(--accent); }
  .hero-desc {
    color: rgba(255,255,255,0.6); font-size: 1.05rem;
    font-weight: 300; line-height: 1.75; max-width: 480px;
    margin-bottom: 2.5rem;
    opacity: 0; animation: fadeUp 0.7s 0.5s forwards;
  }
  .hero-ctas {
    display: flex; gap: 1rem; flex-wrap: wrap;
    opacity: 0; animation: fadeUp 0.7s 0.65s forwards;
  }
  .btn-primary {
    background: var(--accent); color: var(--navy);
    border: none; padding: 0.85rem 1.9rem;
    font-size: 0.85rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
    cursor: pointer; transition: all 0.22s;
    font-family: Arial, sans-serif; text-decoration: none;
    display: inline-block;
  }
  .btn-primary:hover {
    background: #72c8ff;
    box-shadow: 0 6px 22px rgba(79,183,255,0.35);
    transform: translateY(-2px);
  }
  .btn-outline {
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.85rem 1.9rem; font-size: 0.85rem;
    font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase;
    cursor: pointer; transition: all 0.22s;
    font-family: Arial, sans-serif; text-decoration: none;
    display: inline-block;
  }
  .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

  .hero-stats {
    display: flex; gap: 3rem; flex-wrap: wrap;
    margin-top: 4rem; padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    opacity: 0; animation: fadeUp 0.7s 0.8s forwards;
  }
  .stat-num {
    font-family: Arial, sans-serif; font-weight: 700;
    font-size: 2rem; color: var(--accent); line-height: 1;
  }
  .stat-label {
    font-size: 0.7rem; color: rgba(255,255,255,0.45);
    letter-spacing: 0.12em; text-transform: uppercase; margin-top: 4px;
  }

  /* ─── SECTION COMMONS ─── */
  section { scroll-margin-top: 68px; }
  .section-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 5rem 2rem;
  }
  .section-label {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--accent-dark); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.9rem;
  }
  .section-label::before {
    content: ''; display: block; width: 20px; height: 2px;
    background: var(--accent);
  }
  .section-title {
    font-family: Arial, sans-serif; font-weight: 700;
    font-size: clamp(1.7rem, 3vw, 2.5rem);
    color: var(--navy); line-height: 1.2; margin-bottom: 1rem;
  }
  .section-desc {
    font-size: 1rem; color: var(--text-light);
    line-height: 1.75; max-width: 580px;
  }

  /* Curved section backgrounds using inline SVG */
  .bg-curves-light {
    position: relative; overflow: hidden;
    background: var(--off-white);
  }
  .bg-curves-white {
    position: relative; overflow: hidden;
    background: var(--white);
  }
  .section-curve {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden;
    z-index: 0;
  }
  .section-curve svg { width: 100%; height: 100%; }
  .section-inner { position: relative; z-index: 1; }

  /* ─── ÜBER UNS ─── */
  .ueber-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: center;
  }
  .ueber-visual {
    position: relative;
  }
  .ueber-graphic {
    width: 100%; aspect-ratio: 732/749;
    background: linear-gradient(135deg, var(--navy) 0%, #1e3a62 100%);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
  }
  .ueber-graphic svg { width: 100%; height: 100%; }
  .ueber-badge {
    position: absolute; bottom: -20px; right: -20px;
    width: 110px; height: 110px;
    background: var(--accent); border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(79,183,255,0.4);
  }
  .ueber-badge-num {
    font-family: Arial, sans-serif; font-weight: 700;
    font-size: 1.8rem; color: var(--navy); line-height: 1;
  }
  .ueber-badge-text {
    font-size: 0.55rem; font-weight: 700;
    color: var(--navy); letter-spacing: 0.06em;
    text-transform: uppercase; text-align: center;
  }
  .ueber-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; }
  .fact-item { border-left: 2px solid var(--accent); padding-left: 1rem; }
  .fact-title { font-weight: 700; font-size: 0.85rem; color: var(--navy); margin-bottom: 0.2rem; }
  .fact-desc { font-size: 0.8rem; color: var(--text-light); line-height: 1.5; }

  /* ─── LEISTUNGEN ─── */
  .services-grid {
    display: grid; grid-template-columns: repeat(4,1fr);
    gap: 1.5px; background: var(--border);
    border: 1px solid var(--border); margin-top: 3rem;
  }
  .service-card {
    background: var(--white); padding: 2.2rem 1.8rem;
    position: relative; transition: all 0.3s;
  }
  .service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--accent);
    transform: scaleX(0); transition: transform 0.3s;
    transform-origin: left;
  }
  .service-card:hover { background: var(--off-white); }
  .service-card:hover::before { transform: scaleX(1); }
  .service-icon {
    width: 44px; height: 44px; background: var(--navy);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.3rem;
  }
  .service-icon svg { stroke: var(--accent); }
  .service-name {
    font-family: Arial, sans-serif; font-weight: 700;
    font-size: 1.05rem; color: var(--navy); margin-bottom: 0.6rem;
  }
  .service-desc { font-size: 0.85rem; color: var(--text-light); line-height: 1.65; }

  .benefits {
    margin-top: 1.5px; background: var(--navy);
    padding: 2.5rem 3rem; display: grid;
    grid-template-columns: repeat(3,1fr); gap: 2rem;
  }
  .benefit { display: flex; gap: 1rem; align-items: flex-start; }
  .benefit-dot { width: 6px; height: 6px; min-width: 6px; background: var(--accent); margin-top: 7px; border-radius: 50%; }
  .benefit-text { font-size: 0.88rem; color: rgba(255,255,255,0.7); line-height: 1.6; }
  .benefit-text strong { display: block; color: #fff; font-weight: 600; margin-bottom: 0.2rem; }

  /* ─── MITARBEITER ─── */
  .team-grid {
    display: grid; grid-template-columns: repeat(5,1fr);
    gap: 1.25rem; margin-top: 3rem;
  }
  .team-card {
    background: var(--white); border: 1px solid var(--border);
    overflow: hidden; transition: all 0.3s;
  }
  .team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(26,43,74,0.1);
    border-color: var(--accent-dim);
  }
  .team-avatar {
    width: 100%; aspect-ratio: 1;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    display: flex; align-items: center; justify-content: center;
  }
  .team-initials {
    font-family: Arial, sans-serif; font-weight: 700;
    font-size: 1.8rem; color: rgba(79,183,255,0.55);
    letter-spacing: 0.04em;
  }
  .team-info { padding: 0.9rem 1rem; border-top: 2px solid transparent; transition: border-color 0.3s; }
  .team-card:hover .team-info { border-color: var(--accent); }
  .team-name { font-family: Arial, sans-serif; font-weight: 700; font-size: 0.88rem; color: var(--navy); margin-bottom: 0.2rem; }
  .team-role { font-size: 0.72rem; color: var(--text-light); line-height: 1.4; margin-bottom: 0.45rem; }
  .team-email { font-size: 0.68rem; color: var(--accent-dark); text-decoration: none; word-break: break-all; transition: color 0.2s; }
  .team-email:hover { color: var(--navy); }

  /* ─── KONTAKT ─── */
  .kontakt-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: start;
  }
  .contact-items { display: flex; flex-direction: column; gap: 1.8rem; margin-top: 2rem; }
  .contact-item { display: flex; gap: 1.1rem; align-items: flex-start; }
  .contact-icon {
    width: 42px; height: 42px; min-width: 42px;
    background: var(--navy); display: flex; align-items: center; justify-content: center;
  }
  .contact-icon svg { stroke: var(--accent); }
  .contact-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 0.3rem; }
  .contact-value { font-size: 0.92rem; color: var(--text); line-height: 1.6; }

  .contact-form { background: var(--off-white); padding: 2.2rem; border: 1px solid var(--border); }
  .form-title { font-family: Arial, sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.35rem; }
  .form-subtitle { font-size: 0.85rem; color: var(--text-light); margin-bottom: 1.8rem; }
  .form-group { margin-bottom: 1.1rem; }
  .form-group label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.4rem; }
  .form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 0.7rem 0.9rem;
    background: var(--white); border: 1px solid var(--border);
    font-family: Arial, sans-serif; font-size: 0.9rem;
    color: var(--text); outline: none; transition: border-color 0.2s;
    -webkit-appearance: none;
  }
  .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--accent); }
  .form-group textarea { min-height: 95px; resize: vertical; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* ─── FOOTER ─── */
  footer { background: var(--navy); padding: 3rem 0 1.5rem; }
  .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
  .footer-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem; padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 1.25rem;
  }
  .footer-brand p { font-size: 0.85rem; color: rgba(255,255,255,0.45); line-height: 1.7; margin-top: 1rem; max-width: 310px; }
  .footer-col-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; }
  .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
  .footer-links a { font-size: 0.85rem; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; cursor: pointer; }
  .footer-links a:hover { color: var(--accent); }
  .footer-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 0.75rem; color: rgba(255,255,255,0.28); }
  .footer-bottom span:last-child { text-align: right; }

  /* ─── ADMIN MODAL ─── */
  .modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(10,18,35,0.88); backdrop-filter: blur(8px);
    align-items: center; justify-content: center; padding: 1rem;
  }
  .modal-overlay.active { display: flex; }
  .modal { background: var(--white); width: 100%; max-width: 960px; max-height: 90vh; overflow-y: auto; }
  .modal-header {
    background: var(--navy); padding: 1.4rem 2rem;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 10;
  }
  .modal-title { font-family: Arial, sans-serif; font-weight: 700; font-size: 1.2rem; color: #fff; }
  .modal-title span { color: var(--accent); }
  .modal-close {
    background: none; border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.55); width: 34px; height: 34px;
    cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
  }
  .modal-close:hover { border-color: var(--accent); color: var(--accent); }
  .modal-body { padding: 2rem; }

  .login-panel { display: flex; flex-direction: column; align-items: center; padding: 3rem 2rem; }
  .login-form { width: 100%; max-width: 360px; }
  .login-error { background: #fff0f0; border: 1px solid #fca5a5; color: #dc2626; padding: 0.7rem 1rem; font-size: 0.83rem; margin-bottom: 1rem; display: none; }

  .admin-panel { display: none; }
  .admin-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 2rem; }
  .admin-tab {
    padding: 0.7rem 1.4rem; font-size: 0.78rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-light); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all 0.2s; background: none; border-top: none;
    border-left: none; border-right: none;
    font-family: Arial, sans-serif;
  }
  .admin-tab.active { color: var(--navy); border-bottom-color: var(--accent); }
  .tab-content { display: none; }
  .tab-content.active { display: block; }

  .emp-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.4rem; gap: 1rem; }
  .emp-search { flex: 1; max-width: 280px; padding: 0.55rem 0.9rem; border: 1px solid var(--border); font-family: Arial, sans-serif; font-size: 0.85rem; outline: none; }
  .emp-search:focus { border-color: var(--accent); }

  table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  thead tr { background: var(--navy); color: #fff; }
  thead th { padding: 0.7rem 1rem; text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  tbody tr { border-bottom: 1px solid var(--border); transition: background 0.15s; }
  tbody tr:hover { background: var(--off-white); }
  tbody td { padding: 0.8rem 1rem; color: var(--text); vertical-align: middle; }
  .td-name { font-weight: 700; color: var(--navy); }
  .td-role { color: var(--text-light); }
  .td-email { color: var(--accent-dark); }
  .action-btns { display: flex; gap: 0.45rem; }
  .btn-edit { padding: 0.3rem 0.7rem; font-size: 0.72rem; font-weight: 700; cursor: pointer; border: none; font-family: Arial, sans-serif; transition: all 0.2s; background: var(--navy); color: #fff; }
  .btn-edit:hover { background: var(--navy-light); }
  .btn-delete { padding: 0.3rem 0.7rem; font-size: 0.72rem; font-weight: 700; cursor: pointer; font-family: Arial, sans-serif; transition: all 0.2s; background: #fff0f0; color: #dc2626; border: 1px solid #fca5a5; }
  .btn-delete:hover { background: #dc2626; color: #fff; }

  .admin-edit-form { background: var(--off-white); padding: 1.4rem; margin-top: 1.4rem; border: 1px solid var(--border); display: none; }
  .edit-form-title { font-family: Arial, sans-serif; font-weight: 700; font-size: 1rem; color: var(--navy); margin-bottom: 1.1rem; }
  .btn-save { background: var(--accent); color: var(--navy); border: none; padding: 0.65rem 1.4rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; font-family: Arial, sans-serif; transition: all 0.2s; margin-right: 0.7rem; }
  .btn-save:hover { background: #72c8ff; }
  .btn-cancel-edit { background: transparent; color: var(--text-light); border: 1px solid var(--border); padding: 0.65rem 1.4rem; font-size: 0.8rem; font-weight: 500; cursor: pointer; font-family: Arial, sans-serif; transition: all 0.2s; }
  .btn-cancel-edit:hover { border-color: var(--navy); color: var(--navy); }
  .success-msg { background: #f0fdf4; border: 1px solid #86efac; color: #16a34a; padding: 0.7rem 1rem; font-size: 0.83rem; margin-top: 1rem; display: none; }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s, transform 0.6s; }
  .reveal.visible { opacity: 1; transform: none; }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 900px) {
    .ueber-grid, .kontakt-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .benefits { grid-template-columns: 1fr 1fr; }
    .team-grid { grid-template-columns: repeat(3,1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .nav-links { display: none; }
  }
  @media (max-width: 600px) {
    .services-grid { grid-template-columns: 1fr; }
    .benefits { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: repeat(2,1fr); }
    .form-row { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; }
    .hero-stats { gap: 1.5rem; }
    .ueber-facts { grid-template-columns: 1fr; }
  }



/* ── CSP-safe: classes replacing inline styles ──────────────── */
.js-scroll, .js-legal, .footer-admin-link, .legal-close-btn { cursor: pointer; }
.footer-admin-link  { color: inherit; text-decoration: none; }
.legal-overlay      { display: none; position: fixed; inset: 0;
                      background: rgba(10,18,35,0.7); z-index: 10000;
                      overflow-y: auto; padding: 2rem 1rem; }
.legal-close-btn    { background: none; border: none; font-size: 1.5rem;
                      color: var(--text-light); line-height: 1; }
.btn-delete-photo   { display: none; margin-top: 0.4rem; font-size: 0.75rem;
                      padding: 0.2rem 0.6rem; background: none;
                      border: 1px solid #c0392b; color: #c0392b;
                      border-radius: 4px; cursor: pointer; }

/* ── CSP-safe: inline style replacements ────────────────────── */
.stadtbild-img          { width:100%;height:100%;object-fit:contain;display:block; }
.fact-item-vdiv         { grid-column:1/-1;border-left-color:#00adef;
                          background:linear-gradient(135deg,#f0f8ff,#e8f4fb);
                          padding:0.9rem 1rem;display:flex;align-items:center;gap:1.2rem; }
.vdiv-svg               { flex-shrink:0; }
.fact-title-vdiv        { color:#0a2347; }
.leistungen-header      { display:flex;justify-content:space-between;align-items:flex-end;
                          flex-wrap:wrap;gap:2rem;margin-bottom:0; }
.leistungen-desc        { margin:0; }
.contact-email-link     { color:var(--accent-dark);text-decoration:none; }
.cf-error-msg           { display:none;color:#c0392b;font-size:0.82rem;
                          margin-bottom:0.8rem;padding:0.6rem 0.8rem;
                          background:#fdf0ef;border:1px solid #f5c6c2; }
.btn-full               { width:100%; }
.footer-logo-row        { display:flex;align-items:center;gap:10px; }
.footer-logo-img        { height:36px;width:auto; }
.footer-wordmark        { display:flex;flex-direction:column;line-height:1.2; }
.footer-brand-name      { font-family:Arial,sans-serif;font-weight:700;
                          font-size:0.9rem;color:#fff; }
.footer-brand-amp       { color:#4FB7FF; }
.footer-brand-sub       { font-family:Arial,sans-serif;font-size:0.58rem;
                          color:#4FB7FF;letter-spacing:0.14em;text-transform:uppercase; }
.admin-login-header     { text-align:center;margin-bottom:1.5rem; }
.section-label--center  { justify-content:center; }
.admin-login-title      { font-family:Arial,sans-serif;font-weight:700;
                          font-size:1.3rem;color:var(--navy);margin-top:0.3rem; }
.admin-panel-header     { display:flex;justify-content:space-between;
                          align-items:center;margin-bottom:1.5rem; }
.admin-panel-title      { font-family:Arial,sans-serif;font-weight:700;
                          color:var(--navy);font-size:1.3rem; }
.emp-card-grid-inner    { display:grid;grid-template-columns:repeat(5,1fr);
                          gap:1rem;margin-bottom:1.5rem; }

.settings-tab-inner     { padding:1rem 0; }
.settings-title         { font-family:Arial,sans-serif;font-weight:700;
                          color:var(--navy);margin-bottom:0.5rem;font-size:1.05rem; }
.settings-desc          { font-size:0.85rem;color:var(--text-light);margin-bottom:1.5rem; }
.form-group--narrow     { max-width:340px; }
.legal-box              { max-width:780px;margin:2rem auto;background:var(--white);
                          border-top:4px solid var(--accent); }
.legal-header           { display:flex;align-items:center;justify-content:space-between;
                          padding:1.4rem 2rem;border-bottom:1px solid var(--border); }
.legal-title            { font-family:Arial,sans-serif;font-weight:700;
                          font-size:1.2rem;color:var(--navy); }
.legal-content          { padding:2rem;font-size:0.9rem;line-height:1.8;color:var(--text); }

/* ── Admin card grid (replacing all inline styles) ───────────── */
.admin-emp-card               { background:var(--white);border:1px solid var(--border);overflow:hidden;cursor:default; }
.admin-emp-card--draggable    { cursor:grab; }
.admin-card-avatar            { width:100%;aspect-ratio:1;
                                background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
                                display:flex;align-items:center;justify-content:center;
                                position:relative;overflow:hidden; }
.admin-card-initials          { font-family:Arial,sans-serif;font-weight:700;
                                font-size:1.6rem;color:rgba(79,183,255,0.55); }
.admin-card-photo             { width:100%;height:100%;object-fit:cover; }
.admin-card-drag-handle       { position:absolute;top:6px;right:7px;
                                color:rgba(255,255,255,0.4);font-size:0.85rem;
                                user-select:none;pointer-events:none; }
.admin-card-body              { padding:0.75rem 0.85rem;border-top:2px solid var(--accent); }
.admin-card-name              { font-family:Arial,sans-serif;font-weight:700;font-size:0.82rem;
                                color:var(--navy);margin-bottom:0.2rem; }
.admin-card-role              { font-size:0.68rem;color:var(--text-light);
                                line-height:1.4;margin-bottom:0.4rem; }
.admin-card-email             { font-size:0.65rem;color:var(--accent-dark);
                                margin-bottom:0.7rem;word-break:break-all; }
.admin-card-actions           { display:flex;gap:0.4rem; }
.admin-card-actions .btn-edit,
.admin-card-actions .btn-delete { flex:1;font-size:0.68rem;padding:0.28rem 0.4rem; }

/* ── Team card photo ─────────────────────────────────────────── */
.team-avatar-img              { width:100%;height:100%;object-fit:cover;display:block; }

/* ── Visibility toggled via classList (no inline display:none) ─ */
.admin-edit-form              { display:none; }
.admin-edit-form.edit-form--open { display:block; }

.success-msg                  { display:none;color:#1a7a3a;font-size:0.88rem;
                                margin-top:0.6rem;padding:0.5rem 0.8rem;
                                background:#eafaf1;border:1px solid #a9dfbf;border-radius:4px; }
.success-msg--visible         { display:block; }

.photo-error-msg              { display:none;color:#c0392b;font-size:0.8rem;margin-top:0.3rem; }


/* ── Photo upload — live preview ────────────────────────────── */
.photo-edit-row         { display:flex;gap:1.2rem;align-items:flex-start;margin-top:0.5rem; }

/* Live-Vorschau: exakt wie Teamkarte */
.photo-live-preview     { flex-shrink:0;width:90px;height:90px;
                          background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 100%);
                          display:flex;align-items:center;justify-content:center;
                          overflow:hidden;position:relative; }
.photo-live-img         { width:100%;height:100%;object-fit:cover;display:none; }
.photo-live-img--visible { display:block; }
.photo-live-initials    { font-family:Arial,sans-serif;font-weight:700;
                          font-size:1.6rem;color:rgba(79,183,255,0.55); }

/* Eingabe-Bereich */
.photo-edit-controls    { display:flex;flex-direction:column;justify-content:center;gap:0.4rem; }
.photo-input-row        { display:flex;align-items:center; }
.photo-file-input       { font-size:0.82rem;flex:1; }

/* Löschen-Button — unter dem Datei-Input */
.btn-delete-photo       { display:none;align-self:flex-start;padding:0.25rem 0.7rem;
                          font-size:0.78rem;background:none;border:1px solid #c0392b;
                          color:#c0392b;border-radius:4px;cursor:pointer; }
.btn-delete-photo--visible { display:inline-block; }

.photo-error-msg        { display:none;color:#c0392b;font-size:0.8rem; }
.photo-error-msg--visible { display:block; }

.settings-tab-inner     { padding:1rem 0; }