/* -- 
1. Sicherheit 
2. globale Farben
3. 

--*/

/* ------------------------------------------------------------------
             1. Beginn: Sicherheit 
------------------------------------------------------------------ */

        /* -- Honeypot (unsichtbar für Menschen) -- */
        .honeypot {
            position: absolute;
            left: -9999px;
            top: 0;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }


/* ------------------------------------------------------------------
              Ende: Sicherheit 
------------------------------------------------------------------ */



/* ------------------------------------------------------------------
              2. Beginn: Definition der globalen Farben 
------------------------------------------------------------------ */
        :root {
          --brand-dark:        #2B2B2B; /* charcoal / very dark grey
                                           Used for: thin dividers (.page-title-divider, .thin-sep),
                                           the slim date bar background (.date-bar),
                                           nav hover underline, strong borders when needed */

          --brand-gray:        #666666; /* medium grey
                                           Used for: muted body copy (e.g., .article-meta, image captions),
                                           secondary text in footer columns */

          --brand-light-gray:  #F5F0E6; /* light beige / off-white
                                           Used for: beige “card” surfaces (.article-card, .focus-card),
                                           header/footer background blocks (.site-header, .site-footer),
                                           contact intro panel (.contact-intro) */

          --brand-border:      #DDDDDD; /* light grey (borders)
                                           Used for: subtle separators (e.g., .article-meta top border),
                                           input borders on forms, soft grid outlines */

          --brand-text:        #2B2B2B; /* charcoal / very dark grey
                                           Used for: default text colour across the site,
                                           headlines and links (links inherit to stay black) */

          --brand-background:  #FFFBF7; /* warm off-white
                                           Used for: overall page background (body),
                                           image canvases, form fields background */

          --brand-accent:      #4A3C30; /* dark brown / coffee
                                           Used for: accent states if desired (e.g., button hover/focus),
                                           small decorative lines, emphasised details */
                                           
          --button-hover:      #1a1a1a;  /* fast schwarz, Farbe die buttons beim Mouseover-Effekt annehmen */                                 
                                           
          --linkedin:          #1a73e8; /* LinkedIn Blau */
          
          --xing:              #005A5F; /* Xing Grau */
        } 
        
/* ------------------------------------------------------------------
              Ende: Definition der globalen Farben 
------------------------------------------------------------------ */
 
 
/* ------------------------------------------------------------------
             3. Beginn: Body 
------------------------------------------------------------------ */ 
        * {        /* Margin/ padding reset – Browsers add default spacing (e.g., margins on h1, p, ul). Resetting to 0 makes layouts predictable across browsers, but all margins have to be added individually. */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Miller FT', Georgia, serif;
            color: var(--brand-text);
            background-color: var(--brand-background);
            line-height: 1.6;
            font-size: clamp(15px, 4vw, 18px);   
            
                      /* Erklärung zum obenstehend verwendeten clamp
                      Erster Wert = Minimum → 15px So klein darf die Schrift nie werden – selbst wenn 4vw darunter liegt.
                      Zweiter Wert = bevorzugter (flüssiger) Wert → 4vw, 1vw = 1 % der Viewport-Breite. Die Schrift wächst/schrumpft also mit der Fensterbreite.
                      Dritter Wert = Maximum → 18px, So groß darf die Schrift höchstens werden – selbst wenn 4vw darüber läge.
                       */
            
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
        }
            /* Breathing space for every paragraph */
        p {
            /* Adjust the values to taste – 1.2rem ≈ 19 px on a 16 px base */
            margin-top:    1.2rem;
            margin-bottom: 1.2rem;
        }
        
/* ------------------------------------------------------------------
             Ende: Body 
------------------------------------------------------------------ */ 


