/* ==========================================================
   gratisnaechte.de – Cookie-Banner Styling

   Cookie-Dialog:
   - oben mittig
   - überlagert bewusst den Hero-Bereich
   - responsive für Desktop und Mobile
   - ergänzt legal-style.css
   ========================================================== */


/* ----------------------------------------------------------
   OVERLAY / POSITION
   ---------------------------------------------------------- */

#gn-cookie-banner {
  position: fixed;

  /*
   * Der Pflicht-Hinweisbalken befindet sich ganz oben.
   * Der Cookie-Dialog beginnt unmittelbar darunter und
   * überlagert bewusst die Hero-Überschrift.
   */
  top: 44px;
  left: 0;
  right: 0;
  bottom: auto;

  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding:
    18px
    16px
    24px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  /*
   * Falls ein kleiner Bildschirm verwendet wird,
   * kann der gesamte Bannerbereich gescrollt werden.
   */
  max-height:
    calc(100vh - 44px);

  overflow-y: auto;

  /*
   * Leichte Abdunklung nur hinter dem Dialog.
   * Dadurch liegt der Fokus klar auf der
   * Cookie-Entscheidung, ohne die Website
   * vollständig zu verdecken.
   */
  background:
    linear-gradient(
      to bottom,
      rgba(12, 66, 57, .10),
      rgba(12, 66, 57, 0)
    );
}


/* ----------------------------------------------------------
   COOKIE-KARTE
   ---------------------------------------------------------- */

.gn-cb-card {
  background: #f7f2e8;

  border:
    2px solid
    #0c4239;

  border-radius: 14px;

  max-width: 680px;
  width: 100%;

  padding:
    22px
    26px;

  box-shadow:
    0 12px 38px
    rgba(0, 0, 0, .28);

  /*
   * Verhindert, dass ein sehr langer Dialog
   * außerhalb kleiner Displays verschwindet.
   */
  max-height:
    calc(100vh - 88px);

  overflow-y: auto;
}


/* ----------------------------------------------------------
   TITEL
   ---------------------------------------------------------- */

.gn-cb-title {
  margin:
    0
    0
    9px;

  font-size: 18px;
  line-height: 1.3;

  font-weight: bold;

  color: #0c4239;
}


/* ----------------------------------------------------------
   TEXT
   ---------------------------------------------------------- */

.gn-cb-text {
  margin:
    0
    0
    13px;

  font-size: 14px;
  line-height: 1.5;

  color: #232323;
}

.gn-cb-text a {
  color: #15695a;
  font-weight: 600;
}


/* ----------------------------------------------------------
   SPRACHHINWEIS

   Die neue cookie-consent.js fügt nach dem normalen
   Erklärungstext einen zweiten .gn-cb-text-Absatz ein.
   Dieser wird bewusst hervorgehoben.
   ---------------------------------------------------------- */

.gn-cb-text + .gn-cb-text {
  margin-top: 5px;
  margin-bottom: 16px;

  padding:
    10px
    12px;

  background:
    rgba(21, 105, 90, .08);

  border:
    1px solid
    rgba(21, 105, 90, .22);

  border-radius: 9px;

  color: #13261d;
}

.gn-cb-text + .gn-cb-text strong {
  color: #0c4239;
}


/* ----------------------------------------------------------
   DETAIL-EINSTELLUNGEN
   ---------------------------------------------------------- */

.gn-cb-options {
  flex-direction: column;

  gap: 10px;

  margin-bottom: 14px;

  border-top:
    1px solid
    #e4dccb;

  border-bottom:
    1px solid
    #e4dccb;

  padding:
    12px
    0;
}

.gn-cb-option {
  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 13.5px;
  line-height: 1.45;

  color: #232323;
}

.gn-cb-option input {
  margin-top: 3px;
  flex: none;
}


/* ----------------------------------------------------------
   BUTTON-BEREICH
   ---------------------------------------------------------- */

.gn-cb-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: flex-end;
  align-items: center;
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */

.gn-cb-btn {
  border: none;

  border-radius: 7px;

  padding:
    10px
    18px;

  min-height: 42px;

  font-size: 14px;
  font-weight: bold;

  cursor: pointer;

  font-family: inherit;

  transition:
    background .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.gn-cb-btn:hover {
  transform:
    translateY(-1px);
}

.gn-cb-btn:focus-visible {
  outline:
    3px solid
    #f4c878;

  outline-offset: 3px;
}


/* ----------------------------------------------------------
   ALLE AKZEPTIEREN
   ---------------------------------------------------------- */

.gn-cb-btn-primary {
  background: #e89b34;

  color: #0c4239;

  box-shadow:
    0 4px 12px
    rgba(232, 155, 52, .18);
}

.gn-cb-btn-primary:hover {
  background: #d68a25;
}


/* ----------------------------------------------------------
   ALLE ABLEHNEN
   ---------------------------------------------------------- */

.gn-cb-btn-secondary {
  background: transparent;

  color: #0c4239;

  border:
    1px solid
    #0c4239;
}

.gn-cb-btn-secondary:hover {
  background:
    rgba(12, 66, 57, .05);
}


/* ----------------------------------------------------------
   EINSTELLUNGEN
   ---------------------------------------------------------- */

.gn-cb-btn-outline {
  background: transparent;

  color: #15695a;

  text-decoration: underline;
}

.gn-cb-btn-outline:hover {
  background:
    rgba(21, 105, 90, .05);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 760px) {

  #gn-cookie-banner {
    top: 42px;

    padding:
      12px
      12px
      20px;

    max-height:
      calc(100vh - 42px);
  }

  .gn-cb-card {
    max-width: 620px;

    padding:
      20px
      20px;

    max-height:
      calc(100vh - 72px);
  }

  .gn-cb-title {
    font-size: 17px;
  }

  .gn-cb-text {
    font-size: 13.5px;
  }
}


/* ==========================================================
   SMARTPHONE
   ========================================================== */

@media (max-width: 480px) {

  #gn-cookie-banner {
    top: 40px;

    padding:
      8px
      8px
      14px;

    max-height:
      calc(100vh - 40px);
  }

  .gn-cb-card {
    border-radius: 11px;

    padding:
      17px
      16px;

    max-height:
      calc(100vh - 58px);
  }

  .gn-cb-title {
    font-size: 16px;
  }

  .gn-cb-text {
    font-size: 13px;

    line-height: 1.45;
  }

  .gn-cb-option {
    font-size: 13px;
  }

  /*
   * Auf kleinen Displays werden die Buttons
   * untereinander dargestellt.
   */
  .gn-cb-actions {
    flex-direction: column;

    align-items: stretch;

    gap: 8px;
  }

  .gn-cb-btn {
    width: 100%;

    min-height: 44px;

    padding:
      10px
      14px;
  }
}