/* =========================================================
   STARTSEITE (HERO + NEWS-TICKER)
   Datei: content-startseite.css
   Inhalt: Nur Startseite oben (Hero + Ticker)
========================================================= */


/* =========================================================
   0) STARTSEITE – VARIABLEN
========================================================= */

          :root{
            --ticker-speed: 45s;
            --ticker-speed-mobile: 70s;
            --ticker-speed-reduced: 80s;
          }


/* =========================================================
   1) HERO – WILLKOMMEN
========================================================= */

    /* Optik: Farben, Typo, Borders, Shadows, States) */
          .hero{
            padding: 0;
            background: none;
          }

          .hero-image{
            position: relative;
            margin: 0;
            padding: 0;
            line-height: 0;
          }

          .hero-image picture{
            display: block;
          }

          .hero-image img{
            display: block;
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: var(--radius-sm);
          }

          .hero-image-overlay{
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15));
          }

          .hero-title{
            font-family: var(--font-style-headline);
            font-size: var(--font-size-headline-main);
            line-height: var(--line-height-headline-lg);
            margin: 0 0 calc(var(--menu-gap) * 1.75) 0;
            color: #fff;
            font-weight: 500;
          }

          .hero-text{
            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            margin: 0 0 calc(var(--menu-gap) / 2) 0;
            color: rgba(255,255,255,0.92);

            hyphens: auto;
            overflow-wrap: break-word;
          }

          .hero-signature{
            font-family: var(--font-style-text);
            font-size: calc(var(--font-size-content) * 0.95);
            line-height: var(--line-height-text);
            margin-top: calc(var(--menu-gap) * 1.25);
            color: rgba(255,255,255,0.85);
            font-style: italic;
          }

          .hero-signature strong{
            font-weight: 600;
            color: #fff;
          }

          /* Hero Links */
          .hero-text a,
          .hero-link{
            position: relative;
            color: var(--color-link);
            text-decoration: none;
            transition: color 0.2s ease;
          }

          .hero-text a::after,
          .hero-link::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: currentColor;
            transition: width 0.25s ease, left 0.25s ease;
          }

          .hero-text a:hover,
          .hero-link:hover{
            color: var(--color-link-hover);
          }

          .hero-text a:hover::after,
          .hero-link:hover::after{
            width: 100%;
            left: 0;
          }


    /* Struktur / Grid / Flow / Responsive) */
          .hero{
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: var(--menu-gap);
            align-items: start;
          }

          .hero-image{
            width: 100%;
          }

          .hero-content{
            margin: 0;
            padding: 0;
            min-width: 0;
          }


/* =========================================================
   2) NEWS TICKER – Box Layout (Grid + Abstände)
   (Grund-Box-Optik kommt global aus style.css)
========================================================= */

    /* Struktur / Grid / Flow / Responsive) */
          .news-ticker{
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: calc(var(--menu-gap) / 2);

            margin-top: calc(var(--menu-gap) / 2);
            margin-bottom: var(--menu-gap);

            overflow: hidden;
            position: relative;
          }

          .news-ticker .ticker-label{
            align-self: stretch;
            position: relative;
            z-index: 2;
          }

          .ticker-wrapper{
            position: relative;
            z-index: 1;

            min-width: 0;
            overflow: hidden;
            white-space: nowrap;

            padding-left: calc(var(--menu-gap) / 1.2);
            padding-right: calc(var(--menu-gap) / 1.2);
            padding-top: calc(var(--menu-gap) / 2);
            padding-bottom: calc(var(--menu-gap) / 4);
          }


/* =========================================================
   3) NEWS TICKER – Items + Animation
========================================================= */

    /* Optik: Farben, Typo, Borders, Shadows, States) */
          .ticker-item{
            position: relative;
            padding-right: calc(var(--menu-gap) * 2);

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.95);
            line-height: var(--line-height-ui);
            white-space: nowrap;

            color: rgba(255,255,255,0.85);
          }

          .ticker-item::after{
            content: "•";
            margin-left: var(--menu-gap);
            color: rgba(255,255,255,0.55);
          }

          .ticker-item:last-child::after{
            content: "";
          }

          .ticker-live{
            color: #ff4d4d;
            font-weight: 700;
          }

          .ticker-live strong{
            color: #ff4d4d;
          }

    /* Struktur / Grid / Flow / Responsive) */
          .ticker-track{
            display: inline-flex;
            align-items: center;
            width: max-content;

            animation: ticker-scroll var(--ticker-speed) linear infinite;

            will-change: transform;
            transform: translateZ(0);
          }

          .ticker-wrapper:hover .ticker-track{
            animation-play-state: paused;
          }

          .news-ticker .ticker-track::after{
            content: "";
            flex: 0 0 calc(var(--menu-gap) / 1.2);
          }

          @keyframes ticker-scroll{
            from{ transform: translateX(0); }
            to{ transform: translateX(-50%); }
          }




