/* =========================================================================
   beeksnieder.dev - Stylesheet
   Alle Farben stehen als Variablen ganz oben. Willst du das Aussehen aendern,
   fang dort an - der Rest zieht automatisch nach.
   ========================================================================= */

:root {
  /* Grundflaechen und Text */
  --papier:       #FBF9F5;   /* Seitenhintergrund */
  --flaeche:      #FFFFFF;   /* Karten, abgesetzte Bereiche */
  --tinte:        #23201C;   /* normaler Text */
  --tinte-leise:  #5E574E;   /* Nebentext, Bildunterschriften */
  --tinte-still:  #8B8378;   /* Marginalien */
  --linie:        #E6DFD4;   /* Trennlinien, Rahmen */

  /* Akzent: gedecktes Rot, wie ein Preisstempel */
  --akzent:       #A63A28;
  --akzent-hell:  #F6EAE6;

  --breite: 62rem;
  --radius: 10px;

  /* Systemschriften: keine externen Anfragen, kein Nachladen, keine
     Datenschutzfrage - und auf jedem Geraet die vertraute Schrift. */
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:      #1A1815;
    --flaeche:     #232019;
    --tinte:       #EDE7DD;
    --tinte-leise: #B5AC9E;
    --tinte-still: #877E71;
    --linie:       #38332B;
    --akzent:      #E8836C;
    --akzent-hell: #2E211C;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.mitte {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Sprungmarke fuer Tastaturnutzung - nur sichtbar, wenn angesprungen */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--akzent);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--radius);
}

/* ---------- Kopfzeile ---------- */
.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
  position: sticky;
  top: 0;
  z-index: 5;
}
.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.marke {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--tinte);
}
.marke span { color: var(--akzent); }

.kopf nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.kopf nav a {
  text-decoration: none;
  color: var(--tinte-leise);
  font-size: .96rem;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.kopf nav a:hover { color: var(--tinte); }
.kopf nav a[aria-current="page"] {
  color: var(--tinte);
  border-bottom-color: var(--akzent);
}

/* ---------- Aufklappmenue unter "Projekte" ---------- */
/* Als Flex-Element mitwachsen, damit "Projekte" auf derselben Linie sitzt
   wie die Nachbarpunkte - und die Klappe unter der ganzen Zeile aufgeht. */
.untermenue {
  position: relative;
  display: flex;
  align-items: center;
}

/* Kleines Dreieck als Hinweis, dass hinter dem Punkt mehr steckt. */
.untermenue > a::after {
  content: " \25BE";
  color: var(--tinte-still);
  font-size: .8em;
}

.untermenue > ul {
  position: absolute;
  top: calc(100% + .6rem);
  left: -.9rem;
  z-index: 6;
  min-width: 13.5rem;
  max-width: calc(100vw - 3rem);
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);

  /* Nicht display:none, sondern unsichtbar geschaltet: So bleibt die Klappe
     ueber die Tabulatortaste erreichbar und laesst sich weich einblenden. */
  visibility: hidden;
  opacity: 0;
  transition: opacity .13s ease, visibility .13s;
}

/* Unsichtbare Bruecke ueber den Abstand zwischen Menuepunkt und Klappe.
   Ohne sie verlaesst die Maus auf dem Weg nach unten kurz beide Flaechen,
   und das Menue klappt einem unter dem Zeiger wieder zu. */
.untermenue > ul::before {
  content: "";
  position: absolute;
  top: -.6rem;
  left: 0;
  right: 0;
  height: .6rem;
}

/* Aufklappen bei Mauskontakt - aber nur auf Geraeten, die ueberhaupt einen
   Zeiger haben. Auf dem Handy wuerde die Klappe sonst beim Antippen haengen
   bleiben, statt dass der Link einfach zur Projektseite fuehrt. */
@media (hover: hover) {
  .untermenue:hover > ul { visibility: visible; opacity: 1; }
}
/* Aufklappen bei Tastaturfokus: Der Menuepunkt selbst wird zuerst
   angesprungen, dadurch greift focus-within und die Eintraege darunter
   sind ab dem naechsten Tabulatorschritt erreichbar. */
.untermenue:focus-within > ul { visibility: visible; opacity: 1; }

