/*
 Theme Name:   FundsXML Theme
 Theme URI:    https://www.fundsxml.org
 Description:  Theme for fundsxml.org
 Author:       Karl Kauc
 Author URI:   https://www.fundsxml.org
 Template:     twentytwentyfive
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  fundsxml
*/

:root {
  --wp--border-radius--default: 12px; /* Ändern Sie den Wert nach Ihren Wünschen */
}

.wp-block-button a {
    border-radius: var(--wp--border-radius--default);
}

h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    background: linear-gradient(to right, rgb(59, 130, 246), rgb(20, 184, 166)); 
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
}

header {
  /* Macht das Element "klebrig" */
  position: sticky;

  /* Bestimmt, an welcher Position es kleben bleibt (0px vom oberen Rand) */
  top: 0;

  /* Stellt sicher, dass der Header über anderen Elementen liegt */
  z-index: 1000;

  /* Optional: Fügt eine Hintergrundfarbe hinzu, damit der Inhalt nicht durchscheint */
  background-color: #ffffff;

  border-bottom: 1px solid #e5e7eb;
}

/* container border effekt */
/* Dieser Container hat einen Rand, der hinter dem Inhalt liegt */
/* Der Rand hat eine abgerundete Form und einen Farbverlauf */
/* Der Inhalt hat eine innere Abrundung, die kleiner ist als die äußere Abrundung */
/* Der Rand hat eine Maske, die verhindert, dass er an den Ecken sichtbar ist */
/* Der Rand hat eine Größe, die durch eine CSS-Variable gesteuert wird */
/* Der Rand hat eine Lücke an den Ecken, die durch eine CSS-Variable gesteuert wird */
.outer-container {
    /* --- Hier kannst du den Effekt anpassen --- */
    --container-border-size: 1px;
    --container-corner-gap: 25px;
    --container-gradient: linear-gradient(to right, rgb(59, 130, 246), rgb(20, 184, 166));
    --container-border-radius: 24px;

    position: relative;
    /* Wichtig für das Pseudo-Element */
    background: white;
    color: black;
    padding: 2rem;
    border-radius: calc(var(--container-border-radius) - var(--container-border-size));
    /* Innere Abrundung */
}

/* Das Pseudo-Element erzeugt den Rand HINTER dem Inhalts-Container */
.outer-container::before {
    content: '';
    /* war \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' */
    position: absolute;
    /* Positioniert das Pseudo-Element, um den Rand zu bilden */
    inset: calc(-1 * var(--container-border-size));
    z-index: -1;
    /* Platziert es hinter dem Haupt-Container */

    /* Die Logik für den Rand wird hierher verschoben */
    background: var(--container-gradient);
    border-radius: var(--container-border-radius);
    /* Äußere Abrundung */

    /* Die Maske wird nur auf das Pseudo-Element (den Rand) angewendet */
    -webkit-mask:
        linear-gradient(to right, transparent, white var(--container-corner-gap), white calc(100% - var(--container-corner-gap)), transparent) 0 0 / 100% var(--container-border-size) no-repeat,
        linear-gradient(to right, transparent, white var(--container-corner-gap), white calc(100% - var(--container-corner-gap)), transparent) 0 100% / 100% var(--container-border-size) no-repeat,
        linear-gradient(to bottom, transparent, white var(--container-corner-gap), white calc(100% - var(--container-corner-gap)), transparent) 0 0 / var(--container-border-size) 100% no-repeat,
        linear-gradient(to bottom, transparent, white var(--container-corner-gap), white calc(100% - var(--container-corner-gap)), transparent) 100% 0 / var(--container-border-size) 100% no-repeat;
    mask:
        linear-gradient(to right, transparent, white var(--container-corner-gap), white calc(100% - var(--container-corner-gap)), transparent) 0 0 / 100% var(--container-border-size) no-repeat,
        linear-gradient(to right, transparent, white var(--container-corner-gap), white calc(100% - var(--container-corner-gap)), transparent) 0 100% / 100% var(--container-border-size) no-repeat,
        linear-gradient(to bottom, transparent, white var(--container-corner-gap), white calc(100% - var(--container-corner-gap)), transparent) 0 0 / var(--container-border-size) 100% no-repeat,
        linear-gradient(to bottom, transparent, white var(--container-corner-gap), white calc(100% - var(--container-corner-gap)), transparent) 100% 0 / var(--container-border-size) 100% no-repeat;
}

/* liste mit SVG-Grafik als Aufzählungszeichen */
/* Stile für alle Listen mit der Klasse .custom-list */
.custom-list {
    list-style: none; /* Entfernt die Standard-Aufzählungszeichen */
    padding: 0;
    margin: 0;
}

/* Stile für die Listeneinträge innerhalb von .custom-list */
.custom-list li {
    position: relative;
    /* Der Abstand links muss größer sein als das Symbol,
       um Überlappungen zu vermeiden. */
    padding-left: 30px; 
    margin-bottom: 10px;
}

/* download buttons - gesamte größe */
.button-grow a {
    flex-grow: 1; 
    padding: 5px;
}

.button-grow .wp-block-button__link {
    border-radius: 6px;
    border-style: solid;
    border-color: #333;
    border-width: 1px;
}