/* © 2026 Webschmiede · Peter Brunner. Gemeinsame Demo-Elemente (Band, Hinweis, Fusszeile) */
:root { --club: #14532d; --club-light: #1f7a45; --club-soft: #ecf6ef; }
.demo-ribbon { z-index: 9999; pointer-events: none; background: #d4141c; border-top: 2px solid #fff; border-bottom: 2px solid #fff; width: 330px; position: fixed; top: 66px; right: -78px; transform: rotate(45deg); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.demo-ribbon p { color: #fff; text-align: center; letter-spacing: 2px; text-transform: uppercase; margin: 0; padding: 8px 0; font: 800 14px Arial, Helvetica, sans-serif; }
@media (max-width: 767px) { .demo-ribbon { display: none; } }
.demo-banner { background: #fff7d6; color: #3d3200; border-bottom: 2px dashed #c9a400; padding: 0.6rem 1rem; font-size: 0.88rem; text-align: center; line-height: 1.45; }
.demo-banner a { color: inherit; font-weight: 700; }
.made-by { text-align: center; margin: 2.5rem 0 1rem; }
.made-by a { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 1rem 0.45rem 0.5rem; background: white; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0,29,59,0.15); text-decoration: none; transition: box-shadow 0.2s, transform 0.2s; }
.made-by a:hover { box-shadow: 0 3px 10px rgba(0,29,59,0.25); transform: translateY(-1px); }
.made-by img { height: 34px; }
.made-by .txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.made-by small { color: #888; font-size: 0.72rem; }
.made-by strong { font-size: 1.05rem; letter-spacing: 0.04em; color: #2B221C; font-weight: 800; }
.made-by strong span { color: #A63D1C; }
.copyright { text-align: center; font-size: 0.75rem; color: #888; margin: 0 0 1.5rem; }
@media print { .made-by, .demo-banner, .demo-ribbon, .copyright { display: none; } }
/* Platz für das Demo-Band rechts oben (nur Desktop) */
@media (min-width: 768px) { .demo-banner { padding-left: 160px; padding-right: 160px; } .topbar { padding-right: 180px !important; } }