:root{
    --bg:#ffffff;
    --text:#111111;
    --muted:#666666;
  --font-editorial:"Instrument Serif", Georgia, serif;
  --font-ui:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  
    --accent-yellow:#E9B93E;   /* warmes Gelb */
    --accent-blue:#7FA7C0;     /* helles, abgetöntes Blau */
    --accent-green:#6D8B74;    /* erdiges Grün */
  
    --link:#111111;
    --link-hover:var(--accent-yellow);
  
    --maxw:1100px;
    --pad:clamp(16px, 2vw, 32px);
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  img, video, iframe{max-width:100%}
  body{
    font-family: var(--font-ui);
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
  }
  
  /* Header / Navigation */
  .site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,0.9);
    backdrop-filter:saturate(180%) blur(8px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px var(--pad);
  }
  .logo{
    text-decoration:none;
    color:var(--text);
    font-weight:800;
    letter-spacing:0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .logo-icon{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .inline-logo{
    width: 8em;
    height: 8em;
    vertical-align: baseline;
    margin-right: 4px;
    display: inline-block;
  }
  .site-nav{
    display:flex;
    gap:24px;
  }
  .site-nav a{
    color:var(--link);
    text-decoration:none;
    position:relative;
    padding:6px 0;
    font-size:15px;
    line-height:1.2;
    font-weight:500;
  }
  .site-nav a::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:0; height:2px;
    background:var(--link-hover);
    transition:width .25s ease;
  }
  .site-nav a:hover::after,
  .site-nav a.active::after{ width:100% }
  
  /* Burger Button mobil */
  .nav-toggle{
    display:none;
    background:none;
    border:0;
    width:44px; height:44px;
    align-items:center; justify-content:center;
    cursor:pointer;
  }
  .burger, .burger::before, .burger::after{
    content:"";
    display:block;
    width:22px; height:2px;
    background:var(--text);
    position:relative;
    transition:transform .2s ease, opacity .2s ease;
  }
  .burger::before{ position:absolute; top:-6px }
  .burger::after{ position:absolute; top:6px }
  
  /* Hero */
.hero{
  position:relative;
  min-height:clamp(420px, 68vh, 680px);
  max-width:calc(var(--maxw) + var(--pad)*2);
  margin:clamp(112px, 7vw, 112px) auto;
  padding:0;
  display:grid;
  place-items:center;
  overflow:hidden;
}
  .hero.hero-left{
    margin: 0 auto;
    justify-items:start;
  }
  .hero.hero-left .hero-text{
    text-align:left;
  }
  /* Hero slider */
  .hero-slider{
    position:absolute;
    inset:0;
    overflow:hidden;
  }
  .hero-slide{
    position:absolute; inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0; animation:heroFade 20s infinite ease-in-out;
    z-index:0;
    filter:saturate(90%) contrast(98%);
  }
  /* Möwen-Slide: ganzes Bild zeigen, ohne seitlichen Beschnitt */
  .hero-slider a:nth-child(3) .hero-slide {
    object-fit: contain;
    object-position: center center;
    background: #fff;
  }

  /* ZDF-Slide: Bildausschnitt im bestehenden Slider-Format feinjustieren */
  .hero-slider a:nth-child(5) .hero-slide {
    object-fit: contain;
    object-position: center center;
    background: #fff;
  }

  .hero-slider a:nth-child(1) .hero-slide{ animation-delay:0s }
  .hero-slider a:nth-child(2) .hero-slide{ animation-delay:4s }
  .hero-slider a:nth-child(3) .hero-slide{ animation-delay:8s }
  .hero-slider a:nth-child(4) .hero-slide{ animation-delay:12s }
  .hero-slider a:nth-child(5) .hero-slide{ animation-delay:16s }
  @keyframes heroFade {
    0%   { opacity: 0; z-index: 0; }
    10%  { opacity: 1; z-index: 2; }
    35%  { opacity: 1; z-index: 2; }
    45%  { opacity: 0; z-index: 0; }
    100% { opacity: 0; z-index: 0; }
  }
  .hero-text{
    position:relative;
    text-align:center;
    padding:calc(var(--pad)*2);
    background:transparent;
    border:0;
    backdrop-filter:none;
    border-radius:0;
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.35);
  }
  .hero h1{
    font-size:clamp(32px, 6vw, 72px);
    line-height:1.1;
    margin:0 0 8px;
  }
  .hero p{
    margin:0;
    color:#fff;
    font-size:clamp(18px, 2.5vw, 26px);
  }
