/* Shared styles for the static content pages (/anleitung/, /karten/).
   These pages live OUTSIDE the SPA: plain HTML served straight from public/,
   so crawlers get real content without the Vue shell.

   Look follows the app: dark wood ground, beer-mat panels, amber text.
   iOS-14-safe (app-wide rule): no `inset` shorthand, no flex `gap`,
   no standalone `scale:`/`rotate:`/`translate:` properties. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  /* Exakt die Palette der Bierdeckel-Seite (backend views/bierdeckel.html). */
  background: radial-gradient(
      circle at 20% 20%,
      rgba(139, 69, 19, 0.3) 0%,
      transparent 50%
    ),
    radial-gradient(circle at 80% 60%, rgba(160, 82, 45, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
  background-attachment: fixed;
  color: #f3e2c7;
  line-height: 1.65;
  padding: 24px 16px 64px;
}

.wrap {
  max-width: 780px;
  margin: 0 auto;
}

/* --- Header ---------------------------------------------------------- */

.brandbar {
  text-align: center;
  margin-bottom: 28px;
}

.brandbar a {
  text-decoration: none;
}

.brand {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 2rem;
  letter-spacing: 1px;
  color: #ffcc80;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.brand-sub {
  display: block;
  font-size: 0.9rem;
  font-style: italic;
  color: #d7b98c;
  margin-top: 2px;
}

/* --- Beer-mat panels -------------------------------------------------- */

.mat {
  background: radial-gradient(
    circle at 30% 25%,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 248, 220, 0.95) 100%
  );
  color: #3b2b1c;
  border: 3px solid #d2b48c;
  border-radius: 18px;
  padding: 26px 24px;
  margin-bottom: 22px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

h1 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.9rem;
  line-height: 1.2;
  color: #378800;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

h2 {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.35rem;
  color: #2d6600;
  letter-spacing: 0.5px;
  margin: 26px 0 10px;
}

.mat > h2:first-child {
  margin-top: 0;
}

h3 {
  font-size: 1.05rem;
  font-weight: bold;
  color: #3b2b1c;
  margin: 18px 0 6px;
}

p {
  margin-bottom: 12px;
}

.lead {
  font-size: 1.08rem;
}

ul,
ol {
  margin: 0 0 12px 22px;
}

li {
  margin-bottom: 6px;
}

strong {
  color: #2d1f17;
}

a {
  color: #2d6600;
}

.mat a:hover {
  color: #378800;
}

/* --- Card rank rows --------------------------------------------------- */

.cardrow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}

.card {
  text-align: center;
}

.card img {
  display: block; /* baseline descender would inflate the wrapper */
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
}

.card figcaption {
  font-size: 0.72rem;
  line-height: 1.3;
  margin-top: 5px;
  color: #5b4632;
}

.card .rank {
  display: block;
  font-weight: bold;
  color: #378800;
}

/* --- Tables ----------------------------------------------------------- */

.tablewrap {
  overflow-x: auto;
  margin-bottom: 16px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

th,
td {
  border-bottom: 1px solid #e0cfae;
  padding: 8px 10px;
  text-align: left;
}

th {
  background: rgba(55, 136, 0, 0.1);
  color: #2d6600;
  font-family: Georgia, serif;
}

td.num {
  text-align: right;
  white-space: nowrap;
}

tfoot td {
  font-weight: bold;
  border-top: 2px solid #d2b48c;
  border-bottom: none;
}

/* --- Callout ---------------------------------------------------------- */

.note {
  background: rgba(55, 136, 0, 0.09);
  border-left: 4px solid #378800;
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 0.95rem;
}

/* --- Call to action --------------------------------------------------- */

.cta {
  text-align: center;
  padding: 22px 20px;
}

.cta p {
  color: #5b4632;
}

.btn {
  display: inline-block;
  margin: 8px 6px 0;
  padding: 13px 26px;
  border: 2px solid #2d1f17;
  border-radius: 10px;
  background: linear-gradient(160deg, #6b4423 0%, #4a2f1d 100%);
  color: #ffcc80 !important;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.5),
    inset 3px 3px 6px rgba(160, 102, 79, 0.2), 0 6px 14px rgba(0, 0, 0, 0.55);
}

.btn:hover {
  background: linear-gradient(160deg, #7c5029 0%, #573722 100%);
}

/* --- Footer nav ------------------------------------------------------- */

.pagenav {
  text-align: center;
  font-size: 0.9rem;
  color: #d7b98c;
  padding-top: 6px;
}

.pagenav a {
  color: #ffcc80;
  margin: 0 8px;
}

@media (max-width: 480px) {
  body {
    padding: 18px 12px 48px;
  }
  .mat {
    padding: 20px 16px;
  }
  h1 {
    font-size: 1.55rem;
  }
  .cardrow {
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  }
}