/* GM Cookie
   Kein Vollbild, keine Wand: eine Karte an einer Ecke, die den Inhalt sehen
   laesst. Ablehnen steht gleichwertig neben Zustimmen, sonst waere die
   Einwilligung nicht freiwillig. Die Farben kommen aus den Einstellungen.

   Zur Spezifitaet: Themes setzen Knoepfe ueber [type="button"], und das ist
   genauso spezifisch wie eine einzelne Klasse. Weil das Theme-CSS spaeter
   geladen wird, gewinnt es bei Gleichstand. Deshalb traegt hier jede Regel
   .gmck davor, und Knoepfe werden vorher komplett zurueckgesetzt. */
.gmck{--navy:#0a2540;--navy-h:#13314f;--head:#14191f;--body:#46505c;
  --sand:#f4efe7;--line:rgba(10,37,64,.12);--radius:18px;
  --font-titel:'Familjen Grotesk',system-ui,sans-serif;
  --font-text:'Hanken Grotesk',system-ui,sans-serif;
  position:fixed;z-index:99990;bottom:24px;width:min(430px,calc(100vw - 48px));
  font-family:var(--font-text);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,.61,.36,1),visibility .34s}
.gmck.is-da{opacity:1;visibility:visible;transform:none}
.gmck[hidden]{display:none}

/* Themes rechnen unterschiedlich. Hier immer border-box, sonst faellt die
   Hoechsthoehe der Karte je nach Theme anders aus. */
.gmck,.gmck *,.gmck *::before,.gmck *::after{box-sizing:border-box}

/* Knopf-Reset: raeumt weg, was Theme und Elementor mitbringen */
.gmck button{-webkit-appearance:none;appearance:none;
  margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:none;text-shadow:none;
  box-shadow:none;width:auto;min-width:0;min-height:0;line-height:inherit;
  text-decoration:none}
/* Der Reset muss die Zustaende mitnehmen: Themes setzen button:hover eigens,
   und das schlaegt sonst durch, sobald die Maus darauf steht. */
.gmck button:hover,.gmck button:focus,.gmck button:active,
.gmck button:focus-visible{background:none;color:inherit;border-color:inherit;
  box-shadow:none;text-decoration:none}
.gmck input{margin:0}

.gmck.gmck-links{left:24px}
.gmck.gmck-rechts{right:24px}
/* Mittig heisst wirklich Bildschirmmitte, nicht unten mittig: die Karte soll
   eine Entscheidung verlangen, ohne die Seite zuzudecken. Der Schleier macht
   sichtbar, dass etwas ansteht, laesst den Inhalt aber durchscheinen. */
