/* =========================
   Theme Vars + Base Reset
   ========================= */
*,
*::before,
*::after { box-sizing: border-box; }

img, video, canvas, svg { max-width: 100%; height: auto; }

:root{
  --ath-red:#e10613;
  --ath-red-600:#c10a14;
  --ath-red-50:#fff5f6;
  --ath-black:#111;
  --ath-dark:#1a1a1a;
  --ath-gray-900:#202020;
  --ath-gray-700:#4b4b4b;
  --ath-gray-500:#8a8a8a;
  --ath-gray-200:#e8e8e8;
  --ath-gray-100:#f3f3f3;
  --ath-white:#fff;
  --success:#1e8e3e;
  --warning:#b98300;
  --info:#185abc;
}

html, body{
  margin:0;
  color:var(--ath-black);
  background:var(--ath-white);
  font-family: 'Inter Tight',Arial, "Apple Color Emoji", "Segoe UI Emoji";
  overflow-x:hidden;
}

.container{max-width:1200px;margin:0 auto;padding:24px}

/* =========================
   Auth Splash
   ========================= */
body.auth-check #login,
body.auth-check #main { display:none; }

#auth-splash {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--ath-white); color: var(--ath-gray-700);
  font-size: 14px;
}

/* =========================
   Utilities
   ========================= */
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-8{gap:8px; justify-content:flex-end}
.gap-12{gap:12px}
.gap-18{gap:18px}
.pad-header{padding:14px 24px}
.col-span-full{grid-column:1 / -1}
.hidden{display:none}                 /* Basis */
.chips.hidden{display:none !important;} /* überstimmt spätere .chips-Layouts */
/* hidden muss immer gewinnen – auch gegen .login-wrap */
.hidden { display: none !important; }
.login-wrap.hidden, #login.hidden { display: none !important; }
/* =========================
   Header – ATH Topbar Look
   ========================= */
