:root{
  --brand:#00306b;
  --accent:#00157A;
  --bg:#f7f9fc;
  --text:#1b1f24;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg)}

.container{max-width:1060px;margin:0 auto;padding:0 16px}
.container.narrow{max-width:720px}
.small{font-size:.9rem;color:var(--muted)}

.site-header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--brand);font-weight:600}

/* Logo – keep only this one */
.logo{ height:60px; display:block; }
@media (max-width:900px){ .logo{ height:44px; } }

.nav a{color:var(--brand);text-decoration:none;margin-left:16px}
.btn, .cta{
  background:var(--accent);color:#fff;border:none;border-radius:10px;
  padding:10px 16px;text-decoration:none;cursor:pointer;display:inline-block;
  box-shadow:0 2px 8px rgba(26,115,232,.25)
}

/* ===== FIX: Filter buttons ("Alle", "Tier", ...) must all be same height ===== */
.btn.filter{
  padding:8px 14px !important;  
  line-height:1;
  height:auto;
  min-height:unset;
  box-shadow:none;

}

.btn:hover,.cta:hover{filter:brightness(0.95)}
.btn:active, .cta:active {
  background:#39B1C3;
}
.hero{background:#fff;padding:56px 0}
.hero h1{font-size:2.2rem;margin:0 0 12px}
.lead{font-size:1.1rem;color:#374151}

.footer{padding:18px 0;color:var(--muted)}

.toolbar{display:flex;gap:8px;margin:18px 0}
.toolbar input[type="search"]{flex:1;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:14px;margin:12px 0 24px
}
.card{
  background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;
  transition:transform .1s ease, box-shadow .1s ease
}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.thumb{aspect-ratio:1/1;background:#fafafa;border-bottom:1px solid var(--border)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.meta{padding:10px}
.title{font-weight:600}
.sub{color:var(--muted);font-size:.9rem}
.id{margin-top:4px;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color:#374151}

.center{text-align:center;margin:8px 0 28px}

.ticket{
  background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden
}
.ticket-header{padding:12px 16px;border-bottom:1px solid var(--border);background:#fafafa}
.brand-mini{color:var(--brand);font-weight:700}
.ticket-body{display:grid;grid-template-columns: 1fr auto auto;gap:16px;padding:16px}
.preview{width:100%;max-width:320px}
.preview img{width:100%;height:auto;border:1px solid var(--border);border-radius:12px}
.info{display:flex;flex-direction:column;gap:8px;align-self:start;min-width:220px}
.row{display:flex;justify-content:space-between;gap:12px}
.label{color:var(--muted)}
.qr{width:170px;display:flex;align-items:center;justify-content:center}
.ticket-footer{border-top:1px solid var(--border);padding:10px 16px;background:#fafafa}

.actions{margin:16px 0}
@media (max-width:900px){
  .ticket-body{grid-template-columns:1fr}
  .qr{justify-content:flex-start}
}

/* Header actions / language */
.header-actions{display:flex;align-items:center;gap:14px}

/* Hero – choose ONE behavior */

/* Hero – show a nice banner with readable left text */
.hero-photo{
  position: relative;
  width: 100vw; left: 50%; transform: translateX(-50%);
  margin: 0 0 16px 0;
  background: #000;
  overflow: clip;
}
.hero-photo img {
  display: block;
  width: 100%;
  height: min(80vh,800px);
  object-fit: cover;          /* fills width, crops gently */
  object-position: 35%;
}
.hero-photo::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 65%);
  pointer-events:none;
}
.overlay-text{
  position:absolute; top:20%; left:6%; right:6%;
  max-width:520px; color:#fff;
}

.highlight{
  background:#00306b; color:#fff;
  padding:6px 10px; border-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* On small screens the full image can be tall — clamp gently */
@media (max-width: 900px){
  .hero-photo{ margin-bottom: 12px; }
  .overlay-text{ top: 10%; left: 12px; right: 5%; }
  .overlay-text h1 { margin: 0; padding: 0; }
}

/* If you prefer the banner look (like the reference), switch to:
.hero-photo img{ height:520px; object-fit:cover; }
@media (max-width:900px){ .hero-photo img{ height:320px; } }
*/
.hero-text {
  position: absolute;
  top: 25%;
  left: 15%;
  color: #fff;
  text-shadow: 0 3px 8px rgba(0,0,0,.5);
  max-width: 500px;
}

.hero-text h1 {
  font-size: 2.5rem;
  margin: 0 0 12px;
  font-weight: 700;
}

.hero-text p {
  font-size: 1.2rem;
  margin: 0;
}

.flag-icon {
  width: 28px;     /* or 32px if you prefer */
  height: auto;
  display: block;  /* prevents tiny baseline gap + text under it */
  border-radius: 4px;
}

.lang-switch { 
  display: flex; 
  gap: 8px; 
}
.lang-switch a { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: auto; 
  height: auto; 
  border: none;
  background: none;
  padding: 0;
}
.header-inner { position: relative; }
.site-header .lang-switch {
  position: absolute;
  right: 16px;
  top: 16px;     /* tweak to align vertically in your 64px header */
}
.lang-switch{display:flex;gap:.5rem;align-items:center;margin-left:auto}
.lang-btn{border:1px solid var(--border);background:#fff;border-radius:.5rem;padding:.35rem;line-height:0;cursor:pointer;transition:transform .1s ease}
.lang-btn:active{transform:scale(.96)}
.lang-btn img{display:block;width:24px;height:16px;border-radius:2px}
.ticketA4 { break-inside: avoid; page-break-inside: avoid; }
@media print { .ticketA4 { break-inside: avoid; page-break-inside: avoid; } }
.designItem{
  display:flex;align-items:center;gap:12px;
  padding:8px 6px;border-radius:8px;cursor:pointer;width:100%;
  border:1px solid var(--border); background:#fff; margin:6px 0;
}
.designItem img{width:48px;height:48px;border-radius:8px;object-fit:cover}

.colorChip{border:1px solid #cfd6e6;border-radius:8px;padding:6px;margin:0 6px;cursor:pointer;background:#fff}
.colorChip.disabled{opacity:.35;cursor:not-allowed}
.colorChip.active{outline:2px solid var(--blue)}
.colorChip .dot{display:inline-block;width:20px;height:20px;border-radius:50%}
.left-pane, .designs-left, .designs-list-wrapper {
  overflow-x: hidden !important;
  overflow-y: auto;               /* still lets you scroll down */
}
.left { overflow-x: hidden; }

/* 3-across grid, no horizontal scroll */
.design-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* ✅ stop upscaling */
  gap: 16px;
  align-content: start;
}

/* card */
.design-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.design-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

/* image fills card, stays square, no overflow */
.design-card img,
.design-card img.thumb{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;
  object-fit:cover;
  display:block;
  image-rendering:auto;
  transform: translateZ(0);
}

/* caption */
.design-card .meta, .design-card p{
  padding:8px 10px;
  font-size:14px;
  margin:0;
}
.tag{ cursor:pointer; transition:transform .05s ease; }
.tag:active{ transform:scale(0.98); }
.tag:hover{ filter:brightness(0.95); }
/* active chip outline */
.tag--active { outline: 2px solid var(--green); }

/* Divider line between tags and Select Design button */
.tag-divider {
  width: 80%;
  height: 1px;
  background-color: #e3e6ee; /* same border color */
  border: none;
  margin: 14px auto;
}


/* ===== Mobile layout for designs.html ===== */
@media (max-width: 768px) {
  /* Stack content and show preview block first */
  .content { 
    display: flex; 
    flex-direction: column;       /* vertical flow */
    gap: 16px;
  }
  /* Put the preview panel first, list second */
  .panel { 
    order: -1;                    /* move above the list */
    position: static !important;  /* kill sticky on mobile */
    padding: 14px;
  }

  /* Bigger, edge-to-edge preview with sane height */
  .preview {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
  }

  /* Comfortable controls under the preview */
  .colors { max-width: 100%; width: 100%; gap: 12px; }
  .colorChip { width: 40px; height: 40px; }
  .colorChip .dot { width: 22px; height: 22px; }

  .tags { max-width: 100%; gap: 10px; }
  .tag { padding: 8px 14px; font-size: .95rem; }

   .actions { margin-top: 8px; }

/* ✅ Default mobile behavior: compact buttons */
.actions button {
  width: 100%;
  padding: 10px 16px;
  font-size: 15px;
  border-radius: 10px;
}

  /* ✅ BUT on index.html (ticket page) we do NOT want huge full-width buttons */
  #catalogue-page .actions button {
    width: auto;              /* stop full-width */
    padding: 8px 12px;        /* smaller height */
    font-size: 14px;          /* smaller text */
    min-width: 140px;         /* keeps buttons consistent */
    border-radius: 10px;
  }

  /* ✅ Reduce spacing between the 3 buttons (index page row) */
  #catalogue-page .actions .row {
    gap: 8px !important;      /* overrides inline gap:10px */
  }

  /* Filters + search become full-width rows */
  .top { gap: 10px; }
  .filters { 
    overflow-x: auto; 
    padding-bottom: 6px; 
    scrollbar-width: none; 
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { padding: 10px 14px; white-space: nowrap; }

.search{margin-left:auto;display:flex;gap:10px; position:relative;}
.search input{width:320px;max-width:55vw;padding:10px 12px;border:1px solid var(--border);border-radius:8px}
.search button{background:var(--blue-2);color:#fff;padding:10px 14px;border-radius:8px}

  /* 2-across card grid for fatter touch targets */
  .design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .design-card img { height: 150px; }
}

/* Ultra-small phones */
@media (max-width: 380px) {
  .design-grid { grid-template-columns: 1fr; }
  .design-card img { height: 200px; }
}
/* ===== Center the whole options box on phones ===== */
@media (max-width: 480px) {
  /* center the section */
  #designList {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding-inline: 12px;     /* breathing room for the box */
  }

  /* white box that wraps the list (NOT each card) */
  #designList .design-grid {
    width: 100%;
    max-width: 360px;         /* looks right on 375–430px phones */
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,.05);

    /* layout inside the box */
    grid-template-columns: 1fr;   /* single column on narrow phones */
    justify-items: center;
    gap: 12px;
  }

  /* keep heading centered */
  #designList > h3 { text-align: center; margin: 12px 0; }

  /* normal card sizing */
  #designList .design-card { width: 100%; max-width: 320px; margin: 0 auto; }
  #designList .design-card img { width: 100%; height: 180px; object-fit: cover; }
}

/* Slightly wider phones (481–768px): still centered, 2 columns */
@media (min-width: 481px) and (max-width: 768px) {
  #designList { align-items: center; padding-inline: 12px; }
  #designList .design-grid {
    max-width: 560px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 14px;
  }
}
/* ===== Mobile: never allow sideways scrolling ===== */
@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;   /* hide horizontal scroll */
  }

  /* clamp all main containers to the viewport width */
  .wrap, .container, .content, .panel, .top,
  .preview, .filters, .colors, .tags,
  #designList, .design-grid,
  .site-header, .header-inner {
    width: 100% !important;
    max-width: 100vw !important;     /* never exceed the viewport */
    margin-inline: auto !important;
    padding-inline: 0 !important;
    overflow-x: clip !important;     /* iOS-safe */
  }

  /* common culprit: full-bleed sections using translateX or 100vw */
  .hero-photo { width: 100% !important; left: 0 !important; transform: none !important; }

  /* media should always shrink to fit */
  img, svg, video, canvas { max-width: 100% !important; height: auto; }
}
/* ---- Mobile polish: remove right-side gap on some devices ---- */
:root {
  /* handle notches / safe areas (Android + iOS) */
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left:  env(safe-area-inset-left,  0px);
}

