/* Redaktionsplan. Farben, Radien und Abstaende aus dem aktiven Design-System
   "InnovationPort Wismar Fliessend": keine Rahmen, keine Trennlinien, Trennung
   ueber Weissraum und Tonwechsel. */

.ipr {
  --ipr-bg: #FFFFFF;
  --ipr-flaeche: #F5F8FB;
  --ipr-tinte: #001F3D;
  --ipr-akzent: #005EAA;
  --ipr-tief: #00698F;
  --ipr-sky: #80C2E7;
  --ipr-gedaempft: #314E6E;
  --ipr-leise: #5C7390;
  --ipr-signal: #FE0073;
  --ipr-r-sm: 12px;
  --ipr-r-md: 24px;
  font-family: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  color: var(--ipr-tinte);
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px 24px 128px;
}

.ipr * { box-sizing: border-box; }

.ipr-kopf { margin-bottom: 72px; }

.ipr-kopf h1 {
  font-size: clamp(38px, 5.5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

.ipr-kopf h1 span { font-weight: 300; }

.ipr-lauf {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ipr-gedaempft);
  max-width: 62ch;
  margin: 0;
}

/* Lage: was draengt */
.ipr-lage {
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-md);
  padding: 32px;
  margin: 32px 0 0;
}

.ipr-lage h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ipr-leise);
  margin: 0 0 16px;
}

.ipr-lage ul { margin: 0; padding: 0; list-style: none; }
.ipr-lage li { font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.ipr-lage li:last-child { margin-bottom: 0; }
.ipr-lage strong { color: var(--ipr-signal); font-weight: 700; }
.ipr-lage .ipr-ruhig { color: var(--ipr-gedaempft); }

/* Filter */
.ipr-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 72px 0 32px;
}

.ipr-filter button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ipr-gedaempft);
  background: var(--ipr-flaeche);
  border: 0;
  border-radius: var(--ipr-r-sm);
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.ipr-filter button:hover { color: var(--ipr-akzent); }

.ipr-filter button[aria-pressed="true"] {
  background: var(--ipr-akzent);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 31, 61, 0.18);
}

/* Beitraege */
.ipr-liste { display: flex; flex-direction: column; gap: 32px; }

.ipr-beitrag {
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-md);
  padding: 32px;
  scroll-margin-top: 32px;
}

.ipr-beitrag[hidden] { display: none; }

.ipr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  font-size: 15px;
  color: var(--ipr-gedaempft);
  margin-bottom: 16px;
}

.ipr-kanal {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  background: var(--ipr-tief);
  border-radius: var(--ipr-r-sm);
  padding: 6px 12px;
}

.ipr-datum { font-weight: 600; color: var(--ipr-tinte); }

.ipr-frist { font-weight: 600; }
.ipr-frist.ist-eng { color: var(--ipr-signal); }

.ipr-marke {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--ipr-r-sm);
  padding: 6px 12px;
  background: var(--ipr-signal);
  color: #FFFFFF;
}

.ipr-beitrag h3 {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.ipr-hook {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ipr-gedaempft);
  margin: 0 0 32px;
  max-width: 62ch;
}

.ipr-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}

.ipr-spalte h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ipr-leise);
  margin: 0 0 12px;
}

.ipr-spalte ul { margin: 0; padding: 0; list-style: none; }

.ipr-spalte li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
  color: var(--ipr-gedaempft);
}

.ipr-spalte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--ipr-sky);
}

.ipr-spalte.ist-offen li::before { background: var(--ipr-signal); }
.ipr-spalte .ipr-nichts { color: var(--ipr-leise); font-size: 16px; }

/* Kommentare */
.ipr-reden { margin-top: 32px; }

.ipr-reden > h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ipr-leise);
  margin: 0 0 16px;
}

.ipr-kommentar {
  background: var(--ipr-bg);
  border-radius: var(--ipr-r-sm);
  padding: 16px 20px;
  margin-bottom: 8px;
}

.ipr-kommentar .ipr-wer {
  font-size: 13px;
  font-weight: 600;
  color: var(--ipr-leise);
  margin-bottom: 4px;
}

.ipr-kommentar p { margin: 0; font-size: 16px; line-height: 1.55; }