@media (max-width: 720px){
  .hero{
    margin:clamp(24px, 6vw, 60px) var(--pad);
    padding:0;
    min-height:clamp(260px, 52vh, 420px);
  }

  .hero-slider{
    inset:0;
  }

  .hero-slider .hero-slide{
    object-fit:contain;
    object-position:center;
    background:#fff;
  }
}

  /* Startseite: vertikaler Rhythmus zwischen Vorstellung, Hero und Fokus-Cards */
  .page-home main > .content:first-child {
    padding-bottom: clamp(20px, 3.5vw, 36px);
  }
  .page-home .hero {
    margin-top: clamp(56px, 8vw, 88px);
    margin-bottom: clamp(72px, 10vw, 116px);
  }
  .page-home .focus-grid .content {
    padding-top: clamp(6px, 1.5vw, 16px);
  }
  
  /* Content Wrapper */
  .content{
    max-width:var(--maxw);
    margin:0 auto;
    padding:calc(var(--pad)*2) var(--pad);
  }
  
  /* About */
  .about{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:32px;
    align-items:start;
  }
.about-figure{
    margin:0;
  }
  .about-figure img{
    width:100%;
    border-radius:0;
    display:block;
  }
  /* Portrait Hover Swap */
  .about-figure .portrait-swap{ position:relative }
  .about-figure .portrait{ width:100%; border-radius:0; display:block; transition:opacity .25s ease }
  .about-figure .portrait.serious{ position:absolute; inset:0; opacity:0 }
  .about-figure .portrait-swap:hover .portrait.serious{ opacity:1 }
  .about-figure .portrait-swap:hover .portrait.smile{ opacity:0 }
  .about-figure figcaption{
    margin-top:8px;
    color:var(--muted);
    font-size:14px;
  }

  .about-text h1,
  .contact h1 {
    font-family: var(--font-editorial);
    font-size: clamp(38px, 5.2vw, 54px);
    line-height: 0.98;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 20px;
  }
  .page-kontakt .contact h1 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-icon {
  width: 1em;
  height: 1em;
  object-fit: contain;
  display: block;
}

@media (max-width: 720px) {
  .contact-icon {
    width: 0.9em;
    height: 0.9em;
  }
}

/* Works */
.works h1 { margin-top: 0; }

.works-highlight {
  margin: 28px 0 42px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.highlight-card {
  position: relative;
  color: #fff;
  min-height: 420px;
  display: block;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 14px 30px rgba(6,12,28,0.18);
  background: #111;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Bild als Hintergrund-Layer (groß, dominant) */
.highlight-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .45s ease, filter .3s ease;
  z-index: 0;
  filter: brightness(0.78) saturate(0.95);
}

.highlight-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 48px rgba(6,12,28,0.22); }
.highlight-card:hover .highlight-image{ transform: scale(1.08); filter: brightness(0.92) saturate(1.03); }

/* Play-Overlay in der Mitte, deutlicher Hinweis auf Video */
.highlight-play{
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff;
  z-index:4; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,0.45);
}
.highlight-play:hover{ background:rgba(0,0,0,0.6); transform:translate(-50%,-50%) scale(1.06); }

/* Place title bottom-left */
.highlight-card--corner > div{ position: absolute; left:16px; right:auto; bottom:20px; top:auto; width:auto; max-width:58%; z-index:6; }
.highlight-card--corner > div h3{ text-align:left; max-width:100%; margin:0; }

/* Ensure the small provider tag sits above the play button */
.highlight-tag{ position:absolute; left:12px; top:12px; z-index:5; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,0.12); color:#fff; }

/* Inhalt über das Bild legen (Titel + Kurztext + CTA) */
.highlight-card:not(.highlight-card--corner) > :not(.highlight-image) { position: relative; z-index: 3; }

.highlight-card > div{
  position: absolute; left: 12px; right: 12px; bottom: 8px; z-index:4; /* title placed closer to bottom */
  display:flex; align-items:flex-end; gap:12px; justify-content:space-between;
}

.highlight-card > div h3{ margin:0; font-size:clamp(18px,1.8vw,22px); line-height:1.12; max-width:calc(100% - 140px); text-shadow:0 6px 18px rgba(0,0,0,0.6); }
.highlight-card > div p{ display:none; }

