/* ================================================================
   PLATE FACILITY MANAGEMENT – Gemeinsame Stile für Unterseiten
   index.html verwendet eigene Inline-Stile.
   ================================================================ */

/* 1. Schriften ─────────────────────────────────────────────────── */
@font-face { font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Inter';   font-weight:400; font-style:normal; font-display:swap; src:url('fonts/inter.woff2') format('woff2'); }
@font-face { font-family:'Inter';   font-weight:500; font-style:normal; font-display:swap; src:url('fonts/inter.woff2') format('woff2'); }
@font-face { font-family:'Inter';   font-weight:600; font-style:normal; font-display:swap; src:url('fonts/inter.woff2') format('woff2'); }

/* 2. Variablen ──────────────────────────────────────────────────── */
:root {
  --blue-deep: #1D4E89;
  --blue-mid:  #2E6FB0;
  --blue-soft: #EAF2FB;
  --ink:       #1B2733;
  --grey:      #647082;
  --white:     #FFFFFF;
  --bg-solid:  #F6F9FC;
  --text-light:#1B2733;
  --text-muted:#647082;
  --c-a:#2E6FB0; --c-b:#4C9A6A; --c-c:#C79A3E;
  --c-d:#5AAFD1; --c-e:#3E8E82; --c-f:#A85751; --c-g:#6B5EA8;
  --font-display:'Poppins', sans-serif;
  --font-body:  'Inter',   sans-serif;
  --r-lg:28px; --r-md:18px;
}

/* 3. Basis ──────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; }
body  { font-family:var(--font-body); color:var(--text-light); line-height:1.65; -webkit-font-smoothing:antialiased; background:var(--bg-solid); }
a     { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 32px; }
a:focus-visible,button:focus-visible { outline:2px solid var(--blue-soft); outline-offset:3px; }

/* 4. Header ─────────────────────────────────────────────────────── */
header { position:sticky; top:0; z-index:50; background:rgba(246,249,252,0.90); backdrop-filter:blur(8px); border-bottom:1px solid rgba(226,234,243,0.8); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:20px 0; }
.logo-badge { display:flex; flex-direction:column; line-height:1; }
.logo-text  { font-family:var(--font-display); font-weight:700; font-size:1.35rem; letter-spacing:-0.01em; background:linear-gradient(100deg,var(--blue-deep),var(--blue-mid) 60%,var(--c-e)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.logo-text span { display:block; font-family:var(--font-body); font-weight:600; font-size:0.6rem; color:var(--text-muted); letter-spacing:0.22em; text-transform:uppercase; margin-top:3px; -webkit-text-fill-color:var(--text-muted); }

/* 5. Desktop-Navigation + Dropdown ─────────────────────────────── */
nav.main-nav { display:flex; align-items:center; gap:32px; }
nav.main-nav > a { font-size:0.92rem; font-weight:500; color:var(--text-light); }
nav.main-nav > a:hover { color:var(--blue-mid); }

.nav-dropdown { position:relative; }
.nav-dropdown > a { display:inline-flex; align-items:center; gap:5px; font-size:0.92rem; font-weight:500; color:var(--text-light); cursor:pointer; }
.nav-dropdown > a::after { content:''; display:inline-block; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:0.55; flex-shrink:0; transition:transform 0.2s; }
.nav-dropdown > a:hover { color:var(--blue-mid); }
.nav-dropdown.open > a::after { transform:rotate(180deg); }

.dropdown-menu {
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:white; border-radius:14px; min-width:230px; z-index:100;
  box-shadow:0 20px 50px -10px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.05);
  padding:8px 0; opacity:0; visibility:hidden;
  transition:opacity 0.18s ease,visibility 0.18s,transform 0.18s ease;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open  .dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown-menu a { display:block; padding:10px 20px; font-size:0.88rem; color:var(--ink); transition:background 0.15s,color 0.15s; }
.dropdown-menu a:hover  { background:var(--blue-soft); color:var(--blue-mid); }
.dropdown-menu a.active { color:var(--blue-mid); font-weight:600; background:rgba(234,242,251,0.5); }

/* 6. Buttons ────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:0.9rem; padding:13px 26px; border-radius:999px; transition:transform 0.2s ease,box-shadow 0.2s ease; cursor:pointer; border:1px solid transparent; }
.btn-primary { background:linear-gradient(135deg,var(--blue-mid),var(--c-e)); color:var(--white); box-shadow:0 8px 20px -8px rgba(46,111,176,0.55); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(46,111,176,0.6); }
.btn-white { background:white; color:var(--blue-deep); font-weight:700; padding:14px 28px; border-radius:999px; box-shadow:0 8px 20px -8px rgba(0,0,0,0.25); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(0,0,0,0.3); }

/* 7. Hamburger / Mobile Navigation ─────────────────────────────── */
.header-right { display:flex; align-items:center; gap:12px; }
.nav-toggle { display:none; background:none; border:1.5px solid #DDE3EC; border-radius:8px; cursor:pointer; padding:7px; line-height:0; flex-shrink:0; }
.nav-toggle svg { width:20px; height:20px; stroke:var(--ink); stroke-width:2; stroke-linecap:round; display:block; }
.mobile-nav { display:flex; flex-direction:column; background:rgba(246,249,252,0.97); backdrop-filter:blur(8px); border-top:1px solid transparent; overflow:hidden; max-height:0; transition:max-height 0.35s ease,border-color 0.35s ease; }
.mobile-nav.open { max-height:560px; border-color:#E2EAF3; }
.mobile-nav a { padding:13px 20px; font-size:0.95rem; font-weight:500; color:var(--text-light); border-bottom:1px solid #EDF1F5; }
.mobile-nav a.sub { padding-left:38px; font-size:0.88rem; color:var(--grey); font-weight:400; }
.mobile-nav a:last-child { border-bottom:none; }
.mobile-nav a:hover { color:var(--blue-mid); background:var(--blue-soft); }
@media (prefers-reduced-motion:reduce) { .mobile-nav,.dropdown-menu { transition:none; } }

/* 8. Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb { background:rgba(234,242,251,0.45); border-bottom:1px solid rgba(226,234,243,0.7); padding:11px 0; }
.breadcrumb ol { display:flex; list-style:none; font-size:0.8rem; color:var(--text-muted); flex-wrap:wrap; }
.breadcrumb li + li::before { content:'›'; padding:0 8px; opacity:0.5; }
.breadcrumb li a { color:var(--blue-mid); }
.breadcrumb li a:hover { text-decoration:underline; }

/* 9. Service Hero ───────────────────────────────────────────────── */
.service-hero { position:relative; height:340px; display:flex; align-items:flex-end; overflow:hidden; }
.service-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.service-hero-content { position:relative; padding-bottom:48px; }
.eyebrow { font-size:0.78rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(207,227,247,0.9); margin-bottom:10px; }
.service-hero h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,4vw,2.8rem); line-height:1.2; color:white; max-width:700px; }

/* 10. Service-Inhalt ────────────────────────────────────────────── */
.service-body { padding:64px 0 40px; }
.service-article { max-width:760px; margin:0 auto; }
.service-intro { font-size:1.05rem; color:var(--grey); line-height:1.85; margin-bottom:48px; border-left:3px solid var(--blue-soft); padding-left:20px; }
.service-section { margin-bottom:48px; }
.service-section h2 { font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--ink); margin-bottom:18px; }

/* Checkliste */
.check-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.check-list li { display:flex; align-items:flex-start; gap:12px; font-size:0.95rem; color:var(--ink); line-height:1.6; }
.check-icon { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; margin-top:2px; }
.check-icon svg { width:12px; height:12px; stroke:var(--blue-mid); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; fill:none; }

/* Info-Boxen ─────────────────────────────────────────────────────── */
.info-boxes { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:48px; }
.info-box { background:white; border-radius:var(--r-md); padding:28px; box-shadow:0 8px 30px -10px rgba(0,0,0,0.1); }
.info-box h2 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--blue-deep); margin-bottom:12px; }
.info-box p  { font-size:0.92rem; color:var(--grey); line-height:1.72; }

/* CTA ────────────────────────────────────────────────────────────── */
.service-cta { background:linear-gradient(135deg,var(--blue-deep),var(--c-e)); border-radius:var(--r-lg); padding:40px 48px; color:white; margin-bottom:64px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.service-cta-text h2 { font-family:var(--font-display); font-weight:700; font-size:1.4rem; margin-bottom:6px; }
.service-cta-text p  { color:rgba(255,255,255,0.8); font-size:0.95rem; }

/* Verwandte Leistungen ──────────────────────────────────────────── */
.related { padding:0 0 80px; }
.related > h2 { font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--ink); margin-bottom:20px; }
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.related-card { background:white; border-radius:var(--r-md); padding:22px 24px; box-shadow:0 6px 24px -10px rgba(0,0,0,0.1); border:1px solid #E8EAED; display:flex; align-items:center; gap:14px; transition:border-color 0.2s,box-shadow 0.2s; }
.related-card:hover { border-color:var(--blue-soft); box-shadow:0 10px 30px -10px rgba(46,111,176,0.18); }
.related-card-icon { width:42px; height:42px; border-radius:10px; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.related-card-icon svg { width:20px; height:20px; stroke:var(--blue-mid); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.related-card-text strong { display:block; font-family:var(--font-display); font-size:0.9rem; font-weight:600; color:var(--ink); margin-bottom:2px; transition:color 0.2s; }
.related-card:hover .related-card-text strong { color:var(--blue-mid); }
.related-card-text span { font-size:0.8rem; color:var(--text-muted); }

/* 11. Kontaktseite ──────────────────────────────────────────────── */
.contact { padding:64px 0 100px; }
.contact-head { text-align:center; max-width:560px; margin:0 auto 48px; }
.contact-head .eyebrow { color:var(--blue-mid); }
.contact-head h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,3vw,2.3rem); color:var(--text-light); margin-top:8px; }
.contact-wrap { display:grid; grid-template-columns:1fr 1.4fr; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 25px 60px -25px rgba(0,0,0,0.5); }
.contact-info-panel { background:linear-gradient(150deg,var(--blue-deep),var(--c-e)); color:var(--white); padding:56px 44px; display:flex; flex-direction:column; justify-content:space-between; }
.contact-info-panel h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3vw,2rem); margin:10px 0 16px; line-height:1.2; }
.contact-info-panel p.lead { color:rgba(255,255,255,0.75); font-size:0.95rem; line-height:1.7; }
.contact-details { margin-top:40px; display:flex; flex-direction:column; gap:22px; }
.contact-detail { display:flex; align-items:center; gap:14px; }
.contact-detail-icon { width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-detail-icon svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.contact-detail span { font-size:0.9rem; color:rgba(255,255,255,0.85); }
.contact-detail a { color:#fff; font-weight:600; font-size:0.95rem; }
.contact-detail a:hover { text-decoration:underline; }
.contact-form-panel { background:#F8FAFD; padding:52px 48px; }
.contact-form-panel h3 { font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:var(--ink); margin-bottom:32px; }
.cform { display:flex; flex-direction:column; gap:20px; }
.cform-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cform-group { display:flex; flex-direction:column; gap:6px; }
.cform-group label { font-size:0.73rem; font-weight:700; color:var(--text-muted); letter-spacing:0.07em; text-transform:uppercase; }
.cform-group input,.cform-group select,.cform-group textarea { width:100%; padding:13px 16px; border:1.5px solid #E0E7EF; border-radius:12px; font-size:0.93rem; font-family:var(--font-body); color:var(--ink); background:#fff; transition:border-color 0.2s,box-shadow 0.2s; outline:none; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.cform-group input:focus,.cform-group select:focus,.cform-group textarea:focus { border-color:var(--blue-mid); box-shadow:0 0 0 4px rgba(46,111,176,0.10); }
.cform-group input::placeholder,.cform-group textarea::placeholder { color:#B0BAC8; }
.cform-group select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23647082' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:44px; cursor:pointer; }
.cform-group textarea { resize:vertical; min-height:120px; }
.cform-submit { margin-top:6px; }
.cform-submit .btn { width:100%; justify-content:center; border-radius:12px; padding:15px; font-size:0.95rem; }
.cform-hint { font-size:0.77rem; color:var(--text-muted); margin-top:12px; line-height:1.55; }
.cform-success { display:none; padding:16px 20px; background:#EAF7F0; color:#1E7A45; border-radius:12px; font-weight:600; font-size:0.9rem; text-align:center; margin-top:12px; border:1px solid #C3E8D0; }
.cform-error   { display:none; padding:16px 20px; background:#FEF0EF; color:#A0291E; border-radius:12px; font-weight:600; font-size:0.9rem; text-align:center; margin-top:12px; border:1px solid #F5C6C2; }
.consent-label { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:0.82rem; color:var(--grey); line-height:1.55; }
.consent-label input[type="checkbox"] { margin-top:3px; flex-shrink:0; accent-color:var(--blue-mid); width:16px; height:16px; }
.consent-label a { color:var(--blue-mid); text-decoration:underline; }

/* 12. Footer ────────────────────────────────────────────────────── */
footer { background:var(--ink); color:rgba(255,255,255,0.75); }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; padding:60px 0 48px; }
.footer-col h4 { font-family:var(--font-display); font-size:0.82rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:18px; }
.footer-col p  { font-size:0.88rem; line-height:1.7; color:rgba(255,255,255,0.6); }
.footer-logo   { font-family:var(--font-display); font-weight:700; font-size:1.3rem; background:linear-gradient(100deg,#CFE3F7,#A8D5CC); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:12px; display:block; }
.footer-nav { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-nav a  { font-size:0.9rem; color:rgba(255,255,255,0.65); transition:color 0.2s; }
.footer-nav a:hover { color:#fff; }
.footer-hours  { display:grid; grid-template-columns:max-content 1fr; gap:8px 20px; font-size:0.88rem; }
.footer-hour-row { display:contents; }
.footer-hour-row .day  { color:rgba(255,255,255,0.5); white-space:nowrap; }
.footer-hour-row .time { color:rgba(255,255,255,0.85); font-weight:500; }
.footer-contact-list { display:flex; flex-direction:column; gap:10px; }
.footer-contact-item { display:flex; align-items:flex-start; gap:10px; font-size:0.88rem; }
.footer-contact-item svg { flex-shrink:0; width:16px; height:16px; stroke:rgba(255,255,255,0.4); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.footer-contact-item a    { color:rgba(255,255,255,0.75); }
.footer-contact-item a:hover { color:#fff; }
.footer-contact-item span { color:rgba(255,255,255,0.65); line-height:1.5; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding:20px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:0.8rem; color:rgba(255,255,255,0.35); }
.footer-bottom a { color:rgba(255,255,255,0.45); }
.footer-bottom a:hover { color:rgba(255,255,255,0.75); }

/* 13. Animationen ───────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal.in { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; transition:none; } }

/* 14. Responsive ────────────────────────────────────────────────── */
@media (max-width:860px) {
  .wrap { padding:0 20px; }
  nav.main-nav { display:none; }
  .nav-toggle { display:block; }
  .header-inner .btn { padding:10px 16px; font-size:0.84rem; }

  .service-hero { height:260px; }
  .service-hero h1 { font-size:clamp(1.4rem,5vw,1.9rem); }
  .service-body { padding:40px 0 24px; }
  .info-boxes { grid-template-columns:1fr; }
  .service-cta { padding:28px 24px; flex-direction:column; align-items:flex-start; }
  .related-grid { grid-template-columns:1fr; }

  .contact { padding:40px 0 72px; }
  .contact-wrap { grid-template-columns:1fr; }
  .contact-info-panel { padding:32px 28px 28px; }
  .contact-info-panel p.lead { display:none; }
  .contact-details { margin-top:20px; gap:14px; }
  .contact-form-panel { padding:32px 28px; }
  .cform-row { grid-template-columns:1fr; }

  .footer-top { grid-template-columns:1fr 1fr; gap:32px; padding:44px 0 36px; }
}

@media (max-width:520px) {
  .wrap { padding:0 16px; }
  .header-inner .btn { display:none; }
  .service-hero { height:210px; }
  .service-cta .btn-white { width:100%; justify-content:center; }
  .contact-info-panel { padding:28px 18px; }
  .contact-form-panel { padding:26px 18px; }
  .footer-top { grid-template-columns:1fr; padding:32px 0 24px; gap:28px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:6px; }
}