.ipr-reden form { margin-top: 16px; }

.ipr-reden textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ipr-tinte);
  background: var(--ipr-bg);
  border: 0;
  border-radius: var(--ipr-r-sm);
  padding: 16px 20px;
  resize: vertical;
}

.ipr-reden textarea:focus {
  outline: 3px solid var(--ipr-sky);
  outline-offset: 2px;
}

.ipr-reden .submit,
.ipr-anmelden {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  background: var(--ipr-akzent);
  border: 0;
  border-radius: var(--ipr-r-sm);
  padding: 12px 20px;
  margin-top: 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 6px 18px rgba(0, 31, 61, 0.18);
}

.ipr-reden .comment-form-comment { margin: 0; }
.ipr-reden .comment-reply-title,
.ipr-reden .comment-notes,
.ipr-reden .logged-in-as { display: none; }

.ipr-hinweis { font-size: 15px; color: var(--ipr-leise); margin: 16px 0 0; }

/* Passwortformular */
.ipr-schloss {
  max-width: 520px;
  margin: 128px auto;
  padding: 32px;
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-md);
  font-family: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  color: #001F3D;
}

.ipr-schloss h1 { font-size: 32px; font-weight: 700; margin: 0 0 16px; }
.ipr-schloss p { color: #314E6E; line-height: 1.55; }
.ipr-schloss input[type="password"] {
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
  margin-right: 8px;
}
.ipr-schloss input[type="submit"] {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  background: #005EAA;
  border: 0;
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
}

@media (max-width: 640px) {
  .ipr { padding: 32px 16px 72px; }
  .ipr-beitrag, .ipr-lage { padding: 24px; }
  .ipr-filter { margin: 32px 0 24px; }
}

/* ---------- Ampel ---------- */
.ipr-punkt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.ipr-punkt.ist-rot      { background: var(--ipr-signal); }
.ipr-punkt.ist-gelb     { background: #FFAA00; }
.ipr-punkt.ist-gruen    { background: #3AE0CD; }
.ipr-punkt.ist-erledigt { background: var(--ipr-sky); }

.ipr-ampel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ipr-gedaempft);
}

.ipr-ampel.ist-rot { color: var(--ipr-signal); }

.ipr-grund {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ipr-gedaempft);
  margin: 0 0 16px;
  max-width: 62ch;
}

/* ---------- Kalender ---------- */
/* Ein Monat auf der vollen Breite. Drei nebeneinander ergaben Tageskacheln
   von 37 Pixeln, darin bricht der Titel buchstabenweise um. */
.ipr-kalender { margin: 0 0 72px; }

.ipr-kalenderkopf {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.ipr-monatsname {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  min-width: 12ch;
}

.ipr-pfeil {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ipr-akzent);
  color: #FFFFFF;
  border: 0;
  border-radius: var(--ipr-r-sm);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 31, 61, 0.18);
  transition: opacity 0.18s ease;
}

.ipr-pfeil svg { width: 22px; height: 22px; }

.ipr-pfeil:disabled {
  background: var(--ipr-flaeche);
  color: var(--ipr-leise);
  box-shadow: none;
  cursor: default;
}

.ipr-monat {
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-md);
  padding: 24px;
}

.ipr-monat[hidden] { display: none; }

.ipr-raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.ipr-wochentag {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ipr-leise);
  padding-bottom: 8px;
}

.ipr-tag {
  min-height: 96px;
  border-radius: var(--ipr-r-sm);
  background: var(--ipr-bg);
  padding: 8px;
}

.ipr-tag.ist-leer { background: transparent; }

.ipr-tagzahl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ipr-leise);
  margin-bottom: 6px;
}

.ipr-tag.ist-wochenende .ipr-tagzahl { opacity: 0.55; }
.ipr-tag.ist-heute .ipr-tagzahl { color: var(--ipr-akzent); }
.ipr-tag.ist-heute { box-shadow: inset 0 0 0 2px var(--ipr-sky); }

.ipr-eintrag {
  display: block;
  text-decoration: none;
  background: var(--ipr-flaeche);
  border-radius: 8px;
  padding: 8px 10px 9px;
  margin-bottom: 6px;
}

