/* strand.css -- Kiesel, Muscheln und ein Picassofisch.
 *
 * ANLASS, Robert am 10.8.2026: "ein paar kiesel und muscheln? tropische fische picassofisch?"
 *
 * ALLES SELBST GEZEICHNET und im Stylesheet als Daten-URL abgelegt: keine fremde Datei, kein
 * fremder Server, damit die Sicherheitsregel scharf bleibt. Und sparsam gesetzt -- die Seite
 * soll nach Ingenieurarbeit aussehen, nicht nach Urlaubsprospekt. Wer es ganz weghaben will,
 * nimmt diese eine Zeile aus dem Kopf der Seiten heraus.
 */

/* Kieselband -- liegt ueber dem Fuss wie eine Uferlinie. */
footer{position:relative;padding-top:38px}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:26px;opacity:.85;
  background-repeat:repeat-x;background-size:220px 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='26'%3E%3Cg fill='none'%3E%3Cellipse cx='18' cy='19' rx='15' ry='7' fill='%23d2c7c2'/%3E%3Cellipse cx='46' cy='21' rx='10' ry='5' fill='%23c1b5b0'/%3E%3Cellipse cx='74' cy='18' rx='18' ry='8' fill='%23dad1cd'/%3E%3Cellipse cx='108' cy='21' rx='9' ry='4.5' fill='%23b9aeaa'/%3E%3Cellipse cx='134' cy='19' rx='14' ry='6.5' fill='%23ccc2be'/%3E%3Cellipse cx='166' cy='21' rx='11' ry='5' fill='%23d5cbc7'/%3E%3Cellipse cx='196' cy='18' rx='16' ry='7.5' fill='%23c4b9b5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Muschel -- ein einzelnes Zeichen neben der Zitatzeile, mehr nicht. */
.zitatzeile{position:relative;padding-left:30px}
.zitatzeile::before{
  content:"";position:absolute;left:0;top:11px;width:22px;height:19px;opacity:.8;
  background-repeat:no-repeat;background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 20 C4 15 1 9 2 6 C3 2 8 1 12 4 C16 1 21 2 22 6 C23 9 20 15 12 20Z' fill='%23eae2de' stroke='%23b5a9a5' stroke-width='1.1'/%3E%3Cpath d='M12 4v16M7 5.5 10.5 19M17 5.5 13.5 19' stroke='%23b5a9a5' stroke-width='.9' fill='none'/%3E%3C/svg%3E");
}

/* Picassofisch -- Rhinecanthus aculeatus, der Namensgeber ist die Zeichnung auf seiner Flanke:
   scharfe Bahnen in Schwarz, Weiss, Gelb und Blau. Er schwimmt einmal durch den Kopfbereich,
   leise und langsam, und bleibt am Rand. */
.hero{position:relative}
.hero::after{
  content:"";position:absolute;right:6%;top:22px;width:132px;height:74px;opacity:.9;
  background-repeat:no-repeat;background-size:contain;pointer-events:none;
  animation:schwimmen 26s ease-in-out infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 112'%3E%3Cg%3E%3Cpath d='M150 56c0 22-24 40-58 40S30 78 30 56 54 16 92 16s58 18 58 40z' fill='%23f0e9e5'/%3E%3Cpath d='M92 16c-16 0-30 3-41 9l24 62c5 1 11 2 17 2 9 0 17-1 24-4L92 16z' fill='%23f2c318'/%3E%3Cpath d='M60 22c-9 5-16 11-21 18l14 40c5 6 12 11 20 14L60 22z' fill='%231d1d1b'/%3E%3Cpath d='M44 34c-6 7-10 14-12 22l10 20c3 5 7 9 12 13L44 34z' fill='%23f8f4f1'/%3E%3Cpath d='M150 56l40-26v52l-40-26z' fill='%230f9d9d'/%3E%3Cpath d='M104 30c14 2 28 9 36 20' stroke='%230a6d6d' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M104 82c14-2 28-9 36-20' stroke='%230a6d6d' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30 56c-8-6-14-8-22-8' stroke='%23f2c318' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='58' cy='44' r='7' fill='%23f8f4f1'/%3E%3Ccircle cx='57' cy='44' r='4' fill='%231d1d1b'/%3E%3Cpath d='M34 62c6 3 12 4 18 4' stroke='%230f9d9d' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}
@keyframes schwimmen{
  0%,100%{transform:translate(0,0) rotate(-1.5deg)}
  50%{transform:translate(-26px,10px) rotate(1.5deg)}
}
@media(prefers-reduced-motion:reduce){.hero::after{animation:none}}
@media(max-width:900px){.hero::after{display:none}}   /* auf dem Telefon waere er im Weg */