/* Die Eintraege in der Klappe sind keine Hauptnavigationspunkte - der
   Unterstrich und die Groesse von oben werden hier zurueckgenommen. */
.kopf .untermenue li a {
  display: block;
  padding: .42rem 1rem;
  border-bottom: none;
  font-size: .92rem;
  color: var(--tinte-leise);
}
.kopf .untermenue li a:hover {
  background: var(--akzent-hell);
  color: var(--akzent);
}
/* Eigene Regel noetig: Die Auszeichnung der aktuellen Seite weiter oben
   (.kopf nav a[aria-current="page"]) arbeitet mit einem Unterstrich, den
   die Regel fuer die Klappeneintraege gleich wieder abraeumt - und beide
   sind gleich genau, sodass die spaetere gewinnt. Hier also ausdruecklich. */
.kopf .untermenue li a[aria-current="page"] {
  color: var(--tinte);
  background: var(--akzent-hell);
  font-weight: 600;
}
/* Eintraege, die die aktuelle Seite verlassen, statt zu einem Abschnitt zu
   springen - abgesetzt, damit der Unterschied vor dem Klick sichtbar ist. */
.kopf .untermenue li.andere-seite {
  border-top: 1px solid var(--linie);
  margin-top: .35rem;
  padding-top: .35rem;
}

/* ---------- Textblöcke ---------- */
main { padding: 3.5rem 1.5rem 4.5rem; }

.hero { margin-bottom: 3.5rem; }
.hero.schmal { margin-bottom: 2.5rem; }

.eyebrow {
  font-family: var(--schrift-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 .9rem;
}

h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h2 {
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -.014em;
  margin: 2.8rem 0 .9rem;
  text-wrap: balance;
}
h3 {
  font-size: 1.08rem;
  margin: 1.8rem 0 .5rem;
}

p { margin: 0 0 1rem; max-width: 62ch; }

.lead {
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--tinte);
  max-width: 55ch;
}
.lead-klein {
  color: var(--tinte-leise);
  max-width: 55ch;
}

/* Zeilenlaenge: Absaetze stehen dank der p-Regel oben auf 62ch. Listen erben
   das nicht - ohne diese Zeile laufen sie ueber die volle Spaltenbreite und
   ihre Zeilen sind rund die Haelfte laenger als die der Absaetze darueber.
   Das "+ 1.2rem" gleicht die Einrueckung der Aufzaehlungspunkte aus, damit
   der Text selbst genauso breit laeuft wie im Absatz daneben. */
.text ul,
.projekt ul { max-width: calc(62ch + 1.2rem); padding-left: 1.2rem; }
.text li, .projekt li { margin-bottom: .7rem; }
li::marker { color: var(--tinte-still); }

a { color: var(--akzent); }
a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Projektkarten auf der Startseite ---------- */
.karten {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 1.5rem;
}
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.karte h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.karte h3 a { text-decoration: none; }
.karte h3 a:hover { text-decoration: underline; }
.karte p { margin-bottom: 0; }
.karte p + p { margin-top: .6rem; }

.karte-zeile {
  font-family: var(--schrift-mono);
  font-size: .8rem;
  color: var(--tinte-still);
  margin-bottom: .8rem !important;
}

/* ---------- Projektseite ---------- */
.projekt {
  border-top: 1px solid var(--linie);
  padding-top: 2.2rem;
  margin-bottom: 3.5rem;
}
.projekt h2 { margin-top: 0; }

.kontaktzeile { font-size: 1.12rem; }
.hinweis { color: var(--tinte-leise); font-size: .95rem; }

/* ---------- Link-Reihe: Profile auf der Kontaktseite, Wege zurueck auf der 404 ---------- */
.profil {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  max-width: none;
  margin: -.2rem 0 1.8rem;
}
.profil a {
  font-family: var(--schrift-mono);
  font-size: .84rem;
  text-decoration: none;
  color: var(--tinte-leise);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: .35rem .85rem;
}
.profil a:hover {
  color: var(--akzent);
  border-color: var(--akzent);
}
/* Pfeil nach schraeg oben an allen Links, die die Seite verlassen. Steht im
   Stylesheet statt im HTML, damit er automatisch mitkommt, sobald irgendwo
   ein target="_blank" dazukommt. */