.ipr-eintrag:last-child { margin-bottom: 0; }
.ipr-eintrag[hidden] { display: none; }

.ipr-eintrag.ist-rot      { box-shadow: inset 4px 0 0 var(--ipr-signal); }
.ipr-eintrag.ist-gelb     { box-shadow: inset 4px 0 0 #FFAA00; }
.ipr-eintrag.ist-gruen    { box-shadow: inset 4px 0 0 #3AE0CD; }
.ipr-eintrag.ist-erledigt { box-shadow: inset 4px 0 0 var(--ipr-sky); }

.ipr-eintrag-kopf {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ipr-tief);
  margin-bottom: 3px;
}

.ipr-eintrag-titel {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ipr-tinte);
}

.ipr-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 14px;
  color: var(--ipr-gedaempft);
  margin: 16px 0 0;
}

.ipr-lage .ipr-punkt { margin-right: 8px; }

/* Auf schmalen Schirmen tragen die Tageskacheln keinen Text mehr. Dann bleibt
   der Balken als Farbmarke, die Einzelheiten stehen ohnehin in der Liste. */
@media (max-width: 760px) {
  .ipr-monat { padding: 16px; }
  .ipr-raster { gap: 4px; }
  .ipr-tag { min-height: 52px; padding: 4px; }
  .ipr-tagzahl { font-size: 11px; margin-bottom: 4px; }
  .ipr-wochentag { font-size: 10px; text-align: center; }
  .ipr-monatsname { font-size: 22px; }
  .ipr-eintrag-kopf, .ipr-eintrag-titel { display: none; }
  .ipr-eintrag {
    height: 7px;
    padding: 0;
    margin-bottom: 3px;
    border-radius: 4px;
    box-shadow: none;
  }
  .ipr-eintrag.ist-rot      { background: var(--ipr-signal); }
  .ipr-eintrag.ist-gelb     { background: #FFAA00; }
  .ipr-eintrag.ist-gruen    { background: #3AE0CD; }
  .ipr-eintrag.ist-erledigt { background: var(--ipr-sky); }
}
/* ---------- Vorschau: so saehe es auf der Plattform aus ----------
   Innerhalb des Mockups gelten die Formen der fremden Plattform, nicht die
   eigene Radienskala. Ein rundes Profilbild ist rund, weil es dort rund ist.
   Ausserhalb des Rahmens gilt wieder das Haus. */

.ipr-koerper {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: start;
}

.ipm {
  background: var(--ipr-bg);
  border-radius: var(--ipr-r-sm);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 31, 61, 0.12);
  max-width: 340px;
}

.ipm-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}

.ipm-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ipr-akzent);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ipm-linkedin .ipm-avatar { border-radius: 6px; }

.ipm-wer { line-height: 1.25; }
.ipm-wer strong { display: block; font-size: 13px; font-weight: 700; color: var(--ipr-tinte); }
.ipm-klein { display: block; font-size: 11px; color: var(--ipr-leise); }

.ipm-format {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ipr-leise);
}

.ipm-buehne { position: relative; background: var(--ipr-tinte); }
.ipm-bild { display: block; width: 100%; height: auto; }

.ipm-zaehler {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 31, 61, 0.72);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
}

.ipm-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 31, 61, 0.5);
}

.ipm-play::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 17px solid #FFFFFF;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  transform: translateX(3px);
}

.ipm-leiste {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px 6px;
  color: var(--ipr-tinte);
}

.ipm-leiste svg { width: 22px; height: 22px; display: block; }

.ipm-linkedin .ipm-leiste {
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: var(--ipr-gedaempft);
}

.ipm-linkedin .ipm-leiste span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
}

.ipm-linkedin .ipm-leiste svg { width: 17px; height: 17px; }

.ipm-text {
  padding: 4px 14px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ipr-tinte);
  /* Ganze Zeilen abschneiden statt halbe: Vielfaches der Zeilenhoehe.
     line-clamp stolpert hier ueber die Umbrueche im Text. */
  max-height: 9em;
  overflow: hidden;
}

.ipm-text-oben { padding: 0 14px 12px; }
.ipm-tags { display: block; margin-top: 6px; color: var(--ipr-akzent); }

