Diferencias

Muestra las diferencias entre dos versiones de la página.

--- de:start [2026/04/26 12:04] – jesus
+++ de:start [2026/05/18 08:06] (actual) – jesus
@@ Línea 20: / Línea 20: @@
 <html>
 <style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  /* --- CRT ULTRA-RETRO VISUAL ENGINE --- */
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+  .pcw-monitor-ultra {
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    background-color: #000b00;
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    border: 12px solid #2a2a2a;
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    border-radius: 15px;
+    padding: 25px;
+    margin: 25px 0;
+    font-family: 'Courier New', Courier, monospace;
+    position: relative;
+    overflow: hidden;
+    box-shadow: inset 0 0 60px rgba(0,255,0,0.15), 0 10px 30px rgba(0,0,0,0.7);
+  }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  /* Scanlines und Flimmereffekt */
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+  .pcw-monitor-ultra::after {
-</style>
+    content: " ";
+    position: absolute;
+    top: 0; left: 0; bottom: 0; right: 0;
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
+                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
+    background-size: 100% 3px, 2px 100%;
+    z-index: 2;
+    pointer-events: none;
+    animation: flickering 0.15s infinite;
+  }
-<div class="pcw-monitor">
+  @keyframes flickering { 0% { opacity: 0.98; } 100% { opacity: 1; } }
-  <div class="pcw-title"> > HARDWARE </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=de:hardware:erweiterungen" class="pcw-btn">ERWEITERUNGEN</a>
-    <a href="doku.php?id=de:hardware:gate_array" class="pcw-btn">GATE ARRAY</a>
-    <a href="doku.php?id=de:hardware:neuentwicklungen" class="pcw-btn">NEUENTWICKLUNGEN</a>
-    <a href="doku.php?id=de:hardware:belegungen" class="pcw-btn">BELEGUNGEN</a>
-    <a href="doku.php?id=de:hardware:peripheriegeräte" class="pcw-btn">PERIPHERIEGERÄTE</a>
-    <a href="doku.php?id=de:hardware:hauptplatinen" class="pcw-btn">HAUPTPLATINEN</a>
-    <a href="doku.php?id=de:hardware:monitorplatinen" class="pcw-btn">MONITORPLATINEN</a>
-    <a href="doku.php?id=de:hardware:tastaturplatinen" class="pcw-btn">TASTATURPLATINEN</a>
-    <a href="doku.php?id=de:hardware:druckerplatinen" class="pcw-btn">DRUCKERPLATINEN</a>
-    <a href="doku.php?id=de:hardware:typenräder" class="pcw-btn">TYPENRÄDER</a>
-    <a href="doku.php?id=de:hardware:laufwerke" class="pcw-btn">LAUFWERKE</a>
-  </div>
-</div>
-</html>
-----
+  /* Retro-Textstil (Grünes Leuchten) */
+  .retro-text {
+    color: #00ff00 !important;
+    font-family: 'Courier New', Courier, monospace;
+    text-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 2px rgba(0, 255, 0, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    text-decoration: none !important;
+  }
-<html>
+  .pcw-title-ultra {
-<style>
+    font-size: 1.6em;
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    font-weight: bold;
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    margin-bottom: 25px;
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    display: block;
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+  }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  .pcw-title-ultra::after {
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+    content: "_";
-</style>
+    animation: cursor-blink 1s infinite;
+  }
-<div class="pcw-monitor">
+  @keyframes cursor-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
-  <div class="pcw-title"> > SOFTWARE </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=de:software:anwendungen" class="pcw-btn">ANWENDUNGEN</a>
-    <a href="doku.php?id=de:software:unternehmen" class="pcw-btn">UNTERNEHMEN</a>
-    <a href="doku.php?id=de:software:spiele" class="pcw-btn">SPIELE</a>
-    <a href="doku.php?id=de:software:neuentwicklungen" class="pcw-btn">NEUENTWICKLUNGEN</a>
-    <a href="doku.php?id=de:software:system" class="pcw-btn">SYSTEM</a>
-  </div>
-</div>
-</html>
-----
+  /* Raster und Befehle (Buttons) */
+  .pcw-grid-ultra {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(3, 1fr);
+    position: relative;
+    z-index: 3;
+  }
-<html>
+  .pcw-btn-ultra {
-<style>
+    display: flex;
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    align-items: center;
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    justify-content: flex-start;
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    background: transparent;
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    padding: 8px 5px;
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    border: 1px solid transparent;
+    font-weight: bold;
+    font-size: 0.95em;
+    transition: 0.2s;
+  }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  /* Hover-Effekt: Zeiger und Verschieben */
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+  .pcw-btn-ultra:hover {
-</style>
+    background-color: rgba(0, 255, 0, 0.15);
+    border: 1px solid rgba(0, 255, 0, 0.5);
+    transform: translateX(8px);
+  }
-<div class="pcw-monitor">
+  .pcw-btn-ultra::before {
-  <div class="pcw-title"> > KATALOGE </div>
+    content: "> ";
+    opacity: 0.4;
-  <div class="pcw-grid" style="grid-template-columns: 1fr;">
+    margin-right: 5px;
-    <a href="doku.php?id=de:kataloge:start" class="pcw-btn">ZUGANG</a>
+  }
-  </div>
-</div>
-</html>
-----
+  .pcw-btn-ultra:hover::before {
+    opacity: 1;
+  }
-<html>
+  /* Spaltenvarianten */
-<style>
+  .col-2 { grid-template-columns: repeat(2, 1fr); }
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  .col-1 { grid-template-columns: 1fr; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 850px) { .pcw-grid-ultra { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+  @media (max-width: 480px) { .pcw-grid-ultra { grid-template-columns: 1fr !important; } }
 </style>
-<div class="pcw-monitor">
+<!-- 1. HARDWARE -->
-  <div class="pcw-title"> > EMULATOREN </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> HARDWARE </div>
-  <div class="pcw-grid">
+  <div class="pcw-grid-ultra">
-    <a href="doku.php?id=de:emulatoren:einfuehrung" class="pcw-btn">EINFÜHRUNG</a>
+    <a href="doku.php?id=de:hardware:erweiterungen" class="pcw-btn-ultra retro-text">ERWEITERUNGEN</a>
-    <a href="doku.php?id=de:emulatoren:spanisch" class="pcw-btn">SPANISCH</a>
+    <a href="doku.php?id=de:hardware:gate_array" class="pcw-btn-ultra retro-text">GATE ARRAY</a>
-    <a href="doku.php?id=de:emulatoren:englisch" class="pcw-btn">ENGLISCH</a>
+    <a href="doku.php?id=de:hardware:neuentwicklungen" class="pcw-btn-ultra retro-text">NEUENTWICKLUNGEN</a>
-    <a href="doku.php?id=de:emulatoren:international" class="pcw-btn">INTERNATIONAL</a>
+    <a href="doku.php?id=de:hardware:belegungen" class="pcw-btn-ultra retro-text">BELEGUNGEN</a>
+    <a href="doku.php?id=de:hardware:peripheriegeraete" class="pcw-btn-ultra retro-text">PERIPHERIEGERÄTE</a>
+    <a href="doku.php?id=de:hardware:hauptplatinen" class="pcw-btn-ultra retro-text">HAUPTPLATINEN</a>
+    <a href="doku.php?id=de:hardware:monitorplatinen" class="pcw-btn-ultra retro-text">MONITORPLATINEN</a>
+    <a href="doku.php?id=de:hardware:tastaturplatinen" class="pcw-btn-ultra retro-text">TASTATURPLATINEN</a>
+    <a href="doku.php?id=de:hardware:druckerplatinen" class="pcw-btn-ultra retro-text">DRUCKERPLATINEN</a>
+    <a href="doku.php?id=de:hardware:typenraeder" class="pcw-btn-ultra retro-text">TYPENRÄDER</a>
+    <a href="doku.php?id=de:hardware:laufwerke" class="pcw-btn-ultra retro-text">LAUFWERKE</a>
   </div>
 </div>
-</html>
-----
+<!-- 2. SOFTWARE -->
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> SOFTWARE </div>
+  <div class="pcw-grid-ultra">
+    <a href="doku.php?id=de:software:anwendungen" class="pcw-btn-ultra retro-text">ANWENDUNGEN</a>
+    <a href="doku.php?id=de:software:unternehmen" class="pcw-btn-ultra retro-text">UNTERNEHMEN</a>
+    <a href="doku.php?id=de:software:spiele" class="pcw-btn-ultra retro-text">SPIELE</a>
+    <a href="doku.php?id=de:software:neuentwicklungen" class="pcw-btn-ultra retro-text">NEUENTWICKLUNGEN</a>
+    <a href="doku.php?id=de:software:sistema" class="pcw-btn-ultra retro-text">SYSTEM</a>
+    <a href="doku.php?id=de:software:verlage" class="pcw-btn-ultra retro-text">VERLAGE</a>
+  </div>
+</div>
-<html>
+<!-- 3. KATALOGE -->
-<style>
+<div class="pcw-monitor-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  <div class="pcw-title-ultra retro-text"> A> KATALOGE </div>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+  <div class="pcw-grid-ultra col-1">
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=de:kataloge:start" class="pcw-btn-ultra retro-text">VOLLSTÄNDIGEN KATALOG ANZEIGEN</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+  </div>
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+</div>
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 4. EMULATOREN -->
-  <div class="pcw-title"> > BÜCHER </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> EMULATOREN </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra">
-    <a href="doku.php?id=de:buecher:zugang" class="pcw-btn">ZUGANG</a>
+    <a href="doku.php?id=de:emulatoren:einfuehrung" class="pcw-btn-ultra retro-text">EINFÜHRUNG</a>
-    <a href="doku.php?id=de:buecher:liste" class="pcw-btn">LISTE</a>
+    <a href="doku.php?id=de:emulatoren:spanisch" class="pcw-btn-ultra retro-text">SPANISCH</a>
+    <a href="doku.php?id=de:emulatoren:englisch" class="pcw-btn-ultra retro-text">ENGLISCH</a>
+    <a href="doku.php?id=de:emulatoren:international" class="pcw-btn-ultra retro-text">INTERNATIONAL</a>
   </div>
 </div>
-</html>
-----
+<!-- 5. BÜCHER -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> BÜCHER </div>
-<style>
+  <div class="pcw-grid-ultra col-2">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=de:buecher:archiviert" class="pcw-btn-ultra retro-text">ARCHIVIERT</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=de:buecher:nicht_archiviert" class="pcw-btn-ultra retro-text">NICHT ARCHIVIERT</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > LOCOMOTIVE SOFTWARE </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
-    <a href="doku.php?id=de:locomotive:anwendungen" class="pcw-btn">ANWENDUNGEN</a>
-    <a href="doku.php?id=de:locomotive:kataloge" class="pcw-btn">KATALOGE</a>
-    <a href="doku.php?id=de:locomotive:druckerunterstuetzung" class="pcw-btn">DRUCKERUNTERSTÜTZUNG</a>
-    <a href="doku.php?id=de:locomotive:zeitschriften" class="pcw-btn">ZEITSCHRIFTEN</a>
   </div>
 </div>
-</html>
-----
-<html>
+<!-- 6. LOCOMOTIVE SOFTWARE -->
-<style>
+<div class="pcw-monitor-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+  <div class="pcw-title-ultra retro-text"> A> LOCOMOTIVE SOFTWARE </div>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+  <div class="pcw-grid-ultra col-2">
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=de:locomotive:anwendungen" class="pcw-btn-ultra retro-text">ANWENDUNGEN</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    <a href="doku.php?id=de:locomotive:kataloge" class="pcw-btn-ultra retro-text">KATALOGE</a>
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    <a href="doku.php?id=de:locomotive:druckerunterstuetzung" class="pcw-btn-ultra retro-text">DRUCKERUNTERSTÜTZUNG</a>
+    <a href="doku.php?id=de:revistas:Script" class="pcw-btn-ultra retro-text">ZEITSCHRIFTEN</a>
+      </div>
+</div>
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
+<!-- 7. HANDBÜCHER -->
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
+<div class="pcw-monitor-ultra">
-</style>
+  <div class="pcw-title-ultra retro-text"> A> HANDBÜCHER </div>
+  <div class="pcw-grid-ultra col-2">
-<div class="pcw-monitor">
+    <a href="doku.php?id=de:manuals:amstrad_pcw" class="pcw-btn-ultra retro-text">AMSTRAD PCW HANDBÜCHER</a>
-  <div class="pcw-title"> > HANDBÜCHER </div>
+    <a href="doku.php?id=de:manuals:service" class="pcw-btn-ultra retro-text">SERVICE-HANDBÜCHER</a>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
-    <a href="doku.php?id=de:manuals:amstrad_pcw" class="pcw-btn">AMSTRAD PCW HANDBÜCHER</a>
-    <a href="doku.php?id=de:manuals:service" class="pcw-btn">SERVICE-HANDBÜCHER</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 8. PROGRAMMIERUNG -->
-  <div class="pcw-title"> > PROGRAMMIERUNG </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> PROGRAMMIERUNG </div>
-  <div class="pcw-grid">
+  <div class="pcw-grid-ultra">
-    <a href="doku.php?id=de:programming:technische_informationen" class="pcw-btn">TECHNISCHE INFORMATIONEN</a>
+    <a href="doku.php?id=de:programming:technische_informationen" class="pcw-btn-ultra retro-text">TECHNISCHE DATEN</a>
-    <a href="doku.php?id=de:programming:einfuehrung" class="pcw-btn">EINFÜHRUNG</a>
+    <a href="doku.php?id=de:programming:einfuehrung" class="pcw-btn-ultra retro-text">EINFÜHRUNG</a>
-    <a href="doku.php?id=de:programming:sprachen" class="pcw-btn">SPRACHEN</a>
+    <a href="doku.php?id=de:programming:sprachen" class="pcw-btn-ultra retro-text">SPRACHEN</a>
   </div>
 </div>
-</html>
-----
+<!-- 9. ZEITSCHRIFTEN -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> ZEITSCHRIFTEN </div>
-<style>
+  <div class="pcw-grid-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=de:magazines:diskette" class="pcw-btn-ultra retro-text">DISKETTE</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=de:magazines:fanzines" class="pcw-btn-ultra retro-text">FANZINES</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=de:magazines:zeitschriften" class="pcw-btn-ultra retro-text">ZEITSCHRIFTEN</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > ZEITSCHRIFTEN </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=de:magazines:diskette" class="pcw-btn">DISKETTE</a>
-    <a href="doku.php?id=de:magazines:fanzines" class="pcw-btn">FANZINES</a>
-    <a href="doku.php?id=de:magazines:zeitschriften" class="pcw-btn">ZEITSCHRIFTEN</a>
   </div>
 </div>
-</html>
-----
-<html>
-<style>
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
+<!-- 10. ANLEITUNGEN -->
-  <div class="pcw-title"> > ANLEITUNGEN </div>
+<div class="pcw-monitor-ultra">
+  <div class="pcw-title-ultra retro-text"> A> ANLEITUNGEN </div>
-  <div class="pcw-grid" style="grid-template-columns: repeat(2, 1fr);">
+  <div class="pcw-grid-ultra col-2">
-    <a href="doku.php?id=de:tutorials:datenuebertragung" class="pcw-btn">DATENÜBERTRAGUNG</a>
+    <a href="doku.php?id=de:tutorials:datenuebertragung" class="pcw-btn-ultra retro-text">KOMMUNIKATION</a>
-    <a href="doku.php?id=de:tutorials:kurse" class="pcw-btn">KURSE</a>
+    <a href="doku.php?id=de:tutorials:kurse" class="pcw-btn-ultra retro-text">KURSE</a>
-    <a href="doku.php?id=de:tutorials:assembler" class="pcw-btn">ASSEMBLER</a>
+    <a href="doku.php?id=de:tutorials:assembler" class="pcw-btn-ultra retro-text">ASSEMBLER</a>
-    <a href="doku.php?id=de:tutorials:leitfaeden" class="pcw-btn">LEITFÄDEN</a>
+    <a href="doku.php?id=de:tutorials:leitfaeden" class="pcw-btn-ultra retro-text">GUIDES</a>
   </div>
 </div>
-</html>
-----
+<!-- 11. SONSTIGES -->
+<div class="pcw-monitor-ultra">
-<html>
+  <div class="pcw-title-ultra retro-text"> A> SONSTIGES </div>
-<style>
+  <div class="pcw-grid-ultra">
-  .pcw-monitor { background-color: #000; border: 2px solid #00ff00; padding: 20px; margin: 20px 0; font-family: 'Courier New', Courier, monospace; }
+    <a href="doku.php?id=de:others:danksagungen" class="pcw-btn-ultra retro-text">DANKSAGUNGEN</a>
-  .pcw-title { color: #000; background-color: #00ff00; display: inline-block; padding: 5px 15px; margin-bottom: 20px; font-size: 1.5em; font-weight: bold; }
+    <a href="doku.php?id=de:others:veranstaltungen" class="pcw-btn-ultra retro-text">EVENTS</a>
-  .pcw-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
+    <a href="doku.php?id=de:others:interviews" class="pcw-btn-ultra retro-text">INTERVIEWS</a>
-  .pcw-btn { display: flex; align-items: center; justify-content: center; background-color: #000; color: #00ff00 !important; padding: 15px 5px; text-decoration: none !important; border: 1px solid #00ff00; font-weight: bold; text-align: center; transition: all 0.2s ease; }
+    <a href="doku.php?id=de:others:etiketten" class="pcw-btn-ultra retro-text">3.5" ETIKETTEN</a>
-  .pcw-btn:hover { background-color: #00ff00; color: #000 !important; box-shadow: 0 0 10px #00ff00; }
+    <a href="doku.php?id=de:others:inventar" class="pcw-btn-ultra retro-text">INVENTAR</a>
+    <a href="doku.php?id=de:others:kontakt" class="pcw-btn-ultra retro-text">KONTAKT</a>
-  @media (max-width: 850px) { .pcw-grid { grid-template-columns: repeat(2, 1fr); } }
-  @media (max-width: 480px) { .pcw-grid { grid-template-columns: 1fr; } .pcw-title { display: block; text-align: center; } }
-</style>
-<div class="pcw-monitor">
-  <div class="pcw-title"> > SONSTIGES </div>
-  <div class="pcw-grid">
-    <a href="doku.php?id=de:others:danksagungen" class="pcw-btn">DANKSAGUNGEN</a>
-    <a href="doku.php?id=de:others:veranstaltungen" class="pcw-btn">VERANSTALTUNGEN</a>
-    <a href="doku.php?id=de:others:interviews" class="pcw-btn">INTERVIEWS</a>
-    <a href="doku.php?id=de:others:etiketten" class="pcw-btn">3,5" ETIKETTEN</a>
-    <a href="doku.php?id=de:others:inventar" class="pcw-btn">INVENTAR</a>
-    <a href="doku.php?id=de:others:kontakt" class="pcw-btn">KONTAKT</a>
   </div>
 </div>
 </html>
 ----