.profil a[target="_blank"]::after {
  content: " \2197";
  font-size: .85em;
  opacity: .65;
}

/* ---------- Techstack als Liste (Ueber mich) ---------- */
.stack {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0 1.5rem;
  max-width: calc(62ch + 1.2rem);
  margin: 1.4rem 0 0;
}
.stack dt {
  font-family: var(--schrift-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-still);
  padding-top: .3rem;
}
.stack dd {
  margin: 0 0 1rem;
}
/* Zweite Stufe (Grundkenntnisse): etwas leiser gesetzt, damit die
   Gewichtung schon beim Ueberfliegen sichtbar ist und nicht erst
   ueber die Zwischenueberschrift ankommt. */
.stack.leise dd { color: var(--tinte-leise); }
/* Nach einer Liste folgt die naechste Zwischenueberschrift - dort
   braucht es mehr Luft als zwischen Absatz und Ueberschrift. */
.stack + h3 { margin-top: 2.4rem; }
/* Schmale Fenster: Bezeichnung ueber den Wert statt daneben. */
@media (max-width: 36rem) {
  .stack { grid-template-columns: 1fr; gap: 0; }
  .stack dt { padding-top: 0; }
  .stack dd { margin-bottom: 1.2rem; }
}

/* ---------- Sprungmarken oben auf der Projektseite ---------- */
.sprungliste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  max-width: none;
}
.sprungliste a {
  font-family: var(--schrift-mono);
  font-size: .84rem;
  text-decoration: none;
  color: var(--tinte-leise);
  border-bottom: 1px solid var(--linie);
  padding-bottom: 2px;
}
.sprungliste a:hover {
  color: var(--akzent);
  border-bottom-color: var(--akzent);
}
/* Die Kopfzeile klebt oben - ohne diesen Abstand landet die angesprungene
   Ueberschrift genau darunter und ist verdeckt. */
/* Die Kopfzeile klebt oben - ohne diesen Abstand landet die angesprungene
   Ueberschrift genau darunter und ist verdeckt. */
.projekt,
.text h2[id] { scroll-margin-top: 5.5rem; }

/* Sanftes Scrollen beim Sprung - aber nicht fuer Menschen, die in den
   Systemeinstellungen weniger Bewegung angefordert haben. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Diagramme in Projekten ---------- */
/* Ein Diagramm wird angeschaut, nicht zeilenweise gelesen - die
   62-Zeichen-Grenze des Fliesstexts gilt dafuer nicht. Die drei Zeilen
   position/left/transform brechen die Figur aus der 62-rem-Spalte aus und
   zentrieren sie wieder darauf. Das ist nicht nur Optik: Beide Diagramme sind
   1000 Einheiten breit: In der Spalte wuerden sie auf 944 Pixel gestaucht,
   und die duennen Linien und kleinen Beschriftungen kaemen zwischen die
   Pixel zu liegen. Hier rendern sie bei ueber ihrer natuerlichen Groesse.

   Das min() verhindert einen waagerechten Rollbalken: Auf schmalen Fenstern
   greift die Viewportbreite, und die Figur bleibt so breit wie die Spalte. */
.diagramm {
  width: min(78rem, calc(100vw - 3rem));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 2.2rem 0 2.6rem;
}
/* aspect-ratio statt height: Ein <object> hat keine eigene Groesse aus der
   Datei - ohne Angabe faellt es auf 150 Pixel Hoehe zurueck. Das Verhaeltnis
   kommt aus dem viewBox des jeweiligen SVG und steht als --mass am <figure>,
   weil die beiden Diagramme unterschiedlich hoch sind. Damit haelt der
   Browser den Platz frei, bevor die Datei geladen ist. */
