@charset "UTF-8";
/*
Theme Name: Steffi Rohling
Description: Eigenständiges Block-Theme nach steffirohling.coach. Alle Inhalte werden im WordPress-Editor gepflegt.
Version: 0.2.0
Requires at least: 6.6
Requires PHP: 7.4
Author: Jannick Reymann
Text Domain: steffi-rohling
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
@property --sr-shrink {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes sr-header-shrink {
  from {
    --sr-shrink: 0;
  }
  to {
    --sr-shrink: 1;
  }
}
header:has(> .sr-header) {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
}

.sr-header {
  --sr-gutter: clamp(16px, 2.5vw, 44px);
  --sr-edge: max(
    var(--sr-gutter),
    (100% - var(--wp--style--global--content-size)) / 2
  );
  --sr-card-pad: calc(18px + 26px * (1 - var(--sr-shrink)));
  --sr-card-pad-start: calc(44px * (1 - var(--sr-shrink)));
  --sr-bar-top: clamp(80px, 10vw, 120px);
  --sr-bar-min: clamp(56px, 6vw, 68px);
  --sr-bar: calc(
    var(--sr-bar-top) + (var(--sr-bar-min) - var(--sr-bar-top)) *
      var(--sr-shrink)
  );
  --sr-logo-top: clamp(112px, 13vw, 168px);
  --sr-logo-min: clamp(78px, 8vw, 100px);
  --sr-logo-w: calc(
    var(--sr-logo-top) + (var(--sr-logo-min) - var(--sr-logo-top)) *
      var(--sr-shrink)
  );
  --sr-fade: calc((var(--sr-shrink) - 0.45) / 0.55);
  transition: --sr-shrink 0.35s ease;
  box-shadow: 0 calc(8px * var(--sr-shrink)) calc(28px * var(--sr-shrink)) rgb(0, 0, 0, calc(0.16 * var(--sr-shrink)));
}
.sr-header.is-scrolled {
  --sr-shrink: 1;
}

.sr-header .wp-block-group:has(.sr-header-inner) {
  max-width: none;
  margin-inline: 0;
}

.sr-header .sr-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
  max-width: none;
  margin-inline: 0;
  min-height: var(--sr-bar);
}

.sr-header .sr-logo {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: 0;
  margin-inline-start: var(--sr-edge);
  padding-inline: var(--sr-card-pad-start) var(--sr-card-pad);
  border-end-end-radius: calc(34px * (1 - var(--sr-shrink)));
}
.sr-header .sr-logo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border-end-end-radius: inherit;
  opacity: calc(1 - var(--sr-fade));
}
.sr-header .sr-logo a {
  position: relative;
  display: block;
  width: var(--sr-logo-w);
  aspect-ratio: 142.84/73.22;
}
.sr-header .sr-logo a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/images/logo-white.svg") left center/contain no-repeat;
  opacity: var(--sr-fade);
}
.sr-header .sr-logo img {
  display: block;
  width: 100%;
  height: auto;
  opacity: calc(1 - var(--sr-fade));
}

.sr-header nav.wp-block-navigation {
  padding-inline-end: var(--sr-edge);
}

.sr-header .wp-block-navigation {
  letter-spacing: 0.08em;
}
.sr-header .wp-block-navigation,
.sr-header .wp-block-navigation .wp-block-navigation__container {
  gap: clamp(18px, 2vw, 34px);
}
.sr-header .wp-block-navigation a {
  text-decoration: none;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 2px;
}
.sr-header .wp-block-navigation a:hover,
.sr-header .wp-block-navigation a:focus-visible,
.sr-header .wp-block-navigation .current-menu-item > a,
.sr-header .wp-block-navigation .current_page_item > a {
  text-decoration: underline;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .sr-header {
      animation: sr-header-shrink linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 160px;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sr-header {
    transition: none;
  }
}
.sr-themen .wp-block-accordion-heading {
  color: var(--wp--preset--color--white);
  margin-block: 0;
}
.sr-themen .wp-block-accordion-heading__toggle {
  padding: 18px clamp(20px, 3vw, 50px);
  gap: var(--wp--preset--spacing--50);
}
.sr-themen .wp-block-accordion-heading__toggle-icon {
  --sr-icon: 40px;
  position: relative;
  flex: none;
  width: var(--sr-icon);
  height: var(--sr-icon);
  font-size: 0;
}
.sr-themen .wp-block-accordion-heading__toggle-icon::before, .sr-themen .wp-block-accordion-heading__toggle-icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: calc(var(--sr-icon) * 14 / 24);
  height: calc(var(--sr-icon) * 2 / 24);
  border-radius: 999px;
  background: currentColor;
  translate: -50% -50%;
}
.sr-themen .wp-block-accordion-heading__toggle-icon::after {
  rotate: 90deg;
}
.sr-themen .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
  transform: none;
}
.sr-themen .wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after {
  scale: 0 1;
}
.sr-themen .wp-block-accordion-panel {
  padding: 0;
}
.sr-themen .wp-block-accordion-panel > * {
  margin-inline: clamp(20px, 3vw, 50px);
}
.sr-themen .wp-block-accordion-panel > :first-child {
  margin-block-start: 20px;
}
.sr-themen .wp-block-accordion-panel > :last-child {
  margin-block-end: 25px;
}
.sr-themen .wp-block-accordion-panel[hidden] {
  transition: content-visibility 0.3s allow-discrete;
}
.sr-themen .wp-block-accordion-item + .wp-block-accordion-item {
  margin-block-start: 20px;
}
.sr-themen .wp-block-accordion-item {
  display: grid;
  grid-template-rows: min-content 0fr;
}
.sr-themen .wp-block-accordion-item.is-open {
  grid-template-rows: min-content 1fr;
}
.sr-themen .wp-block-accordion-item > .wp-block-accordion-heading {
  align-self: start;
}
.sr-themen .wp-block-accordion-panel {
  overflow: hidden;
  min-height: 0;
}

main {
  margin-top: 0 !important;
}