:root{
  --navy:#031226;
  --gold:#d7ab33;
  --gold-light:#f4dd8c;
  --white:#fff;
  --max:1200px;
  --side:clamp(16px, 3vw, 34px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--white);background:#000}
a{color:inherit}
img{display:block;max-width:100%}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;z-index:99;background:#fff;color:#000;padding:10px 14px;border-radius:8px}

/*
  Dreiteiliger Hintergrund:
  - Top und Bottom: immer komplett, proportional zur Browserbreite skaliert.
  - Mitte: exakt dieselbe Breite. Ihre Höhe wird vom Inhalt bestimmt.
  - Muss die Mitte um >50% vertikal gestreckt werden, erzeugt background.js
    automatisch weitere nahtlose Kopien und verteilt die Höhe gleichmäßig.
*/
.page-shell{position:relative;min-height:100vh;background:#031226}
.background-stage{position:relative;isolation:isolate;overflow:hidden}
.background-stack{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;pointer-events:none;background:#031226}
.bg-top,.bg-bottom{display:block;width:100%;height:auto;max-width:none;flex:0 0 auto}
.bg-middle-stack{display:flex;flex-direction:column;width:100%;flex:0 0 auto;overflow:hidden;line-height:0}
.bg-middle-piece{display:block;width:100%;max-width:none;object-fit:fill;flex:0 0 auto;margin:0;padding:0;border:0}

.site-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--side);position:relative;z-index:2}
.site-header{padding-top:14px}
.nav-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.brand img{width:min(360px,100%);height:auto}
.main-nav{display:flex;gap:clamp(18px,2vw,40px);padding-top:14px;flex-wrap:nowrap;white-space:nowrap;justify-content:flex-end}
.main-nav a{text-decoration:none;color:#fff;font-size:clamp(18px,1.55vw,30px);line-height:1.2;padding-bottom:8px;position:relative;flex:0 0 auto}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--gold-light);outline:none}
.main-nav a:hover::after,.main-nav a:focus-visible::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);border-radius:2px}

.hero{padding-top:18px;padding-bottom:34px}
.welcome{display:flex;justify-content:center;margin:16px auto 34px;max-width:760px}
.welcome img{width:min(760px,100%);height:auto}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px;align-items:start}
.magic-card{display:block;text-decoration:none;transition:transform .2s ease,filter .2s ease;transform-origin:center center;position:relative;z-index:1}
.magic-card:hover,.magic-card:focus-visible{transform:scale(1.035);filter:brightness(1.04);outline:none;z-index:2}
.magic-card img{width:100%;height:auto}

.services{padding-top:20px;padding-bottom:42px}
.section-art{display:flex;justify-content:center;margin-bottom:28px}
.section-art img{width:min(616px,100%);height:auto}
.service-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:0}
.service-item{position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:138px;padding:15px 10px 16px}
.service-item img{width:auto;height:auto;max-width:none;flex:none}
.service-item:not(:first-child)::before{content:"";position:absolute;left:0;top:0;width:3px;height:138px;background:url('assets/Icon_Trennlinie.png') center center no-repeat;background-size:3px 138px}

/* Kontaktbereich: Box und Foto getrennt; nebeneinander oder bei Platzmangel untereinander. */
.contact{padding-top:18px;padding-bottom:0}
.contact-wrap{display:flex;justify-content:center;align-items:flex-end;gap:26px;max-width:700px;margin:0 auto -1px}
.contact-box-wrap,.contact-photo-wrap{display:flex;align-items:flex-end}
.contact-box-wrap{position:relative}
.contact-photo-wrap{order:1}
.contact-box-wrap{order:2}
.contact-box{width:312px;height:214px;max-width:100%}
.contact-photo{width:313px;height:263px;max-width:100%}

.contact-image-link{position:absolute;display:block;text-indent:-9999px;overflow:hidden;border-radius:6px;z-index:3}
.contact-image-link:focus-visible{outline:2px solid var(--gold-light);background:rgba(255,255,255,.08);text-indent:-9999px}
.contact-phone-link{left:31%;top:53%;width:62%;height:15%}
.contact-mail-link{left:31%;top:75%;width:66%;height:15%}