.diagramm object,
.diagramm img {
  display: block;
  width: 100%;
  aspect-ratio: var(--mass, 1000 / 962);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.diagramm img { aspect-ratio: auto; height: auto; }
.diagramm figcaption {
  color: var(--tinte-leise);
  font-size: .92rem;
  margin-top: .6rem;
  max-width: 62ch;
}

/* ---------- Newsletter-Beispiele ---------- */
/* 720 px, weil die Mails bei 640 px auf ihre Handy-Ansicht umbrechen: Der
   Rahmen muss breiter sein als dieser Umbruch, sonst zeigt die Vorschau die
   falsche Gestalt. Kein Skalieren, kein JavaScript - die Textspalte ist mit
   944 px ohnehin breiter als noetig. */
.mails {
  display: flex;
  gap: 1.25rem;
  margin: 1.6rem 0 2.2rem;

  /* Nebeneinander passen drei mal 720 px nirgends hin - also seitlich
     schieben statt verkleinern. Verkleinern waere hier auch kein Ausweg:
     Unter 640 px klappen die Mails in ihre Handy-Ansicht. */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .9rem;        /* Platz fuer die Rollleiste unter den Kacheln */
  overscroll-behavior-x: contain;

  /* Wie bei den Diagrammen aus der Textspalte ausbrechen - hier bringt jede
     zusaetzliche Breite direkt mehr sichtbare Mail. */
  width: min(78rem, calc(100vw - 3rem));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
/* Der Bereich ist per Tastatur anspringbar (tabindex im HTML) - dann muss der
   Fokus auch zu sehen sein. */
.mails:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 4px;
  border-radius: var(--radius);
}
/* In der Schiebereihe feste Breite - nicht schrumpfen lassen, sonst klappen
   die Mails in ihre Handy-Ansicht. */
.mails .mail {
  flex: 0 0 720px;
  scroll-snap-align: start;
}
.mail { margin: 0; }

/* Einzelne Vorschau ausserhalb der Reihe (Fossilienalarm). Die Mail ist eine
   feste 580-px-Tabelle ohne Umbruch fuer schmale Fenster - sie braucht weder
   die 720 px noch den Ausbruch aus der Spalte. */
.mail-einzeln {
  max-width: 40rem;
  margin: 1.6rem 0 2.2rem;
}
.mail-einzeln iframe { height: 28rem; }
.mail iframe {
  display: block;
  width: 100%;
  height: 40rem;              /* die Mails sind laenger - im Rahmen wird gescrollt */
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;           /* fest: die Mail bringt ihren eigenen Grund mit */
}
.mail figcaption {
  font-family: var(--schrift-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--tinte-still);
  margin-top: .5rem;
}

/* ---------- Aufnahmen aus der App ---------- */
/* Gleiche Idee wie die Mail-Reihe darueber, nur mit Bildern statt iframes:
   feste Rahmen nebeneinander, seitlich schiebbar. Handy-Aufnahmen sind
   mehrere tausend Pixel hoch - ungedeckelt wuerden zwei davon die ganze
   Projektseite auseinanderziehen. Der Rahmen begrenzt sie auf 34rem, das
   Bild laeuft darin weiter und wird gescrollt. */
.schirme {
  display: flex;
  gap: 1.25rem;
  margin: 1.6rem 0 2.2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .9rem;
  overscroll-behavior-x: contain;
}
.schirme:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 4px;
  border-radius: var(--radius);
}
.schirm {
  margin: 0;
  flex: 0 0 17rem;
  scroll-snap-align: start;
}
.schirm-rahmen {
  height: 34rem;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: #fff;      /* fest: die Aufnahmen haben hellen Grund */
}
.schirm img {
  display: block;
  width: 100%;
  height: auto;
}
.schirm figcaption {
  font-family: var(--schrift-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--tinte-still);
  margin-top: .5rem;
}

/* ---------- Moodboard ---------- */
/* Mehrspaltiger Satz statt Raster: Die Bilder haben unterschiedliche
   Seitenverhaeltnisse und behalten hier ihre eigene Hoehe, statt auf ein
   gemeinsames Mass beschnitten zu werden. */
.moodboard {
  columns: 2;
  column-gap: 1.25rem;
  margin-top: .5rem;
}
@media (max-width: 40rem) {
  .moodboard { columns: 1; }
}