.ath-topbar{
  position:sticky; top:0; z-index:30;
  background:#111; color:#fff; border-bottom:1px solid #2a2a2a;
}
.ath-topbar a{color:#fff; text-decoration:none}

.ath-topbar-inner{
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:12px; padding:10px 24px;
}
.ath-logo{justify-self:center; display:inline-flex; align-items:center}
.ath-logo img{height:40px}

.ath-right{justify-self:end; display:flex; align-items:center; gap:10px; min-width:0}
.ath-right .chips{display:flex; gap:8px; flex-wrap:nowrap}
.ath-right .chip{
  white-space:nowrap;
  padding:4px 8px; border-radius:999px; border:1px solid var(--ath-gray-200);
  font-size:12px; background:rgba(255,255,255,0.1); color:#fff;
}

/* Portal-Navigation unter der Topbar */
.ath-mainnav{background:#111}
.ath-mainnav .container{
  display:flex; justify-content:center; gap:24px;
  padding:8px 24px; overflow-x:auto; white-space:nowrap;
}
.ath-mainnav a{color:#fff; opacity:.9; text-decoration:none}
.ath-mainnav a.active{font-weight:600; text-decoration:underline}

/* Logout-Button (Desktop) */
#btn-logout{background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; border-radius:12px; padding:10px 14px; font-weight:600}
#btn-logout:hover{border-color:#fff}
#montage-upload.hidden { display:none; }
#montage-upload .upload-row { display:flex; gap:10px; align-items:center; margin:6px 0 4px; }
#upload-note.success { color: #0a7a0a; }
#upload-note.error   { color: #b00020; }


/* =========================
   Grid / Cards
   ========================= */
.grid{display:grid; gap:24px}
@media(min-width:1000px){ .grid{ grid-template-columns:360px 1fr } }
.grid.single {grid-template-columns:1fr !important;}
.grid.single > * {grid-column:1 / -1;}
.card{
  background:var(--ath-white);
  border:1px solid var(--ath-gray-200);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  display:flex; flex-direction:column; height:auto; align-self:start;
  max-width:100%;
}
.card-header{
  padding:16px 20px; border-bottom:1px solid var(--ath-gray-200);
  display:flex; align-items:center; justify-content:space-between;
}
.card-body{ padding:16px 20px; flex:1 1 auto; display:flex; flex-direction:column; }

/* =========================
   Pills / Status
   ========================= */
   
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--ath-gray-200);background:var(--ath-gray-100)}
.pill.info{border-color:#4b4b4b;background:#8a8a8a;color:#fff;font-weight:bold;display: inline-block;max-width: 150px; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; vertical-align: middle;}

.pill.success{border-color:#d7f0dd;background:#effaf2;color:var(--success);}
.pill.warning{border-color:#ffe9b8;background:#fff7df;color:var(--warning)}
.status-dot {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
}

.status-dot.status-green { background:#4caf50; }
.status-dot.status-grey  { background:#9e9e9e; }
.status-dot.status-yellow{ background:#ff9800; }
.status-dot.status-red   { background:#f44336; }
.status-open{background:#52dc79}
.status-inprogress{background:var(--warning)}
.status-done{background:var(--success)}


/* =========================
   List / Tickets
   ========================= */
.list{padding:8px}
.ticket{
  border:1px solid var(--ath-gray-200); border-radius:14px;
  padding:12px; margin-bottom:10px; display:grid; gap:6px;
}
.ticket:hover{background:var(--ath-red-50)}
.ticket .row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ticket small{color:var(--ath-gray-500)}
.ticket.active{background:var(--ath-red-50); border-color:var(--ath-red)}
.serial{white-space:nowrap}
.serial .sn-value{word-break:break-all}

/* =========================
   Form / Fields
   ========================= */
.meta{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:grid; gap:6px; margin-bottom:14px}
.field label{font-size:12px; color:var(--ath-gray-700)}
.field input,.field textarea,.field select{
  padding:10px 12px; border-radius:10px; border:1px solid var(--ath-gray-200); font:inherit
}
.field textarea{min-height:88px; resize:vertical}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas; background:var(--ath-gray-100); border:1px solid var(--ath-gray-200); padding:2px 6px; border-radius:6px; font-size:12px}

/* =========================
   Buttons / Search
   ========================= */
.search{display:flex; gap:8px}
.search input{flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--ath-gray-200)}
.btn{appearance:none; border:none; cursor:pointer; border-radius:12px; padding:10px 14px; font-weight:600}
.btn-primary{background:var(--ath-red); color:#fff}
.btn-primary:hover{background:var(--ath-red-600)}
.btn-ghost{background:transparent; border:1px solid var(--ath-gray-200); color:var(--ath-black)}
.btn-danger-ghost{background:transparent; border:1px solid var(--ath-red); color:var(--ath-red)}

/* =========================
   Timeline / Footer
   ========================= */
.timeline{border-left:2px solid var(--ath-gray-200); padding-left:14px; margin-left:6px}
.timeline .titem{margin:10px 0}
.timeline .titem time{font-size:12px; color:var(--ath-gray-500)}
.footer-note{color:var(--ath-gray-500); font-size:13px}
.footer-note.success{color:var(--success); font-weight:600}

footer{background:var(--ath-black); color:var(--ath-white)}
footer a{color:var(--ath-white); text-decoration:none}
.footer-bar{padding-top:16px; padding-bottom:40px; display:flex; align-items:center; justify-content:space-between}

/* =========================
   Login
   ========================= */
.login-wrap{min-height:calc(100vh - 80px); display:grid; place-items:center; padding:32px; opacity:1; transform:translateY(0); transition:opacity .5s ease, transform .5s ease}
.login-card{width:min(560px, 100%); background:var(--ath-white); border:1px solid var(--ath-gray-200); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.08); overflow:hidden}
.login-head{background:var(--ath-black); color:var(--ath-white); padding:16px 20px; display:flex; align-items:center; justify-content:space-between}
.segmented{display:none; border:1px solid var(--ath-gray-200); border-radius:10px; overflow:hidden}
.segmented button{flex:1; padding:10px 14px; background:#fafafa; border:0; font-weight:600; cursor:pointer}
.segmented button.active{background:var(--ath-red); color:#fff}
.login-body{padding:18px 20px; display:grid; gap:12px}
.login-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px}

/* =========================
   Helpers (fade)
   ========================= */
.fade-out{opacity:0; transform:translateY(10px)}
.main-wrap{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease}
.main-wrap.show{opacity:1; transform:translateY(0)}

.detail-header-actions{display:flex; gap:8px; align-items:center}
.close-row{
  margin-top:24px; border-top:1px dashed var(--ath-gray-200);
  padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
  /* Inhalte sauber umbrechen */
  .ticket .row{flex-wrap:wrap}
  .ticket strong, .serial .sn-value{word-break:break-all}
  .chip, .pill{max-width:100%; overflow:hidden; text-overflow:ellipsis}

  /* Formfelder 100% */
  .field input, .field textarea, .field select{width:100%}

  /* Harte Kante gegen horizontales Überlaufen */
  header, .ath-topbar-inner, .ath-right, .ath-mainnav .container{min-width:0}
}

.gap-8 #filter-status{display:none}
#message-sending.flex.items-center.gap-8{justify-content: flex-start !important;}
.detail-header-actions .pill.info {max-width: none;}

/* ======= Overflow-Schutz allgemein ======= */
.container,
.grid, .grid > *,
.card, .card-body,
.ath-topbar-inner, .ath-right {
  min-width: 0;          /* verhindert, dass Kinder die Breite erzwingen */
  max-width: 100%;
}

/* ======= Mobile: horizontale List-Card + Detail-Fullwidth ======= */
@media (max-width: 768px) {
	
  .ath-topbar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* links | mitte | rechts */
    align-items: center;
    gap: 12px;
  }

  /* Die Box .ath-right „auflösen“, damit ihre Kinder Grid-Items werden */
  .ath-right {
    display: contents;           /* <— macht .chips und #btn-logout zu direkten Grid-Kindern */
  }

  /* Chips links */
  .ath-right .chips {
    justify-self: start;
    display: flex;               /* bleibt flex wie vorher */
    gap: 8px;
    min-width: 0;
    max-width: 100%;
  }

  /* Logo zentriert */
  .ath-logo { justify-self: center; }

  /* Logout nach rechts */
  #btn-logout {
    justify-self: end;
    margin-left: 0;              /* alte Auto-Margen nicht nötig */
  }

  /* Optional: .ath-left aufräumen, falls leer */
  .ath-left { display: none; }
  
  /* Layout auf 1 Spalte */
  .grid { grid-template-columns: 1fr !important; }

  /* --- LIST-CARD horizontal wischen --- */
  #list-card .card-body { padding: 12px; }

  #list-card .list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    /* Edge-to-edge, ohne die Seite zu verbreitern */
    margin: 0 -12px;
    padding: 0 12px 8px;
  }

  #list-card .ticket {
    flex: 0 0 clamp(260px, 85vw, 420px);
    max-width: 85vw;
    margin-bottom: 0;
    scroll-snap-align: start;
  }

  /* Inhalte dürfen die Karte NICHT verbreitern */
  #list-card .ticket .row {
    flex-wrap: nowrap;          /* <— hier war die Extraklammer */
  }
  #list-card .ticket .row > * { min-width: 0; }
  #list-card .ticket strong,
  #list-card .ticket small,
  #list-card .ticket .pill,
  #list-card .serial .sn-value {
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Nur die (z. B.) 3. Zeile rechtsbündig – anpassen wenn andere Zeile */
  #list-card .ticket .row:nth-of-type(3) {
    justify-content: flex-end;
    text-align: right;
  }

  /* --- DETAIL-CARD: jedes Feld volle Breite --- */
  #detail-card .card-body { padding: 16px; }

  /* 1-spaltiges Grid für die Formdaten */
  #detail-card .meta {
    grid-template-columns: 1fr;   /* von 2 auf 1 Spalte */
    gap: 12px;
  }
  /* Alle Fields sollen sicher die ganze Zeile belegen */
  #detail-card .meta .field {
    grid-column: 1 / -1;
    margin-bottom: 0;             /* Gap steuert den Abstand */
  }
  /* Inputs wirklich 100% */
  #detail-card .field input,
  #detail-card .field textarea,
  #detail-card .field select {
    width: 100%;
  }

  /* Optional: Überschriften und Abstände etwas kompakter */
  #detail-card h3 { margin: 16px 0 8px; }
}
<!-- ==== SERVICE-FOOTER (BEGIN) ==== -->
<footer class="service-footer" role="contentinfo">
  <div class="service-footer__inner">
    <!-- Logo -->
    <div class="service-footer__logo">
      <img src="https://www.ath-heinl.de/media/logo/websites/1/logo.png" alt="ATH-Heinl Logo" loading="lazy" />
    </div>

    <!-- Wireframes/Produkt-Icons -->
    <div class="service-footer__wires">
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__01_SingleLift.png" alt="SingleLift" loading="lazy" />
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__02_ComfortLift.png" alt="ComfortLift" loading="lazy" />
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__03_FourLift.png" alt="FourLift" loading="lazy" />
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__04_CrossLift.png" alt="CrossLift" loading="lazy" />
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__05_FrameLift.png" alt="FrameLift" loading="lazy" />
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__06_M72.png" alt="M72" loading="lazy" />
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__07_W82.png" alt="W82" loading="lazy" />
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__08_7226.png" alt="7226" loading="lazy" />
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__09_W142.png" alt="W142" loading="lazy" />
      <img src="https://www.ath-heinl.de/media/icons/Icons_Footer__10_RG.png" alt="RG" loading="lazy" />
    </div>

    <!-- Navigation -->
    <nav class="service-footer__nav" aria-label="Footer Navigation">
      <a href="https://kiosk.ath-heinl.de" target="_blank" rel="noopener" title="Katalog">Katalog</a>
      <a href="https://www.ath-heinl.de/kontakt" title="Kontakt">Kontakt</a>
      <a href="https://www.ath-heinl.de/datenschutz" title="Datenschutz">Datenschutz</a>
      <a href="https://www.ath-heinl.de/impressum" title="Impressum">Impressum</a>
    </nav>

    <!-- Socials -->
    <div class="service-footer__socials">
      <a class="service-footer__social" href="https://www.facebook.com/ath.heinl" target="_blank" rel="noopener" aria-label="Facebook">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22 12.06C22 6.48 17.52 2 11.94 2S2 6.48 2 12.06c0 5 3.66 9.14 8.44 9.94v-7.03H7.9V12.06h2.54V9.8c0-2.5 1.49-3.88 3.77-3.88 1.09 0 2.23.19 2.23.19v2.45h-1.26c-1.24 0-1.63.77-1.63 1.56v1.94h2.78l-.44 2.91h-2.34V22c4.78-.8 8.44-4.94 8.44-9.94z"/></svg>
      </a>
      <a class="service-footer__social" href="https://api.whatsapp.com/send?phone=4915172740831" target="_blank" rel="noopener" aria-label="WhatsApp">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.52 3.48A11.86 11.86 0 0 0 12.07 0C5.55 0 .28 5.27.28 11.78c0 2.08.54 4.11 1.57 5.9L0 24l6.48-1.7a11.75 11.75 0 0 0 5.59 1.42h.01c6.52 0 11.79-5.27 11.79-11.78 0-3.15-1.23-6.11-3.35-8.46zM12.08 21.3h-.01a9.52 9.52 0 0 1-4.85-1.33l-.35-.21-3.84 1.01 1.03-3.75-.23-.38a9.5 9.5 0 0 1-1.45-5.05c0-5.27 4.29-9.56 9.57-9.56 2.55 0 4.95.99 6.75 2.79a9.47 9.47 0 0 1 2.82 6.77c0 5.28-4.29 9.57-9.44 9.57zm5.49-7.13c-.3-.15-1.77-.86-2.04-.96-.27-.1-.47-.15-.68.15-.2.3-.78.96-.96 1.16-.18.2-.36.23-.66.08-.3-.15-1.26-.46-2.4-1.46-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.36.45-.54.15-.18.2-.31.3-.52.1-.2.05-.38-.02-.53-.08-.15-.68-1.64-.93-2.24-.24-.58-.49-.5-.68-.51l-.58-.01c-.2 0-.52.07-.79.38-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.06 2.87 1.21 3.07.15.2 2.09 3.2 5.06 4.49.71.31 1.27.49 1.71.62.72.23 1.37.2 1.89.12.58-.09 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.08-.13-.27-.2-.57-.35z"/></svg>
      </a>
      <a class="service-footer__social" href="https://www.instagram.com/athheinl/?hl=de" target="_blank" rel="noopener" aria-label="Instagram">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.9.2 2.3.4.6.2 1 .4 1.4.8.4.4.6.8.8 1.4.2.4.3 1.1.4 2.3.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 1.9-.4 2.3-.2.6-.4 1-.8 1.4-.4.4-.8.6-1.4.8-.4.2-1.1.3-2.3.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.9-.2-2.3-.4-.6-.2-1-.4-1.4-.8-.4-.4-.6-.8-.8-1.4-.2-.4-.3-1.1-.4-2.3C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.2-1.9.4-2.3.2-.6.4-1 .8-1.4.4-.4.8-.6 1.4-.8.4-.2 1.1-.3 2.3-.4C8.4 2.2 8.8 2.2 12 2.2m0-2.2C8.7 0 8.3 0 7 0 5.7.1 4.8.2 4 .5 3.2.8 2.5 1.2 1.8 1.9 1.1 2.6.7 3.3.5 4 .2 4.8.1 5.7 0 7c0 1.3 0 1.7 0 5s0 3.7.1 5c.1 1.3.2 2.2.5 3 .3.8.7 1.5 1.4 2.2.7.7 1.4 1.1 2.2 1.4.8.3 1.7.4 3 .5 1.3.1 1.7.1 5 .1s3.7 0 5-.1c1.3-.1 2.2-.2 3-.5.8-.3 1.5-.7 2.2-1.4.7-.7 1.1-1.4 1.4-2.2.3-.8.4-1.7.5-3 .1-1.3.1-1.7.1-5s0-3.7-.1-5c-.1-1.3-.2-2.2-.5-3-.3-.8-.7-1.5-1.4-2.2C21.5.7 20.8.3 20 .1 19.2-.2 18.3-.3 17-.4 15.7-.5 15.3-.5 12-.5z"/><circle cx="18.4" cy="5.6" r="1.3"/><path d="M12 5.8A6.2 6.2 0 1 0 12 18.2 6.2 6.2 0 0 0 12 5.8zm0 10.2A4 4 0 1 1 12 7.8a4 4 0 0 1 0 8.2z"/></svg>
      </a>
      <a class="service-footer__social" href="https://www.linkedin.com/company/ath-heinl-gmbh-&amp;-co.kg" target="_blank" rel="noopener" aria-label="LinkedIn">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8.5h4V24h-4V8.5zM8.5 8.5h3.8v2.1h.1c.5-1 1.9-2.1 3.9-2.1 4.2 0 5 2.7 5 6.3V24h-4v-6.9c0-1.6 0-3.7-2.2-3.7s-2.5 1.7-2.5 3.6V24h-4V8.5z"/></svg>
      </a>
    </div>
  </div>
