/* =========================================================
   IMPRESSUM
   Datei: content-impressum.css
========================================================= */


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

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

          .impressum-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
========================================================= */

          .impressum-boxes{
            display: grid;
            grid-template-columns: 1fr 1fr;  /* 2 Spalten Desktop */
            column-gap: calc(var(--menu-gap) * 1.15);
            row-gap: calc(var(--menu-gap) * 1.15);
            margin-top: var(--menu-gap);
          }

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

          /* Extra Luft über der "Hinweis zur Fanseite"-Box */
          .impressum-fanseite{
            margin-top: calc(var(--menu-gap) * 2.7);
          }


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

          .impressum-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;
          }

          .impressum-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
========================================================= */

          .impressum-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);
            color: #fff;
          }

          .impressum-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);
          }

          .impressum-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);
          }

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


/* =========================================================
   DL – 2-Spalten Aufbau (dt links, dd rechts)
========================================================= */

          .impressum-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 */
          .impressum-dl dt{
            margin: 0;
            font-weight: 900;
            color: rgba(255,255,255,0.88);
          }

          /* Werte */
          .impressum-dl dd{
            margin: 0;
            color: rgba(255,255,255,0.92);
          }

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

          /* Adresse: zweite Zeile enger (Straße + PLZ/Ort) */
          .impressum-dl dd + dd{
            grid-column: 2;
            margin-top: -0.45rem;
          }


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

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

          .impressum-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;
          }

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

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

          /* Mail/Telefon sollen nicht "komisch" umbrechen */
          .impressum-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 */
          .impressum-boxes{
            grid-template-columns: 1fr;
          }

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

          /* DL bleibt zweispaltig, aber etwas schmalere Labels */
          .impressum-dl{
            grid-template-columns: 120px 1fr;
            column-gap: 1.1rem;
          }

          /* Adresse zweite Zeile: etwas weniger "ziehen" */
          .impressum-dl dd + dd{
            margin-top: -0.25rem;
          }
}

/* Sehr kleine Screens: DL einspaltig + Mail darf umbrechen */
@media (max-width: 420px){

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

          .impressum-dl dd + dd{
            grid-column: auto;
          }

          .impressum-dl dd a{
            overflow-wrap: anywhere;
            white-space: normal;
          }
}