.ipm-streifen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  max-width: 340px;
}

.ipm-daumen {
  width: 42px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ipr-flaeche);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.ipm-daumen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipm-daumen.ist-aktiv { opacity: 1; box-shadow: 0 0 0 2px var(--ipr-akzent); }
.ipm-daumen:hover { opacity: 0.85; }

@media (max-width: 900px) {
  .ipr-koerper { grid-template-columns: 1fr; }
  .ipm, .ipm-streifen { max-width: 100%; }
}
.ipm-text-oben { max-height: 4.5em; }

.ipm-mehr {
  display: block;
  width: fit-content;
  padding: 0 14px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ipr-akzent);
}

.ipm-linkedin .ipm-mehr { margin-top: -8px; }

/* Veranstaltungen im Kalender: dezent, sie sind der Anlass und nicht der
   Beitrag. Kein Kasten, keine Signalfarbe, nur eine Zeile mit Marke. */
.ipr-termin {
  display: block;
  position: relative;
  padding: 4px 0 0 12px;
  font-size: 10px;
  line-height: 1.3;
  color: var(--ipr-leise);
}

.ipr-termin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--ipr-leise);
}

.ipr-legende-termin { position: relative; padding-left: 14px; }
.ipr-legende-termin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--ipr-leise);
}

@media (max-width: 760px) { .ipr-termin { display: none; } }

/* ---------- Erschienenes ----------
   Was draußen ist, steht nicht mehr in der Arbeitsliste, aber es ist auch
   nicht weg. Eine Lade am Ende der Seite, zu, mit Anzahl auf dem Griff. */
.ipr-fach {
  margin-top: 72px;
}

.ipr-fach > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ipr-gedaempft);
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-sm);
  padding: 12px 20px;
}

.ipr-fach > summary::-webkit-details-marker {
  display: none;
}

.ipr-fach > summary::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: var(--ipr-sky);
  flex: 0 0 auto;
}

.ipr-fach > summary::after {
  content: "anzeigen";
  color: var(--ipr-leise);
  font-weight: 400;
}

.ipr-fach[open] > summary::after {
  content: "zuklappen";
}

.ipr-fach > summary:hover {
  color: var(--ipr-akzent);
}

.ipr-fachnote {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ipr-leise);
  max-width: 62ch;
  margin: 16px 0 0;
}

.ipr-fach .ipr-liste {
  margin-top: 24px;
}
/* ---------- Redaktionsschluss ----------
   Ein Beitrag im Heft hat zwei Termine. Der Schluss ist der harte: was danach
   fertig wird, steht in keiner Ausgabe. Er bekommt deshalb die Signalfarbe des
   Systems, aber keine Flaeche, damit er nicht jede Karte uebertoent. */
.ipr-abgabe-marke {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ipr-signal);
  background: var(--ipr-bg);
  border-radius: var(--ipr-r-sm);
  padding: 6px 12px;
}

.ipr-abgabe {
  display: block;
  position: relative;
  text-decoration: none;
  padding: 4px 0 0 12px;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ipr-signal);
}

.ipr-abgabe::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--ipr-signal);
}

.ipr-abgabe[hidden] { display: none; }

.ipr-legende-abgabe {
  position: relative;
  padding-left: 12px;
  color: var(--ipr-signal);
}

.ipr-legende-abgabe::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 2px;
  background: var(--ipr-signal);
}

@media (max-width: 760px) {
  /* Wie die Beitragskacheln: auf schmalen Schirmen bleibt die Farbmarke. */
  .ipr-abgabe {
    height: 5px;
    padding: 0;
    margin-bottom: 3px;
    border-radius: 4px;
    background: var(--ipr-signal);
    overflow: hidden;
    text-indent: -9999px;
  }
  .ipr-abgabe::before { display: none; }
}

/* Worauf ein Beitrag einzahlt. Veranstaltungen und Angebote stehen
   gleichberechtigt nebeneinander: auch in einer Woche ohne Termin im Haus
   laeuft jeder Beitrag auf etwas zu. Ruhige Flaeche statt Signalfarbe, die
   gehoert der Ampel, eine je Beitrag. Radius aus der Skala, keine Pille. */