/* keep scrollbar width stable on desktop too (prevents 1px nudges) */
html { scrollbar-gutter: stable both-edges; }

@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;     /* iOS/Android-safe */
  }

  /* make side padding symmetrical and include safe area */
  .site-header, .header-inner,
  .wrap, .container, .content, .panel, .top,
  #designList, .design-grid {
    width: 100% !important;
    max-width: 100vw !important;
    margin-inline: auto !important;
    padding-left:  calc(12px + var(--safe-left))  !important;
    padding-right: calc(12px + var(--safe-right)) !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  /* common culprit: full-bleed sections using translateX or 100vw */
  .hero-photo { width: 100% !important; left: 0 !important; transform: none !important; }

  /* media should never overflow */
  img, svg, video, canvas { max-width: 100% !important; height: auto; }
}

/* ===== How It Works — 3-column card layout ===== */

.howitworks-block {
  background: transparent;
  padding: 64px 0 72px;
  width: 100%;
  text-align: center;
}
/* Large bold title */
.howitworks-block h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 48px;
}

/* 3 equal columns filling full container width */
.howitworks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  align-items: stretch;
  margin-bottom: 48px;
  padding: 0;
}

/* Cards: equal size, clean white boxes */
.howitworks .step {
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  border-radius: 16px;
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  width: 100%;
}

