/* =============================================================================
   Vogels24.de – styles.css
   Komplettes Design der Landingpage. Bewusst von HTML & JS getrennt:
   - bessere Ladezeit (Browser cacht diese Datei)
   - leichter zu pflegen
   Farbwelt basiert auf der Markenfarbe #1278a8.
   ============================================================================= */

/* ------------------------------ Design-Variablen ------------------------------ */
:root{
  --navy:#093a52;        /* dunkles Petrol fuer dunkle Flaechen/Footer */
  --blue:#0e6088;        /* mittleres Blau */
  --blue-600:#1278a8;    /* MARKENFARBE / Primaerfarbe */
  --accent:#28a3d4;      /* hellerer Akzent (Glanz) */
  --accent-soft:#e3f2fa; /* sehr helles Blau fuer Flaechen */
  --ink:#0f2733;         /* Textfarbe */
  --slate:#51697a;       /* gedaempfter Text */
  --line:#dbe8f0;        /* Linien/Rahmen */
  --bg:#f2f8fb;          /* Seitenhintergrund */
  --white:#ffffff;
  --radius:16px;
  --shadow:0 18px 48px -22px rgba(9,58,82,.45);
  --shadow-sm:0 6px 20px -10px rgba(9,58,82,.30);
  --maxw:1180px;
}

/* ------------------------------ Grundlagen / Reset ------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;                 /* verhindert horizontales Scrollen auf dem Handy */
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Sora',sans-serif;letter-spacing:-.02em;line-height:1.12}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}    /* height:auto verhindert Verzerrung */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:820px}
.center{text-align:center}
.eyebrow{font-family:'Sora',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-600)}

/* ------------------------------ Sprachumschaltung DE/EN ------------------------------ */
/* Standard: Deutsch sichtbar, Englisch versteckt. Bei data-lang="en" umgekehrt.
   display:revert stellt den korrekten Typ wieder her (span=inline, p=block, li=list-item). */
.lang-en{display:none}
html[data-lang="en"] .lang-de{display:none}
html[data-lang="en"] .lang-en{display:revert}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:40px;padding:0 .85rem;
  border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--blue-600);
  font-family:'Sora',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;transition:.2s}
.lang-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.lang-btn .flag{border-radius:3px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
/* Button-Beschriftung in BEIDEN Sprachen als inline-flex (Flagge + Text) */
.lang-btn .lang-de{display:inline-flex;align-items:center;gap:.45rem}
.lang-btn .lang-en{display:none;align-items:center;gap:.45rem}
html[data-lang="en"] .lang-btn .lang-de{display:none}
html[data-lang="en"] .lang-btn .lang-en{display:inline-flex}

/* ------------------------------ Buttons ------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:'Sora',sans-serif;font-weight:600;font-size:.98rem;
  padding:.95rem 1.7rem;border-radius:999px;cursor:pointer;border:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--blue-600));color:#fff;box-shadow:0 12px 28px -10px rgba(30,143,255,.5)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(30,143,255,.6)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-outline{background:#fff;color:var(--blue);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--accent);color:var(--blue-600);transform:translateY(-2px)}
.btn-outline-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-outline-light:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
.btn-on-accent{background:#fff;color:var(--blue-600)}
.btn-on-accent:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.hint{display:block;font-size:.78rem;color:var(--slate);margin-top:.5rem}
.hint.light{color:rgba(255,255,255,.75)}
.center-hint{text-align:center;margin-top:.9rem}

/* ------------------------------ Top-Leiste ------------------------------ */
.topbar{background:var(--navy);color:#cfe3ef;font-size:.82rem}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:center;padding:.5rem 24px}
.topbar b{color:#fff;font-weight:600}

/* ------------------------------ Header / Navigation ------------------------------ */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.7rem 24px;max-width:var(--maxw);margin:0 auto;gap:1rem}
.logo{display:flex;flex-direction:column;gap:.15rem}
.logo img{height:46px;width:auto}
.logo-claim{font-family:'Sora',sans-serif;font-size:.66rem;letter-spacing:.06em;color:var(--slate);font-weight:500}
nav.links{display:flex;gap:1.5rem;font-weight:500;font-size:.95rem}
nav.links a{color:var(--slate);transition:color .2s}
nav.links a:hover{color:var(--blue-600)}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--navy);padding:4px}

