/* Osmo Supply — Button with Rotating Icon. Original animation and targeting. */
.btn-group {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  justify-content: center;
  display: flex;
}
.btn-icon-link {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  color: var(--btn-surface);
  font-size: 1em;
  line-height: 1.2;
  text-decoration: none;
  display: flex;
}
.btn-icon-icon {
  z-index: 1;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  display: flex;
  position: relative;
}
.btn-icon-icon__bg {
  background-color: currentColor;
  border-radius: .125em;
  width: 100%;
  height: 100%;
  position: absolute;
}
.btn-icon-icon__wrap {
  color: var(--btn-surface);
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}
.btn-icon-icon__wrap.color--white { color: #fff; }
.btn-icon-icon__list {
  flex: none;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  display: flex;
}
.btn-icon-icon__arrow {
  flex: none;
  width: 1em;
  height: 100%;
  padding: .2em;
}
.btn-icon-content {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  color: var(--btn-text);
  background-color: var(--btn-surface);
  border-radius: .25em;
  justify-content: flex-start;
  align-items: center;
  padding: 0.823529em 1.588235em;
  display: flex;
  position: relative;
  overflow: hidden;
}
.btn-icon-content__text { font-size: .875em; }
.btn-icon-content__mask {
  z-index: 1;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}
.btn-icon-content__bg {
  z-index: 0;
  background-color: var(--btn-wipe);
  width: 120%;
  height: 100%;
  position: absolute;
  bottom: 0%;
  left: -10%;
  transform: translate(0, 175%) rotate(15deg);
}
[data-button-anim-target]{
  transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1);
}
.btn-icon-content__text{
  --text-duplicate-distance: 1.5em;
  text-shadow: 0px var(--text-duplicate-distance) currentColor;
}
@media (hover:hover) and (pointer:fine){
  .btn-icon-link:hover .btn-icon-content__text{ transform: translate(0px, calc(-1 * var(--text-duplicate-distance))); }
  .btn-icon-link:hover .btn-icon-icon__bg{ transform: rotate(90deg); }
  .btn-icon-link:hover .btn-icon-icon__arrow{ transform: translate(200%, 0px); }
  .btn-icon-link:hover .btn-icon-content__bg{ transform: translate(0px, 0%) rotate(0deg); }
}

/* Integration only: native control reset, Wepresso colors and page placement.
   Osmo owns all internal sizes, spacing, corners and animation transforms. */
.btn-icon-link{
  --btn-surface:var(--coral);--btn-text:#fff;--btn-wipe:#e95c36;
  padding:0;border:0;border-radius:0;background:transparent;
  font-family:inherit;font-weight:inherit;text-align:inherit;cursor:pointer;
  align-items:center;width:fit-content;max-width:100%;
}
.btn-icon-link:hover{background:transparent;transform:none}
.btn-icon-link.dark{--btn-surface:var(--ink);--btn-text:var(--cream);--btn-wipe:#493334}
.btn-icon-link.blue{--btn-surface:var(--blue);--btn-text:var(--ink);--btn-wipe:#83b8ca}
.btn-icon-link.outline{--btn-surface:var(--cream);--btn-text:var(--ink);--btn-wipe:#e7dccc}
/* Zwei Varianten, sonst nichts: primary fuer die Paketbuchung,
   secondary fuer jede andere Handlung. Beide nutzen --coral-deep,
   weil das helle Marken-Koral als Textfarbe nur 3.03:1 erreicht. */
/* Beschriftung wie im Entwurf: versal, fett, leicht gesperrt.
   Die Grossschreibung kommt aus der CSS, damit Screenreader den
   Text normal vorlesen statt ihn zu buchstabieren. */
.btn-icon-link.btn-primary .btn-icon-content__text,
.btn-icon-link.btn-secondary .btn-icon-content__text{
  text-transform:uppercase;font-weight:600;letter-spacing:.04em;
}
/* Geometrie nach Eddis Entwurf. Bewusst eine Abweichung von den
   Osmo-Vorgaben: rundere Ecken, groesserer Iconkasten. Alle Werte in em,
   damit der Button ueber font-size skalierbar bleibt.
   Zum Nachjustieren reichen diese drei Zeilen. */
.btn-icon-link.btn-primary,.btn-icon-link.btn-secondary{
  --btn-radius:.5em;      /* Eckenradius der Flaeche */
  --btn-icon-size:1.25em; /* Kantenlaenge des Iconkastens */
  --btn-icon-radius:.25em;/* Eckenradius des Iconkastens */
}
.btn-icon-link.btn-primary .btn-icon-content,
.btn-icon-link.btn-secondary .btn-icon-content{border-radius:var(--btn-radius)}
.btn-icon-link.btn-primary .btn-icon-icon,
.btn-icon-link.btn-secondary .btn-icon-icon{width:var(--btn-icon-size);height:var(--btn-icon-size)}
.btn-icon-link.btn-primary .btn-icon-icon__bg,
.btn-icon-link.btn-secondary .btn-icon-icon__bg{border-radius:var(--btn-icon-radius)}
.btn-icon-link.btn-primary{--btn-surface:var(--coral-deep);--btn-text:#fff;--btn-wipe:#9c3818}
.btn-icon-link.btn-secondary{--btn-surface:transparent;--btn-text:var(--coral-deep);--btn-wipe:rgba(184,68,32,.12)}
/* Rand als innerer Schatten: veraendert weder Groesse noch Radius,
   die Osmo-Geometrie bleibt unangetastet. */
/* Outline: die Flaeche bleibt leer, der Rand traegt die Farbe.
   currentColor ist --btn-text, damit Rand und Schrift nie auseinanderlaufen. */
.btn-icon-link.btn-secondary .btn-icon-content{box-shadow:inset 0 0 0 2px currentColor}
/* Der Pfeil nimmt sonst --btn-surface an und waere bei transparent unsichtbar. */
.btn-icon-link.btn-secondary .btn-icon-icon__wrap{color:var(--cream)}
.btn-icon-link[hidden]{display:none}
.founder-copy .btn-icon-link{margin-top:12px}
.closing>.btn-icon-link{margin-left:auto;margin-right:auto}
.hero-actions .btn-icon-link{flex-shrink:0}
@media(max-width:760px){.hero-actions{gap:10px}.btn-icon-link.nav-cta{margin-left:auto}}
@media(prefers-reduced-motion:reduce){
  .btn-icon-link [data-button-anim-target]{transition:none;transform:none!important}
  .btn-icon-link .btn-icon-content__bg{display:none}
}

@media(max-width:420px){.hero-actions{font-size:15px}}
@media(max-width:360px){.hero-actions{font-size:14px}}