/* ------------------------------------------------------------------
             4. Beginn: Header 
------------------------------------------------------------------ */ 

        .header-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
        }
        
        /* Language Selector */
        .language-bar {
            background-color: var(--brand-background);
            border-bottom: 1px solid var(--brand-border);
            padding: 12px 0;
        }
        .language-selector {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 20px;
        }
        .language-label {
            font-family: 'Metric Web', Arial, sans-serif;
            font-size: 13px;
            color: var(--brand-dark);
            font-weight: 600;
        }
        .language-dropdown {
            font-family: 'Metric Web', Arial, sans-serif;
            font-size: 13px;
            padding: 6px 12px;
            border: 1px solid var(--brand-border);
            background: white;
            color: var(--brand-dark);
            border-radius: 0;
            cursor: pointer;
        }

        .top-bar {
            background-color: var(--brand-dark);
            color: white;
            padding: 8px 0;
            font-size: 12px;
            font-family: 'Metric Web', Arial, sans-serif;
        }
        .top-bar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .main-header {
            padding: 25px 0;
            border-bottom: 1px solid var(--brand-border);
            text-align: center;
            background-color: var(--brand-light-gray);
            margin-bottom: 0;
        }
        .logo-main {
            font-family: 'Times New Roman', serif;
            font-size: 32px;
            font-weight: normal;
            color: var(--brand-dark);
            letter-spacing: 2px;
            margin: 0;
            line-height: 1.3;
            width: 100%;
            text-align: center;
        }
        .logo-tagline {
            font-size: 16px;
            color: var(--brand-dark);
            font-family: 'Times New Roman', serif;
            letter-spacing: 1px;
            margin: 0;
            line-height: 1.4;
            width: 100%;
            text-align: center;
        }

        
        /* Navigation */
        .main-nav {
            border-bottom: 1px solid var(--brand-border);
            margin-bottom: 40px;
            background-color: var(--brand-light-gray);
        }
        .nav-list {
            display: flex;
            list-style: none;
            justify-content: center;
            gap: 25px;
            padding: 15px 0;
        }
        .nav-list a {
            text-decoration: none;
            color: var(--brand-dark);
            font-family: 'Metric Web', Arial, sans-serif;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .nav-list a:hover {
            color: var(--brand-dark);
            text-decoration: underline;
        }

/* ------------------------------------------------------------------
              Ende: Header 
------------------------------------------------------------------ */


/* ------------------------------------------------------------------
              5. Beginn: Globale Button-Regeln 
------------------------------------------------------------------ */


/* Kontakt-Blöcke zentrieren (Überschriften, E-Mail-Zeile, CTA-Reihen) */
.contact-method {
  text-align: center;
}

/* E-Mail-Adresse über dem Button: eigene Zeile, volle Breite */
.contact-method .email-link {
  display: block;              /* trennt Adresse vom Button */
  width: 100%;
  margin: 8px 0 12px;
  text-decoration: none;
}

/* Gemeinsame Basis für ALLE CTAs: .button + Formular-Submit */
.button,
.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  min-height: 48px;
  font: 600 15px/1.2 'Metric Web', Arial, sans-serif;
  color: #fff;
  background: var(--brand-dark);
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease;
  box-sizing: border-box;      /* Padding zählt in die Außenbreite */
  -webkit-appearance: none;
  appearance: none;
}
.button:hover, .button:focus,
.form-submit:hover, .form-submit:focus {
  background: #1a1a1a;
}
/* A11y: sichtbarer Tastaturfokus */
.button:focus-visible,
.form-submit:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Einheitlicher Reihen-Container (für E-Mail-CTA und Social-CTAs) */
.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;             /* erlaubt Umbruch statt Schrumpfen */
  margin-top: 4px;
}

/* Alle Buttons in CTA-Reihen als „Kacheln“ (Desktop/Tablet) */
.cta-row .button {
  flex: 0 0 240px;             /* NICHT wachsen, NICHT schrumpfen → bricht um */
  min-height: 48px;
  text-align: center;          /* falls Label zweizeilig */
}