.ipr-einzahlung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 32px;
}

/* Der Hook bringt schon 32px mit, sonst reisst die Zeile ab. */
.ipr-hook + .ipr-einzahlung { margin-top: -16px; }

.ipr-einzahlung-wort {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ipr-leise);
}

.ipr-ziel {
  font-size: 14px;
  font-weight: 600;
  color: var(--ipr-akzent);
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-sm);
  padding: 6px 12px;
}


/* Farbmarke der Plattform, oben rechts in der Kalenderkachel. Sie sagt, wohin
   der Beitrag geht. Der Balken links sagt, wie es um ihn steht. Zwei Aussagen
   in einer kleinen Kachel, deshalb zwei Formen: hier ein Kreis, dort eine
   Kante. Die Farbe folgt der Plattform und nicht dem Format, Reel und Story
   sind beide Instagram. */
.ipr-eintrag { position: relative; }
.ipr-eintrag .ipr-eintrag-kopf { padding-right: 20px; }

.ipr-plattformpunkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5C7390;
  /* Der Ring setzt den Kreis vom Untergrund ab, auch auf farbiger Kachel. */
  box-shadow: 0 0 0 2px var(--ipr-flaeche);
  flex: 0 0 auto;
}

.ipr-eintrag .ipr-plattformpunkt {
  position: absolute;
  top: 7px;
  right: 7px;
}