/* Icon: light teal circle */
.howitworks .step > span {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #d1faf4;
  color: #0d9488;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
  flex-shrink: 0;
}

/* Reset inner spans (description text) */
.howitworks .step p span {
  background: transparent !important;
  color: #2a2d35 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: block !important;
  font-weight: 400 !important;
  font-size: 0.93rem;
  line-height: 1.6;
  margin-top: 8px;
}

/* Text block */
.howitworks .step p {
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

.howitworks .step strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  min-height: 3em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

/* Dark navy button */
.hiw-btn {
  background: var(--brand) !important;
  padding: 14px 36px !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0,48,107,.25) !important;
}

/* Mobile: stack to single column */
@media (max-width: 768px) {
  .howitworks {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .howitworks-block h2 {
    font-size: 1.5rem;
  }
}

/* ===== Mobile: make hero image smaller ===== */
@media (max-width: 768px) {
  .hero-photo img {
    height: 420px;
    object-position: 50% 35%;
  }
}

/* ✅ Index page (ticket) – phones <480px: stack buttons vertically & make them bigger */
@media (max-width: 480px) {
  /* make the row behave like a column */
  #catalogue-page .actions .row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;          /* nice spacing between buttons */
  }

  /* bigger, full-width buttons (easy to tap) */
  #catalogue-page .actions .btn {
    width: 100% !important;
    min-width: 0 !important;       /* remove min-width from tablet rules */
    padding: 12px 14px !important; /* slightly larger than <768 */
    font-size: 15px !important;
    border-radius: 12px !important;
  }
}

/* ── Dark Legal Footer ── */
.legal-footer {
  background-color: #2b2b2b;
  color: #cccccc;
  padding: 1rem 0;
  margin-top: 2rem;
}

.legal-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0 1rem;
}

.legal-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.legal-link {
  color: #cccccc;
  text-decoration: none;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: color 0.2s;
}

.legal-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.legal-sep {
  color: #555555;
  font-size: 0.82rem;
  user-select: none;
}

.legal-copy {
  color: #cccccc;
  font-size: 0.82rem;
  white-space: nowrap;
}


@media (max-width: 600px) {
  .legal-inner {
    flex-direction: column;
    align-items: center;    /* ← centers everything */
    text-align: center;     /* ← centers link text */
    gap: 8px;
  }

  .legal-links {
    justify-content: center;  /* ← centers the links row */
    flex-wrap: wrap;
  }

  .legal-copy {
    text-align: center;
  }
}
/* Action buttons: side-by-side on desktop, stacked on mobile */
.action-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .action-row {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin: 0 auto;
    gap: 8px;
  }
}