/* =========================================================
   HEADER / ICON TOPBAR
========================================================= */

.page-header {
  padding: 28px 0 0;
}

.page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Startseite: nur Icon rechts */
.page-header-inner.is-end {
  justify-content: flex-end;
}

/* =========================================================
   PAGE HEADER LAYOUT
========================================================= */

.page-header-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.page-header-left {
  gap: 12px;
  display: flex;
  align-items: center;
}

.page-header-puzzle .hero-subline {
  margin: 0;
}

/* Icon Button */
.page-icon-link {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 50%;
  color: #111;
  text-decoration: none;
  transition:
    background-color 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 1.8s cubic-bezier(0.22, 1, 0.36, 1),
    color 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-icon-link i {
  font-size: 0.95rem;
}

.page-icon-link:hover {
  border-color: #111;
  color: #111;
}

/* Dunkle Seiten: Impressum / Datenschutz */
.page-impressum .page-icon-link,
.page-datenschutz .page-icon-link {
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}

.page-impressum .page-icon-link:hover,
.page-datenschutz .page-icon-link:hover {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}