/*
  Originale 8504 × 99 px Bottom-Line als echtes Bild im Footer.
  Sie wird weder horizontal noch vertikal skaliert, sondern linksbündig angezeigt.
*/
.site-footer{position:relative;margin-top:0;height:99px;min-height:99px;overflow:hidden;background:#020c1c}
.footer-background{position:absolute;left:0;top:0;width:8504px;height:99px;max-width:none;min-width:8504px;object-fit:none;pointer-events:none;user-select:none}
.footer-inner{position:relative;width:100%;height:99px;max-width:none;margin:0;padding:0;color:#f4f1e7;background:transparent;z-index:1}
.footer-tagline{position:absolute;left:190px;top:42px;font-size:11px;line-height:1;letter-spacing:.17em;white-space:nowrap}
.footer-meta{position:absolute;right:190px;top:42px;display:flex;align-items:center;gap:28px;white-space:nowrap}
.footer-links{position:static;display:flex;align-items:center;gap:9px;font-size:11px;line-height:1;white-space:nowrap}
.footer-copy{position:static;font-size:10px;line-height:1;white-space:nowrap}
.footer-links a{text-decoration:none}
.footer-links a:hover,.footer-links a:focus-visible{text-decoration:underline;color:var(--gold-light);outline:none}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.legal-page{min-height:100vh;background:linear-gradient(180deg,#061a33 0,#0c2447 280px,#efe8d8 280px,#f8f5ec 100%);color:#1d2330}
.legal-header{max-width:var(--max);margin:0 auto;padding:22px var(--side);display:flex;justify-content:space-between;align-items:flex-start;gap:20px;color:#fff}
.legal-brand img{width:min(380px,100%);height:auto}
.legal-nav{display:flex;gap:18px 28px;flex-wrap:wrap;justify-content:flex-end;padding-top:10px}
.legal-nav a{text-decoration:none;color:#fff;font-size:18px}
.legal-nav a:hover,.legal-nav a:focus-visible{text-decoration:underline;color:var(--gold-light);outline:none}
.legal-card{max-width:980px;margin:18px auto 42px;background:#fffdf8;border:2px solid rgba(215,171,51,.65);border-radius:22px;box-shadow:0 16px 38px rgba(0,0,0,.24);padding:clamp(24px,5vw,56px)}
.legal-card h1{margin-top:0;color:#33240e;font-size:clamp(34px,5vw,54px)}
.legal-card h2{color:#33240e;margin-top:34px}
.legal-card p,.legal-card li{line-height:1.7}
.note{background:#fff5d6;border-left:5px solid var(--gold);padding:14px 16px;border-radius:10px}
.legal-footer{max-width:var(--max);margin:0 auto;padding:0 var(--side) 28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#fff}
.legal-footer a{color:#fff}

/* Das gesamte Menü springt gemeinsam in die zweite Zeile; einzelne Links brechen nie um. */
@media (max-width:1000px){
  .nav-row{flex-direction:column;align-items:flex-start}
  .main-nav{justify-content:flex-start;padding-top:0}
  .card-grid{gap:28px}
  .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .service-item::before{display:block}
  .service-item:nth-child(1)::before,.service-item:nth-child(4)::before{display:none}
  .footer-tagline{display:none}
  .footer-meta{right:24px}
}

@media (max-width:680px){
  .site-header{padding-top:10px}
  .brand img{width:min(360px,100%)}
  .main-nav{gap:10px 14px}
  .main-nav a{font-size:16px}
  .hero{padding-top:12px}
  .welcome{margin-bottom:22px}
  .card-grid{grid-template-columns:1fr;gap:24px}
  .magic-card:hover,.magic-card:focus-visible{transform:scale(1.02)}
  .services{padding-bottom:28px}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-item{padding:15px 8px 16px}
  .service-item::before{display:block}
  .service-item:nth-child(odd)::before{display:none}
  .contact{padding-top:8px}
  .contact-wrap{flex-direction:column;align-items:center;gap:8px}
  .contact-box-wrap{order:1}
  .contact-photo-wrap{order:2}
  .footer-meta{right:14px;top:42px;gap:22px}
  .footer-links{font-size:10px}
  .footer-copy{font-size:9px}
  .legal-header{flex-direction:column;align-items:flex-start}
  .legal-nav{justify-content:flex-start;padding-top:0}
}

@media (max-width:420px){
  .service-grid{grid-template-columns:1fr}
  .service-item::before{display:none!important}
  .main-nav a{font-size:14px}
  .footer-meta{right:8px;gap:18px}
  .footer-links{font-size:9px}
  .footer-copy{font-size:8px}
}


@media (max-width:560px){
  .main-nav{gap:8px 10px}
  .main-nav a{font-size:14px}
}

@media (max-width:360px){
  .main-nav{gap:6px 8px}
  .main-nav a{font-size:13px}
}

@media (max-width:399px){
  .footer-meta{
    right:8px;
    top:36px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:7px;
    white-space:nowrap;
  }
  .footer-links{font-size:9px;justify-content:flex-end}
  .footer-copy{font-size:8px;text-align:right}
}