.highlight-link{
  background: rgba(255,255,255,0.95); color:#111; font-weight:600; text-decoration:none; padding:8px 12px; border-radius:6px; align-self:flex-end;
}

.highlight-link:hover{ background:#fff; color:#111; transform:translateY(-1px); }

@media (max-width: 900px){
  .highlight-card{ border-radius:0; min-height:300px; }
  .highlight-card > div h3{ font-size:18px; }
}

/* Work Video Hero */
.work-video-wrapper {
  margin: 48px auto 56px;
  max-width: 680px;
  padding: 32px;
  position: relative;
  background: #8FA896;
}

.section-title-aligned {
  margin-right: auto !important;
  width: fit-content;
}

.work-video-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 14px 30px rgba(6,12,28,0.18);
  background: #111;
  transition: transform .25s ease, box-shadow .25s ease;
}

.work-video-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .45s ease, filter .3s ease;
  z-index: 0;
  filter: brightness(0.90) saturate(0.98);
}

.work-video-hero:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(6,12,28,0.22); }
.work-video-hero:hover .work-video-image { transform: scale(1.08); filter: brightness(1) saturate(1.05); }

.work-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 0;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: transparent;
  z-index: 4;
  text-decoration: none;
  box-shadow: none;
  transition: border-color .25s ease, transform .25s ease;
}
.work-video-play::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 36px 0 36px 58px;
  border-color: transparent transparent transparent #fff;
  margin-left: 10px;
}