/* =========================================================
   STARTSEITE – INFOBEREICH
========================================================= */

          .home-about{
            margin: calc(var(--menu-gap) * 1.6) auto 0 auto;
            padding: calc(var(--menu-gap) * 1.05);

            max-width: 900px; /* finale Breite */

            border: 1px solid rgba(255,255,255,0.22);
            border-radius: var(--radius-sm);
            background: rgba(0,0,0,0.12);

            text-align: center;
            overflow: hidden; /* wichtig für float */

            transition: background .2s ease, border-color .2s ease;
          }

          .home-about:hover{
            background: rgba(0,0,0,0.18);
            border-color: rgba(255,255,255,0.32);
          }


          /* ---------- Überschrift ---------- */

          .home-about h2{
            margin: 0 0 12px 0;

            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-section) * 0.9);
            color: #fff;
          }


          /* ---------- Text ---------- */

          .home-about p{
            margin: 0 auto 0.9rem auto;

            max-width: 61ch; /* sorgt für gute Lesbarkeit */

            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            color: rgba(255,255,255,0.92);

            text-align: start;

            /* Silbentrennung für besseren Textfluss */
            hyphens: auto;
            -webkit-hyphens: auto;
            -ms-hyphens: auto;
          }

          .home-about p + p{
            margin-top: 1.1rem;
          }


/* =========================================================
   STARTSEITE – RUNDES BILD
========================================================= */

/* ---------- Wrapper (Position + Form + Rotation) ---------- */

          .home-about-image-wrap{
            float: right;

            width: 210px;
            height: 210px;

            margin: 0 0 12px 7px;
            padding: 6px;

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

            border-radius: 50%;

            background: var(--color-secondary);
            border: 1px solid var(--color-content-bg);

            box-shadow: 0 10px 24px rgba(0,0,0,0.45);

            /* Text fließt um den Kreis */
            shape-outside: circle();
            -webkit-shape-outside: circle();

            /* leichte Drehung */
            transform: rotate(7deg);

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


          /* ---------- Bild ---------- */

          .home-about-image-wrap img{
            width: 100%;
            height: 100%;
            object-fit: cover;

            border-radius: 50%;
          }


          /* ---------- Hover-Effekt ---------- */

          .home-about-image-wrap:hover{
            transform: rotate(0deg) scale(1.05);
            box-shadow: 0 16px 36px rgba(0,0,0,0.5);
          }


/* =========================================================
   4) REDUCE MOTION – langsamer statt aus
========================================================= */

@media (prefers-reduced-motion: reduce){

          .ticker-track{
            animation-duration: var(--ticker-speed-reduced) !important;
          }

}


/* =========================================================
   5) RESPONSIVE – Feinschliff (Hero + Ticker)
========================================================= */

@media (max-width: 768px){

          .hero{
            grid-template-columns: 1fr;
            gap: calc(var(--menu-gap) / 1.25);
          }

          .hero-image{
            width: 100%;
          }

          .ticker-track{
            animation-duration: var(--ticker-speed-mobile);
          }

}


/* =========================================================
   6) TICKER – Override (auch bei "Reduce Motion")
   Nur wenn body.force-ticker gesetzt ist
========================================================= */

          body.force-ticker .ticker-track{
            animation: ticker-scroll var(--ticker-speed) linear infinite !important;
          }


/* =========================================================
   STARTSEITE – INFOBEREICH MOBILE
========================================================= */

@media (max-width: 768px){

        .home-about{
          padding: calc(var(--menu-gap) * 0.9);
          text-align: center; /* bleibt zentriert */
        }

        .home-about p{
          margin: 0 auto 0.9rem auto; /* wichtig für Zentrierung */
          max-width: 61ch; /* bleibt erhalten */

          text-align: start; /* Text bleibt lesbar */
        }

        .home-about p + p{
          margin-top: 0.95rem;
        }


    /* ---------- Bild ---------- */

        .home-about-image-wrap{
          float: none;

          width: 160px;
          height: 160px;

          margin: 0 auto 16px auto;

          shape-outside: none;
          -webkit-shape-outside: none;

          transform: none; /* keine Drehung auf Mobile */
        }

        .home-about-image-wrap:hover{
          transform: scale(1.03);
        }

}