/* ============================================================================
   Amann Media, Einwilligungshinweis der Kampagnenseite

   Eine eigene Datei, weil der Hinweis auf allen vier Seiten erscheint, die
   Startseite aber ein anderes Stylesheet nutzt als die Rechtsseiten.
   Farben stehen hier fest und nicht als Token, damit die Datei unabhaengig
   von beiden Stylesheets funktioniert.

   Der Hinweis erscheint nur, wenn in messung.js eine Google-Analytics-ID
   eingetragen ist. Matomo laeuft cookielos und braucht keine Einwilligung.
   ========================================================================= */

.hinweis{
  position:fixed;z-index:400;
  left:max(16px,env(safe-area-inset-left));
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom));
  margin-inline:auto;max-width:580px;
  background:#C4470F;color:#fff;
  border-radius:18px;
  padding:22px 24px 20px;
  box-shadow:0 2px 4px rgba(20,19,18,.14),0 26px 60px -24px rgba(20,19,18,.55);
  font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:.9375rem;line-height:1.55;
}
.hinweis h2{
  margin:0 0 6px;font-family:inherit;font-size:1rem;font-weight:680;
  letter-spacing:-.01em;color:#fff;line-height:1.3;
}
.hinweis p{margin:0 0 16px;color:#fff;}
.hinweis a{color:#fff;text-decoration:underline;text-underline-offset:.2em;}
.hinweis a:hover{text-decoration-thickness:2px;}

.hinweis-knoepfe{display:flex;flex-wrap:wrap;gap:9px;}
.hinweis button{
  flex:1 1 120px;min-height:46px;padding:12px 14px;
  border-radius:999px;border:1px solid #fff;
  font:inherit;font-weight:660;font-size:.9063rem;letter-spacing:-.01em;
  line-height:1.2;cursor:pointer;
  transition:background-color 180ms ease,color 180ms ease;
}
/* Ablehnen, Einstellungen und Akzeptieren sind gleich gross, gleich hoch und
   gleich gut zu treffen. Nur die Fuellung des letzten Knopfes unterscheidet
   sich. Eine zurueckgesetzte Ablehnung ist der haeufigste Beanstandungsgrund
   bei Einwilligungsbannern, deshalb bleibt das so. */
.hinweis .nein,.hinweis .mehr{background:transparent;color:#fff;}
.hinweis .ja{background:#fff;color:#C4470F;}
@media (hover:hover) and (pointer:fine){
  .hinweis .nein:hover,.hinweis .mehr:hover{background:rgba(255,255,255,.16);}
  .hinweis .ja:hover{background:#F5F2EE;}
}
.hinweis button:active{transform:scale(.99);}
.hinweis button:focus-visible{outline:2px solid #fff;outline-offset:3px;}

/* ---------- Einstellungen ------------------------------------------------- */
.hinweis-optionen[hidden]{display:none;}
.hinweis-optionen h2{margin-bottom:14px;}

.wahl{display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-top:1px solid rgba(255,255,255,.28);
  cursor:pointer;}
.wahl:first-of-type{border-top:0;padding-top:0;}
.wahl span{display:block;font-size:.8438rem;line-height:1.45;color:rgba(255,255,255,.86);}
.wahl strong{display:block;font-weight:680;font-size:.9375rem;color:#fff;margin-bottom:2px;}

/* Eigener Schalter, damit er auf Orange sichtbar ist. Die Rolle des
   Ankreuzfeldes bleibt erhalten, es wird nur nicht gezeichnet. */
.wahl input{appearance:none;-webkit-appearance:none;margin:2px 0 0;
  flex:0 0 auto;width:38px;height:22px;border-radius:999px;
  border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.16);
  position:relative;cursor:pointer;
  transition:background-color 200ms ease,border-color 200ms ease;}
.wahl input::after{content:"";position:absolute;top:3px;left:3px;
  width:14px;height:14px;border-radius:50%;background:#fff;
  transition:transform 200ms cubic-bezier(.16,1,.3,1);}
.wahl input:checked{background:#fff;border-color:#fff;}
.wahl input:checked::after{transform:translateX(16px);background:#C4470F;}
.wahl input:disabled{cursor:default;opacity:.72;}
.wahl input:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.wahl:has(input:disabled){cursor:default;}

.hinweis-optionen .hinweis-knoepfe{margin-top:16px;}

/* Ein kurzes Aufblenden, sonst steht der Kasten unvermittelt im Bild. */
@media (prefers-reduced-motion:no-preference){
  .hinweis{animation:hinweis-auf 340ms cubic-bezier(.16,1,.3,1) both;}
  @keyframes hinweis-auf{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
}

@media (max-width:480px){
  .hinweis{padding:18px 18px 16px;border-radius:16px;}
  .hinweis-knoepfe{flex-direction:column;}
  /* In einer Spalte wirkt flex-basis auf die Hoehe, nicht auf die Breite.
     Ohne diese Zeile werden die Knoepfe 120px hoch. */
  .hinweis button{flex:0 0 auto;width:100%;}
}

@media print{.hinweis{display:none;}}


/* Solange der Hinweis offen ist, tritt die Aktionsleiste am unteren Rand
   zurueck. Sonst stehen auf dem Handy zwei Balken uebereinander und der
   Hinweis verdeckt genau den Knopf, zu dem er nicht hinfuehren soll. */
html.hinweis-offen .mobibar{transform:translateY(110%) !important;}