@charset "UTF-8";
/* ============================================================
   arturklassen.de — Moderne Gestaltungsschicht (2026)
   Design-Sprache der Arbeitsproben: Inter · Source Serif 4 ·
   IBM Plex Mono · Weißraum · feine Linien · ruhige Akzente
   Liegt als Override ÜBER den Bestands-Stylesheets.
   ============================================================ */

@font-face{font-family:'Inter';src:url('arbeitsproben/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('arbeitsproben/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('arbeitsproben/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('arbeitsproben/fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('arbeitsproben/fonts/source-serif-4-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('arbeitsproben/fonts/source-serif-4-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('arbeitsproben/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#1b1b1b; --mid:#505050; --faint:#8f8f8f; --rule:#dcdcdc;
  --akzent:#ff3300; --dunkel:rgba(14,13,12,.82);
}

/* ---------- Grundschrift ---------- */
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif !important;
  color:var(--ink); -webkit-font-smoothing:antialiased}

/* ---------- Navigation ---------- */
#navigation ul li a, #navigation2 ul li a{
  font-family:'Inter',sans-serif !important; font-size:15px; font-weight:500;
  letter-spacing:.06em; text-transform:lowercase; text-decoration:none;
  transition:color .2s ease}
#navigation ul li a:hover, #navigation2 ul li a:hover{color:var(--akzent)}

/* ---------- Überschriften ---------- */
h1,h2,h3{font-family:'Source Serif 4',Georgia,serif !important; font-weight:600;
  letter-spacing:-.01em}

/* About/Impressum/Kontakt: rote h2 → Serif in Tinte mit feiner Linie */
#about_text h2, #about_text2 h2, #impressum h2, #kontakt h2{
  color:var(--ink); font-size:clamp(28px,4vw,38px); line-height:1.15}
#about_text2 h2{color:var(--ink); font-size:24px; margin-top:56px;
  padding-bottom:10px; border-bottom:1px solid var(--ink)}
#about_text2 h3{font-size:19px; color:var(--ink); margin-top:28px}
#about_text2 h4{font-family:'Inter',sans-serif !important; font-size:13px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mid)}
#about_text p, #about_text2 p{font-size:16.5px; line-height:1.65; color:var(--ink)}
#about_text2 p{color:var(--mid)}
#about a, #impressum a, #kontakt a{color:var(--akzent); text-decoration:none;
  border-bottom:1px solid var(--rule); transition:border-color .2s ease}
#about a:hover, #impressum a:hover, #kontakt a:hover{border-color:var(--akzent)}

/* Kenntnisse-Ausklapper im neuen Kleid */
#kenntnisse[open]{background:#fafafa; border-left:2px solid var(--akzent)}
#kenntnisse .khinweis{color:var(--faint)}
#kenntnisse .klvl{color:var(--faint)}

/* ---------- Projektseiten (dunkle Vollbild-Seiten) ---------- */
#beschreibung h2{
  background:var(--dunkel) !important; opacity:1 !important;
  font-size:clamp(22px,3vw,30px); padding:18px 26px; line-height:1.25;
  background-blend-mode:normal !important}
#content, #content-3, #content-4{
  background-color:var(--dunkel) !important; opacity:1 !important;
  color:#eee; font-size:16px !important; line-height:1.6;
  padding:8px 26px 22px !important}