/* ------------------------------ Hero ------------------------------ */
.hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 80% -10%, #28a3d4 0%, var(--blue) 45%, var(--navy) 100%)}
.hero::before{   /* dezentes Blueprint-Raster passend zum Montage-Thema */
  content:"";position:absolute;inset:0;opacity:.15;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(120% 90% at 70% 0%,#000 30%,transparent 75%)}
.hero .wrap{position:relative;padding:5rem 24px 5.5rem;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
.hero .eyebrow{color:#b6e2f4}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:800;margin:.9rem 0 1.1rem}
.hero h1 .hl{color:#aee4f7}
.hero p.lead{font-size:1.12rem;color:#d6ecf7;max-width:42ch;margin-bottom:1.9rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-start}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:2.4rem;font-size:.9rem;color:#cfe6f3}
.hero-trust li{padding-left:.9rem;border-left:2px solid rgba(255,255,255,.4)}
/* Schnellzugriff-Karte */
.hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:22px;padding:1.6rem;backdrop-filter:blur(8px)}
.hero-card h2{font-size:1.05rem;margin-bottom:1rem;color:#fff;font-family:'Sora',sans-serif;font-weight:600}
.hero-list{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.hero-list li{margin:0}
.hero-list a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.78rem .95rem;background:rgba(255,255,255,.07);border-radius:12px;font-size:.92rem;color:#eaf6ff;transition:background .2s ease, transform .2s ease}
.hero-list a:hover{background:rgba(255,255,255,.18);transform:translateX(3px)}
.hero-list a .z{color:#bfe2ff;font-weight:600;font-size:.82rem;white-space:nowrap}
.hero-list a:hover .z{color:#fff}

/* ------------------------------ Section-Grundlayout ------------------------------ */
section{padding:5rem 0}
.intro{padding-bottom:1rem}
.sec-head{text-align:center;max-width:660px;margin:0 auto 3rem}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:700;margin:.7rem 0 .8rem}
.sec-head p{color:var(--slate);font-size:1.05rem}
.intro h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin:.7rem 0 1rem}
.intro p{color:var(--slate);font-size:1.05rem}

/* ------------------------------ Sortiment / Katalog ------------------------------ */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.5rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;display:flex;flex-direction:column;gap:.6rem}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#bfdcea}
.cat h3{font-size:1.12rem;font-weight:600;position:relative;padding-top:.95rem}
.cat h3::before{content:"";position:absolute;top:0;left:0;width:30px;height:3px;border-radius:3px;background:var(--blue-600)}
.cat p{color:var(--slate);font-size:.92rem;flex:1}
.cat .go{font-family:'Sora',sans-serif;font-weight:600;font-size:.88rem;color:var(--blue-600);display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem}
.cat .go svg{width:15px;height:15px;transition:transform .2s}
.cat:hover .go{gap:.6rem}
.cat:hover .go svg{transform:translateX(3px)}

/* ------------------------------ 3er-Karten (Leistungen / B2B) ------------------------------ */
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.6rem;box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{font-size:1.18rem;font-weight:600;position:relative;padding-top:.95rem;margin-bottom:.5rem}
.card h3::before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;border-radius:3px;background:var(--blue-600)}
.card p{color:var(--slate);font-size:.95rem}
.leistungen-sec{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ------------------------------ Serien ------------------------------ */
.series-sec{background:var(--bg)}
.series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.serie{display:block;border:1px solid var(--line);border-radius:14px;padding:1.3rem;transition:.25s;background:linear-gradient(180deg,#fff,#fafdff);color:inherit}
.serie:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.serie .tag{font-family:'Sora',sans-serif;font-weight:700;color:var(--blue-600);font-size:1.05rem}
.serie p{font-size:.86rem;color:var(--slate);margin:.4rem 0 .8rem}
.serie .serie-link{display:inline-block;font-size:.82rem;font-weight:600;color:var(--blue-600)}
.serie:hover .serie-link{text-decoration:underline}
.serie.accent{background:linear-gradient(135deg,var(--accent),var(--blue-600));border-color:transparent}
.serie.accent .tag{color:#fff}
.serie.accent p{color:#e3f2fb}
.serie.accent .serie-link{color:#fff}

/* ------------------------------ "Produkt nicht gefunden?" ------------------------------ */
#loesung{padding-top:0}
.finder{background:var(--navy);color:#fff;border-radius:28px;padding:3.2rem;position:relative;overflow:hidden}
.finder::after{content:"";position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(40,163,212,.55),transparent 70%)}
.finder>div{position:relative;z-index:1;max-width:640px}
.finder h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:.7rem 0 1rem;font-weight:700}
.finder p{color:#c9dcea;margin-bottom:1.7rem}
.finder .eyebrow{color:#8fd2ee}
.finder-cta{display:flex;flex-wrap:wrap;gap:.9rem}

/* ------------------------------ B2B ------------------------------ */
.b2b-sec{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ------------------------------ FAQ ------------------------------ */
.faq-sec{background:var(--bg)}
.faq{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
details{border:1px solid var(--line);border-radius:12px;padding:0 1.3rem;background:#fff;transition:.2s}
details[open]{border-color:#bfdcea;box-shadow:var(--shadow-sm)}
summary{list-style:none;cursor:pointer;font-family:'Sora',sans-serif;font-weight:600;font-size:1.02rem;
  padding:1.15rem 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
summary::-webkit-details-marker{display:none}
summary .plus{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--blue-600);
  display:grid;place-items:center;font-size:1.2rem;transition:.2s}
details[open] summary .plus{transform:rotate(45deg)}
details p{padding:0 0 1.2rem;color:var(--slate);font-size:.96rem}
details p a{color:var(--blue-600);font-weight:600}

/* ------------------------------ Grosse CTA ------------------------------ */
.cta-band{background:linear-gradient(135deg,var(--blue-600),var(--accent));border-radius:28px;padding:3.4rem;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(80% 120% at 50% 0%,#000,transparent 70%)}
.cta-band h2{position:relative;font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.7rem}
.cta-band p{position:relative;color:#eaf6fd;margin:0 auto 1.7rem;max-width:52ch}
.cta-band .btn,.cta-band .hint{position:relative}

/* ------------------------------ Kontakt ------------------------------ */
.kontakt-sec{background:#fff;border-top:1px solid var(--line)}
.contact-grid{max-width:640px;margin:0 auto}
.info-row{margin-bottom:1.15rem;font-size:.98rem;padding-left:.9rem;border-left:3px solid var(--accent-soft)}
.info-row b{font-family:'Sora',sans-serif;display:block;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);font-weight:600;margin-bottom:.15rem}
.info-row a{color:var(--blue-600);font-weight:600}
.contact-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1.6rem}
.contact-actions .btn{width:100%;justify-content:center}
.map-link{display:block;text-align:center;margin-top:1.1rem;color:var(--blue-600);font-weight:600;font-size:.9rem}
.map-link:hover{text-decoration:underline}

/* ------------------------------ Footer ------------------------------ */
footer{background:var(--navy);color:#a9c2d4;padding:3.5rem 0 2rem;font-size:.9rem}
.foot-intro{border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:1.7rem;margin-bottom:2.2rem}
.foot-intro p{max-width:none;color:#c8dceb;font-size:.95rem;line-height:1.75}
.foot-en{color:#86a2b5;font-size:.86rem;margin-top:.7rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.foot-logo{height:46px;width:auto;background:#fff;padding:7px 12px;border-radius:10px;margin-bottom:1rem}
.foot-claim{max-width:34ch;margin-bottom:1.1rem}
.foot-address{font-style:normal;line-height:1.7;color:#bcd2e1}
.foot-address a{color:#fff;font-weight:600}
footer h3{font-family:'Sora',sans-serif;color:#fff;font-size:.92rem;margin-bottom:1rem;letter-spacing:.04em}
footer ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.5rem;text-align:center;font-size:.82rem;color:#7e98ab}

/* ------------------------------ Einblend-Animation (per JS aktiviert) ------------------------------ */
/* Inhalt ist IMMER sichtbar (keine versteckende Animation mehr).
   Die Klasse "reveal" bleibt nur als neutraler Hook bestehen. */
.reveal{opacity:1;transform:none}

/* =============================================================================
   RESPONSIVE – Tablet (iPad) & Handy
   Reihenfolge: grosse Breakpoints zuerst, dann kleinere.
   ============================================================================= */

/* ---- iPad / kleinere Laptops ---- */
@media(max-width:1024px){
  .series-grid{grid-template-columns:repeat(2,1fr)}
  .finder{padding:2.6rem}
}

/* ---- iPad Hochformat / Tablets: Navigation als Burger-Menue ---- */
@media(max-width:900px){
  nav.links{display:none}
  nav.links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:#fff;padding:1.2rem 24px;border-bottom:1px solid var(--line);gap:1rem}
  .menu-toggle{display:block}
  .hero .wrap{grid-template-columns:1fr;padding-top:3.4rem;padding-bottom:4rem}
  .hero-card{order:2}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .three-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* ---- Handy ---- */
@media(max-width:640px){
  section{padding:3.2rem 0}
  .wrap{padding:0 18px}
  .topbar .wrap{gap:.25rem 1rem;font-size:.76rem}
  .nav{padding:.6rem 18px}
  .logo img{height:38px}
  .logo-claim{display:none}                /* auf dem Handy Platz sparen */
  .hero .wrap{padding:2.8rem 18px 3.4rem}
  .hero h1{font-size:clamp(2rem,7.5vw,2.6rem)}
  .hero p.lead{font-size:1.02rem;max-width:100%}
  .hero-cta{gap:.7rem}
  .hero-cta>div,.hero-cta .btn{width:100%}
  .hero-cta .btn{justify-content:center}
  .sec-head{margin-bottom:2rem}
  .sec-head h2{font-size:1.55rem}
  .btn{font-size:.95rem;padding:.9rem 1.4rem}
  .cat-grid{grid-template-columns:1fr}
  .series-grid{grid-template-columns:1fr}
  .finder{padding:1.9rem 1.4rem;border-radius:20px}
  .finder-cta .btn{width:100%;justify-content:center}
  .cta-band{padding:2.2rem 1.4rem;border-radius:20px}
  .contact-actions{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  details{padding:0 1rem}
  summary{font-size:.96rem}
}

/* ---- sehr kleine Handys ---- */
@media(max-width:380px){
  .hero h1{font-size:1.8rem}
  .logo img{height:34px}
}

/* ---- Nutzer mit reduzierter Bewegung: Animationen aus (Barrierefreiheit) ---- */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}