/* Social-Farben (bei Bedarf anpassen) */
.social-button.linkedin { background: var(--brand-dark); }  /* dunkelgrau */
.social-button.xing     { background: #005A5F; }

/* Formular-Submit mittig im Formular (unabhängig von Tabellen-Layout) */
.contact-section .form-submit {
  display: block;              /* macht margin:auto wirksam */
  margin: 16px auto 0;         /* zentriert in der Zelle/Spalte */
  min-width: 240px;
}

/* Index-CTA (Startseite) – zentriert & etwas breiter */
#contactButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 24px auto 0;         /* Luft nach oben + zentriert */
  min-width: 260px;            /* gefühlt breiterer CTA */
  padding: 14px 26px;
  box-sizing: border-box;
}

/* Desktop-Optik: größere Paddings/Schrift */
@media (min-width: 769px) {
  .button,
  .form-submit {
    padding: 14px 24px;
    font-size: 16px;
  }
}

/* Phone (≤480px): Adresse ausblenden, CTAs vollbreit stacken */
@media (max-width: 480px) {
  .contact-method .email-link { display: none; }

  /* Alle Buttons in CTA-Reihen: volle Breite */
  .cta-row .button {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Submit ebenfalls vollbreit angenehm klickbar */
  .form-submit {
    width: 100%;
    justify-content: center;
  }
}


        
/* ------------------------------------------------------------------
                Ende: Globale Button-Regeln 
------------------------------------------------------------------ */

/* ------------------------------------------------------------------
              Beginn: Hero Article 
------------------------------------------------------------------ */

/* Hero Article Style */
        .hero-article {
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 1px solid var(--brand-border);
        }
        .hero-headline {
            font-size: 28px;
            font-weight: bold;
            line-height: 1.3;
            margin-bottom: 20px;
            letter-spacing: -0.3px;
            color: var(--brand-dark);
        }
        .hero-subheadline {
            font-size: 22px;
            color: var(--brand-gray);
            font-weight: normal;
            line-height: 1.4;
            margin-bottom: 25px;
        }
        
        .hero-prose { 
            display: grid;
            gap: 14px;            /* adds space between paragraphs */
            line-height: 1.7;
            max-width: 700px;
        }

               /* Indent the bullet list inside the hero text */
        .hero-text-content ul {
                                        /* You can use margin‑left or padding‑left – both work */
            margin-left: 2rem;          /* pushes the whole list right */
                                        /* optional: give a little extra left padding for the bullets themselves */
            padding-left: 0.5rem;
        }

                /* Vertical spacing for each bullet point */
        .hero-text-content ul li {
                /* Adjust the size to your taste – 0.6 rem ≈ 9 px on a 16 px base */
            margin-top:    0.6rem;   /* space above the bullet */
            margin-bottom: 0.6rem;   /* space below the bullet */

                /* Optional: a little left padding so the bullet itself isn’t flush
                   against the left edge (especially useful if you also indented the list). */
            padding-left: 0.3rem;
        }

              /* For the spacing to be different on very small screens, an added media query: */
        @media (max-width: 480px) {
            .hero-text-content ul li {
                margin-top:    0.4rem;
                margin-bottom: 0.4rem;
            }
        }

/* Hero Content with Quote Section */
        .hero-content-wrapper {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 40px;
            align-items: start;
            margin-bottom: 30px;
        }
        .hero-text-content {
            padding-right: 20px;
        }
        .quote-section {
            background-color: var(--brand-light-gray);
            padding: 25px;
            border-radius: 8px;
            position: relative;
            align-self: start;
        }
        .quote-portrait {
            width: 100%;
            margin: 0 auto 20px;
            overflow: hidden;
        }

        .quote-portrait img {
            max-width:80%;
            height:auto;
            display:block;
            margin:0 auto
        }
        .quote-text {
            font-style: italic;
            font-size: 16px;
            line-height: 1.5;
            color: var(--brand-dark);
            text-align: center;
            margin-bottom: 15px;
        }
        .quote-author {
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            color: var(--brand-dark);
        }
        .quote-degree {
            text-align:  center;        /* keep it centred under the picture */
            font-size:   13px;          
            color:       var(--brand-gray);          
            margin-top:  0.1rem;        /* space between name and the degree */
            margin-bottom: 0.1rem;      /* space before the quote text starts */

        }
        .quote-role {
            text-align: center;
            font-size: 13px;
            color: var(--brand-gray);
            font-style: italic;
        }

        
        
/* Services Section */
        .services-section {
            background-color: var(--brand-light-gray);
            padding: 20px 0;
            margin: 50px 0;
        }

        /* Add horizontal padding on mobile/tablet */
        @media (max-width: 768px) {
            .services-section {
                padding-left: 20px;
                padding-right: 20px;
            }
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 800px;
            margin: 0 auto;
            border: none;
        }
        .section-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--brand-dark);
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--brand-dark);
            text-transform: uppercase;
            font-family: 'Metric Web', Arial, sans-serif;
            letter-spacing: 1px;
            text-align: center;
        }
        .service-card {
            text-align: center;
            background: white;
            padding: 29px;
            border-radius: 8px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .service-card h3 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            line-height: 1.3;
            color: var(--brand-dark);
        }