.gmck.gmck-mitte{inset:0;bottom:auto;top:0;left:0;right:0;width:auto;height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vh,48px) clamp(16px,4vw,40px);transform:none}
.gmck.gmck-mitte .gmck-karte{width:min(520px,100%);transform:translateY(14px);
  transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.gmck.gmck-mitte.is-da .gmck-karte{transform:none}
.gmck.gmck-mitte .gmck-schleier{display:block;position:fixed;inset:0;
  background:rgba(10,37,64,.32);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.gmck-schleier{display:none}
.gmck.gmck-mitte .gmck-karte{position:relative;z-index:1}

.gmck .gmck-karte{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:0 24px 60px rgba(10,37,64,.16),0 2px 8px rgba(10,37,64,.06);
  max-height:min(76vh,640px);overflow-y:auto;-webkit-overflow-scrolling:touch}

.gmck h2{margin:0 0 8px;font-family:var(--font-titel);font-weight:700;font-size:21px;
  line-height:1.2;letter-spacing:-.02em;color:var(--head)}
.gmck p{margin:0;font-size:14.5px;line-height:1.6;color:var(--body)}
.gmck a{color:var(--navy);text-decoration:underline;text-underline-offset:2px;
  background:none;box-shadow:none}

/* Beide Hauptknoepfe gleich gross und in einer Zeile: gleiche Prominenz.
   Ein kleineres „Ablehnen" waere ein Dark Pattern und macht die Einwilligung
   angreifbar. */
.gmck .gmck-reihe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.gmck .gmck-b{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 16px;border:1px solid var(--navy);border-radius:12px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.2;
  cursor:pointer;text-align:center;transition:background .22s ease,color .22s ease}
.gmck .gmck-b-voll{background:var(--navy);color:#fff}
.gmck .gmck-b-voll:hover{background:var(--navy-h);border-color:var(--navy-h);color:#fff}
.gmck .gmck-b-rand{background:none;color:var(--navy)}
.gmck .gmck-b-rand:hover{background:rgba(10,37,64,.06);color:var(--navy)}
.gmck .gmck-b:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* Im aufgeklappten Zustand tritt „Auswahl speichern" an die Stelle von
   „Nur notwendige" — die Schalter darueber sollen ja etwas bewirken. */
.gmck .gmck-wahl{display:none}
.gmck.is-offen .gmck-nur{display:none}
.gmck.is-offen .gmck-wahl{display:flex}

/* „Einstellungen" steht in der Fusszeile bei Datenschutz und Impressum, dort
   sucht man solche Links. */
.gmck .gmck-mehr{display:inline;padding:0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:400;color:var(--navy);
  text-decoration:underline;text-underline-offset:2px}
.gmck .gmck-mehr:hover,.gmck .gmck-mehr:focus-visible{background:none;color:var(--navy);
  text-decoration:underline}

/* Pfeil ohne Zeichensatz von aussen: reines CSS, damit die Karte niemals auf
   eine fremde Datei wartet */
.gmck .gmck-pfeil{width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease}
.gmck.is-offen .gmck-mehr .gmck-pfeil{transform:rotate(225deg) translate(-2px,-2px)}

.gmck .gmck-fuss{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--body)}

/* ---------- Zweite Ebene: Reiter je Kategorie ----------
   Eine Liste aller Kategorien untereinander waere auf dem Handy endlos. Mit
   Reitern steht immer nur eine Gruppe da, und darunter ihre Dienste einzeln. */
.gmck .gmck-detail{display:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.gmck.is-offen .gmck-detail{display:block}
.gmck.is-offen .gmck-kurz{display:none}

.gmck .gmck-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;
  margin:0 0 14px;scrollbar-width:none}
.gmck .gmck-tabs::-webkit-scrollbar{display:none}
/* Flache Felder statt umrandeter Pillen: ein duenner Rand um jeden Reiter
   macht die Zeile unruhig, eine ruhige Flaeche traegt besser. */
.gmck .gmck-tab{flex:none;padding:8px 13px;border:0;border-radius:7px;
  background:rgba(10,37,64,.06);color:var(--body);font-family:inherit;font-size:12.5px;
  font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background .2s ease,color .2s ease}
.gmck .gmck-tab:hover{background:rgba(10,37,64,.1);color:var(--navy)}
.gmck .gmck-tab.is-an{background:var(--navy);color:#fff}
.gmck .gmck-tab.is-an:hover{background:var(--navy-h);color:#fff}

.gmck .gmck-tafel{display:none}
.gmck .gmck-tafel.is-an{display:block}

.gmck .gmck-tafel-kopf{display:flex;align-items:flex-start;gap:14px;padding:0}
.gmck .gmck-tafel-kopf > div{flex:1;min-width:0}
.gmck .gmck-tafel-kopf b{display:block;font-size:14.5px;font-weight:600;color:var(--head)}
.gmck .gmck-tafel-kopf span{display:block;margin-top:3px;font-size:13px;line-height:1.55;
  color:var(--body)}

/* Jeder Dienst eine eigene Flaeche: Trennlinien lassen die Angaben
   ineinanderlaufen, und bei drei Zeilen je Dienst weiss man sonst nicht
   mehr, was noch wozu gehoert. */
.gmck .gmck-dienste{display:flex;flex-direction:column;gap:8px;margin-top:12px;
  max-height:min(38vh,290px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-right:2px}
.gmck .gmck-d{padding:13px 14px;border:0;border-radius:10px;background:rgba(10,37,64,.04)}
.gmck .gmck-d-kopf{display:flex;align-items:flex-start;gap:14px}
.gmck .gmck-d-kopf > div{flex:1;min-width:0}
.gmck .gmck-d-kopf b{display:block;font-size:14px;font-weight:600;color:var(--head)}
.gmck .gmck-d-anb{display:block;margin-top:2px;font-size:12.5px;color:var(--body)}
.gmck .gmck-d-zweck{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--body)}

.gmck .gmck-d-dauer{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--body);opacity:.8}

.gmck .gmck-leer{margin:14px 0 0;font-size:13px;color:var(--body);opacity:.75}

/* Schalter */
.gmck .gmck-s{position:relative;flex:none;width:44px;height:25px;margin-top:2px}
.gmck .gmck-s input{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:pointer}
.gmck .gmck-s i{position:absolute;inset:0;border-radius:999px;background:rgba(10,37,64,.18);
  transition:background .22s ease;pointer-events:none}
.gmck .gmck-s i::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(10,37,64,.3);
  transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.gmck .gmck-s input:checked + i{background:var(--navy)}
.gmck .gmck-s input:checked + i::after{transform:translateX(19px)}
.gmck .gmck-s input:disabled + i{background:var(--navy);opacity:.4}
.gmck .gmck-s input:disabled{cursor:default}
.gmck .gmck-s input:focus-visible + i{outline:2px solid var(--navy);outline-offset:3px}
.gmck .gmck-s .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0)}
/* Teilweise zugestimmt: der Kategorieschalter zeigt einen Strich statt des
   Knopfs, damit „manche an" nicht wie „alle an" aussieht. */
.gmck .gmck-s input:indeterminate + i{background:rgba(10,37,64,.45)}
.gmck .gmck-s input:indeterminate + i::after{transform:translateX(9.5px);width:19px;
  border-radius:4px}
.gmck .gmck-s-klein{width:38px;height:22px}
.gmck .gmck-s-klein i::after{width:16px;height:16px}
.gmck .gmck-s-klein input:checked + i::after{transform:translateX(16px)}
.gmck .gmck-s-klein input:indeterminate + i::after{transform:translateX(8px)}

/* Auf dem Handy eine Karte mit Luft ringsum, nicht die halbe Seite zugeklebt */
/* Auf dem Handy bleibt die Karte unten am Daumen, auch wenn am Rechner
   mittig eingestellt ist. Der Schleier entfaellt, dort deckt die Karte
   ohnehin genug ab. */
@media(max-width:600px){
  /* Nur zurechtruecken, nicht neu erfinden: das Ein- und Ausblenden regelt
     schon die Grundregel weiter oben. Wird transform hier wiederholt, streiten
     sich zwei Regeln um dieselbe Eigenschaft und die Karte sitzt 14px zu tief. */
  .gmck,.gmck.gmck-links,.gmck.gmck-rechts,.gmck.gmck-mitte{left:12px;right:12px;width:auto;
    top:auto;height:auto;display:block;padding:0;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .gmck.gmck-mitte .gmck-karte{width:auto;transform:none}
  .gmck.gmck-mitte .gmck-schleier{display:none}
  .gmck .gmck-dienste{max-height:min(34vh,240px)}

  .gmck .gmck-karte{padding:20px;border-radius:calc(var(--radius) - 2px);max-height:min(68vh,560px)}
  .gmck h2{font-size:19px}
  .gmck p{font-size:14px}
  /* Untereinander steht der zustimmende Knopf oben, wo der Daumen zuerst
     hinkommt. Beide bleiben gleich gross und gleich weit weg vom Rand, sonst
     waere Ablehnen nicht mehr gleichwertig erreichbar. */
  .gmck .gmck-reihe{grid-template-columns:1fr;gap:8px}
  .gmck .gmck-b-voll{order:-1}
  .gmck .gmck-b{padding:14px 16px}
}

/* Ein schwebender Knopf sitzt auf dem Handy an derselben Kante. Zwei Karten
   uebereinander waeren Unsinn, also wartet er, bis entschieden ist. */
body.gmck-an .gmcta{opacity:0!important;visibility:hidden!important;pointer-events:none}

/* Dienste-Liste fuer die Datenschutzseite, steht ausserhalb der Karte */
.gmck-tabelle{margin:24px 0}
.gmck-tabelle h3{margin:26px 0 6px}
.gmck-tabelle .gmck-tz{margin:14px 0;padding:16px 18px;
  border:1px solid rgba(10,37,64,.12);border-radius:12px}
.gmck-tabelle .gmck-tz b{display:block;margin-bottom:6px}
.gmck-tabelle .gmck-tz span{display:block;margin-top:3px;font-size:14.5px;line-height:1.6}