</footer>

/* ==== SERVICE-FOOTER (SCOPED) ==== */
.service-footer {
  --sf-text: #222529;
  --sf-muted: #6f6e6c;
  --sf-border: #e7e7e7;
  --sf-link: #222329;
  --sf-link-hover: #f4631b;
  border-top: 1px solid var(--sf-border);
  background: #fff;
  color: var(--sf-text);
}

.service-footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 65px 3% 30px;
  display: grid;
  grid-template-rows: auto auto auto auto;
  row-gap: 24px;
  justify-items: center;
  text-align: center;
}

.service-footer__logo img{
  max-height: 42px;
  height: auto;
  width: auto;
}

.service-footer__wires{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: center;
}
.service-footer__wires img{
  height: 36px;
  width: auto;
  filter: saturate(0.9);
}

.service-footer__nav{
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.service-footer__nav a{
  color: var(--sf-link);
  text-decoration: none;
  line-height: 1.6;
  font-size: 14px;
}
.service-footer__nav a:hover,
.service-footer__nav a:focus{
  color: var(--sf-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-footer__socials{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}
.service-footer__social{
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background-color .2s ease;
  color: var(--sf-text);
  background: #f4f4f4;
}
.service-footer__social svg{
  width: 18px; height: 18px; fill: currentColor;
}
.service-footer__social:hover{ transform: translateY(-1px); }
.service-footer__social[aria-label="Facebook"]:hover{ background:#3b5a9a; color:#fff; }
.service-footer__social[aria-label="WhatsApp"]:hover{ background:#25d366; color:#fff; }
.service-footer__social[aria-label="Instagram"]:hover{ background:#C13584; color:#fff; }
.service-footer__social[aria-label="LinkedIn"]:hover{ background:#0a66c2; color:#fff; }

/* Responsive Tweaks */
@media (min-width: 768px){
  .service-footer__wires img{ height: 42px; }
}
@media (min-width: 992px){
  .service-footer__inner{
    text-align: left;
    justify-items: stretch;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }
  .service-footer__nav{ justify-content: center; }
}
/* ==== SERVICE-FOOTER FIX & FINISH ==== */

/* Hintergrund/Typo wie im Zielbild */
.service-footer{
  background:black;
  color:#fff;
}

/* ALLE Breakpoints: Inhalte mittig halten */
.service-footer__inner{
  justify-items:center;
  text-align:center;
}

/* Desktop: NICHT linksbündig setzen */
@media (min-width: 992px){
  .service-footer__inner{
    /* früher: text-align:left; justify-items:stretch;  */
    text-align:center;
    justify-items:center;
    grid-template-rows:auto auto;
    grid-template-columns:1fr;
  }
}

/* Logo wirklich zentrieren und etwas größer */
.service-footer__logo{
  display:flex;
  justify-content:center;
}
.service-footer__logo img{
  max-height:64px; /* vorher 42px */
}

/* Wireframes größer + luftiger */
.service-footer__wires{
  gap: 14px 22px;
}
.service-footer__wires img{
  height:56px; /* vorher 36/42px */
  opacity:0.9;
}
@media (min-width: 992px){
  .service-footer__wires img{ height:72px; }
}

/* Links als Buttons wie im Zielbild */
.service-footer__nav{
  gap:28px;
}
.service-footer__nav a{
  display:inline-block;
  background:#1e1e1e;
  color:#fff;
  padding:14px 28px;
  border-radius:8px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06) inset, 0 4px 14px rgba(0,0,0,0.35);
}
.service-footer__nav a:hover, .service-footer__nav a:focus{
  background:#2a2a2a;
  text-decoration:none;
}

/* Socials dezent – ohne weiße Kreise */
.service-footer__socials{
  margin-top:18px;
  gap:18px;
}
.service-footer__social{
  width:auto; height:auto; border-radius:0;
  background:transparent;
  color:rgba(255,255,255,0.65);
  transform:none;
}
.service-footer__social svg{
  width:28px; height:28px;
}
.service-footer__social:hover{
  color:#fff;
  background:transparent; /* keine Farbbubbles */
}
/* ===== ATH Header – Größen & Look wie ath-heinl.de ===== */

/* Grundton einen Tick dunkler wie auf der Website */
.ath-topbar,
.ath-mainnav { background: #0f0f0f; }

/* Topbar höher + mehr Luft */
.ath-topbar-inner{
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;              /* vorher 10px */
}

/* Logo größer (zentriert bleibt dank Grid) */
.ath-logo img{
  height: 56px;                    /* vorher 40px */
}

/* Chips deutlich wie „Pills“ darstellen */
.ath-right .chip{
  padding: 6px 12px;
  font-size: 13px;
  background: transparent;         /* transparenter, wie auf der Site */
  color: #fff;
  border: 1px solid rgba(255,255,255,.45);
}

/* Logout-Button optisch passend */
#btn-logout{
  padding: 10px 16px;
  border-radius: 999px;
  border-color: rgba(255,255,255,.45);
}
#btn-logout:hover{ border-color:#fff; }

/* Hauptnavigation: größer, mehr Abstand, zentral */
.ath-mainnav .container{
  justify-content: center;
  gap: 36px;                        /* vorher 24px */
  padding: 14px 24px;               /* vorher 8px */
}
.ath-mainnav a{
  font-size: 22px;                  /* vorher vererbt */
  line-height: 1;
  opacity: .95;
  text-decoration: none;
  position: relative;
}

/* dezenter Hover/Active-Unterstrich wie auf der Website */
.ath-mainnav a:hover,
.ath-mainnav a:focus,
.ath-mainnav a.active{
  text-decoration: none;
}
.ath-mainnav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:2px; background:transparent;
  transition: background .2s ease;
}
.ath-mainnav a:hover::after,
.ath-mainnav a.active::after{
  background:#fff;
}

/* --- Responsive Tweaks --- */
@media (max-width: 768px){
  .ath-topbar-inner{ padding: 10px 16px; }
  .ath-logo img{ height: 44px; }   /* mobil kompakter */
  .ath-mainnav .container{
    gap: 18px;
    padding: 10px 16px;
  }

  /* Dein bestehendes Mobile-Grid behalten (Chips links, Logo Mitte, Logout rechts) */
  /* kommt bereits aus deiner Datei – wir überschreiben nichts davon. :contentReference[oaicite:2]{index=2} */
}
/* ===== Modal ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: none;
  align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-overlay.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 520px; box-shadow: 0 12px 32px rgba(0,0,0,.2); overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eee; }
.modal-title { margin: 0; font-size: 18px; }
.modal-x { background: transparent; border: 0; font-size: 22px; line-height: 1; cursor: pointer; padding: 6px; color: #555; }
.modal-x:hover { color: #111; }
.modal-body { padding: 16px; font-size: 15px; line-height: 1.45; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid #eee; }
body.modal-open { overflow: hidden; }

/* Buttons (falls .btn-secondary noch nicht vorhanden ist) */
.btn-secondary { background: #e5e7eb; color: #111; }
.btn-secondary:hover { background: #dcdfe3; }