/* ------------------------------------------------------------------
              Ende: Hero Article 
------------------------------------------------------------------ */


/* ------------------------------------------------------------------
              Beginn: Footer
------------------------------------------------------------------ */

        .footer {
            border-top: 1px solid var(--brand-border);
            padding: 40px 0 30px;
            background-color: var(--brand-background);
        }
        .footer-content {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 30px;
        }
        .footer-section h4 {
            font-size: 14px;
            color: var(--brand-dark);
            margin-bottom: 15px;
            font-family: 'Metric Web', Arial, sans-serif;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }
        .footer-section p {
            color: var(--brand-gray);
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        .footer-section a {
            color: var(--brand-gray);
            text-decoration: none;
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .footer-section a:hover {
            color: var(--brand-dark);
            text-decoration: underline;
        }
        .email-link {
            color: var(--brand-gray);
            text-decoration: none;
            font-size: 14px;
            line-height: 1.6;
            display: block;
            margin-bottom: 10px;
            font-weight: normal;
        }
        .email-link:hover {
            color: var(--brand-dark);
            text-decoration: underline;
        }
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid var(--brand-border);
            font-size: 12px;
            color: var(--brand-gray);
            font-family: 'Metric Web', Arial, sans-serif;
        }
        .legal-links {
            text-align: center;
            padding: 15px 0;
            border-top: 1px solid var(--brand-border);
            margin-top: 20px;
        }
        .legal-links a {
            color: var(--brand-gray);
            text-decoration: none;
            font-size: 12px;
            margin: 0 10px;
        }
        .legal-links a:hover {
            color: var(--brand-dark);
            text-decoration: underline;
        }

/* ------------------------------------------------------------------
                          Ende: Footer
------------------------------------------------------------------ */


/* ------------------------------------------------------------------
               Begin: Responsive elements
               weitere sind an anderer Stelle definiert, z.B. bei Buttons
------------------------------------------------------------------ */


        @media (max-width: 768px) {
            .hero-content-wrapper {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .hero-text-content {
                padding-right: 0;
            }
            .focus-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .services-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .footer-content {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .hero-headline {
                font-size: 24px;
            }
            .language-selector {
                justify-content: center;
            }
            .logo-main {
                font-size: 28px;
            }
            .logo-tagline {
                font-size: 14px;
            }
            .nav-list {
                flex-wrap: wrap;
                gap: 15px;
            }
        }
        
/* ------------------------------------------------------------------
               Ende: Responsive elements
               weitere sind an anderer Stelle definiert, z.B. bei Buttons
------------------------------------------------------------------ */        


/* ------------------------------------------------------------------
               Beginn: Medien.html
------------------------------------------------------------------ */

/* Medien page headline centering and divider */
        .page-title {
            text-align: center;
        }
        .page-title-divider {
            height: 1px;
            background-color: var(--brand-dark);
            opacity: 0.7;
            margin: 8px 0 24px;
        }

        .article-card {
            background:var(--brand-light-gray,#f5eee3);
            padding:0px;
            border:0;
            border-radius:0
        }

        .article-card .article-title {
          font-size: 18px;
          line-height: 1.3;
          margin: 12px 0 8px;         /* seitlicher Abstand zum Rand wird über .article-content definiert */  
          color: var(--brand-text);
          text-decoration: none;
          font-family:'Metric Web',Arial,sans-serif;
          font-weight:600
        }

        .article-card .article-title a{
          color:inherit;                 /* match the parent’s colour */
          text-decoration:none
        }

        .article-card .article-title a:visited{ 
          color: inherit;               /* keep visited same */
        }     

/* Inhalt der Karte unterhalb des Photos, i.e. Überschrift, Text,... wir genutzt um für alle nachfolgenden Elemente mit einer einzelnen Definition eine einheitlichen Abstand zum Rand herzustellen */
        .article-card .article-content {
          padding: 16px 16px 16px;   /* oben   links u. rechts   unten */
        }

        /* Headline links inside cards: use body color, no default underline */
        .article-card a.dynamic-link { 
          text-decoration: none; 
          color: inherit; 
          display: block;            /* optional, keeps the click target tidy */
        }
        .article-card a.dynamic-link:hover { 
          text-decoration: underline; 
          text-underline-offset: 2px; 
        }
        .article-card a.dynamic-link:visited { 
          color: inherit; 
        }

        .article-excerpt {
          font-size: 16px;
          line-height: 1.55;
          color: var(--brand-text, #333333);
          margin: 0 0 10px;               /* Abstand zum Rand oben, links und rechts wird über .article-content definiert */  
        }

        .article-excerpt a{
          color: inherit;                 /* match the parent’s colour */
          text-decoration: underline;
          text-underline-offset: 2px;
        }

        .article-excerpt a:visited{ color: inherit; }     /* keep visited same */

/* zum Artikel-Link */
        .read-more-link {
            display:inline-block;
            margin-top: 18px;
            margin-right: 0;
            margin-bottom: 18px;
            margin-left: 0;               /* seitlicher Abstand zum Rand wird über .article-content definiert */  
            color: var(--brand-dark);
            text-decoration:underline;
            font-family:'Metric Web',Arial,sans-serif;
            font-weight:600;
            font-size:14px;
            letter-spacing:0.4px
        }
        
        .read-more-link:hover { 
            text-decoration: underline; text-underline-offset: 2px; 
        }

/* Fußnote zum Artikel (Erstveröffentlichung,...) */
        .article-meta{
            border-top: 1px solid var(--brand-dark); 
            margin-top: 8px;
            margin-left: 0;           /* Abstand zum Rand wird über .article-content definiert */  
            margin-right: 0;
            padding-top: 6px;
            color: var(--brand-gray);               
            font-size: 14px;
        }
        
        .page-wrap {
            max-width:1200px;
            margin:0 auto;
            padding:0 16px
        }
                
        .articles-container {
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:18px;
            margin:14px 0
        }
        
            /* Extra breathing room below Medien cards */
        .articles-container,
        .article-grid {               /* whichever your page uses */
            margin-bottom: 48px;      /* increase as needed */
        }
        
        .article-image img {
            width:100%;
            height:auto;
            display:block;
            aspect-ratio:3/2;
            object-fit:cover
        }
        
        .singlearticle-container {
            display:grid;
            grid-template-columns:2fr 1fr;
            gap:24px;
            align-items:start;
            margin:14px 0;
            margin-bottom: 48px;   /* between the container with the main article and the footer */ 
        }
        
        .singlearticle-main-column 
        .article-intro-text { 
            font-style:italic;
            font-size:16.5px;
            color:var(--brand-text,#333);
            margin:8px 0 10px
        }
        
        .article-featured-image img { 
            width:100%;
            height:auto;
            display:block
        }
        
        .image-caption {
            font-size:0.94rem;
            color:#666;
            margin-top:4px
        }
        
        .interview-content p {
            font-size:16.5px;
            line-height:1.6;
            color:var(--brand-text,#333);
            margin:10px 0
        }
        
        .singlearticle-sidebar 
        .article-card+.article-card {
            margin-top:40px
        }
        
        /* vertical gap between sidebar cards; gap shows page background */
        .singlearticle-side-column { 
            display: grid; gap: 32px; 
        }
        
        @media (max-width: 960px) { 
          .singlearticle-side-column { 
              gap: 24px; 
              } 
        }

/* ---------- RESPONSIVE ANPASSUNGEN FÜR MEDIEN.HTML ---------- */
        @media (max-width: 768px) {
            /* Raster */
            .articles-container {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            /* Card‑Innenabstand */
            .article-card .article-content {
                padding: 12px;
            }

            /* Typografie */
            body { font-size: clamp(14px,4vw,16px); }
            .page-title { font-size: clamp(1.5rem,6vw,2rem); }
            .article-card .article-title { font-size: clamp(1.1rem,5vw,1.4rem); }

            /* Touch‑Ziele */
            .read-more-link,
            .read-next-link {
                min-height: 44px;
                line-height: 44px;
                padding: 0 8px;
            }

            .language-dropdown { padding: 8px 12px; }


        /* für kleine Bildschirme (max 480px) */
        @media (max-width: 480px) {
            .article-card .article-content { padding: 8px; }
            .nav-list { gap: 8px; }
            .footer-section p,
            .footer-section a { font-size: 12px; }
        } /* end @media (max-width: 480px) */
        } /* end @media (max-width: 768px) */

/* ------------------------------------------------------------------
               Ende: Medien.html
------------------------------------------------------------------ */



        /* ------------------------------------------------------------------
           1. Grund‑Flex‑Layout für den Artikel‑Bereich (ganze Artiekl wie spief1.html)
           ------------------------------------------------------------------ */
        .main-wrapper {
            /* sorgt dafür, dass das <main>-Element die volle Breite nutzt */
            width: 100%;
            max-width: 1400px;          /* optional – verhindert zu große Breite */
            margin: 0 auto;             /* zentriert auf großen Bildschirmen */
            padding: 0 1rem;            /* kleiner horizontaler Abstand */
        }

        /* Flex‑Container, der die beiden Spalten hält */
        .flex-columns {
            display: flex;
            flex-wrap: nowrap;          /* Desktop: nebeneinander */
            gap: 2rem;                  /* Abstand zwischen Artikel & Sidebar */
        }

        /* ------------------------------------------------------------------
           2. Einzelne Spalten
           ------------------------------------------------------------------ */
        .singlearticle-main-column {
            flex: 1 1 65%;              /* nimmt ca. 65 % der Breite ein */
            min-width: 0;               /* verhindert Overflow bei langen Worten */
        }
        .sidebar {
            flex: 0 0 30%;              /* feste Breite für die Sidebar */
            min-width: 250px;           /* Mindestbreite, damit Inhalte nicht zu schmal werden */
        }

        /* ------------------------------------------------------------------
           3. Bilder & Medien – immer responsiv
           ------------------------------------------------------------------ */
        .article-featured-image img,
        .article-card img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* ------------------------------------------------------------------
           4. Typografie – lesbare Schriftgrößen auf kleinen Bildschirmen
           ------------------------------------------------------------------ */


        /* Überschriften etwas kleiner skalieren */
        h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
        h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
        h3 { font-size: clamp(1.3rem, 4.5vw, 1.6rem); }

        /* -- Mobile‑Breakpoint (≤ 768 px) -- */
        @media (max-width: 768px) {

            /* 5.1  Spalten untereinander stapeln */
            .flex-columns {
                flex-direction: column;      /* vertikal */
            }

            .singlearticle-main-column,
            .sidebar {
                flex: 1 1 auto;              /* beide nehmen die volle Breite */
                max-width: 100%;
                min-width: 0;
            }

            /* 5.2  Abstand & Padding reduzieren */
            .main-wrapper,
            .singlearticle-container {
                padding-left: 0.8rem;
                padding-right: 0.8rem;
            }

            /* 5.3  Sidebar‑Karten etwas kompakter */
            .article-card {
                display: flex;
                flex-direction: column;
                gap: 0.6rem;
            }

            /* 5.4  Buttons / Links – Touch‑Ziel mindestens 44 px */
            a.read-more-link,
            .button,
            .read-more-link {
              min-height: 44px;
              /* lieber über Padding statt große line-height steuern: */
              line-height: 1.2;
              padding: 10px 16px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
            }
        }

            /* -- 6. Optional: Übergänge für sanfte Layout‑Änderungen -- */
        .flex-columns,
        .singlearticle-main-column,
        .sidebar,
        .article-card {
            transition: all 0.25s ease-in-out;
        }

/* ---- spief1: body-text links same colour as text ---- */
        .article-intro-text a,
        .interview-content a {
          color: var(--brand-text);          /* no blue */
          text-decoration: underline;
          text-underline-offset: 2px;
        }
        .article-intro-text a:visited,
        .interview-content a:visited {
          color: var(--brand-text);          /* keep same colour after visit */
        }

/* ---- spief1: make interview questions bold ---- */
        .interview-content .interview-question {
          font-weight: 700;
          margin-top: 18px;                  /* optional breathing room */
          margin-bottom: 6px;
        }

        /* Two bottom links on one row */
        .article-bottom-links{
          display:flex;
          justify-content:space-between;
          align-items:center;
          gap:16px;
          margin-top:18px;   /* breathing space above links */
          margin-bottom:8px; /* space before the meta line */
        }

        /* Keep your existing look (uppercase etc.) consistent with medien.html */
        .read-more-link{
          text-transform:uppercase;
          text-decoration:none;
          letter-spacing:0.5px;
          font-weight:600;
          color:var(--brand-text,#2B2B2B);
        }
        .read-more-link:hover{ text-decoration:underline; }


/* Single-article CTA: uppercase + right-aligned */
        .read-next-link{
          display: block;
          width: max-content;
          margin: 12px 0 24px auto;   /* right align */
          text-transform: uppercase;  /* <-- make caps like Medien */
          text-decoration: none;
          color: inherit;
          font-size: 13.5px;
          font-weight: 600;
          letter-spacing: 0.02em;
        }
        
        .read-next-link:hover { 
          text-decoration: underline; 
          text-underline-offset: 2px; 
        }
        
        .article-bio{
          font-style:italic;
          margin-top:12px;
          line-height:1.6;
          color:var(--brand-text,#2B2B2B);
        }
        
        .followup-block{
          margin-top:18px;
          margin-bottom:10px; /* small breathing space before the meta line */
        }
        .followup-block p{
          margin:0 0 6px;
        }
        .followup-links{
          margin:0 0 0 20px; /* indent bullets */
        }
        .followup-links li{
          margin:4px 0;
        }
        .followup-links a{
          text-decoration:none;
          color:var(--brand-text,#2B2B2B);
        }
        .followup-links a:hover{
          text-decoration:underline;
        }

/* ------------------------------------------------------------------
               Beginn: kontakt.html
------------------------------------------------------------------ */
        
        /* -- Kontakt‑Seiten‑Wrapper (isoliert das Layout) -- */
        .contact-page-wrapper {
            max-width: 900px;          /* gleiche Breite wie bei Artikelseiten */
            margin: 0 auto;            /* zentrieren */
            padding: 0 20px;           /* seitlicher Innenabstand */
        }

        /* -- Grundlayout der Kontakt‑Sektion -- */
        .contact-section {
            margin: 50px 0;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            background-color: var(--brand-light-gray);
            padding: 30px;
            border-radius: 8px;
        }

        /* Titel */
        .section-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--brand-dark);
            margin-bottom: 30px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--brand-dark);
            text-transform: uppercase;
            font-family: 'Metric Web', Arial, sans-serif;
            letter-spacing: 1px;
            text-align: center;
        }

        /* -- Kontakt‑Methoden‑Blöcke -- */
        .contact-method {
            margin-top: 25px;
            padding: 20px;
            background-color: var(--brand-light-gray);
            color: var(--brand-text);
            border-radius: 8px;
            text-align: center; 
        }
        .contact-method h3 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: var(--brand-dark);
        }

        /* E‑Mail‑Link */
        .contact-method .email-link {
            color: var(--brand-dark);
            text-decoration: none;
            font-size: 18px;
            display: inline-block;
            margin: 10px 0;
            text-align: center;
        }

        /* -- Formular‑Titel -- */
        .form-section-title {
            font-size: 18px;
            text-align: center;
            font-weight: bold;
            color: var(--brand-dark);
            margin: 40px 0 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--brand-border);
        }

        /* -- Formular‑Grundstil -- */
        .form-group {
            margin-bottom: 30px;
            text-align: left;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: var(--brand-dark);
        }

        /* Eingabefelder & Textarea – volle Breite, aber nicht zu klein */
        .form-group input,
        .form-group textarea {
            width: 100%;
            min-width: 250px;               /* verhindert zu schmale Felder, wird in responsive Design für kleine Bildschirme aufgehoben */
            max-width: 100%;
            padding: 10px;
            border: 1px solid var(--brand-border);
            background: white;
            color: var(--brand-text);
            font-size: 16px;
        }
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--brand-dark);
        }
        .form-group textarea {
            height: 200px;
            resize: vertical;
        }

        /* Pflichtfeld‑Kennzeichnung */
        .required {
            color: red;
        }

        /* -- Datenschutzhinweis -- */
        .privacy-info {
            font-size: 14px;
            color: var(--brand-gray);
            line-height: 1.6;
            margin: 20px 0;
        }
        .privacy-info a {
            color: var(--brand-dark);
            text-decoration: underline;
        }
        .privacy-info a:hover {
            color: var(--brand-accent);
        }

            /* -- Consent-Zeile (Datenschutz-Checkbox) -- */
            
            .form-actions {
          text-align: center;         /* zentriert den Button */
          margin-top: 12px;
        }
        .form-actions .form-submit {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          min-width: 220px;
          min-height: 48px;
        }


        .consent-wrapper {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 0.35rem;            /* „normaler Atem“ zwischen Box & Text */
          flex-wrap: nowrap;       /* nicht umbrechen */
        }

        /* Checkbox kompakt */
        .consent-wrapper input[type="checkbox"] {
          width: 1.1rem;
          height: 1.1rem;
          margin: 0;               /* Browser-Default entfernen */
          accent-color: var(--brand-dark);
          cursor: pointer;
        }

        /* Nur hier: Label NICHT blockig (überstimmt globale label-Regeln) */
        .consent-wrapper .consent-label,
        .consent-wrapper label {
          display: inline !important;
          margin: 0 !important;
          line-height: 1.3;
          color: var(--brand-dark);
          cursor: pointer;
        }

        /* Links im Consent-Text */
        .consent-wrapper .consent-label a {
          color: var(--brand-dark);
          text-decoration: underline;
        }
        .consent-wrapper .consent-label a:hover {
          color: var(--brand-accent);
        }
        /* -------------------------------------------------
           1️⃣2️⃣  Tablet/Mobile‑Breakpoint (≤ 768 px)
           ------------------------------------------------- */

            @media (max-width: 768px) {
              .contact-section {
                margin: 40px 20px;
                padding: 20px;
              }

              /* Hide the long email address line on small screens */
              .contact-section .email-link {
                display: none;
              }

          /* Let inputs shrink to container width on small screens */
          .contact-section .form-group input,
          .contact-section .form-group textarea {
            min-width: 0;           /* was 250px globally */
            width: 100%;
            max-width: 100%;
          }
        }