/* =========================================
   DIE MEISTERSTICKER · Global Styles
   Farben/Theme
========================================= */
:root{
  --bg: #238C8C;       /* Hintergrund/Brand */
  --primary:#6EC1E4;   /* Primär-Highlight */
  --secondary:#54595F; /* Sekundär (optional) */
  --accent:#7074A;     /* Hinweis: 6-stellig nicht definiert; belassen wir ungenutzt */
  --text:#FFFFFF;      /* Text auf dunklem Grund */
  --text-dark:#1f2a2e; /* Standard-Text */
  --muted:#7c8b93;
  --radius:.6rem;
  --shadow:0 2px 6px rgba(0,0,0,.15);
}

/* Reset / Basics */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text-dark);
  background:#208080; /* leicht dunkler als --bg für Fläche */
}

/* Typo */
h1,h2,h3,h4{margin:.2rem 0 .6rem;color:var(--bg)}
p{margin:.4rem 0 1rem}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* Layout Container */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:1rem;
}

/* =========================================
   Header & Navigation
========================================= */
.site-header{
  background:var(--bg);
  color:var(--text);
  position:sticky; top:0; z-index:100;
  box-shadow:var(--shadow);
}
.header-inner{
  display:flex; align-items:center; gap:1rem;
  padding:.6rem 1rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:700; color:#fff; text-decoration:none;
}
.brand img{display:block;width:40px;height:40px;object-fit:contain}

/* Nav */
.site-nav{margin-left:auto}
.main-nav{
  display:flex; align-items:center; gap:.6rem;
  list-style:none; margin:0; padding:0;
}
.main-nav > li{margin:0}
.main-nav a{
  display:block; color:#fff; text-decoration:none;
  padding:.38rem .7rem; border-radius:var(--radius);
  transition:background .15s ease;
}
.main-nav a:hover{background:rgba(255,255,255,.15)}
.main-nav a.active{background:var(--primary); color:#fff}
.cart-link a{font-weight:700}

/* Mobile Navigation (einfaches Stacken) */
@media (max-width: 800px){
  .header-inner{flex-wrap:wrap}
  .site-nav{flex:0 0 100%}
  .main-nav{
    flex-wrap:wrap; gap:.3rem;
    padding-top:.4rem;
  }
  .main-nav a{padding:.45rem .65rem}
}

/* =========================================
   News-Banner (Startseite)
========================================= */
.news-banner{
  background:var(--primary);
  color:#fff;
  text-align:center;
  padding:.8rem 1rem;
  border-radius:0 0 var(--radius) var(--radius);
  margin:1rem auto 1.5rem;
  max-width:1200px;
  box-shadow:var(--shadow);
}

/* =========================================
   Sections / Cards
========================================= */
.section{
  background:rgba(255,255,255,.2);
  border-radius:var(--radius);
  padding:1rem;
  margin:1.2rem 0;
}

/* Buttons */
.btn{
  display:inline-block;
  background:#6a5acd;
  color:#fff;
  font-weight:700;
  padding:.55rem 1rem;
  border-radius:var(--radius);
  border:none; cursor:pointer;
  transition:filter .2s ease, transform .05s ease;
  text-decoration:none;
}
.btn:hover{filter:brightness(.95)}
.btn:active{transform:translateY(1px)}

/* =========================================
   Produktkarten (Shop-Übersicht)
========================================= */
.product-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 2px 5px rgba(0,0,0,.1);
  padding:1rem; text-align:center;
}
.product-card img{max-width:100%;height:auto;border-radius:var(--radius)}
.product-card h3{margin:.6rem 0}

/* =========================================
   Tabellen (Warenkorb / Backend-Listen)
========================================= */
.table,
.cart-table{
  width:100%; border-collapse:collapse; margin:1rem 0;
}
.table th,.table td,
.cart-table th,.cart-table td{
  padding:.75rem; border:1px solid #e2e8f0; text-align:left;
}
.table th,.cart-table th{background:var(--bg); color:#fff}
.total-row{font-weight:700; background:#f6f8fa}

/* Eingaben / Form */
input[type="text"], input[type="email"], input[type="number"],
select, textarea{
  width:100%; padding:.55rem .65rem; border:1px solid #cbd5e1;
  border-radius:.5rem; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  background:#fff; color:#111827;
}
input:focus, select:focus, textarea:focus{
  border-color:#94a3b8; box-shadow:0 0 0 4px rgba(148,163,184,.25);
}
label{display:block; margin:.3rem 0 .2rem; font-weight:600}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:800px){ .form-row{grid-template-columns:1fr} }

/* =========================================
   Breadcrumbs
========================================= */
.breadcrumbs{
  font-size:.95rem; color:#eef;
  margin:.3rem 0 1rem;
}
.breadcrumbs a{color:#eef}
.breadcrumbs span{opacity:.8}

/* =========================================
   Footer
========================================= */
.site-footer {
  background: var(--bg);
  color: #fff;
  text-align: center;        
  padding: 1rem 2rem;
  margin-top: 2rem;

  display: flex;
  flex-direction: column;   /* Texte & Links untereinander */
  align-items: center;      /* Alles horizontal mittig */
}

.site-footer p {
  margin: 0 0 .5rem 0;
}

.site-footer nav {
  display: flex;            /* Links nebeneinander */
  gap: 1.5rem;              /* Abstand zwischen Links */
}

.site-footer a {
  color: #fff;
  font-size: .95rem;
  text-decoration: none;
}

/* -------------------------------
   Überschriften auffälliger machen
---------------------------------*/
h1, h2, h3 {
  color: #ffffff;       /* heller, weiß */
}

.section h2 {
  color: #eef;          /* leicht hellblau, besser lesbar */
  font-weight: 600;
}

.section h3 {
  color: #ffd700;       /* gold/gelb für wichtige Hinweise */
  font-weight: bold;
}

/* -------------------------------
   Hinweis-Text lesbarer machen
---------------------------------*/
.muted {
  color: #fff;       /* fast weiß statt blassgrau */
  font-size: 0.95rem;
  line-height: 1.5;
}

.muted strong {
  color: #ff6f61;       /* kräftiges rot/orange für Betonung */
}

.muted em {
  color: #fff;          /* kursiv, aber trotzdem gut lesbar */
  font-style: italic;
}

.muted p {
  color: #fff;       /* kräftiges rot/orange für Betonung */
}

/* --- Kontakt: Adresse links, Karte rechts --- */
.contact-wrap{display:flex;gap:2rem;margin:1.5rem 0}
.contact-info,.contact-map{flex:1}
.contact-info{background:rgba(255,255,255,.05);padding:1rem;border-radius:8px}
.contact-map iframe{width:100%;height:100%;min-height:340px;border:0;border-radius:8px}
@media (max-width: 768px){.contact-wrap{flex-direction:column}}
/* Hinweise gut lesbar */
.note,.form-note,.hint{color:#f5f5f5;font-size:.95rem}
.note a,.form-note a{color:#fff;text-decoration:underline}
.hint-title{color:#ffdd57;margin-top:1rem}

/* =========================================
   Hilfsklassen
========================================= */
.muted{color:var(--muted)}
.hidden{display:none!important}
.center{text-align:center}
.grid{display:grid; gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid-3{grid-template-columns:1fr}}