.work-video-hero:hover .work-video-play {
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

.work-video-tag {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 5;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.work-video-info {
  margin-top: 16px;
}

.work-video-info h3 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.3;
  color: var(--text);
}

/* GEO: Video rechts, Autorenprofil links */
.geo-video-row {
  margin: 48px 0 56px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(340px, 680px);
  align-items: end;
  gap: 28px;
  position: relative;
}

.geo-author-h2 {
  margin: 0;
  line-height: 1.25;
  color: #fff;
  position: relative;
  z-index: 3;
}

.geo-video-wrapper {
  margin: 0 0 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

.geo-bg-word {
  position: absolute;
  right: clamp(240px, 34vw, 460px);
  top: 28%;
  transform: translateY(-52%);
  font-size: clamp(90px, 16vw, 240px);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 0.9;
  color: rgba(255, 255, 255, 0.92);
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.geo-author-h2 .link-underline {
  color: #fff;
  border-color: var(--accent-blue);
}

.geo-author-h2 .link-underline:hover {
  border-color: var(--accent-yellow);
}

/* ZDF: Video links, Titel rechts */
.zdf-video-row {
  margin: 48px 0 56px;
  display: grid;
  grid-template-columns: minmax(340px, 680px) minmax(160px, 1fr);
  align-items: end;
  gap: 14px;
  position: relative;
}

.zdf-video-wrapper {
  margin: 0 auto 0 0;
  width: 100%;
  position: relative;
  z-index: 2;
}

.zdf-section-h2 {
  position: absolute;
  left: clamp(280px, 32vw, 520px);
  top: 34%;
  transform: translateY(-52%);
  margin: 0;
  text-align: left;
  font-size: clamp(90px, 16vw, 240px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.92);
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px){
  .work-video-wrapper { margin: 24px 0 32px; }
  .work-video-play { width: 64px; height: 64px; font-size: 28px; }

  .geo-video-row {
    margin: 24px 0 32px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .geo-video-wrapper {
    margin: 0;
  }

  .geo-bg-word {
    right: clamp(140px, 20vw, 240px);
    top: 34%;
    font-size: clamp(70px, 18vw, 140px);
    opacity: 0.7;
  }

  .zdf-video-row {
    margin: 24px 0 32px;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .zdf-section-h2 {
    left: clamp(150px, 22vw, 280px);
    top: 38%;
    font-size: clamp(70px, 18vw, 140px);
    opacity: 0.7;
  }

  .zdf-video-wrapper {
    margin: 0;
  }
}

@media (max-width: 720px){
  .highlight-play{ top:38%; width:48px; height:48px; font-size:20px; }
  .highlight-card--corner > div{ bottom:10px; left:10px; max-width:70%; }
}

  .work-card{
    display:grid;
    grid-template-columns: 240px 1fr;
    gap:20px;
    padding:18px 0;
    align-items:stretch;
  }
.work-card-media{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
  border-radius:0;
}
  .work-card img{
    width:100%; height:160px; object-fit:cover;
    border-radius:0;
    display:block;
  }
.work-card video,
.work-card iframe{
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
  display:block;
  background:#000;
}
.work-card > div,
.work-card .work-content{
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.work-card h3{
  margin:0 0 auto;
  padding-bottom:8px;
  line-height:1.18;
  flex-shrink:0;
}
.work-card p{
  margin:0 0 10px;
  line-height:1.45;
  flex-shrink:0;
}
.work-card a.link-underline{
  flex-shrink:0;
  width:max-content;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
}

.links-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  flex-shrink: 0;
  width: max-content;
}

.link-separator {
  color: #fff;
  font-weight: normal;
}

  .link-underline{
    color:var(--link);
    text-decoration:none;
    border-bottom:2px solid var(--accent-blue);
    padding-bottom:2px;
    transition:color .2s ease, border-color .2s ease;
  }
  .link-underline:hover{
    color:var(--link-hover);
    border-color:var(--accent-yellow);
  }
  

  
  /* Contact */
  .kontakt-bild {
    margin-top: 32px;
  }
  .kontakt-bild img {
    width: 100%;
    height: auto;
    display: block;
  }
  .contact-form{
    display:grid;
    gap:14px;
    max-width:640px;
  }
  label{ font-weight:600 }
  input, textarea{
    width:100%;
    border:1px solid #ddd;
    border-radius:0;
    padding:12px 14px;
    font:inherit;
    background:#fff;
  }
  input:focus, textarea:focus{
    outline:2px solid var(--accent-blue);
    border-color:var(--accent-blue);
  }
  .btn{
    background:var(--text);
    color:#fff;
    border:0;
    padding:12px 16px;
    border-radius:0;
    cursor:pointer;
    width:max-content;
    transition:background .2s ease, transform .02s ease-in;
  }
  .btn:hover{ background:var(--accent-green) }
  .btn:active{ transform:translateY(1px) }
  
  /* Footer */
  .site-footer{
    padding:24px var(--pad);
    color:var(--muted);
    text-align:center;
  }
  .linkedin-icon{
    vertical-align:middle;
    margin-right:6px;
  }
    .site-footer p{
      margin:0;
      overflow-wrap:anywhere;
    }

  .legal-divider{
    border:0;
    border-top:1px solid #eee;
    margin:24px 0;
  }
  .legal-note{
    color:var(--muted);
    font-size:14px;
  }
  
  /* Responsive */
  @media (max-width: 900px){
    .about{ grid-template-columns:1fr; }
    .work-card{ grid-template-columns:1fr; }
    .work-card img{ height:200px }
  }
  @media (max-width: 720px){
    .site-nav{
      position:fixed;
      inset:60px var(--pad) auto var(--pad);
      top:64px;
      background:#fff;
      border:1px solid #eee;
      border-radius:0;
      box-shadow:0 20px 50px rgba(0,0,0,0.08);
      padding:12px;
      flex-direction:column;
      gap:8px;
      transform:translateY(-10px);
      opacity:0; pointer-events:none;
      max-height:calc(100vh - 88px);
      overflow:auto;
      transition:opacity .2s ease, transform .2s ease;
    }
    .nav-toggle{ display:flex }
    .site-header.nav-open .site-nav{
      opacity:1; pointer-events:auto; transform:translateY(0);
    }
    .site-header.nav-open .burger{ transform:rotate(45deg) }
    .site-header.nav-open .burger::before{ transform:rotate(90deg) translateX(-6px) }
    .site-header.nav-open .burger::after{ opacity:0 }
    .site-footer p{ font-size:14px; line-height:1.7; }
  }
  /* Schwerpunkt-Grid */
.focus-grid{
  background: transparent;
  border-top:0;
  border-bottom:0;
}
.align-right .content{
  margin-left:auto;
  margin-right:var(--pad);
}
.align-center .content{
  margin-left:auto;
  margin-right:auto;
}
.focus-grid.focus-wide .content{
  max-width:calc(var(--maxw) + var(--pad)*2);
}
.focus-grid.focus-tight .content{
  padding-top:var(--pad);
  padding-bottom:calc(var(--pad)*1.4);
}
  .focus-grid .content{
    max-width:var(--maxw);
    margin:0 auto;
    padding:calc(var(--pad)*2) var(--pad);
  }
  .focus-grid h2{
    margin:0 0 16px;
    font-size:clamp(22px, 3vw, 28px);
  }
.focus-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:32px;
}
.focus-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:0;
  overflow:hidden;
  min-height:clamp(360px, 44vw, 520px);
  color:#fff;
  isolation:isolate;
  box-shadow:0 20px 55px rgba(6,12,28,0.25);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.focus-card:hover,
.focus-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(6,12,28,0.32);
  filter:saturate(1.05);
}
.focus-media{
  position:absolute;
  inset:0;
  margin:0;
  min-height:100%;
  background:#111;
  z-index:-2;
}
.focus-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(0.93) saturate(0.65);
}
.focus-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(150deg, rgba(0,0,0,0.08), rgba(0,0,0,0.35));
  z-index:-1;
}
.focus-body{
  position:relative;
  text-align:center;
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-shadow:0 3px 12px rgba(0,0,0,0.35);
}
.focus-body h3{
  margin:0;
  font-family: var(--font-editorial);
  font-size:clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing:-0.01em;
  text-transform:uppercase;
}
.focus-body p{
  margin:0;
  font-size:clamp(16px, 2vw, 20px);
  color:rgba(255,255,255,0.9);
}
.focus-cta{
  margin-top:8px;
  border-bottom:2px solid rgba(255,255,255,0.8);
  color:#fff;
  font-weight:600;
  letter-spacing:0.2px;
  align-self:center;
}
.focus-card:hover .focus-cta,
.focus-card:focus-visible .focus-cta{
  color:var(--accent-yellow);
  border-color:var(--accent-yellow);
}
@media (max-width: 900px){
  .focus-cards{ grid-template-columns: 1fr 1fr; gap:20px; }
  .focus-card{ min-height:300px; }
}
@media (max-width: 640px){
  .focus-cards{ 
    grid-template-columns: 1fr; 
  }

  .focus-card{ 
    min-height:260px; 
  }

  /* Nur KI-Karte: Bildausschnitt auf Mobilgeräten verschieben */
  .focus-card:nth-child(2) .focus-media img{
    object-position:65% 35%;
  }
}

.reveal{
  opacity:0;
  transition:opacity .65s ease, transform .65s ease;
}
.reveal-left{ transform:translateX(-60px); }
.reveal-right{ transform:translateX(60px); }
.reveal-visible{
  opacity:1 !important;
  transform:translateX(0);
  filter:saturate(1.05) !important;
}
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-left,
  .reveal-right{
    transition:none !important;
    transform:none !important;
    opacity:1 !important; 
    filter:saturate(1.05) !important;
  }
}
  /* ===== Arbeiten: gemeinsame Regeln für alle Unterseiten ===== */