.projektbeschreibung{font-family:'Inter',sans-serif !important;
  font-size:15.5px !important; line-height:1.65; color:#e8e6e3}
.projektbeschreibung b{font-family:'Source Serif 4',Georgia,serif !important;
  font-size:19px; letter-spacing:0; color:#fff}
#content a, #content-3 a{color:#fff; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35); transition:border-color .2s ease}
#content a:hover, #content-3 a:hover{border-color:var(--akzent); color:#fff}
#content-2{background-color:rgba(10,10,10,.6) !important; padding:18px 20px !important;
  display:flex; flex-wrap:wrap; gap:10px}
#content-2 a.fancybox{line-height:0; flex:0 0 calc((100% - 20px)/3)}
#content-2 a.fancybox img{width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  padding:0 !important; display:block}
#content-1{opacity:1}

/* FACTS-Etikett → stilles Mono-Label */
#content, #content-3{font-family:'IBM Plex Mono',ui-monospace,monospace}
#content .projektbeschreibung, #content-3 .projektbeschreibung{font-family:'Inter',sans-serif !important}

/* ---------- Projektraster ---------- */
.grid figcaption{background:#000 !important}
.grid figcaption h3{font-family:'Source Serif 4',Georgia,serif !important;
  font-size:19px; color:#fff !important; opacity:1 !important}
.cs-style-3 figcaption span{font-family:'Inter',sans-serif; font-size:13px;
  color:#b5b0ab; letter-spacing:.03em}
.grid figcaption a{font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
  background:transparent !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.4); border-radius:2px;
  transition:border-color .2s ease, background .2s ease}
.grid figcaption a:hover{border-color:var(--akzent); background:rgba(255,51,0,.15) !important}

/* ---------- Footer ---------- */
#footer{background:#111 !important; padding-top:40px; padding-bottom:96px;
  overflow:hidden} /* Clearfix: gefloatete Spalten bleiben in der Fläche */
ul.footer_style{overflow:hidden}
#footer, #footer li{font-family:'Inter',sans-serif; font-size:14px; line-height:1.9; color:#b5b0ab}
#footer a{color:#e8e6e3; text-decoration:none; border-bottom:1px solid #333;
  transition:border-color .2s ease}
#footer a:hover{border-color:var(--akzent)}
#footer a.imp{color:#b5b0ab}
ul.footer_style li{font-size:14px; color:#b5b0ab}

/* ---------- Kontaktformular ---------- */
#kontaktformular input, #kontaktformular textarea{
  font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
  border:1px solid var(--rule); border-radius:2px; padding:10px 12px;
  transition:border-color .2s ease; outline:none}
#kontaktformular input:focus, #kontaktformular textarea:focus{border-color:var(--akzent)}
.senden{font-family:'Inter',sans-serif !important; font-weight:600; letter-spacing:.04em;
  cursor:pointer}

/* ---------- Feinschliff ---------- */
.posterblock img{box-shadow:0 12px 48px rgba(0,0,0,.5)}


/* ---------- Regiearbeiten-Liste (About) ---------- */
.regieliste{margin-top:20px;border-top:1px solid var(--rule)}
.rz{display:grid;grid-template-columns:96px 1fr;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.rj{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;color:var(--faint)}
.rt{font-size:16px;line-height:1.55;color:var(--mid)}
.rt .werk{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:19px;
  color:var(--ink);text-decoration:none;border-bottom:none}
#about .rt a.werk, #about_text2 .rt a.werk{border-bottom:none}
.rt a.werk:hover{color:var(--akzent)}
.rt .aus{display:block;font-size:14px;color:var(--faint);margin-top:4px}
.regienote{margin-top:18px;font-size:15px;color:var(--mid);max-width:72ch}
@media (max-width:640px){.rz{grid-template-columns:1fr;gap:2px}}


/* ---------- About-Kopf: Name gross, Rolle leise ---------- */
#about_text h2{font-size:clamp(32px,4.5vw,44px);line-height:1.05;margin-bottom:0}
#about_text p.rollenzeile, .rollenzeile{font-family:'Inter',sans-serif;font-size:17px;font-weight:500;
  color:var(--mid);margin:8px 0 22px;padding-bottom:14px;border-bottom:1px solid var(--ink)}


/* ---------- Luft zwischen Navigationsebene und Inhalt ---------- */
.grid{margin-top:-70px !important}          /* Projektraster: +35px Abstand */
#about{margin-top:-40px}                     /* About: +30px netto gegenüber Original */
#wrapper{margin-top:28px}                    /* Projektseiten: Titelpanel tiefer */
#kontakt, #impressum{margin-top:36px}

/* Zitate auf Projektseiten */
.zitat{font-style:italic;color:#f0ede9;letter-spacing:.01em}


/* ---------- Mobile (Responsive-Korrekturen) ---------- */
@media (max-width:800px){
  #head{height:150px}                 /* Kopfbereich mobil kompakter (Original: 200px) */
  #about{margin-top:0; margin-left:6%; margin-right:6%}
  #about img{display:block; margin-bottom:16px}   /* Luft zwischen Porträt und Name */
  #kontakt{margin-top:0; margin-left:6%; margin-right:6%; width:auto; max-width:100%}
  #kontaktformular, #kontaktformular table{width:100% !important; max-width:100%}
  #kontaktformular input, #kontaktformular textarea{width:100% !important; box-sizing:border-box}
  #kontakt h2{font-size:26px; word-wrap:break-word}
  html, body{overflow-x:hidden}
  #kontakt-info{position:static !important; left:auto; top:auto;
    margin:28px 0 6px; width:auto}
  #karte{margin-top:18px; clear:both}
  #wrapper{margin-top:12px}
  .grid{margin-top:-20px !important}
  .posterblock img{width:82%}
}


/* ---------- Startseite 2026: Hero + Stand ---------- */
.hero2026{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:56px;
  max-width:1080px;margin:28px auto 72px;padding:0 24px;align-items:start}
.heroBild img{width:100%;height:auto;display:block;box-shadow:0 12px 48px rgba(0,0,0,.28)}
.heroText h1{font-family:'Source Serif 4',Georgia,serif;font-weight:600;
  font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.heroRolle{font-size:16px;font-weight:500;color:var(--mid);
  margin:12px 0 0;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.stand{margin-top:28px}
.standLabel{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;
  letter-spacing:.12em;color:var(--faint);margin-bottom:4px}
.standZeile{font-size:15.5px;line-height:1.55;color:var(--mid);
  padding:12px 0;border-bottom:1px solid var(--rule)}
.standZeile a{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:17px;
  color:var(--ink);text-decoration:none}
.standZeile a:hover{color:var(--akzent)}
.heroWege{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.hlk{display:inline-block;font-size:14px;font-weight:500;color:var(--ink);
  text-decoration:none;border:1px solid var(--rule);border-radius:2px;
  padding:9px 16px;transition:border-color .2s ease,color .2s ease}
.hlk:hover{border-color:var(--akzent);color:var(--akzent)}
@media (max-width:800px){
  .hero2026{grid-template-columns:1fr;gap:28px;margin-top:8px}
  .heroBild{max-width:420px;margin:0 auto}
}


/* Startseite: statischer Filmstreifen unter dem Hero */
.filmstreifen{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
  max-width:1080px;margin:-24px auto 72px;padding:0 24px}
.filmstreifen a{line-height:0;overflow:hidden}
.filmstreifen img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform .35s ease,opacity .35s ease}
.filmstreifen a:hover img{transform:scale(1.05);opacity:.85}
@media (max-width:800px){.filmstreifen{grid-template-columns:repeat(2,1fr)}
  .filmstreifen a:nth-child(5){display:none}}

/* Filmstreifen: Projektname beim Darüberfahren */
.filmstreifen a{position:relative;display:block}
.filmstreifen a::after{content:attr(data-titel);position:absolute;left:0;right:0;bottom:0;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:500;letter-spacing:.02em;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.78));
  padding:22px 10px 9px;line-height:1.2;opacity:0;transition:opacity .3s ease;pointer-events:none}
.filmstreifen a:hover::after{opacity:1}

/* Feiner Credit auf Projektseiten */
.credit{font-size:13px;color:#a8a29c;letter-spacing:.02em}
.credit a{color:#a8a29c !important;border-bottom:1px solid rgba(255,255,255,.18) !important}
.credit a:hover{color:#fff !important;border-color:var(--akzent) !important}

/* Footer: Profil-Links im neuen Stil (statt Icon-Grafiken von 2012) */
.soz{display:block;font-size:14px;line-height:1.9;color:#b5b0ab !important;
  text-decoration:none;border-bottom:none !important;width:max-content;
  transition:color .2s ease}
.soz:hover{color:#fff !important}
.soz::before{content:"\2197";font-size:11px;color:#6f6a66;margin-right:8px;
  transition:color .2s ease}
.soz:hover::before{color:var(--akzent)}


/* Impressum & Datenschutz: Innenabstand und Lesebreite */
#impressum{padding:0 24px 40px; max-width:900px; box-sizing:border-box}
#impressum p, #impressum table{max-width:78ch}
#impressum h4{margin-top:26px}
@media (max-width:800px){#impressum{padding:0 6% 32px; margin-left:0; margin-right:0}}