/* =========================================================
   DATENSCHUTZ
   Datei: content-datenschutz.css
========================================================= */


/* =========================================================
   WRAP / INTRO
========================================================= */

          .datenschutz-wrap{
            max-width: 980px;
            margin: 0 auto;
            box-sizing: border-box;
          }

          .datenschutz-intro{
            margin: 0 0 calc(var(--menu-gap) * 1.1) 0;
            max-width: 75ch;
            color: rgba(255,255,255,0.88);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }


/* =========================================================
   GRID – Boxenlayout
========================================================= */

          .datenschutz-boxes{
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: calc(var(--menu-gap) * 1.15);
            row-gap: calc(var(--menu-gap) * 1.15);
          }

          .datenschutz-card-wide{
            grid-column: 1 / -1;
          }


/* =========================================================
   CARD – Look & Hover wie Seiteninfos (ohne translate)
========================================================= */

          .datenschutz-card{
            padding: calc(var(--menu-gap) * 1.05);
            border: 1px solid var(--color-box-border, rgba(255,255,255,0.28));
            border-radius: var(--radius-sm);
            background: var(--color-box-bg, rgba(0,0,0,0.14));
            transition: background 0.2s ease, border-color 0.2s ease;
          }

          .datenschutz-card:hover{
            background: var(--color-box-bg-strong, rgba(0,0,0,0.22));
            border-color: var(--color-box-border-strong, rgba(255,255,255,0.36));
          }


/* =========================================================
   TITEL & TEXT
========================================================= */

          .datenschutz-card h2{
            margin: 0 0 calc(var(--menu-gap) * 0.6) 0;
            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-section) * 0.9);
            line-height: 1.15;
            color: #fff;
          }

          .datenschutz-card p{
            margin: 0 0 calc(var(--menu-gap) * 0.9) 0;
            color: rgba(255,255,255,0.92);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }

          .datenschutz-card p:last-child{
            margin-bottom: 0;
          }

          .datenschutz-note{
            margin: 0 0 calc(var(--menu-gap) * 0.6) 0;
            color: rgba(255,255,255,0.82);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }


/* =========================================================
   DL – 2-Spalten (Labels links, Werte rechts)
========================================================= */

          .datenschutz-dl{
            margin: 0;
            display: grid;
            grid-template-columns: 150px 1fr;
            column-gap: 1.5rem;
            row-gap: 0.6rem;
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }

          /* Labels */
          .datenschutz-dl dt{
            margin: 0;
            font-weight: 900;
            color: rgba(255,255,255,0.88);
          }

          /* Werte: rechtsbündig (Name + Mail auf einer Linie sauber) */
          .datenschutz-dl dd{
            margin: 0;
            color: rgba(255,255,255,0.92);
            text-align: right;
          }

          /* keine Marker/Icons vor dd (falls global definiert) */
          .datenschutz-dl dd::before{
            content: none !important;
          }

          /* Links innerhalb der Werte */
          .datenschutz-dl dd a{
            display: inline-block;
            white-space: nowrap;     /* verhindert hässlichen Umbruch am Bindestrich */
            font-weight: 600;
            letter-spacing: 0.01em;
          }


/* =========================================================
   LINKS – Unterstrich aus der Mitte (wie Seiteninfos)
========================================================= */

          .datenschutz-card a{
            color: var(--color-link);
            text-decoration: none;
            position: relative;
            overflow-wrap: anywhere;
          }

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

          .datenschutz-card a:hover{
            color: var(--color-link-hover);
          }

          .datenschutz-card a:hover::after{
            width: 100%;
            left: 0;
          }

          /* Mail soll NICHT umbrechen – daher hier wieder normalisieren */
          .datenschutz-dl dd a{
            overflow-wrap: normal;
          }


/* =========================================================
   OPTIONAL: Externe Links Icon (nur wenn .extlink genutzt)
========================================================= */

          .extlink{
            position: relative;
            display: inline-block;
            padding-right: 1.35em;
          }

          .extlink[target="_blank"]::before{
            content: "⧉"; /* alternativ: "↗" */
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-55%);
            font-size: 0.85em;
            line-height: 1;
            opacity: 0.75;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
          }

          .extlink[target="_blank"]:hover::before{
            opacity: 1;
            transform: translateY(-55%) translate(2px, -2px);
          }


/* =========================================================
   RESPONSIVE – Mobile
========================================================= */

@media (max-width: 768px){

          /* Boxen untereinander */
          .datenschutz-boxes{
            grid-template-columns: 1fr;
          }

          .datenschutz-card-wide{
            grid-column: auto;
          }

          /* DL: Labels etwas schmaler, Werte bleiben rechtsbündig */
          .datenschutz-dl{
            grid-template-columns: 120px 1fr;
            column-gap: 1.1rem;
          }

          /* Wrap-Padding runter, weil .content schon padding hat */
          .datenschutz-wrap{
            padding-left: 0;
            padding-right: 0;
          }

          /* optional: Grid-Luft etwas kleiner (wirkt kompakter) */
          .datenschutz-boxes{
            row-gap: calc(var(--menu-gap) * 0.9);
          }
}


/* =========================================================
   Sehr kleine Screens: Werte linksbündig, damit nichts gequetscht wirkt
========================================================= */

@media (max-width: 420px){

          .datenschutz-dl{
            grid-template-columns: 1fr;
          }

          .datenschutz-dl dd{
            text-align: left;
          }

          /* Mail darf hier umbrechen, sonst läuft sie ggf. aus der Box */
          .datenschutz-dl dd a{
            white-space: normal;
            overflow-wrap: anywhere;
          }
}