.ipr-plattformpunkt.ist-instagram  { background: #E1306C; }
.ipr-plattformpunkt.ist-linkedin   { background: #0A66C2; }
.ipr-plattformpunkt.ist-whatsapp   { background: #1EA855; }
.ipr-plattformpunkt.ist-wiko       { background: #ED6A1C; }
.ipr-plattformpunkt.ist-website    { background: #00898F; }
.ipr-plattformpunkt.ist-newsletter { background: #A63AE6; }
.ipr-plattformpunkt.ist-bildschirm { background: #001F3D; }
.ipr-plattformpunkt.ist-facebook   { background: #4267B2; }
.ipr-plattformpunkt.ist-tiktok     { background: #2B2B33; }
.ipr-plattformpunkt.ist-youtube    { background: #8C1D1D; }
.ipr-plattformpunkt.ist-sonst      { background: #5C7390; }

/* Zweite Legendenzeile. Sie fuehrt nur die Kanaele, die im Plan vorkommen. */
.ipr-legende-plattform {
  margin-top: 8px;
  align-items: center;
}

.ipr-legende-wort {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ipr-leise);
}

.ipr-legende-plattform .ipr-plattformpunkt {
  box-shadow: 0 0 0 2px var(--ipr-bg);
  margin-right: 2px;
  vertical-align: -1px;
}

@media (max-width: 760px) {
  /* Die Kachel schrumpft hier auf einen 7px hohen Farbbalken, in dem auch der
     Titel wegfaellt. Ein Kreis darin waere groesser als der Balken selbst. */
  .ipr-eintrag .ipr-plattformpunkt { display: none; }
}

/* Freigabe. Ein Klick statt eines Telefonats. Das Herz ist gefuellt, wenn der
   Beitrag freigegeben ist, und traegt dann den Namen daneben, damit niemand
   raten muss, wer zugestimmt hat. Blau und nicht rot: die Signalfarben der
   Ampel stecken in derselben Karte, ein rotes Herz neben einer roten Ampel
   waeren zwei Aussagen in einer Farbe. */
.ipr-freigabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 32px;
}

.ipr-hook + .ipr-freigabe, .ipr-einzahlung + .ipr-freigabe { margin-top: -8px; }

.ipr-herz {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ipr-gedaempft);
  background: var(--ipr-flaeche);
  border: 0;
  border-radius: var(--ipr-r-sm);
  padding: 12px 18px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ipr-herz svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.ipr-herz:hover { background: #E1EDF7; color: var(--ipr-akzent); }

.ipr-herz.ist-an {
  background: var(--ipr-akzent);
  color: #FFFFFF;
}

.ipr-herz.ist-an svg { fill: #FFFFFF; stroke: #FFFFFF; }

.ipr-herz:disabled { opacity: 0.65; cursor: progress; }

/* Schlaegt der Klick fehl, muss man das sehen. Sonst haelt jemand einen
   Beitrag fuer freigegeben, der es nicht ist. */
.ipr-herz.ist-fehler { background: var(--ipr-signal); color: #FFFFFF; }
.ipr-herz.ist-fehler svg { stroke: #FFFFFF; }

.ipr-herz:focus-visible { outline: 2px solid var(--ipr-akzent); outline-offset: 3px; }

.ipr-freigabe-hinweis { font-size: 13px; color: var(--ipr-leise); }

@media (prefers-reduced-motion: reduce) {
  .ipr-herz { transition: none; }
}


/* Den ganzen Text lesen. Die Vorschau kuerzt wie die Plattform, damit man
   sieht, welcher Satz hinter dem Mehr verschwindet. Zum Freigeben muss man
   den Beitrag aber ganz gelesen haben, deshalb klappt das Mehr wirklich auf. */
.ipm-mehr {
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ipm-mehr:hover { text-decoration: underline; }
.ipm-mehr:focus-visible { outline: 2px solid var(--ipr-akzent); outline-offset: 2px; border-radius: 4px; }

.ipm.ist-offen .ipm-text,
.ipm.ist-offen .ipm-text-oben {
  max-height: none;
  overflow: visible;
}


/* Ideen fuer Beitraege. Eine abgesetzte Flaeche, kein Kasten mit Rahmen. Steht
   ueber dem Kalender, weil eine Idee vor dem Termin kommt. */
.ipr-ideen {
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-md);
  padding: 32px;
  margin-bottom: 72px;
}

.ipr-ideen h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.ipr-ideen-lauf {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ipr-gedaempft);
  max-width: 62ch;
  margin: 0 0 24px;
}

.ipr-ideen-liste {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

/* Die einzelne Idee hebt sich vom Kasten ab, wieder ueber den Tonwert. */
.ipr-idee {
  background: var(--ipr-bg);
  border-radius: var(--ipr-r-sm);
  padding: 16px 20px;
}

.ipr-idee p { margin: 4px 0 0; line-height: 1.55; }

.ipr-ideen .ipr-nichts { margin-bottom: 24px; }

/* Das Eingabefeld sitzt auf weisser Flaeche, damit es als Feld lesbar bleibt. */
.ipr-ideen textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ipr-tinte);
  background: var(--ipr-bg);
  border: 0;
  border-radius: var(--ipr-r-sm);
  padding: 14px 16px;
  resize: vertical;
}

.ipr-ideen textarea:focus-visible { outline: 2px solid var(--ipr-akzent); outline-offset: 2px; }

@media (max-width: 760px) {
  .ipr-ideen { padding: 24px 20px; margin-bottom: 48px; }
}


/* Wann das Material fertig sein muss. Ruhig, solange Zeit ist. Wird der Tag
   ueberschritten und es fehlt noch etwas, faellt die Marke auf: dann ist nicht
   der Termin knapp, sondern die Arbeit ueberfaellig. */
.ipr-produktion {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ipr-leise);
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-sm);
  padding: 6px 12px;
}

.ipr-produktion.ist-eng {
  color: #FFFFFF;
  background: var(--ipr-signal);
}

/* Eventgrafiken zum Herunterladen. Ein Raster Kacheln im Hochformat: das Bild
   ist zugleich der Download, darunter Termin, Titel und die beiden Wege.
   Wie im Rest der Seite kein Rahmen, getrennt wird ueber den Tonwechsel. */
.ipr-grafiken {
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-md);
  padding: 32px;
  margin: 32px 0 0;
}

.ipr-grafiken h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ipr-leise);
  margin: 0 0 16px;
}

.ipr-grafiken-lauf {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ipr-gedaempft);
  max-width: 62ch;
  margin: 0 0 32px;
}

.ipr-grafikliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px 24px;
}

.ipr-grafik { margin: 0; }

.ipr-grafik-bild {
  display: block;
  border-radius: var(--ipr-r-sm);
  overflow: hidden;
  background: #FFFFFF;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ipr-grafik-bild:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 31, 61, 0.18);
}

.ipr-grafik-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.ipr-grafik figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.ipr-grafik-wann {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ipr-leise);
}

.ipr-grafik-titel {
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
}

.ipr-grafik-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.ipr-laden,
.ipr-zumevent {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--ipr-r-sm);
  padding: 8px 14px;
}

.ipr-laden {
  background: var(--ipr-akzent);
  color: #FFFFFF;
}

.ipr-laden:hover {
  background: var(--ipr-tief);
  color: #FFFFFF;
}

.ipr-zumevent {
  background: #FFFFFF;
  color: var(--ipr-akzent);
}

.ipr-zumevent:hover { color: var(--ipr-tief); }

.ipr-grafik-klein {
  font-size: 12px;
  color: var(--ipr-leise);
}
/* Das Theme faerbt Links im Fliesstext und setzt figcaption kursiv. Beides
   schlaegt hier durch: der Knopf stand blau auf blau, die Bildunterschrift
   schraeg. Deshalb noch einmal, mit der Seite davor. */
.ipr .ipr-grafik figcaption { font-style: normal; }

.ipr .ipr-laden,
.ipr .ipr-laden:visited { color: #FFFFFF; }

.ipr .ipr-zumevent,
.ipr .ipr-zumevent:visited { color: var(--ipr-akzent); }

.ipr .ipr-laden:hover,
.ipr .ipr-laden:focus { color: #FFFFFF; }

.ipr .ipr-zumevent:hover,
.ipr .ipr-zumevent:focus { color: var(--ipr-tief); }

/* Die Karten stehen im Raster nebeneinander. Ohne gemeinsame Grundlinie
   rutschen die Knoepfe je nach Titellaenge auf verschiedene Hoehen. */
.ipr-grafik {
  display: flex;
  flex-direction: column;
}

.ipr-grafik figcaption { flex: 1; }

.ipr-grafik-knoepfe { margin-top: auto; padding-top: 4px; }
/* Oben zwei Laden nebeneinander: die Eventgrafiken und die Ideensammlung.
   Beide zugeklappt, damit der Kalender das erste ist, was auf der Seite steht.
   Die Kaesten davor waren ausgeklappt und schoben ihn unter den Falz.
   Auf schmalen Schirmen stehen die Laden untereinander. */
.ipr-oben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
  margin: 32px 0 48px;
}

/* Setzt die Flaechenwerte der frueheren Kaesten zurueck: die Polsterung sitzt
   jetzt an der Zeile und am Inhalt, sonst polstert die Lade doppelt. */
.ipr-klapp {
  background: var(--ipr-flaeche);
  border-radius: var(--ipr-r-md);
  padding: 0;
  margin: 0;
}

.ipr-klapp > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 24px 32px;
  cursor: pointer;
  list-style: none;
}

.ipr-klapp > summary::-webkit-details-marker { display: none; }
.ipr-klapp > summary::marker { content: ""; }

.ipr-klapp > summary:focus-visible {
  outline: 2px solid var(--ipr-akzent);
  outline-offset: -2px;
  border-radius: var(--ipr-r-md);
}

/* Der Winkel rechts zeigt, dass hier etwas aufgeht, und dreht sich dabei. */
.ipr-klapp > summary::after {
  content: "";
  margin-left: auto;
  align-self: center;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ipr-leise);
  border-bottom: 2px solid var(--ipr-leise);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.ipr-klapp[open] > summary::after { transform: rotate(-135deg); }

.ipr-klapp-titel {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--ipr-leise);
}

.ipr-klapp-zahl {
  font-size: 15px;
  color: var(--ipr-gedaempft);
}

.ipr-klapp-inhalt { padding: 0 32px 32px; }

/* In der halben Breite passen schmalere Karten besser ins Raster. */
.ipr-oben .ipr-grafikliste {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 24px 16px;
}

.ipr-oben .ipr-grafik-titel { font-size: 15px; }
.ipr-oben .ipr-laden,
.ipr-oben .ipr-zumevent { padding: 7px 12px; }

@media (max-width: 760px) {
  .ipr-klapp > summary { padding: 20px; }
  .ipr-klapp-inhalt { padding: 0 20px 24px; }
}