/* ====================== PC-JokeR Website Styles ======================
   ADJUST HERE: fonts, colors, modal position/size variables are in :root
   - --font-ui: main UI font
   - --font-display: logo/display font
   - --color-primary: Joker purple (header / highlights)
   - --color-accent: Joker green (buttons / accents)
   - --modal-width / --modal-max-height-vh: chat/contact modal size
   ===================================================================== */

@font-face {
  font-family: 'OldEnglishFive';
  src: url('fonts/Old-English-Five.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.joker-font {
  font-family: 'OldEnglishFive', serif;
  letter-spacing: 1px;
  font-weight: normal;
}


:root{
  /* --- Fonts (ADJUST) --- */
  --font-ui: "Inter", Arial, sans-serif;               /* <-- change UI font here */
  --font-display: "OldEnglish", serif;        /* <-- change decorative/display font here */


  


  /* --- Colors (ADJUST) --- */
  --color-primary: #6f2fa0;   /* <-- Joker purple - header, important accents */
  --color-accent: #0b6b38;    /* <-- Joker green - primary buttons */
  --color-bg: #ffffff;        /* page background (light mode) */
  --color-text: #111111;      /* main text color */
  --color-muted: #666666;     /* secondary text */
  --color-surface: #f6f7f8;   /* surface / card background */

  /* --- Modal Position & Size (ADJUST) --- */
  --modal-left: 50%;          /* horizontal center (50%) */
  --modal-top: 50%;           /* vertical center (50%) */
  --modal-width: 900px;       /* modal width (px or %) */
  --modal-max-height-vh: 66vh;/* modal max height (viewport height units) */
}

/* Dark mode detection: switches CSS variables when user prefers dark */
@media (prefers-color-scheme: dark) {
  :root{
    --color-bg: #0b0b0c;
    --color-text: #edeff0;
    --color-surface: #0f1213;
    --color-muted: #9aa0a6;
  }
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  background:var(--color-bg);
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
}

/* Header */
.header{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap:16px;
  padding:18px 28px;
  background: linear-gradient(90deg, var(--color-primary), #0a5a30);
  color:#000000;
}
.header .logo{ height:270px; }
.header 
.nav{ margin-left:auto; display:flex; gap:12px; align-items:center; }
.nav a{ color:#fff; text-decoration:none; padding:8px 12px; border-radius:6px; font-weight:700; background:transparent; }
.nav a:hover{ background: rgba(255,255,255,0.06); }

/* Main content */
.container{ max-width:1100px; margin:28px auto; padding:0 18px; }
.hero{ display:flex; gap:20px; align-items:flex-start; }
.hero .left{ flex:1 1 60%; background:var(--color-surface); padding:20px; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.06); }
.hero .right{ flex:0 0 320px; display:flex; flex-direction:column; gap:12px; }
h1{ margin-top:0; font-size:28px; }
p.lead{ color:var(--color-muted); line-height:1.5; }

/* Buttons */
.btn{ display:inline-block; padding:10px 14px; border-radius:8px; font-weight:800; cursor:pointer; border:none; }
.btn-primary{ 
  background: transparent;
  color: #6f2fa0;        /* Beispiel: Joker purple */
  border: 2px solid #6f2fa0;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.btn-secondary{
  background: transparent;
  color: #0b6b38;        /* Beispiel: Joker green */
  border: 2px solid #0b6b38;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

.btn-close { background:var(--color-primary); color:#fff; 
}

.btn-email {
  background: #1976d2;
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
  font-size: 1rem;    /* gleiche Schriftgröße wie WhatsApp-Button */
  height: 40px;          /* gleiche Höhe wie WhatsApp-Button */
  box-sizing: border-box;
}
.btn-email:hover {
  background: #125ea2;
  color: #fff;
}

.btn-email img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  height: 22px;
  width: 22px;
}

.btn-link {
  background: transparent;
  color: #6f2fa0;        /* Beispiel: Joker purple */
  border: 2px solid #6f2fa0;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.btn-link:hover {
  background: #6f2fa0;
  color: #fff;
}
.btn-primary:hover {
  background: #6f2fa0;
  color: #fff;
}
.btn-secondary:hover {
  background: #0b6b38;
  color: #fff;
}

.btn-pdf {
  background: #0b6b38;
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 16px;
  text-decoration: none;
  display: inline-block;
  margin: 10px 0;
  transition: background 0.2s;
}
.btn-pdf:hover {
  background: #0b6b38;
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}
.btn-whatsapp:hover {
  background: #1ebe5d;
  color: #fff;
}

#chatRestartBtn {
  background: #0b6b38;   /* Wunschfarbe */
  color: #fff;
  border-radius: 8px;
}
#chatRestartBtn:hover {
  background: #0b6b38;
}