.page-arbeiten { background: var(--accent-green); }
.page-arbeiten .works h1 { margin-top: 0; }
.page-arbeiten .content { max-width: var(--maxw); }
.page-arbeiten .intro-text { background: transparent; }
.page-arbeiten .intro-text,
.page-arbeiten .works { color: #fff; }
.page-arbeiten .work-video-info h3 { color: #fff; }
.page-arbeiten .work-section + .work-section { margin-top: clamp(56px, 9vw, 108px); }
.page-arbeiten p + .work-section { margin-top: clamp(56px, 9vw, 108px); }

/* Karten auf Arbeits-Unterseiten etwas dichter */
.page-arbeiten .work-card { padding: 14px 0; }
.page-arbeiten .link-underline { color: #fff; border-color: var(--accent-green); }
.page-arbeiten .link-underline:hover { border-color: var(--accent-yellow); }

/* ===== Arbeiten > Schreiben ===== */
.page-arbeiten-schreiben .works h1 { color: #fff; }
.page-arbeiten-schreiben .work-card img { filter: saturate(95%); }
.page-arbeiten-schreiben .link-underline { border-color: var(--accent-blue); }
.page-arbeiten-schreiben .work-card + .work-card { margin-top: 40px; }
.page-arbeiten-schreiben .video-banner-caption { margin-bottom: 46px; }
.page-arbeiten-schreiben .video-banner-caption h3 { margin-bottom: 8px; }
.page-arbeiten-schreiben .author-profile {
  margin-top: 24px;
  margin-bottom: 40px;
}
.page-arbeiten-schreiben .work-section + .work-section { margin-top: clamp(64px, 9vw, 80px); }

/* ===== Arbeiten > KI ===== */
.page-arbeiten-ki .works h1 { color: #fff; }
.page-arbeiten-ki .work-card img { filter: saturate(90%) contrast(102%); }
.page-arbeiten-ki .link-underline { border-color: var(--accent-yellow); }
.page-arbeiten-ki .link-underline:hover { color: var(--link-hover); }

/* Optional: kleine Badge-Farbe für KI-Themen */
.page-arbeiten-ki .badge { background: var(--accent-yellow); color: #111; }

.ki-tools-heading {
  margin-top: 2.4em;
  margin-bottom: 0.8em;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
}
.ki-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ki-tools-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
@media (max-width: 640px) {
  .ki-tools-grid { grid-template-columns: 1fr; }
}

/* ===== Arbeiten > Special Interest ===== */
.page-arbeiten-special .works h1 { color: #fff; }
.page-arbeiten-special .work-card img { filter: saturate(100%) contrast(98%); }

/* LOT.Inside full-width banner */
.lot-banner {
  width: 100%;
  margin-bottom: 28px;
  overflow: hidden;
}
.lot-banner a {
  display: block;
  overflow: hidden;
}
.lot-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.lot-banner a:hover img {
  transform: scale(1.02);
  filter: brightness(0.88);
}
.lot-read-row {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 24px;
  align-items: center;
}
.lot-read-row h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  line-height: 1.15;
}
.lot-read-row img {
  width: 100%;
  height: auto;
  display: block;
}
.page-arbeiten-special .link-underline { border-color: var(--accent-green); }
.page-arbeiten-special .link-underline:hover { border-color: var(--accent-blue); }

.page-arbeiten-special .works > p .link-underline,
.page-arbeiten-special .work-card .link-underline {
  border-color: var(--accent-yellow);
}
.page-arbeiten-special .works > p .link-underline:hover,
.page-arbeiten-special .work-card .link-underline:hover {
  border-color: var(--accent-blue);
}

.page-arbeiten-special .lot-read-row .link-underline {
  border-color: var(--accent-yellow);
}
.page-arbeiten-special .lot-read-row .link-underline:hover {
  border-color: var(--accent-blue);
}

/* ── Special Interest: Abstände ── */
.page-arbeiten-special .lot-banner {
  margin-bottom: 48px;
}
.page-arbeiten-special .work-card + .work-card {
  margin-top: 40px;
}
.page-arbeiten-special .lot-read-row {
  margin-top: 64px;
  gap: 40px;
}
.page-arbeiten-special .lot-read-row h2 {
  margin-bottom: 0;
}

/* ===== Kontakt ===== */
.page-kontakt { 
  background: var(--accent-yellow); 
}
.page-kontakt .link-underline:hover,
.page-kontakt .link-underline:focus-visible {
  color: var(--accent-green);
  border-color: var(--accent-green);
}

/* Beispiel für layout-spezifische Differenzen */
.page-arbeiten-schreiben .work-card { grid-template-columns: 280px 1fr; }
.page-arbeiten-ki .work-card { grid-template-columns: 240px 1fr; }
.page-arbeiten-special .work-card { grid-template-columns: 300px 1fr; }

.page-arbeiten-schreiben .works > h1,
.page-arbeiten-ki .works > h1,
.page-arbeiten-special .works > h1 {
  font-family: var(--font-editorial);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.015em;
  font-weight: 400;
}

.page-arbeiten-schreiben h2,
.page-arbeiten-ki h2,
.page-arbeiten-special h2 {
  font-family: var(--font-editorial);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.page-arbeiten-schreiben h3,
.page-arbeiten-ki h3,
.page-arbeiten-special h3 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.page-arbeiten-schreiben .work-card p,
.page-arbeiten-ki .work-card p,
.page-arbeiten-special .work-card p {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}

.page-arbeiten-schreiben .article-hero-title {
  font-family: var(--font-editorial);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.015em;
  font-weight: 400;
  max-width: 72%;
}

@media (max-width: 900px){
  .page-arbeiten .work-card { grid-template-columns: 1fr; }
  .page-arbeiten .work-section + .work-section { margin-top: clamp(40px, 7vw, 72px); }
  .lot-read-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .site-nav a{ font-size:14px; }

  .page-arbeiten-schreiben .work-card + .work-card { margin-top: 32px; }
  .page-arbeiten-schreiben .video-banner-caption { margin-bottom: 36px; }
  .page-arbeiten-schreiben .author-profile {
    margin-top: 18px;
    margin-bottom: 32px;
  }
  .page-arbeiten-schreiben .work-section + .work-section { margin-top: 48px; }

  .page-arbeiten-special .work-card + .work-card { margin-top: 28px; }
  .page-arbeiten-special .lot-banner { margin-bottom: 32px; }
  .page-arbeiten-special .lot-read-row { margin-top: 40px; gap: 24px; }

  .page-arbeiten-schreiben .works > h1,
  .page-arbeiten-ki .works > h1,
  .page-arbeiten-special .works > h1 {
    font-size: 44px;
    line-height: 0.98;
    letter-spacing: -0.01em;
  }

  .page-arbeiten-schreiben h2,
  .page-arbeiten-ki h2,
  .page-arbeiten-special h2 {
    font-size: 34px;
    line-height: 1.05;
  }

  .page-arbeiten-schreiben h3,
  .page-arbeiten-ki h3,
  .page-arbeiten-special h3 { font-size: 21px; }

  .page-arbeiten-schreiben .work-card p,
  .page-arbeiten-ki .work-card p,
  .page-arbeiten-special .work-card p { font-size: 17px; }

  .page-arbeiten-schreiben .article-hero-title {
    font-size: 44px;
    line-height: 0.98;
    letter-spacing: -0.01em;
    max-width: 100%;
  }
}

/* ===== Intro Text ===== */
.intro-text{
  padding: 48px 0;
  background: #fff;
}

/* Article Hero Aufmacher */
.article-hero {
  display: block;
  position: relative;
  width: 100%;
  height: 480px;
  margin: 32px 0 48px;
  overflow: hidden;
  border-radius: 0;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(6,12,28,0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}

.article-hero:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(6,12,28,0.22);
}

.article-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transform: scale(1.02);
  transition: transform .45s ease, filter .3s ease;
  z-index: 0;
  filter: brightness(0.96) saturate(0.95);
}

.article-hero:hover .article-hero-bg {
  transform: scale(1.08);
  filter: brightness(1) saturate(1.05);
}

.article-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
  z-index: 1;
}

.article-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

/* Video-Banner: Vollbild-Vorschau ohne Textoverlay, Caption darunter */
.article-hero.video-banner {
  height: auto;
  margin-bottom: 16px;
  overflow: visible;
}
.article-hero.video-banner .article-hero-bg {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center center;
  transform: none;
  filter: none;
}
.article-hero.video-banner:hover .article-hero-bg {
  transform: none;
  filter: none;
}
.article-hero.video-banner .article-hero-overlay {
  display: none;
}
.article-hero.video-banner:hover .work-video-play {
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}
.video-banner-caption {
  margin-bottom: 32px;
}
.video-banner-caption h3 {
  margin: 0 0 4px;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}
.video-banner-caption p {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
}

.page-arbeiten-schreiben .video-banner-caption h3 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.page-arbeiten-schreiben .video-banner-caption p {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 400;
  max-width: 78ch;
}

.author-profile {
  font-size: 1.1rem;
  margin-left: calc(6px);
  margin-top: 8px;
  margin-bottom: 32px;
}

/* Iran-Header: ganzen Block höher, Text wieder normal */
.iran-header {
  margin-top: -3.2em;
}

.article-hero-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.9);
}

.article-hero-title {
  margin: 0 0 16px;
  font-size: clamp(24px, 3.8vw, 40px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  max-width: 65%;
}

.article-hero-excerpt {
  margin: 0;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.5;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  max-width: 60%;
}

@media (max-width: 900px) {
  .article-hero {
    height: 380px;
  .work-video-play::before {
    border-width: 14px 0 14px 22px;
    margin-left: 0px;
    transform: translateX(5px);
  }
  }
  .article-hero-content {
    padding: 36px;
  }
  .iran-header {
    margin-top: -2.4em;
  }
  .article-hero-title {
    max-width: 80%;
  }
  .article-hero-excerpt {
    max-width: 75%;
  }
}

@media (max-width: 720px) {
  .iran-header {
    margin-top: -2em;
  }

  .iran-header.article-hero {
    aspect-ratio: 3 / 5;
    height: auto;
  }

  .iran-header.article-hero .article-hero-content {
    padding: 24px;
    justify-content: flex-end;
    padding-bottom: 20px;
  }
  .article-hero-title {
    font-size: clamp(20px, 3.5vw, 28px);
    max-width: 100%;
    margin-bottom: 8px;
  }
  .article-hero-excerpt {
    max-width: 100%;
    font-size: 12px;
  }

  .page-arbeiten-schreiben .video-banner-caption h3 {
    font-size: 21px;
  }

  .page-arbeiten-schreiben .video-banner-caption p {
    font-size: 18px;
  }
}

.intro-text .content{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.intro-text p{
  margin: 0;
  font-size: clamp(18px, 2.5vw, 22px);
  line-height: 1.6;
  color: #bdbdbd ;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}


.travel-carousel{
  position: relative;
  width: 100%;
  max-width: 900px;          /* größer */
  margin: 0 auto;
  overflow: hidden;          /* wichtig fürs „Einrasten“ */
  background: transparent;
  height: clamp(260px, 36vh, 420px); /* feste, responsive Höhe damit Pfeile nicht verrutschen */
}

.carousel-track{
  display: flex;
  transition: transform .45s ease;
  height: 100%;
}

.carousel-slide{
  flex: 0 0 100%;            /* exakt 100 % Breite pro Slide */
  min-width: 100%;
  margin: 0;                 /* keine Abstände dazwischen */
  padding: 0;
  display: flex;             /* zentriert das Bild innerhalb der fixen Höhe */
  align-items: center;
  justify-content: center;
}

.carousel-slide img{
  max-width: 95%;
  max-height: 100%;         /* Bild skaliert innerhalb der fixen Höhe */
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;      /* nichts wird abgeschnitten */
}
.carousel-control{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.5);
  width: 36px;
  height: 56px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  padding: 0;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
  z-index: 2;                /* sicher über den Bildern */
}

.carousel-control span{
  font-size: 22px;
  line-height: 1;
}

.carousel-control.prev{ left: 12px; }
.carousel-control.next{ right: 12px; }

.carousel-control:hover:not(:disabled){
  background: rgba(0,0,0,0.75);
  border-color: #fff;
  transform: translateY(-50%) scale(1.04);
}

.carousel-control:disabled{
  opacity: 0.3;
  cursor: default;
}

/* Lightbox / Bild-Vorschau */
.lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  padding: 24px;
}
.lightbox-hidden{ display:none }
.lightbox-content{ position:relative; max-width: 94%; max-height: 94%; display:flex; align-items:center; justify-content:center; }
.lightbox-content img{ max-width:100%; max-height:100%; display:block; border-radius:4px; box-shadow:0 20px 50px rgba(0,0,0,0.6); }
.lightbox-close,
.lightbox-nav{
  position:absolute; top:12px; right:12px; background:rgba(0,0,0,0.5); color:#fff; border:0; padding:8px 10px; border-radius:4px; cursor:pointer; font-size:16px;
}
.lightbox-close{ right:12px }
.lightbox-nav{ top:50%; transform:translateY(-50%); width:48px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:4px }
.lightbox-prev{ left:12px; right:auto }
.lightbox-next{ right:12px }
.lightbox-close:focus, .lightbox-nav:focus{ outline:2px solid var(--accent-blue) }

@media (max-width:640px){
  .lightbox-nav{ width:40px; height:48px; }
}

/* Anpassungen für Hochkant-Bilder */
.lightbox-overlay.lightbox-portrait .lightbox-content img{
  max-width: 44vw;    /* Portraits weiter rausgezoomt (kleiner) */
  max-height: 94%;
}
.lightbox-overlay:not(.lightbox-portrait) .lightbox-content img{
  max-width: 94%;
  max-height: 80vh;
}

@media (max-width: 720px){
  .lightbox-overlay.lightbox-portrait .lightbox-content img{
    max-width: 72vw;   /* Portraits auf Mobilgeräten etwas kleiner als vorher */
  }
  .lightbox-overlay:not(.lightbox-portrait) .lightbox-content img{
    max-height: 78vh;
  }
}

.legal h1 {
    font-family: var(--font-editorial);
    font-size: clamp(38px, 5.2vw, 54px);
    line-height: 0.98;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 20px;
  }