/* =========================================================================
   Getränke Mehr – Markenstylesheet für Joomla 5 (Cassiopeia)
   Alle Inhaltsstile sind unter .gm gekapselt, damit sie das Template
   nicht stören. Bilder werden unter /images/getraenke-mehr/ erwartet.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --gm-navy-900:#0e2b56;   /* tiefes Navy  */
  --gm-blue-700:#174791;   /* Logo-Royalblau */
  --gm-petrol:#2a7996;     /* Logo-Petrol  */
  --gm-cyan:#46abd1;       /* Akzent auf Dunkel */
  --gm-cyan-deep:#176a87;  /* Akzent auf Hell  */
  --gm-paper:#f3f6f9;
  --gm-paper-2:#e5ecf3;
  --gm-ink:#1a2430;
  --gm-muted:#586472;
  --gm-white:#ffffff;
}

/* ---------- Grundlagen ---------- */
.gm{font-family:'Inter',system-ui,sans-serif;color:var(--gm-ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.gm *{box-sizing:border-box}
.gm h1,.gm h2,.gm h3{font-family:'Bricolage Grotesque',sans-serif;line-height:1.08;letter-spacing:-.01em;margin:0}
.gm .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.gm .mono{font-family:'Space Mono',monospace;letter-spacing:.04em}
.gm img{max-width:100%;display:block}

/* ---------- Buttons ---------- */
.gm .btn{display:inline-block;text-decoration:none;font-weight:600;border-radius:999px;padding:14px 26px;font-size:16px;transition:transform .15s ease,background .2s ease;cursor:pointer}
.gm .btn-amber{background:var(--gm-cyan);color:#06243a}
.gm .btn-amber:hover{background:#62bcdd;transform:translateY(-2px)}
.gm .btn-ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff;background:rgba(11,34,71,.25)}
.gm .btn-ghost:hover{border-color:var(--gm-cyan);color:var(--gm-cyan)}
.gm .btn-solid{background:var(--gm-blue-700);color:#fff}
.gm .btn-solid:hover{background:var(--gm-navy-900);transform:translateY(-2px)}

/* ---------- Hero (vollflächiges Foto) ---------- */
.gm .hero{position:relative;background:var(--gm-navy-900);color:#e9f1f8;overflow:hidden;min-height:540px;display:flex;align-items:center;border-radius:0}
.gm .hero .photo{position:absolute;inset:0;background-image:url("/images/getraenke-mehr/gm-hero.jpg");background-size:cover;background-position:center 38%}
.gm .hero .scrim{position:absolute;inset:0;background:
   linear-gradient(95deg,rgba(11,34,71,.93) 0%,rgba(12,38,78,.82) 34%,rgba(14,43,86,.45) 70%,rgba(14,43,86,.12) 100%),
   linear-gradient(180deg,rgba(11,34,71,.55) 0%,rgba(11,34,71,.15) 38%,rgba(11,34,71,.55) 100%)}
.gm .hero .wrap{position:relative;padding:92px 24px 100px}
.gm .hero .inner{max-width:640px}
.gm .eyebrow{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gm-cyan);margin-bottom:22px}
.gm .hero h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;color:#fff;text-shadow:0 2px 18px rgba(8,24,48,.4)}
.gm .hero h1 .mehr{color:var(--gm-cyan)}
.gm .hero p.lead{margin-top:24px;font-size:18.5px;max-width:48ch;color:#dce7f4;text-shadow:0 1px 10px rgba(8,24,48,.45)}
.gm .hero-actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

/* ---------- Kennzahlen-Leiste ---------- */
.gm .specs{background:var(--gm-blue-700);color:#e9f1f8}
.gm .specs .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.gm .spec{padding:30px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.gm .spec:last-child{border-right:0}
.gm .spec .num{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;color:var(--gm-cyan);line-height:1}
.gm .spec .lbl{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#aebfd4;margin-top:8px}

/* ---------- Abschnitts-Basis ---------- */
.gm .block{padding:80px 0}
.gm .block.tight{padding:60px 0}
.gm .sec-eyebrow{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gm-cyan-deep);margin-bottom:14px}
.gm .sec-title{font-size:clamp(28px,4vw,42px);font-weight:800;max-width:20ch}
.gm .sec-intro{margin-top:16px;font-size:17.5px;color:var(--gm-muted);max-width:62ch}

/* Hintergrund-Varianten für ganze Abschnitte */
.gm-paper{background:var(--gm-paper)}
.gm-paper-2{background:var(--gm-paper-2)}
.gm-navy{background:var(--gm-navy-900)}

/* Volle Breite trotz Joomla-Inhaltsspalte (Bänder edge-to-edge) */
.gm .fullbleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}

/* ---------- Sortiment-Karten ---------- */
.gm .cards{margin-top:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gm .card{background:var(--gm-white);border:1px solid var(--gm-paper-2);border-radius:16px;padding:26px 24px 24px;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}
.gm .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gm-cyan);transform:scaleY(0);transform-origin:top;transition:transform .25s ease}
.gm .card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(20,53,40,.4)}
.gm .card:hover::before{transform:scaleY(1)}
.gm .card .ico{font-size:30px}
.gm .card h3{font-size:20px;font-weight:700;margin:14px 0 6px}
.gm .card p{font-size:15px;color:var(--gm-muted);margin:0}
.gm .card .idx{position:absolute;top:20px;right:22px;font-family:'Space Mono',monospace;font-size:13px;color:#b6c2d2}

/* ---------- Bildrahmen ---------- */
.gm .imgframe{border-radius:16px;overflow:hidden;border:1px solid var(--gm-paper-2);box-shadow:0 26px 55px -32px rgba(11,34,71,.55)}
.gm .imgframe img{width:100%;height:100%;object-fit:cover}

/* ---------- Über uns / Zwei-Spalter ---------- */
.gm .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.gm .split.media-left .imgframe{aspect-ratio:4/3}
.gm blockquote.lead-quote{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:clamp(22px,2.6vw,30px);line-height:1.25;color:var(--gm-navy-900);margin:0}
.gm blockquote.lead-quote .hl{color:var(--gm-cyan-deep)}
.gm .story p{margin:16px 0 0;color:var(--gm-ink);font-size:16.5px}
.gm .story p:first-child{margin-top:0}

/* ---------- Belieferung ---------- */
.gm .pills{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.gm .pill{background:var(--gm-white);border:1px solid var(--gm-paper-2);border-radius:999px;padding:11px 20px;font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px}
.gm .pill .dot{width:9px;height:9px;border-radius:50%;background:var(--gm-petrol)}
.gm .note{margin-top:26px;background:var(--gm-navy-900);color:#cfe0f0;border-radius:16px;padding:26px 28px;font-size:16px;display:flex;gap:18px;align-items:flex-start}
.gm .note .big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--gm-cyan);font-size:30px;line-height:1;white-space:nowrap}
.gm .media-wide{margin-top:30px;aspect-ratio:21/8}

/* ---------- Kontakt-Block ---------- */
.gm .contact{color:#e9f1f8}
.gm .contact .sec-eyebrow{color:var(--gm-cyan)}
.gm .contact h2{color:#fff;font-size:clamp(28px,4vw,40px);font-weight:800}
.gm .contact .lead{margin-top:14px;color:#c2d3e6;font-size:17px;max-width:46ch}
.gm .contact .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.gm .contact .box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:30px}
.gm .contact .box .row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:15.5px}
.gm .contact .box .row:last-child{border-bottom:0}
.gm .contact .box .k{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#9fb1c8}
.gm .contact .box a{color:var(--gm-cyan);text-decoration:none}

/* ---------- Unterseiten-Kopf (schmaler Page-Hero) ---------- */
.gm .pagehead{background:var(--gm-navy-900);color:#e9f1f8;padding:64px 0 56px;position:relative;overflow:hidden}
.gm .pagehead.with-photo .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1}
.gm .pagehead.with-photo .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,34,71,.92),rgba(14,43,86,.6))}
.gm .pagehead .wrap{position:relative}
.gm .pagehead .eyebrow{color:var(--gm-cyan)}
.gm .pagehead h1{font-size:clamp(32px,4.6vw,52px);font-weight:800;color:#fff}
.gm .pagehead p{margin-top:14px;color:#cfe0f0;font-size:18px;max-width:60ch}

/* ---------- Fließtext (Unterseiten) ---------- */
.gm .prose{max-width:760px;font-size:17px;color:var(--gm-ink)}
.gm .prose h2{font-size:26px;font-weight:700;margin:38px 0 12px;color:var(--gm-navy-900)}
.gm .prose h3{font-size:20px;font-weight:700;margin:28px 0 8px;color:var(--gm-navy-900)}
.gm .prose p{margin:0 0 16px}
.gm .prose ul{margin:0 0 16px;padding-left:22px}
.gm .prose li{margin:6px 0}
.gm .prose a{color:var(--gm-cyan-deep)}
.gm .legal{font-size:15.5px;color:#3c4754}
.gm .legal h2{font-size:21px;margin-top:32px}
.gm .reviewbox{background:#fff7e6;border:1px solid #f0d9a0;border-radius:12px;padding:16px 20px;font-size:14.5px;color:#6b551f;margin:0 0 28px}

/* ---------- Responsiv ---------- */
@media (max-width:900px){
  .gm .specs .wrap{grid-template-columns:repeat(2,1fr)}
  .gm .spec:nth-child(2){border-right:0}
  .gm .cards{grid-template-columns:1fr 1fr}
  .gm .split,.gm .contact .grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:560px){
  .gm .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .gm .btn,.gm .card{transition:none}
}

/* =========================================================================
   Optionale Cassiopeia-Anpassungen (Kopf/Menü/Fuß in Markenfarben)
   Diese Selektoren betreffen das Template selbst, nicht .gm-Inhalte.
   Bei einer abweichenden Cassiopeia-Version ggf. Klassennamen anpassen.
   ========================================================================= */

/* Kopfbereich WEISS – damit das farbige Logo zur Geltung kommt */
.container-header,
.grid-child.container-header,
.container-header .header,
header.header{background:#fff !important;border-bottom:1px solid var(--gm-paper-2)}
.container-header{padding-block:16px}
.container-header img,
.container-header .logo img,
.container-header a img,
.container-header .brand-logo img{max-height:100px !important;height:auto !important;width:auto !important}

/* Hauptmenü (nur in der Kopfzeile) – dunkel auf hellem Grund */
.container-header a:not(.btn),
.container-header .mod-menu a,
.container-header .mod-menu__link{color:var(--gm-ink) !important}
.container-header .mod-menu{gap:4px}
.container-header .mod-menu .mod-menu__item>a,
.container-header .mod-menu a{font-weight:500;border-radius:999px;padding:8px 16px;transition:background .2s ease,color .2s ease}
.container-header .mod-menu .mod-menu__item>a:hover,
.container-header .mod-menu a:hover{background:rgba(70,171,209,.16);color:var(--gm-blue-700) !important}
.container-header .mod-menu .current>a{background:var(--gm-cyan) !important;color:#06243a !important}

/* Fußzeile in Navy – Menü/Links HELL */
.container-footer{background:#0a2247;color:#a7bcd2}
.container-footer a,
.container-footer .mod-menu a,
.container-footer .mod-menu__link{color:#c2d3e6 !important}
.container-footer a:hover,
.container-footer .mod-menu a:hover{color:var(--gm-cyan) !important}
/* Footer-Menü waagerecht nebeneinander */
.container-footer .mod-menu{display:flex !important;flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:6px 26px;margin:0;padding:0;list-style:none}
.container-footer .mod-menu>li,
.container-footer .mod-menu .mod-menu__item{flex:0 0 auto;margin:0;padding:0;list-style:none;width:auto}
.container-footer .mod-menu a{padding:4px 0}

/* Buttons/Links im Cassiopeia-Standard auf Markenblau */
:root{
  --cassiopeia-color-primary:#174791;
  --link-color:#176a87;
}

/* =========================================================================
   Schriftzug "Getränke Mehr" unter dem Logo (Bildzeichen) + Button-Leiste oben
   ========================================================================= */

/* "Getränke Mehr" unter dem Logo – funktioniert mit dem Symbol-Logo */
.container-header a:has(> img){display:inline-flex !important;flex-direction:column;align-items:center;gap:8px;text-decoration:none}
.container-header a:has(> img)::after{
  content:"Getränke Mehr";
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:23px;line-height:1;letter-spacing:-.01em;color:var(--gm-navy-900);
}

/* Service-/Button-Leiste ganz oben (Position "topbar") – ohne blauen Streifen */
.container-topbar{background:#fff !important}
.gm-headerbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:8px 0;font-family:'Inter',system-ui,sans-serif}
.gm-headerbar .gm-hb{display:inline-flex;align-items:center;gap:7px;border-radius:999px;text-decoration:none;font-weight:600;font-size:14px;padding:9px 20px;transition:background .2s ease,color .2s ease}
.gm-headerbar .gm-hb-call{background:var(--gm-blue-700);color:#fff !important;border:none}
.gm-headerbar .gm-hb-call:hover{background:var(--gm-navy-900);color:#fff !important}
.gm-headerbar .gm-hb-contact{background:var(--gm-cyan);color:#06243a !important}
.gm-headerbar .gm-hb-contact:hover{background:#62bcdd;color:#06243a !important}
@media (max-width:560px){.gm-headerbar{justify-content:center}}

/* Hero auf dem Handy: Bildausschnitt nach links, damit der Lkw sichtbar bleibt */
@media (max-width:768px){
  .gm .hero .photo{background-position:24% 45% !important}
  .gm .hero{min-height:460px}
}
@media (max-width:480px){
  .gm .hero .photo{background-position:20% 46% !important}
}