@media (max-width:600px) {
  .container { padding: 0 6px; }
  .header .logo { height: 100px; }
  h1 { font-size: 1.2rem; }
  .btn, .btn-email, .btn-whatsapp { font-size: 0.95rem; padding: 8px 10px; }
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Cards / sections */
.section{ margin-top:18px; background:var(--color-surface); padding:14px; border-radius:10px; }
.small{ color:var(--color-muted); font-size:14px; }

/* Preisliste table */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ text-align:left; padding:10px; border-bottom:1px solid rgba(0,0,0,0.06); }
.table th{ background:transparent; font-weight:800; color:var(--color-primary); }

/* Footer */
.footer{ text-align:center; padding:20px; color:var(--color-muted); font-size:14px; }

/* Modals (chat + contact) */
.modal-overlay{ position:fixed; left:0; top:0; right:0; bottom:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:1000; padding:18px; }
.modal-overlay.open{ display:flex; }

.modal{
  position:absolute;
  left:var(--modal-left);
  top:var(--modal-top);
  transform:translate(-50%,-50%);
  width:var(--modal-width);
  max-width:calc(100% - 36px);
  max-height:var(--modal-max-height-vh);
  background:var(--color-bg);
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(0,0,0,0.06);
}

/* Modal header/body/footer */
.modal-header{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:linear-gradient(90deg,var(--color-primary), #0a5a30); color:#fff; }
.modal-body{ padding:14px; overflow:auto; flex:1 1 auto; display:flex; flex-direction:column; gap:8px; }
.modal-footer{ padding:10px 14px; border-top:1px solid rgba(0,0,0,0.06); display:flex; justify-content:space-between; align-items:center; }

.chat-messages{ display:flex; flex-direction:column; gap:8px; max-height:56vh; overflow:auto; }
.msg{ padding:10px 12px; border-radius:10px; background:#eef1f3; max-width:100%; }
.msg.bot{ background:#eef1f3; }
.msg.bot { color: #333366; }
.msg.user{ background:var(--color-primary); color:#fff; align-self:flex-end; }

.controls{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.control-btn{ padding:10px 12px; border-radius:8px; border:none; cursor:pointer; font-weight:700; }
.control-yes{ background:var(--color-accent); color:#fff; }
.control-no{ background:var(--color-primary); color:#fff; }
.control-unknown{ background:#6c757d; color:#fff; }

/* Responsive tweaks */
@media (max-width:900px){
  .hero{ flex-direction:column; }
  .hero .right{ order:-1; }
}


/* --- Zusätzliches Fluid für .title / div.title --- */

/* ===================== Fluid / responsive für .title / div.title ===================== */
/* Gleiche Behandlung wie für .header .title - skaliert mit Viewport, bleibt aber begrenzt. */
div.title, .title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.6px;
  line-height: 1.06;
  margin: 0;

  /* clamp(MIN, PREFERRED, MAX) */
  font-size: clamp(1.25rem, 1rem + 2.5vw, 2.5rem);
  /* min ≈ 20px, preferred wächst mit vw, max ≈ 40px */
}

/* Fallback für Browser ohne clamp() */
@supports not (font-size: clamp(1rem, 1vw, 2rem)) {
  div.title, .title { font-size: 1.5rem; } /* konservativer Fallback */
}