.moodboard figure {
  break-inside: avoid;          /* kein Bild ueber zwei Spalten zerreissen */
  margin: 0 0 1.25rem;
}
.moodboard img {
  display: block;
  width: 100%;
  height: auto;                 /* zusammen mit width/height im HTML haelt der
                                   Browser den Platz frei, bevor das Bild da ist */
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.moodboard figcaption {
  color: var(--tinte-leise);
  font-size: .92rem;
  margin-top: .5rem;
}
.moodboard-fuss { margin-top: 1.5rem; }

/* ---------- Fusszeile ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 2rem;
}
/* Trennzeichen zwischen den beiden Fusszeilen-Links. Rein dekorativ und
   deshalb im HTML mit aria-hidden versehen - vorgelesen wuerde es als
   "Punkt" zwischen zwei Links stehen und nur stoeren. */
.fuss-trenner {
  color: var(--tinte-still);
  margin: 0 .5rem;
}

.fuss-innen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 2rem;
  justify-content: space-between;
  padding-top: 1.4rem;
  padding-bottom: 1.4rem;
}

/* Fusszeile am unteren Fensterrand halten, waehrend der Inhalt darunter
   durchlaeuft - das Gegenstueck zur klebenden Kopfzeile.

   position: sticky und nicht fixed: Die Zeile bleibt damit im Fluss und
   behaelt ihren Platz am Dokumentende. Bei fixed waere sie aus dem Fluss
   genommen, wuerde die letzten Zeilen jeder Seite verdecken und braeuchte
   einen Ausgleich per padding-bottom am body.

   Der eigene Hintergrund muss sein: Ohne ihn scheint der Inhalt durch, der
   unter der Zeile hindurchlaeuft. z-index bleibt unter der Kopfzeile (5)
   und deren Aufklappmenue (6).

   Nur ab 40rem Fensterhoehe: Auf einem quer gehaltenen Handy fraesse eine
   klebende Kopf- und Fusszeile zusammen den halben Bildschirm auf. */
@media (min-height: 40rem) {
  .fuss {
    position: sticky;
    bottom: 0;
    z-index: 4;
    background: var(--papier);
  }
}

/* =========================================================================
   Druck und "Als PDF speichern"
   Bildschirmelemente, die auf Papier nichts verloren haben, fliegen raus.
   Bei Links wird die Zieladresse ausgeschrieben - auf Papier kann man nicht
   klicken, und ein blosses "LinkedIn" waere dort wertlos.
   Testen: im Browser Strg+P und die Vorschau ansehen.
   ========================================================================= */
@media print {
  .kopf,
  .fuss,
  .skip,
  .sprung,
  .mails { display: none; }    /* eingebettete Vorschauen drucken sich nicht */

  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  main { padding: 0; }
  .mitte { max-width: none; padding: 0; }

  /* Auf Papier bestimmt der Seitenrand die Zeilenlaenge, nicht das Layout. */
  p,
  .lead,
  .text ul,
  .projekt ul,
  .stack { max-width: none; }

  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; margin-top: 1.4rem; }
  h3 { font-size: 11.5pt; }
  .eyebrow { color: #000; }
  .karte { border-color: #999; }

  a { color: #000; text-decoration: underline; }

  /* Zieladresse hinter externe Links schreiben. Die zweite Regel muss sein:
     Ohne sie gewinnt der Pfeil aus .profil a[target="_blank"]::after, weil
     dieser Selektor genauer ist als a[href^="http"]. */
  a[href^="http"]::after,
  .profil a[target="_blank"]::after {
    content: " (" attr(href) ")";
    font-size: .85em;
    font-weight: normal;
    word-break: break-all;
  }
  .profil a {
    border: none;
    background: none;
    padding: 0;
  }

  /* Keine Ueberschrift allein am Seitenende, keine zerrissenen Absaetze. */
  h1, h2, h3 { break-after: avoid; }
  p, li, figure { break-inside: avoid; }

  /* Der Ausbruch aus der Spalte ist eine Bildschirmsache - auf Papier
     wuerde die Figur damit neben den Satzspiegel rutschen. */
  .diagramm {
    width: 100%;
    position: static;
    left: auto;
    transform: none;
  }

  .fuss { position: static; }
  /* Auf Papier gibt es nichts zu scrollen: Rahmen auf und die Aufnahmen
     in verkleinerter Form ganz zeigen. */
  .schirme { display: block; }
  .schirm { max-width: 8cm; }
  .schirm-rahmen { height: auto; overflow: visible; }
  .projekt { border-top: 1px solid #999; }
}