/* ─── Die Demo-Schicht ──────────────────────────────────────────────────────
   Banner, Einladungskarte und der leuchtende Knopf. Das ist bewusst die
   einzige Stelle, die sich NICHT nach dem gewaehlten Design richtet: Sie
   gehoert nicht zum Betrieb, sondern zu Marco. Wer sie sieht, soll sofort
   erkennen, dass sie nicht Teil der Website ist.

   Animationen: vier Bewegungen auf demselben Takt von 3,2 Sekunden - Ring
   nach aussen, leichtes Atmen, ein Lichtschimmer der durchlaeuft, und ein
   kleiner Schub am Play-Zeichen. Zusammen faellt der Knopf auf, ohne zu
   zappeln.

   ACHTUNG BEIM TESTEN: Vorschau-Browser melden oft
   `prefers-reduced-motion: reduce`. Dann sieht man die Animation nicht,
   obwohl sie richtig ist.
                                                                             */

.demo-banner {
    background: #1f2a24;
    color: #d7e0d9;
    font-size: 13px;
    position: relative;
    z-index: 300;
}
.demo-banner-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 20px 9px;
}
/* Zwei gewollte Zeilen statt einer, die irgendwo umbricht: oben was das
   ist, unten wohin man kann. */
.demo-zeile {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 30px;
}
.demo-zeile-wege {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid rgba(255,255,255,.1);
}
.demo-banner-offen .demo-zeile { min-height: 34px; }
.demo-marke {
    background: #d8a43c;
    color: #2a2a2a;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 3px;
}
.demo-text { flex: 1; min-width: 220px; line-height: 1.45; }
.demo-text strong { color: #fff; }
.demo-kontakt { color: #93a89a; white-space: nowrap; }
.demo-kontakt a { color: #dbe7dc; text-decoration: none; border-bottom: 1px dotted; }

/* Der Umschalter sitzt im Banner, damit er zur Demo gehoert und nicht zur
   Website des Betriebs. */
.demo-ansicht { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.demo-ansicht-titel { color: #93a89a; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.demo-ansicht a {
    color: #d7e0d9; text-decoration: none; padding: 3px 9px;
    border-radius: 3px; border: 1px solid rgba(255,255,255,.16);
}
.demo-ansicht a:hover { background: rgba(255,255,255,.1); }
.demo-ansicht a.gewaehlt { background: #d7e0d9; color: #1f2a24; border-color: #d7e0d9; font-weight: 600; }

/* ── Website oder Buero: wo man ist, und wie man hinueberkommt ──
   Das ist der wichtigste Knopf im ganzen Band. Der Interessent soll die
   Software sehen, und die steckt hinter dem Login. Stand er nur klein im
   Fuss der Website, fand ihn niemand.

   Ausgefuellt ist die Haelfte, in die man **wechseln** kann - nicht die,
   in der man steht. Der Blick soll dorthin, wo es weitergeht. Die
   gegenwaertige Seite steht daneben als ruhige Marke. */
.demo-ort {
    display: inline-flex; align-items: center; gap: 7px;
    background: #eaf0ea; color: #1f2a24; text-decoration: none;
    font-size: 13.5px; font-weight: 700;
    padding: 5px 12px; border-radius: 4px;
    border: 1px solid #eaf0ea;
    white-space: nowrap;
}
.demo-ort svg { width: 14px; height: 14px; flex: none; }
.demo-ort:hover { background: #fff; border-color: #fff; }
.demo-ort-satz { color: #93a89a; font-size: 12.5px; }
.demo-ort-zusatz {
    font-weight: 500; font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; opacity: .7;
    border-left: 1px solid currentColor; padding-left: 7px;
}

/* ── Der leuchtende Knopf ── */
.demo-tour {
    position: relative;
    overflow: hidden;
    background: #d8a43c;
    color: #2a2a2a;
    text-decoration: none;
    padding: 7px 16px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 0 0 rgba(216, 164, 60, .6);
    animation: demo-tour-puls 3.2s ease-out infinite,
               demo-tour-atmen 3.2s ease-in-out infinite;
}
.demo-tour::after {                 /* Lichtschimmer, der durchlaeuft */
    content: "";
    position: absolute;
    top: 0; left: -70%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.8), transparent);
    transform: skewX(-20deg);
    animation: demo-tour-schimmer 3.2s ease-in-out infinite;
}
.demo-tour:hover { background: #f0c163; animation: none; transform: translateY(-1px); }
.demo-tour:hover::after { animation: none; opacity: 0; }
.demo-tour-icon { font-size: 11px; animation: demo-tour-schub 3.2s ease-in-out infinite; }
.demo-tour-dauer {
    font-weight: 500; font-size: 12px; opacity: .75;
    border-left: 1px solid rgba(0,0,0,.25); padding-left: 8px;
}

@keyframes demo-tour-puls {
    0%   { box-shadow: 0 0 0 0 rgba(216,164,60,.7); }
    60%  { box-shadow: 0 0 0 14px rgba(216,164,60,0); }
    100% { box-shadow: 0 0 0 0 rgba(216,164,60,0); }
}
@keyframes demo-tour-atmen {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.045); }
}
@keyframes demo-tour-schimmer {
    0%, 62%   { left: -70%; }
    92%, 100% { left: 130%; }
}
@keyframes demo-tour-schub {
    0%, 70%, 100% { transform: translateX(0); }
    82%           { transform: translateX(3px); }
}

/* ── Der Pfeil zum Login ──
   Er sitzt unter dem Knopf im Kopf der Website und zeigt hinauf. Der Anker
   ist .web-kopf-rechts (position:relative in website.css) - so stimmt die
   Stelle ohne eine Zeile JavaScript zum Nachmessen.

   Der Takt ist derselbe wie beim Knopf im Band: 3,2 Sekunden, ein ruhiges
   Schieben statt Zappeln. */
.demo-pfeil {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #c8922b;
    pointer-events: none;
    z-index: 120;
    animation: demo-pfeil-auf .5s ease-out both;
}
.demo-pfeil[hidden] { display: none; }
.demo-pfeil svg {
    width: 52px; height: 32px; flex: none; order: 2;
    animation: demo-pfeil-schub 3.2s ease-in-out infinite;
}
.demo-pfeil-text {
    order: 1;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    letter-spacing: .01em;
}
@keyframes demo-pfeil-auf {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes demo-pfeil-schub {
    0%, 60%, 100% { transform: translate(0, 0); }
    78%           { transform: translate(4px, -4px); }
}

/* ── Der Hinweis auf die Uebernahme ──
   Unten rechts, wo frueher der Design-Umschalter stand. Er unterbricht
   nichts und laesst sich wegklicken. */
.demo-uebernahme {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 260;
    width: 340px; max-width: calc(100vw - 32px);
    background: #1f2a24;
    color: #d7e0d9;
    border-radius: 6px;
    border-top: 3px solid #d8a43c;
    padding: 18px 20px 20px;
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
    animation: demo-uebernahme-hoch .4s cubic-bezier(.2,.8,.3,1) both;
}
.demo-uebernahme[hidden] { display: none; }
@keyframes demo-uebernahme-hoch {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.demo-uebernahme-zu {
    position: absolute; top: 8px; right: 10px;
    background: none; border: none; color: #93a89a;
    font-size: 21px; line-height: 1; cursor: pointer; padding: 4px 6px;
    font-family: inherit;
}
.demo-uebernahme-zu:hover { color: #fff; }
.demo-uebernahme-kicker {
    color: #d8a43c; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .13em; margin-bottom: 9px;
}
.demo-uebernahme-text { font-size: 13.5px; line-height: 1.55; margin: 0 0 15px; }
.demo-uebernahme-text strong { color: #fff; }
.demo-uebernahme-text em { font-style: normal; color: #fff; text-decoration: underline; }
.demo-uebernahme-knopf {
    display: inline-block;
    background: #eaf0ea; color: #1f2a24;
    text-decoration: none; font-weight: 700; font-size: 13.5px;
    padding: 8px 16px; border-radius: 4px;
}
.demo-uebernahme-knopf:hover { background: #fff; }

/* ── Die Einladung beim ersten Aufruf ── */
.demo-willkommen {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(18, 28, 22, .74);
    animation: demo-auf .25s ease-out both;
}
.demo-willkommen[hidden] { display: none; }
@keyframes demo-auf { from { opacity: 0; } to { opacity: 1; } }

.demo-willkommen-karte {
    background: #f7f5ee;
    max-width: 580px;
    width: 100%;
    padding: 44px 48px 38px;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    text-align: center;
    animation: demo-hoch .35s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes demo-hoch {
    from { transform: translateY(24px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.demo-willkommen-kicker {
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: #6b7d63; font-weight: 700; margin-bottom: 18px;
}
.demo-willkommen-karte h2 {
    font-size: 30px; line-height: 1.2; color: #22332b; margin: 0 0 16px; font-weight: 700;
}
.demo-willkommen-karte p {
    font-size: 15.5px; line-height: 1.55; color: #5f6a61; margin: 0 0 28px;
}
.demo-willkommen-knopf {
    display: inline-flex; align-items: center; gap: 11px;
    background: #2f4a38; color: #fff; text-decoration: none;
    font-size: 18px; font-weight: 700; padding: 16px 34px; border-radius: 5px;
    box-shadow: 0 0 0 0 rgba(47,74,56,.5);
    animation: demo-willkommen-puls 2.4s ease-out infinite;
}
.demo-willkommen-knopf:hover { background: #3c5c47; animation: none; }
.demo-willkommen-knopf span { font-size: 13px; }
@keyframes demo-willkommen-puls {
    0%   { box-shadow: 0 0 0 0 rgba(47,74,56,.45); }
    70%  { box-shadow: 0 0 0 16px rgba(47,74,56,0); }
    100% { box-shadow: 0 0 0 0 rgba(47,74,56,0); }
}
.demo-willkommen-spaeter {
    display: block; margin: 20px auto 0;
    background: none; border: none; color: #8a9284;
    font-size: 14px; cursor: pointer; text-decoration: underline; font-family: inherit;
}
.demo-willkommen-spaeter:hover { color: #5f6a61; }

@media (prefers-reduced-motion: reduce) {
    .demo-tour, .demo-tour::after, .demo-tour-icon, .demo-willkommen-knopf,
    .demo-willkommen, .demo-willkommen-karte,
    .demo-pfeil, .demo-pfeil svg, .demo-uebernahme { animation: none; }
    .demo-tour::after { opacity: 0; }
}

@media (max-width: 720px) {
    .demo-banner-inner { padding: 8px 14px; font-size: 12px; }
    .demo-zeile { gap: 10px; }
    .demo-kontakt, .demo-ansicht { width: 100%; }
    .demo-ort { width: 100%; justify-content: center; }
    .demo-ort-satz { display: none; }
    /* Schmal bricht der Kopf um; der Pfeil zeigte dann ins Leere. Der
       Login-Knopf steht dort ohnehin allein auf seiner Zeile. */
    .demo-pfeil { display: none; }
    .demo-uebernahme { right: 12px; left: 12px; bottom: 12px; width: auto; }
    .demo-willkommen-karte { padding: 32px 26px 28px; }
    .demo-willkommen-karte h2 { font-size: 24px; }
    .demo-willkommen-knopf { font-size: 16px; padding: 14px 24px; width: 100%; justify-content: center; }
}

@media print {
    .demo-banner, .demo-willkommen, .demo-pfeil, .demo-uebernahme { display: none; }
}