/* ==========================================================
   JOSEF MOHAMED — Notizbuch / Fotobuch
   Papierweiss · Kugelschreiberblau · Textmarker · Klebeband
   ========================================================== */

@font-face{
  font-family:"Body";
  src:url("fonts/WorkSans-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Body";
  src:url("fonts/WorkSans-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Body";
  src:url("fonts/WorkSans-Italic.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Display";
  src:url("fonts/Boldonse-Regular.ttf") format("truetype");
  font-weight:400; font-display:swap;
}

:root{
  --paper:#fbfaf6;
  --ink:#141414;          /* schwarze Tinte */
  --ink-deep:#000000;
  --text:#2a2a30;
  --muted:#6a6a74;
  --rule:rgba(28,63,214,0.10);
  --margin-line:rgba(214,70,70,0.30);
  --hl:#f4ff00;            /* Neon-Textmarker, pro Seite überschrieben */
  --hl2:rgba(244,255,0,.55); /* was der Filzstift ins Papier ausblutet */
}

body.p-leben    { --hl:#f4ff00; --hl2:rgba(244,255,0,.55); }  /* neongelb */
body.p-theater  { --hl:#ff2bc4; --hl2:rgba(255,43,196,.45); } /* neonpink */
body.p-film     { --hl:#55ff1f; --hl2:rgba(85,255,31,.45); }  /* neongrün */
body.p-programm { --hl:#ff9500; --hl2:rgba(255,149,0,.5); }   /* neonorange */
body.p-kontakt  { --hl:#00e8ff; --hl2:rgba(0,232,255,.5); }   /* neoncyan */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }

body{
  margin:0;
  overflow-x:clip;               /* schluckt das Übersteh-Pixel gedrehter Elemente */
  font-family:"Body", system-ui, sans-serif;
  color:var(--text);
  font-size:16.5px;
  line-height:1.55;
  background-color:#e8e9ec;
  -webkit-font-smoothing:antialiased;
}

/* weichgezeichnetes Foto als Hintergrund, bleibt beim Scrollen stehen */
.bgphoto{
  position:fixed;
  inset:-6%;
  z-index:-2;
  background-image:url("images/web/Josef_Mohamed_KemaraPol_12.jpg");
  background-size:cover;
  background-position:center 40%;
  filter:blur(46px) brightness(1.22) saturate(.55);
}
.bgphoto::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(248,248,250,.55);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--hl); color:var(--text); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:4px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 max(58px, 7vw);
  position:relative;
  z-index:2;
}

/* ---------- Handschrift-Grundstile ---------- */
.hand{ font-family:"Body", system-ui, sans-serif; font-weight:700; color:var(--ink); }

/* Textmarker-Strich (ungleichmässige Kanten) */
.mark{
  background-image:
    linear-gradient(101deg, transparent 0 1%, var(--hl) 1.8% 97.5%, transparent 98.6% 100%),
    linear-gradient(101deg, transparent 0 .4%, var(--hl2) 1% 98.6%, transparent 99.4% 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% .70em, 100% .96em;
  background-position:0 74%, 0 85%;
  mix-blend-mode:multiply;
  border-radius:.6em .3em .7em .35em;
  padding:.06em .3em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* handgezogene Wellenlinie unter Links */
.squiggle{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='7'%3E%3Cpath d='M0 4.5 Q 5 1.4, 10 4.5 T 20 4.5 T 30 4.5 T 40 4.5' stroke='%23141414' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-position:0 100%;
  background-size:40px 7px;
  padding-bottom:8px;
}

/* handgezeichneter Pfeil */
.arr{
  width:26px; height:13px;
  stroke:var(--ink);
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
  transition:transform .2s ease;
}

/* ---------- Kopfzeile (Unterseiten) ---------- */
.topbar{
  position:relative;
  z-index:3;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px 26px;
  flex-wrap:wrap;
  padding:26px max(58px, 7vw) 18px;
  border-bottom:1px solid rgba(20,20,20,.16);
}
.topbar .mark-name{
  font-family:"Display", system-ui, sans-serif;
  color:var(--ink);
  font-size:1.05rem;
  line-height:1;
  transform:rotate(-1.5deg);
  display:inline-block;
}
.topbar nav{ display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline; }
.topbar nav a{
  font-family:"Body", system-ui, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink);
  font-size:.82rem;
  line-height:1.1;
  display:inline-block;
  transition:transform .18s ease;
  background-image:linear-gradient(104deg, var(--hl), var(--hl));
  background-repeat:no-repeat;
  background-size:0% .62em;
  background-position:0 72%;
  transition:background-size .3s ease, transform .18s ease;
}
.topbar nav a:hover{ background-size:100% .62em; transform:rotate(-1deg); }
.topbar nav a.active{ background-size:100% .62em; }
.topbar .go-contact{
  font-family:"Body", system-ui, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink);
  font-size:.82rem;
  display:inline-flex;
  align-items:center;
  gap:7px;
  transform:rotate(-2deg);
}
.topbar .go-contact:hover .arr{ transform:translateX(4px); }

/* ---------- Seitenkopf ---------- */
.page-head{ padding:46px 0 26px; }
.page-head .kritzel{
  font-family:"Body", system-ui, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--ink);
  font-size:.78rem;
  transform:rotate(-1.4deg);
  display:inline-block;
  margin-bottom:6px;
}
.page-head h1{
  font-family:"Display", system-ui, sans-serif;
  color:var(--ink);
  font-size:clamp(1.8rem, 5vw, 3.6rem);
  line-height:1.02;
  margin:0 0 14px;
  font-weight:400;
  display:inline-block;      /* schrumpft auf Textbreite, damit die Drehung nicht übersteht */
  transform:rotate(-2.6deg);
  transform-origin:left center;
}
.page-head .lede{
  max-width:60ch;
  font-size:1.06rem;
  color:var(--text);
  margin:0;
}

section{ padding:34px 0 56px; }

h2.hand-h{
  font-family:"Display", system-ui, sans-serif;
  color:var(--ink);
  font-weight:400;
  font-size:clamp(1.1rem, 2.4vw, 1.7rem);
  margin:58px 0 16px;
  display:inline-block;
  transform:rotate(-2.2deg);
  transform-origin:left center;
  /* mit dem Textmarker angemalt */
  background-image:
    linear-gradient(101deg, transparent 0 1%, var(--hl) 1.8% 97.5%, transparent 98.6% 100%),
    linear-gradient(101deg, transparent 0 .4%, var(--hl2) 1% 98.6%, transparent 99.4% 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% .70em, 100% .96em;
  background-position:0 74%, 0 85%;
  mix-blend-mode:multiply;
  background-repeat:no-repeat;
  border-radius:.6em .3em .7em .35em;
  padding:.02em .32em .06em;
}
p{ max-width:64ch; }

/* ---------- Fotos: ohne Rahmen, aufgeklebt ---------- */
.snap{
  position:relative;
  display:block;
  box-shadow:0 14px 34px rgba(30,28,20,.26);
}
.snap img{ width:100%; height:100%; object-fit:cover; }
.snap::after{           /* Klebeband */
  content:"";
  position:absolute;
  width:104px; height:27px;
  background:rgba(255,255,255,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.10);
  top:-13px; left:16%;
  transform:rotate(-7deg);
}
.snap.tape-r::after{ left:auto; right:14%; transform:rotate(6deg); }
.snap.tape-c::after{ left:50%; margin-left:-52px; transform:rotate(2deg); }
.snap.tape-none::after{ display:none; }

.cap{
  font-family:"Body", system-ui, sans-serif;
  font-weight:600;
  color:var(--ink);
  font-size:.8rem;
  line-height:1.2;
  margin-top:7px;
  transform:rotate(-1deg);
  display:block;
}

/* ---------- Listen wie Notizbuch-Zeilen ---------- */
.notes{ margin-top:22px; }
.note{
  display:grid;
  grid-template-columns:98px 1fr 30px;
  gap:10px 16px;
  align-items:baseline;
  padding:13px 4px 13px 2px;
  border-bottom:1px solid rgba(20,20,20,.13);
  transition:transform .18s ease;
}
a.note:hover{ transform:translateX(7px); }
a.note:hover .arr{ transform:translateX(4px); }
.note .year{
  font-family:"Body", system-ui, sans-serif;
  font-weight:700;
  color:var(--ink);
  font-size:1.02rem;
  line-height:1;
  display:inline-block;
}
.note:nth-child(2n) .year{ transform:rotate(-2.4deg); }
.note:nth-child(3n) .year{ transform:rotate(1.8deg); }
.note .title{ font-weight:700; font-size:1.04rem; display:inline; }
.note .meta{ color:var(--muted); font-size:.92rem; display:block; margin-top:3px; }
.note .end{ display:flex; justify-content:flex-end; align-items:center; }

/* hervorgehoben = mit Textmarker angemalt */
.note.hl .title{
  background-image:
    linear-gradient(101deg, transparent 0 1%, var(--hl) 1.8% 97.5%, transparent 98.6% 100%),
    linear-gradient(101deg, transparent 0 .4%, var(--hl2) 1% 98.6%, transparent 99.4% 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% .70em, 100% .96em;
  background-position:0 74%, 0 85%;
  mix-blend-mode:multiply;
  border-radius:.6em .3em .7em .35em;
  padding:.06em .3em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

@media (max-width:620px){
  .note{ grid-template-columns:66px 1fr 26px; gap:8px 10px; }
  .note .title{ font-size:.99rem; }
  .note .year{ font-size:1.2rem; }
}

/* ---------- Chips (Sprachen, Skills) ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:14px; }
.chip{
  font-family:"Body", system-ui, sans-serif;
  font-weight:600;
  color:var(--ink);
  font-size:.94rem;
  line-height:1.1;
  padding:2px 4px;
  display:inline-block;
}
.chip:nth-child(3n)  { transform:rotate(-3deg); }
.chip:nth-child(3n+1){ transform:rotate(2.4deg); }
.chip:nth-child(4n)  { transform:rotate(-1deg) translateY(3px); }
.chip.on{
  background-image:
    linear-gradient(101deg, transparent 0 1%, var(--hl) 1.8% 97.5%, transparent 98.6% 100%),
    linear-gradient(101deg, transparent 0 .4%, var(--hl2) 1% 98.6%, transparent 99.4% 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% .70em, 100% .96em;
  background-position:0 74%, 0 85%;
  mix-blend-mode:multiply;
  border-radius:.6em .3em .7em .35em;
  padding:.06em .34em;
}

/* ---------- Fusszeile ---------- */
footer{
  border-top:1px solid rgba(20,20,20,.16);
  margin-top:30px;
  padding:24px max(58px, 7vw) 60px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  justify-content:space-between;
  font-size:.9rem;
  color:var(--muted);
  position:relative;
  z-index:2;
}
footer .hand{ font-size:.9rem; }


/* ---------- Abschnitts-Links (Startseite) ---------- */
.book{ padding:60px max(58px,7vw) 30px; position:relative; z-index:2; }
.sheet{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:52px 26px;
  align-items:start;
}
.scribble{
  font-family:"Display", system-ui, sans-serif;
  color:var(--ink);
  font-size:clamp(1.7rem, 4.2vw, 3.3rem);
  line-height:1.02;
  display:inline;
  background-image:linear-gradient(104deg, var(--hl), var(--hl));
  background-repeat:no-repeat;
  background-size:0% .64em;
  background-position:0 76%;
  transition:background-size .35s ease;
}
.link-block{ display:inline-block; }
.link-block:hover .scribble{ background-size:100% .64em; }
.link-block:hover .arr{ transform:translateX(6px); }
.link-block .arr{ margin-left:10px; vertical-align:middle; width:34px; height:17px; }

.l1{ --hl:#f4ff00; --hl2:rgba(244,255,0,.55); }
.l2{ --hl:#ff2bc4; --hl2:rgba(255,43,196,.45); }
.l3{ --hl:#55ff1f; --hl2:rgba(85,255,31,.45); }
.l4{ --hl:#ff9500; --hl2:rgba(255,149,0,.5); }
.l5{ --hl:#00e8ff; --hl2:rgba(0,232,255,.5); }

@media (max-width:900px){
  .sheet{ display:flex; flex-direction:column; gap:38px; }
  .sheet > *{ grid-column:auto !important; margin-top:0 !important; }
}


/* ---------- Marker-Bausteine ---------- */
.mark-solid{                     /* voller Neonstrich, z. B. über Fotos */
  background-image:
    linear-gradient(101deg, transparent 0 1%, var(--hl) 1.8% 97.5%, transparent 98.6% 100%);
  background-repeat:no-repeat;
  background-size:100% .74em;
  background-position:0 74%;
  padding:.04em .3em;
  border-radius:.5em .25em .6em .3em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.marker{                         /* wie .mark, aber als Baustein für die Varianten */
  background-image:
    linear-gradient(101deg, transparent 0 1%, var(--hl) 1.8% 97.5%, transparent 98.6% 100%),
    linear-gradient(101deg, transparent 0 .4%, var(--hl2) 1% 98.6%, transparent 99.4% 100%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% .70em, 100% .96em;
  background-position:0 74%, 0 85%;
  mix-blend-mode:multiply;
  padding:.04em .3em;
  border-radius:.5em .25em .6em .3em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}